Skip to content

Commit aa4b764

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons - 3 (#17733)
1. Replaced TaskAlt with CircleCheckBigIcon in: - Paywall.tsx - PopoverPaywall.tsx 2. Replaced InfoOutlined with InfoIcon in: - ChangeVersionDialog.tsx - WorkspaceNotifications.tsx - Pill.stories.tsx 3. Replaced ErrorOutline/ErrorOutlineIcon with CircleAlertIcon in: - workspace.tsx - WorkspaceStatusBadge.tsx - AppLink.tsx
1 parent b0a4ef0 commit aa4b764

File tree

8 files changed

+40
-22
lines changed

8 files changed

+40
-22
lines changed

‎site/src/components/Paywall/Paywall.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import TaskAltIcon from "@mui/icons-material/TaskAlt";
32
import Link from "@mui/material/Link";
43
import { PremiumBadge } from "components/Badges/Badges";
54
import { Button } from "components/Button/Button";
65
import { Stack } from "components/Stack/Stack";
6+
import { CircleCheckBigIcon } from "lucide-react";
77
import type { FC, ReactNode } from "react";
88

99
export interface PaywallProps {
@@ -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,9 +1,9 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import TaskAltIcon from "@mui/icons-material/TaskAlt";
32
import Link from "@mui/material/Link";
43
import { PremiumBadge } from "components/Badges/Badges";
54
import { Button } from "components/Button/Button";
65
import { Stack } from "components/Stack/Stack";
6+
import { CircleCheckBigIcon } from "lucide-react";
77
import type { FC, ReactNode } from "react";
88

99
export interface PopoverPaywallProps {
@@ -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,5 +1,5 @@
1-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
21
import type { Meta, StoryObj } from "@storybook/react";
2+
import { InfoIcon } from "lucide-react";
33
import { Pill, PillSpinner } from "./Pill";
44

55
const meta: Meta<typeof Pill> = {
@@ -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

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
32
import type * as TypesGen from "api/typesGenerated";
43
import { Spinner } from "components/Spinner/Spinner";
54
import {
@@ -9,6 +8,7 @@ import {
98
TooltipTrigger,
109
} from "components/Tooltip/Tooltip";
1110
import { useProxy } from "contexts/ProxyContext";
11+
import { CircleAlertIcon } from "lucide-react";
1212
import { isExternalApp, needsSessionToken } from "modules/apps/apps";
1313
import { useAppLink } from "modules/apps/useAppLink";
1414
import { type FC, useState } from "react";
@@ -54,13 +54,25 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
5454
}
5555

5656
if (app.health === "unhealthy") {
57-
icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
57+
icon = (
58+
<CircleAlertIcon
59+
aria-hidden="true"
60+
className="size-icon-sm"
61+
css={{ color: theme.palette.warning.light }}
62+
/>
63+
);
5864
primaryTooltip = "Unhealthy";
5965
}
6066

6167
if (!host && app.subdomain) {
6268
canClick = false;
63-
icon = <ErrorOutlineIcon css={{ color: theme.palette.grey[300] }} />;
69+
icon = (
70+
<CircleAlertIcon
71+
aria-hidden="true"
72+
className="size-icon-sm"
73+
css={{ color: theme.palette.grey[300] }}
74+
/>
75+
);
6476
primaryTooltip =
6577
"Your admin has not configured subdomain application access";
6678
}

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import ErrorOutline from "@mui/icons-material/ErrorOutline";
21
import Tooltip, {
32
type TooltipProps,
43
tooltipClasses,
@@ -7,6 +6,7 @@ import type { Workspace } from "api/typesGenerated";
76
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
87
import { Pill } from "components/Pill/Pill";
98
import { useClassName } from "hooks/useClassName";
9+
import { CircleAlertIcon } from "lucide-react";
1010
import type { FC, ReactNode } from "react";
1111
import { getDisplayWorkspaceStatus } from "utils/workspace";
1212

@@ -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
/>

‎site/src/pages/WorkspacePage/ChangeVersionDialog.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { css } from "@emotion/css";
2-
import InfoIcon from "@mui/icons-material/InfoOutlined";
32
import AlertTitle from "@mui/material/AlertTitle";
43
import Autocomplete from "@mui/material/Autocomplete";
54
import CircularProgress from "@mui/material/CircularProgress";
@@ -14,6 +13,7 @@ import { FormFields } from "components/Form/Form";
1413
import { Loader } from "components/Loader/Loader";
1514
import { Pill } from "components/Pill/Pill";
1615
import { Stack } from "components/Stack/Stack";
16+
import { InfoIcon } from "lucide-react";
1717
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
1818
import { type FC, useRef, useState } from "react";
1919
import { createDayString } from "utils/createDayString";
@@ -106,7 +106,10 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
106106
>
107107
{option.name}
108108
{option.message && (
109-
<InfoIcon css={{ width: 12, height: 12 }} />
109+
<InfoIcon
110+
aria-hidden="true"
111+
className="size-icon-xs"
112+
/>
110113
)}
111114
</Stack>
112115
{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,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import InfoOutlined from "@mui/icons-material/InfoOutlined";
32
import WarningRounded from "@mui/icons-material/WarningRounded";
43
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
54
import type {
@@ -11,6 +10,7 @@ import type {
1110
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
1211
import formatDistanceToNow from "date-fns/formatDistanceToNow";
1312
import dayjs from "dayjs";
13+
import { InfoIcon } from "lucide-react";
1414
import { useDashboard } from "modules/dashboard/useDashboard";
1515
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
1616
import { type FC, useEffect, useState } from "react";
@@ -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-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import type { Theme } from "@emotion/react";
2-
import ErrorIcon from "@mui/icons-material/ErrorOutline";
32
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
43
import type * as TypesGen from "api/typesGenerated";
54
import { PillSpinner } from "components/Pill/Pill";
65
import dayjs from "dayjs";
76
import duration from "dayjs/plugin/duration";
87
import minMax from "dayjs/plugin/minMax";
98
import utc from "dayjs/plugin/utc";
10-
import { PlayIcon, SquareIcon } from "lucide-react";
9+
import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
1110
import semver from "semver";
1211
import { getPendingStatusLabel } from "./provisionerJob";
1312

@@ -226,7 +225,7 @@ export const getDisplayWorkspaceStatus = (
226225
return {
227226
type: "danger",
228227
text: "Deleted",
229-
icon: <ErrorIcon />,
228+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
230229
} as const;
231230
case "canceling":
232231
return {
@@ -238,13 +237,13 @@ export const getDisplayWorkspaceStatus = (
238237
return {
239238
type: "inactive",
240239
text: "Canceled",
241-
icon: <ErrorIcon />,
240+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
242241
} as const;
243242
case "failed":
244243
return {
245244
type: "error",
246245
text: "Failed",
247-
icon: <ErrorIcon />,
246+
icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
248247
} as const;
249248
case "pending":
250249
return {

0 commit comments

Comments
 (0)