Skip to content

Commit 6b82662

Browse files
committed
chore: replce MUI icons #3
1 parent d5360a6 commit 6b82662

File tree

8 files changed

+27
-23
lines changed

8 files changed

+27
-23
lines changed

site/src/components/Paywall/Paywall.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import TaskAltIcon from "@mui/icons-material/TaskAlt";
2+
import { CircleCheckBigIcon } from "lucide-react";
33
import Link from "@mui/material/Link";
44
import { PremiumBadge } from "components/Badges/Badges";
55
import { Button } from "components/Button/Button";
@@ -73,7 +73,9 @@ export const Paywall: FC<PaywallProps> = ({
7373

7474
const FeatureIcon: FC = () => {
7575
return (
76-
<TaskAltIcon
76+
<CircleCheckBigIcon
77+
aria-hidden="true"
78+
className="size-icon-sm"
7779
css={[
7880
(theme) => ({
7981
color: theme.branding.premium.border,

site/src/components/Paywall/PopoverPaywall.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import TaskAltIcon from "@mui/icons-material/TaskAlt";
2+
import { CircleCheckBigIcon } from "lucide-react";
33
import Link from "@mui/material/Link";
44
import { PremiumBadge } from "components/Badges/Badges";
55
import { Button } from "components/Button/Button";
@@ -77,7 +77,9 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
7777

7878
const FeatureIcon: FC = () => {
7979
return (
80-
<TaskAltIcon
80+
<CircleCheckBigIcon
81+
aria-hidden="true"
82+
className="size-icon-sm"
8183
css={[
8284
(theme) => ({
8385
color: theme.branding.premium.border,

site/src/components/Pill/Pill.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
1+
import { InfoIcon } from "lucide-react";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import { Pill, PillSpinner } from "./Pill";
44

@@ -68,7 +68,7 @@ export const WithIcon: Story = {
6868
args: {
6969
children: "Information",
7070
type: "info",
71-
icon: <InfoOutlined />,
71+
icon: <InfoIcon aria-hidden="true" className="size-icon-sm" />,
7272
},
7373
};
7474

site/src/modules/resources/AppLink/AppLink.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useTheme } from "@emotion/react";
2-
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
2+
import { CircleAlertIcon } from "lucide-react";
33
import { API } from "api/api";
44
import type * as TypesGen from "api/typesGenerated";
55
import { displayError } from "components/GlobalSnackbar/utils";
@@ -74,12 +74,12 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
7474
primaryTooltip = "Initializing...";
7575
}
7676
if (app.health === "unhealthy") {
77-
icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
77+
icon = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" css={{ color: theme.palette.warning.light }} />;
7878
primaryTooltip = "Unhealthy";
7979
}
8080
if (!appsHost && app.subdomain) {
8181
canClick = false;
82-
icon = <ErrorOutlineIcon css={{ color: theme.palette.grey[300] }} />;
82+
icon = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" css={{ color: theme.palette.grey[300] }} />;
8383
primaryTooltip =
8484
"Your admin has not configured subdomain application access";
8585
}
@@ -175,4 +175,4 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
175175
}
176176

177177
return button;
178-
};
178+
};

site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ErrorOutline from "@mui/icons-material/ErrorOutline";
1+
import { CircleAlertIcon } from "lucide-react";
22
import Tooltip, {
33
type TooltipProps,
44
tooltipClasses,
@@ -31,10 +31,10 @@ export const WorkspaceStatusBadge: FC<WorkspaceStatusBadgeProps> = ({
3131
<FailureTooltip
3232
title={
3333
<div css={{ display: "flex", alignItems: "center", gap: 10 }}>
34-
<ErrorOutline
34+
<CircleAlertIcon
35+
aria-hidden="true"
36+
className="size-icon-xs"
3537
css={(theme) => ({
36-
width: 14,
37-
height: 14,
3838
color: theme.palette.error.light,
3939
})}
4040
/>
@@ -87,4 +87,4 @@ const FailureTooltip: FC<TooltipProps> = ({ children, ...tooltipProps }) => {
8787
{children}
8888
</Tooltip>
8989
);
90-
};
90+
};

site/src/pages/WorkspacePage/ChangeVersionDialog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { css } from "@emotion/css";
2-
import InfoIcon from "@mui/icons-material/InfoOutlined";
2+
import { InfoIcon } from "lucide-react";
33
import AlertTitle from "@mui/material/AlertTitle";
44
import Autocomplete from "@mui/material/Autocomplete";
55
import CircularProgress from "@mui/material/CircularProgress";
@@ -106,7 +106,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
106106
>
107107
{option.name}
108108
{option.message && (
109-
<InfoIcon css={{ width: 12, height: 12 }} />
109+
<InfoIcon aria-hidden="true" className="size-icon-xs" />
110110
)}
111111
</Stack>
112112
{template?.active_version_id === option.id && (

site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
2+
import { InfoIcon } from "lucide-react";
33
import WarningRounded from "@mui/icons-material/WarningRounded";
44
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
55
import type {
@@ -251,7 +251,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
251251
<Notifications
252252
items={infoNotifications}
253253
severity="info"
254-
icon={<InfoOutlined />}
254+
icon={<InfoIcon aria-hidden="true" className="size-icon-sm" />}
255255
/>
256256
)}
257257

site/src/utils/workspace.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Theme } from "@emotion/react";
2-
import ErrorIcon from "@mui/icons-material/ErrorOutline";
2+
import { CircleAlertIcon } from "lucide-react";
33
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
44
import PlayIcon from "@mui/icons-material/PlayArrowOutlined";
55
import StopIcon from "@mui/icons-material/StopOutlined";
@@ -227,7 +227,7 @@ export const getDisplayWorkspaceStatus = (
227227
return {
228228
type: "danger",
229229
text: "Deleted",
230-
icon: <ErrorIcon />,
230+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
231231
} as const;
232232
case "canceling":
233233
return {
@@ -239,13 +239,13 @@ export const getDisplayWorkspaceStatus = (
239239
return {
240240
type: "inactive",
241241
text: "Canceled",
242-
icon: <ErrorIcon />,
242+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
243243
} as const;
244244
case "failed":
245245
return {
246246
type: "error",
247247
text: "Failed",
248-
icon: <ErrorIcon />,
248+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
249249
} as const;
250250
case "pending":
251251
return {

0 commit comments

Comments
 (0)