Skip to content

Commit 6ff6e95

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 13 (#17831)
OpenInNew -> ExternalLinkIcon InfoOutlined -> InfoIcon CloudDownload -> CloudDownloadIcon CloudUpload -> CloudUploadIcon Compare -> GitCompareArrowsIcon SettingsEthernet -> GaugeIcon WebAsset -> AppWindowIcon
1 parent ba6690f commit 6ff6e95

File tree

6 files changed

+26
-24
lines changed

6 files changed

+26
-24
lines changed

‎site/src/modules/dashboard/DashboardLayout.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
21
import Link from "@mui/material/Link";
32
import Snackbar from "@mui/material/Snackbar";
43
import { Button } from "components/Button/Button";
54
import { Loader } from "components/Loader/Loader";
65
import { useAuthenticated } from "hooks";
6+
import { InfoIcon } from "lucide-react";
77
import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
88
import { LicenseBanner } from "modules/dashboard/LicenseBanner/LicenseBanner";
99
import { type FC, type HTMLAttributes, Suspense } from "react";
@@ -74,7 +74,8 @@ export const DashboardLayout: FC = () => {
7474
}}
7575
message={
7676
<div css={{ display: "flex", gap: 16 }}>
77-
<InfoOutlined
77+
<InfoIcon
78+
className="size-icon-xs"
7879
css={(theme) => ({
7980
fontSize: 16,
8081
height: 20, // 20 is the height of the text line so we can align them

‎site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
22
import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
3-
import DownloadIcon from "@mui/icons-material/CloudDownload";
4-
import UploadIcon from "@mui/icons-material/CloudUpload";
5-
import CollectedIcon from "@mui/icons-material/Compare";
6-
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
7-
import WebTerminalIcon from "@mui/icons-material/WebAsset";
83
import Button from "@mui/material/Button";
94
import Link from "@mui/material/Link";
105
import Tooltip from "@mui/material/Tooltip";
@@ -21,6 +16,11 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
2116
import { Stack } from "components/Stack/Stack";
2217
import dayjs from "dayjs";
2318
import { type ClassName, useClassName } from "hooks/useClassName";
19+
import { CloudDownloadIcon } from "lucide-react";
20+
import { CloudUploadIcon } from "lucide-react";
21+
import { GitCompareArrowsIcon } from "lucide-react";
22+
import { GaugeIcon } from "lucide-react";
23+
import { AppWindowIcon } from "lucide-react";
2424
import { RotateCwIcon, WrenchIcon } from "lucide-react";
2525
import { CircleAlertIcon } from "lucide-react";
2626
import prettyBytes from "pretty-bytes";
@@ -197,14 +197,14 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
197197
<div css={styles.values}>
198198
<Tooltip title="Data sent to workspaces">
199199
<div css={styles.value}>
200-
<DownloadIcon />
200+
<CloudDownloadIcon className="size-icon-xs" />
201201
{stats ? prettyBytes(stats.workspaces.rx_bytes) : "-"}
202202
</div>
203203
</Tooltip>
204204
<ValueSeparator />
205205
<Tooltip title="Data sent from workspaces">
206206
<div css={styles.value}>
207-
<UploadIcon />
207+
<CloudUploadIcon className="size-icon-xs" />
208208
{stats ? prettyBytes(stats.workspaces.tx_bytes) : "-"}
209209
</div>
210210
</Tooltip>
@@ -217,7 +217,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
217217
}
218218
>
219219
<div css={styles.value}>
220-
<LatencyIcon />
220+
<GaugeIcon className="size-icon-xs" />
221221
{displayLatency > 0 ? `${displayLatency?.toFixed(2)} ms` : "-"}
222222
</div>
223223
</Tooltip>
@@ -269,7 +269,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
269269
<ValueSeparator />
270270
<Tooltip title="Web Terminal Sessions">
271271
<div css={styles.value}>
272-
<WebTerminalIcon />
272+
<AppWindowIcon className="size-icon-xs" />
273273
{typeof stats?.session_count.reconnecting_pty === "undefined"
274274
? "-"
275275
: stats?.session_count.reconnecting_pty}
@@ -289,7 +289,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
289289
>
290290
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
291291
<div css={styles.value}>
292-
<CollectedIcon />
292+
<GitCompareArrowsIcon className="size-icon-xs" />
293293
{lastAggregated}
294294
</div>
295295
</Tooltip>

‎site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import AppsIcon from "@mui/icons-material/Apps";
44
import CheckCircle from "@mui/icons-material/CheckCircle";
55
import ErrorIcon from "@mui/icons-material/Error";
66
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
7-
import OpenInNew from "@mui/icons-material/OpenInNew";
87
import Warning from "@mui/icons-material/Warning";
98
import CircularProgress from "@mui/material/CircularProgress";
109
import type {
@@ -13,6 +12,7 @@ import type {
1312
WorkspaceAgent,
1413
WorkspaceApp,
1514
} from "api/typesGenerated";
15+
import { ExternalLinkIcon } from "lucide-react";
1616
import { useAppLink } from "modules/apps/useAppLink";
1717
import type { FC } from "react";
1818

@@ -186,13 +186,12 @@ export const WorkspaceAppStatus = ({
186186
},
187187
}}
188188
>
189-
<OpenInNew
190-
sx={{
191-
fontSize: 11,
189+
<ExternalLinkIcon
190+
className="size-icon-xs"
191+
css={{
192192
opacity: 0.7,
193-
mt: -0.125,
194193
flexShrink: 0,
195-
mr: 0.5,
194+
marginRight: 2,
196195
}}
197196
/>
198197
<span

‎site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import InfoIcon from "@mui/icons-material/InfoOutlined";
32
import Link from "@mui/material/Link";
43
import Skeleton from "@mui/material/Skeleton";
54
import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -16,6 +15,7 @@ import {
1615
HelpTooltipTrigger,
1716
} from "components/HelpTooltip/HelpTooltip";
1817
import { usePopover } from "components/deprecated/Popover/Popover";
18+
import { InfoIcon } from "lucide-react";
1919
import { RotateCcwIcon } from "lucide-react";
2020
import { linkToTemplate, useLinks } from "modules/navigation";
2121
import type { FC } from "react";

‎site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import ErrorSharp from "@mui/icons-material/ErrorSharp";
3-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
43
import type { TimingStage } from "api/typesGenerated";
4+
import { InfoIcon } from "lucide-react";
55
import type { FC } from "react";
66
import { Bar, ClickableBar } from "./Chart/Bar";
77
import { Blocks } from "./Chart/Blocks";
@@ -107,7 +107,10 @@ export const StagesChart: FC<StagesChartProps> = ({
107107
<span css={styles.stageLabel}>
108108
{stage.label}
109109
<Tooltip {...stage.tooltip}>
110-
<InfoOutlined css={styles.info} />
110+
<InfoIcon
111+
className="size-icon-xs"
112+
css={styles.info}
113+
/>
111114
</Tooltip>
112115
</span>
113116
</YAxisLabel>

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
2-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
32
import Collapse from "@mui/material/Collapse";
43
import Link from "@mui/material/Link";
54
import TableCell from "@mui/material/TableCell";
@@ -10,6 +9,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
109
import { Pill } from "components/Pill/Pill";
1110
import { Stack } from "components/Stack/Stack";
1211
import { TimelineEntry } from "components/Timeline/TimelineEntry";
12+
import { InfoIcon } from "lucide-react";
1313
import { NetworkIcon } from "lucide-react";
1414
import { type FC, useState } from "react";
1515
import { Link as RouterLink } from "react-router-dom";
@@ -191,9 +191,8 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
191191
</div>
192192
}
193193
>
194-
<InfoOutlined
194+
<InfoIcon
195195
css={(theme) => ({
196-
fontSize: 20,
197196
color: theme.palette.info.light,
198197
})}
199198
/>

0 commit comments

Comments
 (0)