Skip to content

Commit 15bd7a3

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 5 (#17750)
Replacements: MUI | Lucide OpenInNewOutlined | ExternalLinkIcon HelpOutline | CircleHelpIcon ErrorOutline | CircleAlertIcon
1 parent e0dd50d commit 15bd7a3

File tree

18 files changed

+48
-55
lines changed

18 files changed

+48
-55
lines changed

‎site/migrate-icons.md

-8
This file was deleted.

‎site/src/components/Filter/Filter.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
32
import Button from "@mui/material/Button";
43
import Divider from "@mui/material/Divider";
54
import Menu from "@mui/material/Menu";
@@ -14,6 +13,7 @@ import {
1413
import { InputGroup } from "components/InputGroup/InputGroup";
1514
import { SearchField } from "components/SearchField/SearchField";
1615
import { useDebouncedFunction } from "hooks/debounce";
16+
import { ExternalLinkIcon } from "lucide-react";
1717
import { ChevronDownIcon } from "lucide-react";
1818
import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
1919
import type { useSearchParams } from "react-router-dom";
@@ -311,7 +311,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
311311
setIsOpen(false);
312312
}}
313313
>
314-
<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
314+
<ExternalLinkIcon className="size-icon-xs" />
315315
View advanced filtering
316316
</MenuItem>
317317
)}
@@ -325,7 +325,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
325325
setIsOpen(false);
326326
}}
327327
>
328-
<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
328+
<ExternalLinkIcon className="size-icon-xs" />
329329
{learnMoreLabel2}
330330
</MenuItem>
331331
)}

‎site/src/components/HelpTooltip/HelpTooltip.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
css,
66
useTheme,
77
} from "@emotion/react";
8-
import HelpIcon from "@mui/icons-material/HelpOutline";
98
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
109
import Link from "@mui/material/Link";
1110
import { Stack } from "components/Stack/Stack";
@@ -17,6 +16,7 @@ import {
1716
PopoverTrigger,
1817
usePopover,
1918
} from "components/deprecated/Popover/Popover";
19+
import { CircleHelpIcon } from "lucide-react";
2020
import {
2121
type FC,
2222
type HTMLAttributes,
@@ -25,11 +25,11 @@ import {
2525
forwardRef,
2626
} from "react";
2727

28-
type Icon = typeof HelpIcon;
28+
type Icon = typeof CircleHelpIcon;
2929

3030
type Size = "small" | "medium";
3131

32-
export const HelpTooltipIcon = HelpIcon;
32+
export const HelpTooltipIcon = CircleHelpIcon;
3333

3434
export const HelpTooltip: FC<PopoverProps> = (props) => {
3535
return <Popover mode="hover" {...props} />;

‎site/src/components/Latency/Latency.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useTheme } from "@emotion/react";
2-
import HelpOutline from "@mui/icons-material/HelpOutline";
32
import CircularProgress from "@mui/material/CircularProgress";
43
import Tooltip from "@mui/material/Tooltip";
54
import { visuallyHidden } from "@mui/utils";
65
import { Abbr } from "components/Abbr/Abbr";
6+
import { CircleHelpIcon } from "lucide-react";
77
import type { FC } from "react";
88
import { getLatencyColor } from "utils/latency";
99

@@ -41,10 +41,10 @@ export const Latency: FC<LatencyProps> = ({
4141
<>
4242
<span css={{ ...visuallyHidden }}>{notAvailableText}</span>
4343

44-
<HelpOutline
44+
<CircleHelpIcon
45+
className="size-icon-sm"
4546
css={{
4647
marginLeft: "auto",
47-
fontSize: "14px !important",
4848
}}
4949
style={{ color }}
5050
/>

‎site/src/components/RichParameterInput/RichParameterInput.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import ErrorOutline from "@mui/icons-material/ErrorOutline";
32
import SettingsIcon from "@mui/icons-material/Settings";
43
import Button from "@mui/material/Button";
54
import FormControlLabel from "@mui/material/FormControlLabel";
@@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
1413
import { MemoizedMarkdown } from "components/Markdown/Markdown";
1514
import { Pill } from "components/Pill/Pill";
1615
import { Stack } from "components/Stack/Stack";
16+
import { CircleAlertIcon } from "lucide-react";
1717
import { type FC, type ReactNode, useState } from "react";
1818
import type {
1919
AutofillBuildParameter,
@@ -143,7 +143,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
143143
)}
144144
{!parameter.mutable && (
145145
<Tooltip title="This value cannot be modified after the workspace has been created.">
146-
<Pill type="warning" icon={<ErrorOutline />}>
146+
<Pill
147+
type="warning"
148+
icon={<CircleAlertIcon className="size-icon-xs" />}
149+
>
147150
Immutable
148151
</Pill>
149152
</Tooltip>

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import BuildingIcon from "@mui/icons-material/Build";
44
import DownloadIcon from "@mui/icons-material/CloudDownload";
55
import UploadIcon from "@mui/icons-material/CloudUpload";
66
import CollectedIcon from "@mui/icons-material/Compare";
7-
import ErrorIcon from "@mui/icons-material/ErrorOutline";
87
import RefreshIcon from "@mui/icons-material/Refresh";
98
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
109
import WebTerminalIcon from "@mui/icons-material/WebAsset";
@@ -24,6 +23,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
2423
import { Stack } from "components/Stack/Stack";
2524
import dayjs from "dayjs";
2625
import { type ClassName, useClassName } from "hooks/useClassName";
26+
import { CircleAlertIcon } from "lucide-react";
2727
import prettyBytes from "pretty-bytes";
2828
import {
2929
type FC,
@@ -151,7 +151,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
151151
to="/health"
152152
css={[styles.statusBadge, styles.unhealthy]}
153153
>
154-
<ErrorIcon />
154+
<CircleAlertIcon className="size-icon-sm" />
155155
</Link>
156156
) : (
157157
<div css={styles.statusBadge}>
@@ -372,9 +372,9 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
372372

373373
return (
374374
<Stack direction="row" spacing={1} alignItems="center">
375-
<ErrorIcon
376-
css={{ width: 16, height: 16 }}
377-
htmlColor={theme.roles.error.outline}
375+
<CircleAlertIcon
376+
className="size-icon-sm"
377+
css={{ color: theme.roles.error.outline }}
378378
/>
379379
{children}
380380
</Stack>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import RefreshIcon from "@mui/icons-material/RefreshOutlined";
32
import type { WorkspaceAgent } from "api/typesGenerated";
43
import {
54
HelpTooltip,
@@ -11,6 +10,7 @@ import {
1110
} from "components/HelpTooltip/HelpTooltip";
1211
import { Stack } from "components/Stack/Stack";
1312
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
13+
import { RotateCcwIcon } from "lucide-react";
1414
import type { FC } from "react";
1515
import { agentVersionStatus } from "../../utils/workspace";
1616

@@ -68,7 +68,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
6868

6969
<HelpTooltipLinksGroup>
7070
<HelpTooltipAction
71-
icon={RefreshIcon}
71+
icon={RotateCcwIcon}
7272
onClick={onUpdate}
7373
ariaLabel="Update workspace"
7474
>

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

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import LockIcon from "@mui/icons-material/Lock";
33
import LockOpenIcon from "@mui/icons-material/LockOpen";
4-
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
54
import SensorsIcon from "@mui/icons-material/Sensors";
65
import LoadingButton from "@mui/lab/LoadingButton";
76
import Button from "@mui/material/Button";
@@ -40,8 +39,7 @@ import {
4039
} from "components/deprecated/Popover/Popover";
4140
import { type FormikContextType, useFormik } from "formik";
4241
import { type ClassName, useClassName } from "hooks/useClassName";
43-
import { X as XIcon } from "lucide-react";
44-
import { ChevronDownIcon } from "lucide-react";
42+
import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
4543
import { useDashboard } from "modules/dashboard/useDashboard";
4644
import { type FC, useState } from "react";
4745
import { useMutation, useQuery } from "react-query";
@@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
308306
minWidth: 0,
309307
}}
310308
>
311-
<OpenInNewOutlined
309+
<ExternalLinkIcon
310+
className="size-icon-xs"
312311
css={{
313312
flexShrink: 0,
314-
width: 14,
315-
height: 14,
316313
color: theme.palette.text.primary,
317314
}}
318315
/>

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

+2-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 InfoIcon from "@mui/icons-material/InfoOutlined";
3-
import RefreshIcon from "@mui/icons-material/Refresh";
43
import Link from "@mui/material/Link";
54
import Skeleton from "@mui/material/Skeleton";
65
import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -17,6 +16,7 @@ import {
1716
HelpTooltipTrigger,
1817
} from "components/HelpTooltip/HelpTooltip";
1918
import { usePopover } from "components/deprecated/Popover/Popover";
19+
import { RotateCcwIcon } from "lucide-react";
2020
import { linkToTemplate, useLinks } from "modules/navigation";
2121
import type { FC } from "react";
2222
import { useQuery } from "react-query";
@@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({ workspace }) => {
104104

105105
<HelpTooltipLinksGroup>
106106
<HelpTooltipAction
107-
icon={RefreshIcon}
107+
icon={RotateCcwIcon}
108108
onClick={updateWorkspace.update}
109109
>
110110
Update

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { css } from "@emotion/css";
22
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
3-
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
43
import MUITooltip, {
54
type TooltipProps as MUITooltipProps,
65
} from "@mui/material/Tooltip";
6+
import { ExternalLinkIcon } from "lucide-react";
77
import type { FC, HTMLProps } from "react";
88
import { Link, type LinkProps } from "react-router-dom";
99

@@ -36,7 +36,7 @@ export const TooltipShortDescription: FC<HTMLProps<HTMLSpanElement>> = (
3636
export const TooltipLink: FC<LinkProps> = (props) => {
3737
return (
3838
<Link {...props} css={styles.link}>
39-
<OpenInNewOutlined />
39+
<ExternalLinkIcon className="size-icon-xs" />
4040
{props.children}
4141
</Link>
4242
);

‎site/src/pages/GroupsPage/GroupPage.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ import {
5050
TableToolbar,
5151
} from "components/TableToolbar/TableToolbar";
5252
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
53-
import { TrashIcon } from "lucide-react";
54-
import { EllipsisVertical } from "lucide-react";
53+
import { EllipsisVertical, TrashIcon } from "lucide-react";
5554
import { type FC, useState } from "react";
5655
import { Helmet } from "react-helmet-async";
5756
import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -134,7 +133,7 @@ const GroupPage: FC = () => {
134133
onClick={() => {
135134
setIsDeletingGroup(true);
136135
}}
137-
startIcon={<TrashIcon className="size-icon-sm" />}
136+
startIcon={<TrashIcon className="size-icon-xs" />}
138137
css={styles.removeButton}
139138
>
140139
Delete&hellip;

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
3-
import ErrorOutline from "@mui/icons-material/ErrorOutline";
43
import Link from "@mui/material/Link";
54
import type { HealthCode, HealthSeverity } from "api/typesGenerated";
6-
import { CircleCheck as CircleCheckIcon } from "lucide-react";
7-
import { CircleMinus as CircleMinusIcon } from "lucide-react";
5+
import { CircleAlertIcon } from "lucide-react";
6+
import { CircleCheckIcon, CircleMinusIcon } from "lucide-react";
87
import {
98
type ComponentProps,
109
type FC,
@@ -57,7 +56,7 @@ interface HealthIconProps {
5756
export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
5857
const theme = useTheme();
5958
const color = healthyColor(theme, severity);
60-
const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon;
59+
const Icon = severity === "error" ? CircleAlertIcon : CircleCheckIcon;
6160

6261
return <Icon css={{ width: size, height: size, color }} />;
6362
};

‎site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useTheme } from "@emotion/react";
22
import PlusIcon from "@mui/icons-material/AddOutlined";
3-
import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined";
43
import Button from "@mui/material/Button";
54
import type { TemplateExample } from "api/typesGenerated";
65
import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -14,6 +13,7 @@ import {
1413
PageHeaderTitle,
1514
} from "components/PageHeader/PageHeader";
1615
import { Stack } from "components/Stack/Stack";
16+
import { ExternalLinkIcon } from "lucide-react";
1717
import type { FC } from "react";
1818
import { Link } from "react-router-dom";
1919

@@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
5050
target="_blank"
5151
href={starterTemplate.url}
5252
rel="noreferrer"
53-
startIcon={<ViewCodeIcon />}
53+
startIcon={<ExternalLinkIcon className="size-icon-sm" />}
5454
>
5555
View source code
5656
</Button>

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import CheckIcon from "@mui/icons-material/CheckOutlined";
2-
import ErrorIcon from "@mui/icons-material/ErrorOutline";
32
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
43
import type { TemplateVersion } from "api/typesGenerated";
54
import { Pill, PillSpinner } from "components/Pill/Pill";
5+
import { CircleAlertIcon } from "lucide-react";
66
import type { FC, ReactNode } from "react";
77
import type { ThemeRole } from "theme/roles";
88
import { getPendingStatusLabel } from "utils/provisionerJob";
@@ -57,14 +57,14 @@ const getStatus = (
5757
return {
5858
type: "inactive",
5959
text: "Canceled",
60-
icon: <ErrorIcon />,
60+
icon: <CircleAlertIcon className="size-icon-sm" />,
6161
};
6262
case "unknown":
6363
case "failed":
6464
return {
6565
type: "error",
6666
text: "Failed",
67-
icon: <ErrorIcon />,
67+
icon: <CircleAlertIcon className="size-icon-sm" />,
6868
};
6969
case "succeeded":
7070
return {

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
5858
<TableCell width="20%">Last Used</TableCell>
5959
<TableCell width="20%">Expires At</TableCell>
6060
<TableCell width="20%">Created At</TableCell>
61-
<TableCell width="0%"></TableCell>
61+
<TableCell width="0%" />
6262
</TableRow>
6363
</TableHead>
6464
<TableBody>

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

+5-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 HelpOutline from "@mui/icons-material/HelpOutline";
76
import HourglassEmpty from "@mui/icons-material/HourglassEmpty";
87
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
98
import OpenInNew from "@mui/icons-material/OpenInNew";
@@ -18,6 +17,7 @@ import type {
1817
WorkspaceApp,
1918
} from "api/typesGenerated";
2019
import { formatDistance, formatDistanceToNow } from "date-fns";
20+
import { CircleHelpIcon } from "lucide-react";
2121
import { useAppLink } from "modules/apps/useAppLink";
2222
import type { FC } from "react";
2323

@@ -224,7 +224,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
224224
}}
225225
>
226226
{getStatusIcon(theme, status.state, isLatest) || (
227-
<HelpOutline sx={{ fontSize: 18, color: "text.disabled" }} />
227+
<CircleHelpIcon
228+
className="size-icon-sm"
229+
css={{ color: theme.palette.text.disabled }}
230+
/>
228231
)}
229232
</div>
230233

0 commit comments

Comments
 (0)