synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-12 00:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace MUI icons - 6 (#17751)

Browse Source 
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)
This commit is contained in:
Bruno Quaresma
2025-05-09 17:07:57 -03:00
committed by GitHub
parent 1adad418ad
commit 842bb1f014
7 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx
View File

@ -1,10 +1,10 @@
import type { Interpolation, Theme } from "@emotion/react";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
import Snackbar, {
type SnackbarProps as MuiSnackbarProps,
} from "@mui/material/Snackbar";
import { type ClassName, useClassName } from "hooks/useClassName";
import { X as XIcon } from "lucide-react";
import type { FC } from "react";
type EnterpriseSnackbarVariant = "error" | "info" | "success";
@ -47,7 +47,11 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
<div css={styles.actionWrapper}>
{action}
<IconButton onClick={onClose} css={{ padding: 0 }}>
<CloseIcon css={styles.closeIcon} aria-label="close" />
<XIcon
css={styles.closeIcon}
aria-label="close"
className="size-icon-sm"
/>
</IconButton>
</div>
}
@ -96,8 +100,6 @@ const styles = {
alignItems: "center",
},
closeIcon: (theme) => ({
width: 25,
height: 25,
color: theme.palette.primary.contrastText,
}),
} satisfies Record<string, Interpolation<Theme>>;

16
site/src/modules/provisioners/ProvisionerTag.tsx
View File

@ -1,10 +1,10 @@
import type { Interpolation, Theme } from "@emotion/react";
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
import CloseIcon from "@mui/icons-material/Close";
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
import Sell from "@mui/icons-material/Sell";
import IconButton from "@mui/material/IconButton";
import { Pill } from "components/Pill/Pill";
import { CircleCheck as CircleCheckIcon } from "lucide-react";
import { CircleMinus as CircleMinusIcon } from "lucide-react";
import { Tag as TagIcon } from "lucide-react";
import type { ComponentProps, FC } from "react";
const parseBool = (s: string): { valid: boolean; value: boolean } => {
@ -62,7 +62,11 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
return <BooleanPill value={boolValue}>{content}</BooleanPill>;
}
return (
<Pill size="lg" icon={<Sell />} data-testid={`tag-${tagName}`}>
<Pill
size="lg"
icon={<TagIcon className="size-icon-sm" />}
data-testid={`tag-${tagName}`}
>
{content}
</Pill>
);
@ -83,9 +87,9 @@ const BooleanPill: FC<BooleanPillProps> = ({
size="lg"
icon={
value ? (
<CheckCircleOutlined css={styles.truePill} />
<CircleCheckIcon css={styles.truePill} className="size-icon-sm" />
) : (
<DoNotDisturbOnOutlined css={styles.falsePill} />
<CircleMinusIcon css={styles.falsePill} className="size-icon-sm" />
)
}
{...divProps}

4
site/src/modules/resources/PortForwardButton.tsx
View File

@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import CloseIcon from "@mui/icons-material/Close";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
@ -41,6 +40,7 @@ import {
} from "components/deprecated/Popover/Popover";
import { type FormikContextType, useFormik } from "formik";
import { type ClassName, useClassName } from "hooks/useClassName";
import { X as XIcon } from "lucide-react";
import { ChevronDownIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, useState } from "react";
@ -497,7 +497,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
await sharedPortsQuery.refetch();
}}
>
<CloseIcon
<XIcon
css={{
width: 14,
height: 14,

4
site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
View File

@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import Close from "@mui/icons-material/Close";
import WarningOutlined from "@mui/icons-material/WarningOutlined";
import Button from "@mui/material/Button";
import Drawer from "@mui/material/Drawer";
@ -8,6 +7,7 @@ import { visuallyHidden } from "@mui/utils";
import { JobError } from "api/queries/templates";
import type { TemplateVersion } from "api/typesGenerated";
import { Loader } from "components/Loader/Loader";
import { X as XIcon } from "lucide-react";
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
@ -66,7 +66,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
<header css={styles.header}>
<h3 css={styles.title}>Creating template...</h3>
<IconButton size="small" onClick={drawerProps.onClose}>
<Close css={styles.closeIcon} />
<XIcon css={styles.closeIcon} />
<span style={visuallyHidden}>Close build logs</span>
</IconButton>
</header>

10
site/src/pages/HealthPage/Content.tsx
View File

@ -1,10 +1,10 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
import ErrorOutline from "@mui/icons-material/ErrorOutline";
import Link from "@mui/material/Link";
import type { HealthCode, HealthSeverity } from "api/typesGenerated";
import { CircleCheck as CircleCheckIcon } from "lucide-react";
import { CircleMinus as CircleMinusIcon } from "lucide-react";
import {
type ComponentProps,
type FC,
@ -57,7 +57,7 @@ interface HealthIconProps {
export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
const theme = useTheme();
const color = healthyColor(theme, severity);
const Icon = severity === "error" ? ErrorOutline : CheckCircleOutlined;
const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon;
return <Icon css={{ width: size, height: size, color }} />;
};
@ -201,9 +201,9 @@ export const BooleanPill: FC<BooleanPillProps> = ({
<Pill
icon={
value ? (
<CheckCircleOutlined css={{ color }} />
<CircleCheckIcon css={{ color }} className="size-icon-sm" />
) : (
<DoNotDisturbOnOutlined css={{ color }} />
<CircleMinusIcon css={{ color }} className="size-icon-sm" />
)
}
{...divProps}

7
site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
View File

@ -1,6 +1,5 @@
import { useTheme } from "@emotion/react";
import CancelOutlined from "@mui/icons-material/CancelOutlined";
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
import LinkOutlined from "@mui/icons-material/LinkOutlined";
import LinearProgress from "@mui/material/LinearProgress";
import Link from "@mui/material/Link";
@ -45,6 +44,7 @@ import {
subDays,
} from "date-fns";
import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
import { CircleCheck as CircleCheckIcon } from "lucide-react";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import {
type FC,
@ -759,12 +759,11 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
</>
) : (
<>
<CheckCircleOutlined
<CircleCheckIcon
css={{
width: 16,
height: 16,
color: theme.palette.success.light,
}}
className="size-icon-xs"
/>
True
</>

6
site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
View File

@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
import GitHubIcon from "@mui/icons-material/GitHub";
import KeyIcon from "@mui/icons-material/VpnKey";
import Button from "@mui/material/Button";
@ -16,6 +15,7 @@ import type {
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Stack } from "components/Stack/Stack";
import { CircleCheck as CircleCheckIcon } from "lucide-react";
import { type FC, useState } from "react";
import { useMutation } from "react-query";
import { docs } from "utils/docs";
@ -191,11 +191,11 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
fontSize: 14,
}}
>
<CheckCircleOutlined
<CircleCheckIcon
css={{
color: theme.palette.success.light,
fontSize: 16,
}}
className="size-icon-xs"
/>
<span>
Authenticated with{" "}