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

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

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

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

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

Lines changed: 5 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 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

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

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

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

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

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

0 commit comments

Comments
 (0)