Skip to content

Commit f87dbe7

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 11 (#17814)
PersonOutlined -> UserIcon Schedule -> ClockIcon SettingsSuggest -> SettingsIcon SettingsOutlined -> SettingsIcon CodeOutlined -> CodeIcon TimerOutlined -> TimerIcon
1 parent c718392 commit f87dbe7

File tree

7 files changed

+26
-29
lines changed

7 files changed

+26
-29
lines changed

‎site/src/pages/HealthPage/DERPRegionPage.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
3-
import CodeOutlined from "@mui/icons-material/CodeOutlined";
43
import TagOutlined from "@mui/icons-material/TagOutlined";
54
import Tooltip from "@mui/material/Tooltip";
65
import type {
@@ -11,6 +10,7 @@ import type {
1110
HealthcheckReport,
1211
} from "api/typesGenerated";
1312
import { Alert } from "components/Alert/Alert";
13+
import { CodeIcon } from "lucide-react";
1414
import type { FC } from "react";
1515
import { Helmet } from "react-helmet-async";
1616
import { Link, useOutletContext, useParams } from "react-router-dom";
@@ -94,7 +94,9 @@ const DERPRegionPage: FC = () => {
9494
<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
9595
</Tooltip>
9696
<Tooltip title="Region Code">
97-
<Pill icon={<CodeOutlined />}>{region!.RegionCode}</Pill>
97+
<Pill icon={<CodeIcon className="size-icon-sm" />}>
98+
{region!.RegionCode}
99+
</Pill>
98100
</Tooltip>
99101
<BooleanPill value={region!.EmbeddedRelay}>
100102
Embedded Relay

‎site/src/pages/HealthPage/WebsocketPage.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useTheme } from "@emotion/react";
2-
import CodeOutlined from "@mui/icons-material/CodeOutlined";
32
import Tooltip from "@mui/material/Tooltip";
43
import type { HealthcheckReport } from "api/typesGenerated";
54
import { Alert } from "components/Alert/Alert";
5+
import { CodeIcon } from "lucide-react";
66
import { Helmet } from "react-helmet-async";
77
import { useOutletContext } from "react-router-dom";
88
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
@@ -49,7 +49,9 @@ const WebsocketPage = () => {
4949

5050
<section>
5151
<Tooltip title="Code">
52-
<Pill icon={<CodeOutlined />}>{websocket.code}</Pill>
52+
<Pill icon={<CodeIcon className="size-icon-sm" />}>
53+
{websocket.code}
54+
</Pill>
5355
</Tooltip>
5456
</section>
5557

‎site/src/pages/TemplatePage/TemplatePageHeader.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import AddIcon from "@mui/icons-material/AddOutlined";
22
import EditIcon from "@mui/icons-material/EditOutlined";
33
import CopyIcon from "@mui/icons-material/FileCopyOutlined";
4-
import SettingsIcon from "@mui/icons-material/SettingsOutlined";
54
import Button from "@mui/material/Button";
65
import { workspaces } from "api/queries/workspaces";
76
import type {
@@ -29,6 +28,7 @@ import {
2928
} from "components/PageHeader/PageHeader";
3029
import { Pill } from "components/Pill/Pill";
3130
import { Stack } from "components/Stack/Stack";
31+
import { SettingsIcon } from "lucide-react";
3232
import { TrashIcon } from "lucide-react";
3333
import { EllipsisVertical } from "lucide-react";
3434
import { linkToTemplate, useLinks } from "modules/navigation";
@@ -79,7 +79,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
7979
<DropdownMenuItem
8080
onClick={() => navigate(`${templateLink}/settings`)}
8181
>
82-
<SettingsIcon />
82+
<SettingsIcon className="size-icon-sm" />
8383
Settings
8484
</DropdownMenuItem>
8585

‎site/src/pages/TemplateSettingsPage/Sidebar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import VariablesIcon from "@mui/icons-material/CodeOutlined";
2-
import ScheduleIcon from "@mui/icons-material/TimerOutlined";
31
import type { Template } from "api/typesGenerated";
42
import { Avatar } from "components/Avatar/Avatar";
53
import {
64
Sidebar as BaseSidebar,
75
SidebarHeader,
86
SidebarNavItem,
97
} from "components/Sidebar/Sidebar";
8+
import { CodeIcon as VariablesIcon } from "lucide-react";
9+
import { TimerIcon as ScheduleIcon } from "lucide-react";
1010
import { SettingsIcon } from "lucide-react";
1111
import { LockIcon } from "lucide-react";
1212
import { linkToTemplate, useLinks } from "modules/navigation";

‎site/src/pages/WorkspaceSettingsPage/Sidebar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import ParameterIcon from "@mui/icons-material/CodeOutlined";
2-
import GeneralIcon from "@mui/icons-material/SettingsOutlined";
3-
import ScheduleIcon from "@mui/icons-material/TimerOutlined";
41
import type { Workspace } from "api/typesGenerated";
52
import { Avatar } from "components/Avatar/Avatar";
63
import {
74
Sidebar as BaseSidebar,
85
SidebarHeader,
96
SidebarNavItem,
107
} from "components/Sidebar/Sidebar";
8+
import { CodeIcon as ParameterIcon } from "lucide-react";
9+
import { SettingsIcon as GeneralIcon } from "lucide-react";
10+
import { TimerIcon as ScheduleIcon } from "lucide-react";
1111
import type { FC } from "react";
1212

1313
interface SidebarProps {

‎site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
3-
import ScheduleIcon from "@mui/icons-material/Schedule";
42
import { visuallyHidden } from "@mui/utils";
53
import type { Workspace } from "api/typesGenerated";
64
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
75
import { ExternalImage } from "components/ExternalImage/ExternalImage";
86
import { Stack } from "components/Stack/Stack";
97
import dayjs from "dayjs";
108
import relativeTime from "dayjs/plugin/relativeTime";
9+
import { ClockIcon, UserIcon } from "lucide-react";
1110
import { type FC, type ReactNode, useState } from "react";
1211
import { getResourceIconPath } from "utils/workspace";
1312

@@ -190,7 +189,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
190189
>
191190
{dayjs(workspace.last_used_at).fromNow()}
192191
</span>
193-
<ScheduleIcon css={styles.summaryIcon} />
192+
<ClockIcon className="size-icon-xs" />
194193
</Stack>
195194
</Stack>
196195
</Stack>
@@ -209,7 +208,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
209208
</Stack>
210209
{mostRecent && (
211210
<Stack direction="row" alignItems="center" spacing={1}>
212-
<ScheduleIcon css={styles.summaryIcon} />
211+
<ClockIcon className="size-icon-xs" />
213212
<span>Last used {dayjs(mostRecent.last_used_at).fromNow()}</span>
214213
</Stack>
215214
)}
@@ -264,10 +263,8 @@ const Resources: FC<StageProps> = ({ workspaces }) => {
264263
};
265264

266265
const PersonIcon: FC = () => {
267-
// This size doesn't match the rest of the icons because MUI is just really
268-
// inconsistent. We have to make it bigger than the rest, and pull things in
269-
// on the sides to compensate.
270-
return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
266+
// Using the Lucide icon with appropriate size class
267+
return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
271268
};
272269

273270
const styles = {

‎site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
3-
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
4-
import ScheduleIcon from "@mui/icons-material/Schedule";
5-
import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest";
63
import { API } from "api/api";
74
import type { TemplateVersion, Workspace } from "api/typesGenerated";
85
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -12,6 +9,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
129
import { Stack } from "components/Stack/Stack";
1310
import dayjs from "dayjs";
1411
import relativeTime from "dayjs/plugin/relativeTime";
12+
import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
1513
import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
1614
import { useQueries } from "react-query";
1715

@@ -293,7 +291,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
293291
</span>
294292
</Stack>
295293
<Stack direction="row" alignItems="center" spacing={1}>
296-
<ScheduleIcon css={styles.summaryIcon} />
294+
<ClockIcon className="size-icon-xs" />
297295
<span
298296
css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
299297
>
@@ -317,7 +315,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
317315
</Stack>
318316
{mostRecent && (
319317
<Stack direction="row" alignItems="center" spacing={1}>
320-
<ScheduleIcon css={styles.summaryIcon} />
318+
<ClockIcon className="size-icon-xs" />
321319
<span>Last used {lastUsed(mostRecent.last_used_at)}</span>
322320
</Stack>
323321
)}
@@ -358,7 +356,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
358356
</Stack>
359357
{updateCount && (
360358
<Stack direction="row" alignItems="center" spacing={1}>
361-
<SettingsSuggestIcon css={styles.summaryIcon} />
359+
<SettingsIcon className="size-icon-xs" />
362360
<span>{updateCount}</span>
363361
</Stack>
364362
)}
@@ -433,10 +431,8 @@ const lastUsed = (time: string) => {
433431
};
434432

435433
const PersonIcon: FC = () => {
436-
// This size doesn't match the rest of the icons because MUI is just really
437-
// inconsistent. We have to make it bigger than the rest, and pull things in
438-
// on the sides to compensate.
439-
return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
434+
// Using the Lucide icon with appropriate size class
435+
return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
440436
};
441437

442438
const styles = {

0 commit comments

Comments
 (0)