Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 02c26a5

Browse files
BrunoQuaresmaBrunoQuaresma
committed
chore: replace MUI icons - 5
1 parent aa4b764 commit 02c26a5

File tree

19 files changed

+58
-50
lines changed

19 files changed

+58
-50
lines changed

‎site/migrate-icons.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
Look for all the @mui/icons-material icons below and replace them accordinlying with the Lucide icon:
22

33
MUI | Lucide
4-
TaskAlt | CircleCheckBigIcon
5-
InfoOutlined | InfoIcon
4+
OpenInNewOutlined | ExternalLinkIcon
5+
HelpOutline | CircleHelpIcon
66
ErrorOutline | CircleAlertIcon
77

8-
You should update the imports and usage.
8+
You should update the imports and usage. If you need to update the size please use classes:
9+
10+
- size-icon-lg for 1.5rem
11+
- size-icon-sm for 1.125rem
12+
- size-icon-xs for 0.875rem

‎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-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import CloseIcon from "@mui/icons-material/Close";
33
import LockIcon from "@mui/icons-material/Lock";
44
import LockOpenIcon from "@mui/icons-material/LockOpen";
5-
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
65
import SensorsIcon from "@mui/icons-material/Sensors";
76
import LoadingButton from "@mui/lab/LoadingButton";
87
import Button from "@mui/material/Button";
@@ -41,6 +40,7 @@ import {
4140
} from "components/deprecated/Popover/Popover";
4241
import { type FormikContextType, useFormik } from "formik";
4342
import { type ClassName, useClassName } from "hooks/useClassName";
43+
import { ExternalLinkIcon } from "lucide-react";
4444
import { ChevronDownIcon } from "lucide-react";
4545
import { useDashboard } from "modules/dashboard/useDashboard";
4646
import { type FC, useState } from "react";
@@ -308,11 +308,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
308308
minWidth: 0,
309309
}}
310310
>
311-
<OpenInNewOutlined
311+
<ExternalLinkIcon
312+
className="size-icon-xs"
312313
css={{
313314
flexShrink: 0,
314-
width: 14,
315-
height: 14,
316315
color: theme.palette.text.primary,
317316
}}
318317
/>

‎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
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import DeleteOutline from "@mui/icons-material/DeleteOutline";
32
import PersonAdd from "@mui/icons-material/PersonAdd";
43
import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
54
import LoadingButton from "@mui/lab/LoadingButton";
@@ -51,7 +50,7 @@ import {
5150
TableToolbar,
5251
} from "components/TableToolbar/TableToolbar";
5352
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
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={<DeleteOutline />}
136+
startIcon={<TrashIcon />}
138137
css={styles.removeButton}
139138
>
140139
Delete&hellip;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
33
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
44
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
5-
import ErrorOutline from "@mui/icons-material/ErrorOutline";
65
import Link from "@mui/material/Link";
76
import type { HealthCode, HealthSeverity } from "api/typesGenerated";
7+
import { CircleAlertIcon } from "lucide-react";
88
import {
99
type ComponentProps,
1010
type FC,
@@ -57,7 +57,7 @@ interface HealthIconProps {
5757
export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
5858
const theme = useTheme();
5959
const color = healthyColor(theme, severity);
60-
const Icon = severity === "error" ? ErrorOutline : CheckCircleOutlined;
60+
const Icon = severity === "error" ? CircleAlertIcon : CheckCircleOutlined;
6161

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

‎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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
32
import IconButton from "@mui/material/IconButton";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
@@ -15,6 +14,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty";
1514
import { TableLoader } from "components/TableLoader/TableLoader";
1615
import dayjs from "dayjs";
1716
import relativeTime from "dayjs/plugin/relativeTime";
17+
import { TrashIcon } from "lucide-react";
1818
import type { FC, ReactNode } from "react";
1919

2020
dayjs.extend(relativeTime);
@@ -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>
@@ -115,7 +115,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
115115
size="medium"
116116
aria-label="Delete token"
117117
>
118-
<DeleteOutlineIcon />
118+
<TrashIcon />
119119
</IconButton>
120120
</span>
121121
</TableCell>

0 commit comments

Comments
 (0)