chore: replce MUI icons #3

BrunoQuaresma · BrunoQuaresma · commit 6b8266274c0f · 2025-05-08T21:07:30.000Z
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import { CircleCheckBigIcon } from "lucide-react";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
@@ -73,7 +73,9 @@ export const Paywall: FC<PaywallProps> = ({
 
 const FeatureIcon: FC = () => {
 	return (
-		<TaskAltIcon
+		<CircleCheckBigIcon
+			aria-hidden="true"
+			className="size-icon-sm"
 			css={[
 				(theme) => ({
 					color: theme.branding.premium.border,
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import { CircleCheckBigIcon } from "lucide-react";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
@@ -77,7 +77,9 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 
 const FeatureIcon: FC = () => {
 	return (
-		<TaskAltIcon
+		<CircleCheckBigIcon
+			aria-hidden="true"
+			className="size-icon-sm"
 			css={[
 				(theme) => ({
 					color: theme.branding.premium.border,
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
@@ -1,4 +1,4 @@
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import { InfoIcon } from "lucide-react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Pill, PillSpinner } from "./Pill";
 
@@ -68,7 +68,7 @@ export const WithIcon: Story = {
 	args: {
 		children: "Information",
 		type: "info",
-		icon: <InfoOutlined />,
+		icon: <InfoIcon aria-hidden="true" className="size-icon-sm" />,
 	},
 };
 
diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { CircleAlertIcon } from "lucide-react";
 import { API } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
@@ -74,12 +74,12 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 		primaryTooltip = "Initializing...";
 	}
 	if (app.health === "unhealthy") {
-		icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
+		icon = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" css={{ color: theme.palette.warning.light }} />;
 		primaryTooltip = "Unhealthy";
 	}
 	if (!appsHost && app.subdomain) {
 		canClick = false;
-		icon = <ErrorOutlineIcon css={{ color: theme.palette.grey[300] }} />;
+		icon = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" css={{ color: theme.palette.grey[300] }} />;
 		primaryTooltip =
 			"Your admin has not configured subdomain application access";
 	}
@@ -175,4 +175,4 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 	}
 
 	return button;
-};
+};
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -1,4 +1,4 @@
-import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import { CircleAlertIcon } from "lucide-react";
 import Tooltip, {
 	type TooltipProps,
 	tooltipClasses,
@@ -31,10 +31,10 @@ export const WorkspaceStatusBadge: FC<WorkspaceStatusBadgeProps> = ({
 				<FailureTooltip
 					title={
 						<div css={{ display: "flex", alignItems: "center", gap: 10 }}>
-							<ErrorOutline
+							<CircleAlertIcon
+								aria-hidden="true"
+								className="size-icon-xs"
 								css={(theme) => ({
-									width: 14,
-									height: 14,
 									color: theme.palette.error.light,
 								})}
 							/>
@@ -87,4 +87,4 @@ const FailureTooltip: FC<TooltipProps> = ({ children, ...tooltipProps }) => {
 			{children}
 		</Tooltip>
 	);
-};
+};
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
+import { InfoIcon } from "lucide-react";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -106,7 +106,7 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 														>
 															{option.name}
 															{option.message && (
-																<InfoIcon css={{ width: 12, height: 12 }} />
+																<InfoIcon aria-hidden="true" className="size-icon-xs" />
 															)}
 														</Stack>
 														{template?.active_version_id === option.id && (
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import InfoOutlined from "@mui/icons-material/InfoOutlined";
+import { InfoIcon } from "lucide-react";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import type {
@@ -251,7 +251,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 				<Notifications
 					items={infoNotifications}
 					severity="info"
-					icon={<InfoOutlined />}
+					icon={<InfoIcon aria-hidden="true" className="size-icon-sm" />}
 				/>
 			)}
 
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
@@ -1,5 +1,5 @@
 import type { Theme } from "@emotion/react";
-import ErrorIcon from "@mui/icons-material/ErrorOutline";
+import { CircleAlertIcon } from "lucide-react";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import PlayIcon from "@mui/icons-material/PlayArrowOutlined";
 import StopIcon from "@mui/icons-material/StopOutlined";
@@ -227,7 +227,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "danger",
 				text: "Deleted",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "canceling":
 			return {
@@ -239,13 +239,13 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "inactive",
 				text: "Canceled",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "failed":
 			return {
 				type: "error",
 				text: "Failed",
-				icon: <ErrorIcon />,
+				icon: <CircleAlertIcon aria-hidden="true" className="size-icon-sm" />,
 			} as const;
 		case "pending":
 			return {
