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

Lines changed: 4 additions & 2 deletions
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

Lines changed: 4 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 5 additions & 8 deletions
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

Lines changed: 6 additions & 10 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy