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