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

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

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

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

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

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

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

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

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

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

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

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