Skip to content

chore: replace MUI icons with Lucide icons - 13 #17831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 15, 2025
Merged

chore: replace MUI icons with Lucide icons - 13 #17831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions site/src/modules/dashboard/DashboardLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import Link from "@mui/material/Link";
import Snackbar from "@mui/material/Snackbar";
import { Button } from "components/Button/Button";
import { Loader } from "components/Loader/Loader";
import { useAuthenticated } from "hooks";
import { InfoIcon } from "lucide-react";
import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
import { LicenseBanner } from "modules/dashboard/LicenseBanner/LicenseBanner";
import { type FC, type HTMLAttributes, Suspense } from "react";
Expand Down Expand Up @@ -74,7 +74,8 @@ export const DashboardLayout: FC = () => {
}}
message={
<div css={{ display: "flex", gap: 16 }}>
<InfoOutlined
<InfoIcon
className="size-icon-xs"
css={(theme) => ({
fontSize: 16,
height: 20, // 20 is the height of the text line so we can align them
Expand Down
20 changes: 10 additions & 10 deletions site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
import DownloadIcon from "@mui/icons-material/CloudDownload";
import UploadIcon from "@mui/icons-material/CloudUpload";
import CollectedIcon from "@mui/icons-material/Compare";
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
import WebTerminalIcon from "@mui/icons-material/WebAsset";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
Expand All @@ -21,6 +16,11 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import { type ClassName, useClassName } from "hooks/useClassName";
import { CloudDownloadIcon } from "lucide-react";
import { CloudUploadIcon } from "lucide-react";
import { GitCompareArrowsIcon } from "lucide-react";
import { GaugeIcon } from "lucide-react";
import { AppWindowIcon } from "lucide-react";
import { RotateCwIcon, WrenchIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import prettyBytes from "pretty-bytes";
Expand Down Expand Up @@ -197,14 +197,14 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
<div css={styles.values}>
<Tooltip title="Data sent to workspaces">
<div css={styles.value}>
<DownloadIcon />
<CloudDownloadIcon className="size-icon-xs" />
{stats ? prettyBytes(stats.workspaces.rx_bytes) : "-"}
</div>
</Tooltip>
<ValueSeparator />
<Tooltip title="Data sent from workspaces">
<div css={styles.value}>
<UploadIcon />
<CloudUploadIcon className="size-icon-xs" />
{stats ? prettyBytes(stats.workspaces.tx_bytes) : "-"}
</div>
</Tooltip>
Expand All @@ -217,7 +217,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
}
>
<div css={styles.value}>
<LatencyIcon />
<GaugeIcon className="size-icon-xs" />
{displayLatency > 0 ? `${displayLatency?.toFixed(2)} ms` : "-"}
</div>
</Tooltip>
Expand Down Expand Up @@ -269,7 +269,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
<ValueSeparator />
<Tooltip title="Web Terminal Sessions">
<div css={styles.value}>
<WebTerminalIcon />
<AppWindowIcon className="size-icon-xs" />
{typeof stats?.session_count.reconnecting_pty === "undefined"
? "-"
: stats?.session_count.reconnecting_pty}
Expand All @@ -289,7 +289,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
>
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
<div css={styles.value}>
<CollectedIcon />
<GitCompareArrowsIcon className="size-icon-xs" />
{lastAggregated}
</div>
</Tooltip>
Expand Down
11 changes: 5 additions & 6 deletions site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import AppsIcon from "@mui/icons-material/Apps";
import CheckCircle from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import OpenInNew from "@mui/icons-material/OpenInNew";
import Warning from "@mui/icons-material/Warning";
import CircularProgress from "@mui/material/CircularProgress";
import type {
Expand All @@ -13,6 +12,7 @@ import type {
WorkspaceAgent,
WorkspaceApp,
} from "api/typesGenerated";
import { ExternalLinkIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";

Expand Down Expand Up @@ -186,13 +186,12 @@ export const WorkspaceAppStatus = ({
},
}}
>
<OpenInNew
sx={{
fontSize: 11,
<ExternalLinkIcon
className="size-icon-xs"
css={{
opacity: 0.7,
mt: -0.125,
flexShrink: 0,
mr: 0.5,
marginRight: 2,
}}
/>
<span
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import Link from "@mui/material/Link";
import Skeleton from "@mui/material/Skeleton";
import { getErrorDetail, getErrorMessage } from "api/errors";
Expand All @@ -16,6 +15,7 @@ import {
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { usePopover } from "components/deprecated/Popover/Popover";
import { InfoIcon } from "lucide-react";
import { RotateCcwIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import type { FC } from "react";
Expand Down
7 changes: 5 additions & 2 deletions site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Interpolation, Theme } from "@emotion/react";
import ErrorSharp from "@mui/icons-material/ErrorSharp";
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import type { TimingStage } from "api/typesGenerated";
import { InfoIcon } from "lucide-react";
import type { FC } from "react";
import { Bar, ClickableBar } from "./Chart/Bar";
import { Blocks } from "./Chart/Blocks";
Expand Down Expand Up @@ -107,7 +107,10 @@ export const StagesChart: FC<StagesChartProps> = ({
<span css={styles.stageLabel}>
{stage.label}
<Tooltip {...stage.tooltip}>
<InfoOutlined css={styles.info} />
<InfoIcon
className="size-icon-xs"
css={styles.info}
/>
</Tooltip>
</span>
</YAxisLabel>
Expand Down
5 changes: 2 additions & 3 deletions site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
Expand All @@ -10,6 +9,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import { InfoIcon } from "lucide-react";
import { NetworkIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
Expand Down Expand Up @@ -191,9 +191,8 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
</div>
}
>
<InfoOutlined
<InfoIcon
css={(theme) => ({
fontSize: 20,
color: theme.palette.info.light,
})}
/>
Expand Down
Loading