Skip to content

Commit 842bb1f

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons - 6 (#17751)
1. Replaced CheckCircleOutlined with CircleCheckIcon (Lucide) 2. Replaced Close/CloseIcon with XIcon (Lucide) 3. Replaced DoNotDisturbOnOutlined with CircleMinusIcon (Lucide) 4. Replaced Sell with TagIcon (Lucide)
1 parent 1adad41 commit 842bb1f

File tree

7 files changed

+31
-26
lines changed

7 files changed

+31
-26
lines changed

‎site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import CloseIcon from "@mui/icons-material/Close";
32
import IconButton from "@mui/material/IconButton";
43
import Snackbar, {
54
type SnackbarProps as MuiSnackbarProps,
65
} from "@mui/material/Snackbar";
76
import { type ClassName, useClassName } from "hooks/useClassName";
7+
import { X as XIcon } from "lucide-react";
88
import type { FC } from "react";
99

1010
type EnterpriseSnackbarVariant = "error" | "info" | "success";
@@ -47,7 +47,11 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
4747
<div css={styles.actionWrapper}>
4848
{action}
4949
<IconButton onClick={onClose} css={{ padding: 0 }}>
50-
<CloseIcon css={styles.closeIcon} aria-label="close" />
50+
<XIcon
51+
css={styles.closeIcon}
52+
aria-label="close"
53+
className="size-icon-sm"
54+
/>
5155
</IconButton>
5256
</div>
5357
}
@@ -96,8 +100,6 @@ const styles = {
96100
alignItems: "center",
97101
},
98102
closeIcon: (theme) => ({
99-
width: 25,
100-
height: 25,
101103
color: theme.palette.primary.contrastText,
102104
}),
103105
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/modules/provisioners/ProvisionerTag.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
32
import CloseIcon from "@mui/icons-material/Close";
4-
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
5-
import Sell from "@mui/icons-material/Sell";
63
import IconButton from "@mui/material/IconButton";
74
import { Pill } from "components/Pill/Pill";
5+
import { CircleCheck as CircleCheckIcon } from "lucide-react";
6+
import { CircleMinus as CircleMinusIcon } from "lucide-react";
7+
import { Tag as TagIcon } from "lucide-react";
88
import type { ComponentProps, FC } from "react";
99

1010
const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -62,7 +62,11 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
6262
return <BooleanPill value={boolValue}>{content}</BooleanPill>;
6363
}
6464
return (
65-
<Pill size="lg" icon={<Sell />} data-testid={`tag-${tagName}`}>
65+
<Pill
66+
size="lg"
67+
icon={<TagIcon className="size-icon-sm" />}
68+
data-testid={`tag-${tagName}`}
69+
>
6670
{content}
6771
</Pill>
6872
);
@@ -83,9 +87,9 @@ const BooleanPill: FC<BooleanPillProps> = ({
8387
size="lg"
8488
icon={
8589
value ? (
86-
<CheckCircleOutlined css={styles.truePill} />
90+
<CircleCheckIcon css={styles.truePill} className="size-icon-sm" />
8791
) : (
88-
<DoNotDisturbOnOutlined css={styles.falsePill} />
92+
<CircleMinusIcon css={styles.falsePill} className="size-icon-sm" />
8993
)
9094
}
9195
{...divProps}

‎site/src/modules/resources/PortForwardButton.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 CloseIcon from "@mui/icons-material/Close";
32
import LockIcon from "@mui/icons-material/Lock";
43
import LockOpenIcon from "@mui/icons-material/LockOpen";
54
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
@@ -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 { X as XIcon } from "lucide-react";
4444
import { ChevronDownIcon } from "lucide-react";
4545
import { useDashboard } from "modules/dashboard/useDashboard";
4646
import { type FC, useState } from "react";
@@ -497,7 +497,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
497497
await sharedPortsQuery.refetch();
498498
}}
499499
>
500-
<CloseIcon
500+
<XIcon
501501
css={{
502502
width: 14,
503503
height: 14,

‎site/src/pages/CreateTemplatePage/BuildLogsDrawer.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 Close from "@mui/icons-material/Close";
32
import WarningOutlined from "@mui/icons-material/WarningOutlined";
43
import Button from "@mui/material/Button";
54
import Drawer from "@mui/material/Drawer";
@@ -8,6 +7,7 @@ import { visuallyHidden } from "@mui/utils";
87
import { JobError } from "api/queries/templates";
98
import type { TemplateVersion } from "api/typesGenerated";
109
import { Loader } from "components/Loader/Loader";
10+
import { X as XIcon } from "lucide-react";
1111
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
1212
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
1313
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
@@ -66,7 +66,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
6666
<header css={styles.header}>
6767
<h3 css={styles.title}>Creating template...</h3>
6868
<IconButton size="small" onClick={drawerProps.onClose}>
69-
<Close css={styles.closeIcon} />
69+
<XIcon css={styles.closeIcon} />
7070
<span style={visuallyHidden}>Close build logs</span>
7171
</IconButton>
7272
</header>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
3-
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
4-
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
53
import ErrorOutline from "@mui/icons-material/ErrorOutline";
64
import Link from "@mui/material/Link";
75
import type { HealthCode, HealthSeverity } from "api/typesGenerated";
6+
import { CircleCheck as CircleCheckIcon } from "lucide-react";
7+
import { CircleMinus as CircleMinusIcon } 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" ? ErrorOutline : CircleCheckIcon;
6161

6262
return <Icon css={{ width: size, height: size, color }} />;
6363
};
@@ -201,9 +201,9 @@ export const BooleanPill: FC<BooleanPillProps> = ({
201201
<Pill
202202
icon={
203203
value ? (
204-
<CheckCircleOutlined css={{ color }} />
204+
<CircleCheckIcon css={{ color }} className="size-icon-sm" />
205205
) : (
206-
<DoNotDisturbOnOutlined css={{ color }} />
206+
<CircleMinusIcon css={{ color }} className="size-icon-sm" />
207207
)
208208
}
209209
{...divProps}

‎site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { useTheme } from "@emotion/react";
22
import CancelOutlined from "@mui/icons-material/CancelOutlined";
3-
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
43
import LinkOutlined from "@mui/icons-material/LinkOutlined";
54
import LinearProgress from "@mui/material/LinearProgress";
65
import Link from "@mui/material/Link";
@@ -45,6 +44,7 @@ import {
4544
subDays,
4645
} from "date-fns";
4746
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
47+
import { CircleCheck as CircleCheckIcon } from "lucide-react";
4848
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
4949
import {
5050
type FC,
@@ -759,12 +759,11 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
759759
</>
760760
) : (
761761
<>
762-
<CheckCircleOutlined
762+
<CircleCheckIcon
763763
css={{
764-
width: 16,
765-
height: 16,
766764
color: theme.palette.success.light,
767765
}}
766+
className="size-icon-xs"
768767
/>
769768
True
770769
</>

‎site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.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 CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
32
import GitHubIcon from "@mui/icons-material/GitHub";
43
import KeyIcon from "@mui/icons-material/VpnKey";
54
import Button from "@mui/material/Button";
@@ -16,6 +15,7 @@ import type {
1615
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
1716
import { EmptyState } from "components/EmptyState/EmptyState";
1817
import { Stack } from "components/Stack/Stack";
18+
import { CircleCheck as CircleCheckIcon } from "lucide-react";
1919
import { type FC, useState } from "react";
2020
import { useMutation } from "react-query";
2121
import { docs } from "utils/docs";
@@ -191,11 +191,11 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
191191
fontSize: 14,
192192
}}
193193
>
194-
<CheckCircleOutlined
194+
<CircleCheckIcon
195195
css={{
196196
color: theme.palette.success.light,
197-
fontSize: 16,
198197
}}
198+
className="size-icon-xs"
199199
/>
200200
<span>
201201
Authenticated with{" "}

0 commit comments

Comments
 (0)