Skip to content

Commit 257500c

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 14 (#17832)
HourglassEmpty -> HourglassIcon Star -> StarIcon CloudQueue -> CloudIcon InstallDesktop -> MonitorDownIcon WarningRounded -> TriangleAlertIcon ArrowBackOutlined -> ChevronLeftIcon MonetizationOnOutlined -> CircleDollarSign
1 parent 6ff6e95 commit 257500c

File tree

12 files changed

+38
-32
lines changed

12 files changed

+38
-32
lines changed

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
88
import BugIcon from "@mui/icons-material/BugReportOutlined";
99
import ChatIcon from "@mui/icons-material/ChatOutlined";
1010
import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
11-
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
1211
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
1312
import DocsIcon from "@mui/icons-material/MenuBook";
1413
import Divider from "@mui/material/Divider";
@@ -20,6 +19,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
2019
import { ExternalImage } from "components/ExternalImage/ExternalImage";
2120
import { Stack } from "components/Stack/Stack";
2221
import { usePopover } from "components/deprecated/Popover/Popover";
22+
import { MonitorDownIcon } from "lucide-react";
2323
import type { FC } from "react";
2424
import { Link } from "react-router-dom";
2525

@@ -79,7 +79,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
7979

8080
<Link to="/install" css={styles.link}>
8181
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
82-
<InstallDesktopIcon css={styles.menuItemIcon} />
82+
<MonitorDownIcon css={styles.menuItemIcon} />
8383
<span css={styles.menuItemText}>Install CLI</span>
8484
</MenuItem>
8585
</Link>

‎site/src/modules/resources/AgentStatus.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import WarningRounded from "@mui/icons-material/WarningRounded";
32
import Link from "@mui/material/Link";
43
import Tooltip from "@mui/material/Tooltip";
54
import type { WorkspaceAgent } from "api/typesGenerated";
@@ -11,9 +10,10 @@ import {
1110
HelpTooltipTitle,
1211
} from "components/HelpTooltip/HelpTooltip";
1312
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
13+
import { TriangleAlertIcon } from "lucide-react";
1414
import type { FC } from "react";
1515

16-
// If we think in the agent status and lifecycle into a single enum/state I’d
16+
// If we think in the agent status and lifecycle into a single enum/state I'd
1717
// say we would have: connecting, timeout, disconnected, connected:created,
1818
// connected:starting, connected:start_timeout, connected:start_error,
1919
// connected:ready, connected:shutting_down, connected:shutdown_timeout,
@@ -50,7 +50,7 @@ const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
5050
return (
5151
<HelpTooltip>
5252
<PopoverTrigger role="status" aria-label="Agent timeout">
53-
<WarningRounded css={styles.timeoutWarning} />
53+
<TriangleAlertIcon css={styles.timeoutWarning} />
5454
</PopoverTrigger>
5555

5656
<HelpTooltipContent>
@@ -75,7 +75,7 @@ const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
7575
return (
7676
<HelpTooltip>
7777
<PopoverTrigger role="status" aria-label="Start error">
78-
<WarningRounded css={styles.errorWarning} />
78+
<TriangleAlertIcon css={styles.errorWarning} />
7979
</PopoverTrigger>
8080
<HelpTooltipContent>
8181
<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
@@ -111,7 +111,7 @@ const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
111111
return (
112112
<HelpTooltip>
113113
<PopoverTrigger role="status" aria-label="Stop timeout">
114-
<WarningRounded css={styles.timeoutWarning} />
114+
<TriangleAlertIcon css={styles.timeoutWarning} />
115115
</PopoverTrigger>
116116
<HelpTooltipContent>
117117
<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
@@ -135,7 +135,7 @@ const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
135135
return (
136136
<HelpTooltip>
137137
<PopoverTrigger role="status" aria-label="Stop error">
138-
<WarningRounded css={styles.errorWarning} />
138+
<TriangleAlertIcon css={styles.errorWarning} />
139139
</PopoverTrigger>
140140
<HelpTooltipContent>
141141
<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
@@ -231,7 +231,7 @@ const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
231231
return (
232232
<HelpTooltip>
233233
<PopoverTrigger role="status" aria-label="Timeout">
234-
<WarningRounded css={styles.timeoutWarning} />
234+
<TriangleAlertIcon css={styles.timeoutWarning} />
235235
</PopoverTrigger>
236236
<HelpTooltipContent>
237237
<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
32
import TagOutlined from "@mui/icons-material/TagOutlined";
43
import Tooltip from "@mui/material/Tooltip";
54
import type {
@@ -10,6 +9,7 @@ import type {
109
HealthcheckReport,
1110
} from "api/typesGenerated";
1211
import { Alert } from "components/Alert/Alert";
12+
import { ChevronLeftIcon } from "lucide-react";
1313
import { CodeIcon } from "lucide-react";
1414
import type { FC } from "react";
1515
import { Helmet } from "react-helmet-async";
@@ -63,8 +63,9 @@ const DERPRegionPage: FC = () => {
6363
}}
6464
to="/health/derp"
6565
>
66-
<ArrowBackOutlined
67-
css={{ fontSize: 12, verticalAlign: "middle", marginRight: 8 }}
66+
<ChevronLeftIcon
67+
className="size-icon-xs"
68+
css={{ verticalAlign: "middle", marginRight: 8 }}
6869
/>
6970
Back to DERP
7071
</Link>

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
32
import WarningOutlined from "@mui/icons-material/WarningOutlined";
43
import Button from "@mui/material/Button";
54
import IconButton from "@mui/material/IconButton";
@@ -25,6 +24,7 @@ import {
2524
} from "components/FullPageLayout/Topbar";
2625
import { displayError } from "components/GlobalSnackbar/utils";
2726
import { Loader } from "components/Loader/Loader";
27+
import { ChevronLeftIcon } from "lucide-react";
2828
import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
2929
import { linkToTemplate, useLinks } from "modules/navigation";
3030
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
@@ -217,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
217217
<div>
218218
<Tooltip title="Back to the template">
219219
<TopbarIconButton component={RouterLink} to={templateLink}>
220-
<ArrowBackOutlined />
220+
<ChevronLeftIcon className="size-icon-sm" />
221221
</TopbarIconButton>
222222
</Tooltip>
223223
</div>

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
21
import type { TemplateVersion } from "api/typesGenerated";
32
import { Pill, PillSpinner } from "components/Pill/Pill";
3+
import { HourglassIcon } from "lucide-react";
44
import { CheckIcon, CircleAlertIcon } from "lucide-react";
55
import type { FC, ReactNode } from "react";
66
import type { ThemeRole } from "theme/roles";
@@ -44,7 +44,7 @@ const getStatus = (
4444
return {
4545
type: "active",
4646
text: getPendingStatusLabel(version.job),
47-
icon: <QueuedIcon />,
47+
icon: <HourglassIcon className="size-icon-sm" />,
4848
};
4949
case "canceling":
5050
return {

‎site/src/pages/WorkspacePage/AppStatuses.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react";
33
import AppsIcon from "@mui/icons-material/Apps";
44
import CheckCircle from "@mui/icons-material/CheckCircle";
55
import ErrorIcon from "@mui/icons-material/Error";
6-
import HourglassEmpty from "@mui/icons-material/HourglassEmpty";
76
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
87
import OpenInNew from "@mui/icons-material/OpenInNew";
98
import Warning from "@mui/icons-material/Warning";
@@ -17,6 +16,7 @@ import type {
1716
WorkspaceApp,
1817
} from "api/typesGenerated";
1918
import { formatDistance, formatDistanceToNow } from "date-fns";
19+
import { HourglassIcon } from "lucide-react";
2020
import { CircleHelpIcon } from "lucide-react";
2121
import { useAppLink } from "modules/apps/useAppLink";
2222
import type { FC } from "react";
@@ -57,7 +57,7 @@ const getStatusIcon = (
5757
return isLatest ? (
5858
<CircularProgress size={18} sx={{ color }} />
5959
) : (
60-
<HourglassEmpty sx={{ color, fontSize: 18 }} />
60+
<HourglassIcon className="size-icon-sm" style={{ color }} />
6161
);
6262
default:
6363
return <Warning sx={{ color, fontSize: 18 }} />;

‎site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import WarningRounded from "@mui/icons-material/WarningRounded";
32
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
43
import type {
54
Template,
@@ -10,6 +9,7 @@ import type {
109
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
1110
import formatDistanceToNow from "date-fns/formatDistanceToNow";
1211
import dayjs from "dayjs";
12+
import { TriangleAlertIcon } from "lucide-react";
1313
import { InfoIcon } from "lucide-react";
1414
import { useDashboard } from "modules/dashboard/useDashboard";
1515
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
@@ -259,7 +259,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
259259
<Notifications
260260
items={warningNotifications}
261261
severity="warning"
262-
icon={<WarningRounded />}
262+
icon={<TriangleAlertIcon className="size-icon-sm" />}
263263
/>
264264
)}
265265
</div>

‎site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
3-
import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
42
import Link from "@mui/material/Link";
53
import Tooltip from "@mui/material/Tooltip";
64
import { workspaceQuota } from "api/queries/workspaceQuota";
@@ -17,6 +15,8 @@ import {
1715
} from "components/FullPageLayout/Topbar";
1816
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
1917
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
18+
import { ChevronLeftIcon } from "lucide-react";
19+
import { CircleDollarSign } from "lucide-react";
2020
import { TrashIcon } from "lucide-react";
2121
import { useDashboard } from "modules/dashboard/useDashboard";
2222
import { linkToTemplate, useLinks } from "modules/navigation";
@@ -108,7 +108,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
108108
<Topbar css={{ gridArea: "topbar" }}>
109109
<Tooltip title="Back to workspaces">
110110
<TopbarIconButton component={RouterLink} to="/workspaces">
111-
<ArrowBackOutlined />
111+
<ChevronLeftIcon className="size-icon-sm" />
112112
</TopbarIconButton>
113113
</Tooltip>
114114

@@ -163,7 +163,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
163163
>
164164
<TopbarData>
165165
<TopbarIcon>
166-
<QuotaIcon aria-label="Daily usage" />
166+
<CircleDollarSign
167+
className="size-icon-sm"
168+
aria-label="Daily usage"
169+
/>
167170
</TopbarIcon>
168171

169172
<span>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
32
import { API } from "api/api";
43
import type { TemplateVersion, Workspace } from "api/typesGenerated";
54
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -9,6 +8,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
98
import { Stack } from "components/Stack/Stack";
109
import dayjs from "dayjs";
1110
import relativeTime from "dayjs/plugin/relativeTime";
11+
import { MonitorDownIcon } from "lucide-react";
1212
import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
1313
import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
1414
import { useQueries } from "react-query";
@@ -351,7 +351,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
351351
css={styles.summary}
352352
>
353353
<Stack direction="row" alignItems="center" spacing={1}>
354-
<InstallDesktopIcon css={styles.summaryIcon} />
354+
<MonitorDownIcon className="size-icon-sm" />
355355
<span>{workspaceCount}</span>
356356
</Stack>
357357
{updateCount && (

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import CloudQueue from "@mui/icons-material/CloudQueue";
21
import { hasError, isApiValidationError } from "api/errors";
32
import type { Template, Workspace } from "api/typesGenerated";
43
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -18,6 +17,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg
1817
import { Spinner } from "components/Spinner/Spinner";
1918
import { Stack } from "components/Stack/Stack";
2019
import { TableToolbar } from "components/TableToolbar/TableToolbar";
20+
import { CloudIcon } from "lucide-react";
2121
import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
2222
import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
2323
import type { FC } from "react";
@@ -172,7 +172,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
172172
</DropdownMenuItem>
173173
<DropdownMenuSeparator />
174174
<DropdownMenuItem onClick={onUpdateAll}>
175-
<CloudQueue /> Update&hellip;
175+
<CloudIcon className="size-icon-sm" /> Update&hellip;
176176
</DropdownMenuItem>
177177
<DropdownMenuItem
178178
className="text-content-destructive focus:text-content-destructive"

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Star from "@mui/icons-material/Star";
21
import Checkbox from "@mui/material/Checkbox";
32
import Skeleton from "@mui/material/Skeleton";
43
import { templateVersion } from "api/queries/templates";
@@ -45,6 +44,7 @@ import {
4544
} from "components/Tooltip/Tooltip";
4645
import { useAuthenticated } from "hooks";
4746
import { useClickableTableRow } from "hooks/useClickableTableRow";
47+
import { StarIcon } from "lucide-react";
4848
import { EllipsisVertical } from "lucide-react";
4949
import {
5050
BanIcon,
@@ -231,7 +231,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
231231
title={
232232
<Stack direction="row" spacing={0.5} alignItems="center">
233233
{workspace.name}
234-
{workspace.favorite && <Star className="w-4 h-4" />}
234+
{workspace.favorite && (
235+
<StarIcon className="size-icon-xs" />
236+
)}
235237
{workspace.outdated && (
236238
<WorkspaceOutdatedTooltip workspace={workspace} />
237239
)}

‎site/src/utils/workspace.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type { Theme } from "@emotion/react";
2-
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
32
import type * as TypesGen from "api/typesGenerated";
43
import { PillSpinner } from "components/Pill/Pill";
54
import dayjs from "dayjs";
65
import duration from "dayjs/plugin/duration";
76
import minMax from "dayjs/plugin/minMax";
87
import utc from "dayjs/plugin/utc";
8+
import { HourglassIcon } from "lucide-react";
99
import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
1010
import semver from "semver";
1111
import { getPendingStatusLabel } from "./provisionerJob";
@@ -249,7 +249,7 @@ export const getDisplayWorkspaceStatus = (
249249
return {
250250
type: "active",
251251
text: getPendingStatusLabel(provisionerJob),
252-
icon: <QueuedIcon />,
252+
icon: <HourglassIcon className="size-icon-sm" />,
253253
} as const;
254254
}
255255
};

0 commit comments

Comments
 (0)