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

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎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 & 6 deletions
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

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)
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