From 6b8266274c0f4b9654cd0d83c93eface3b23f529 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 8 May 2025 21:07:30 +0000
Subject: [PATCH 1/2] chore: replce MUI icons #3

---
 site/src/components/Paywall/Paywall.tsx                |  6 ++++--
 site/src/components/Paywall/PopoverPaywall.tsx         |  6 ++++--
 site/src/components/Pill/Pill.stories.tsx              |  4 ++--
 site/src/modules/resources/AppLink/AppLink.tsx         |  8 ++++----
 .../WorkspaceStatusBadge/WorkspaceStatusBadge.tsx      | 10 +++++-----
 site/src/pages/WorkspacePage/ChangeVersionDialog.tsx   |  4 ++--
 .../WorkspaceNotifications/WorkspaceNotifications.tsx  |  4 ++--
 site/src/utils/workspace.tsx                           |  8 ++++----
 8 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index 899d23ca4a6d4..e131530ed45bf 100644
--- 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
index 1e1661381fc31..54625f52f952b 100644
--- 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
index 2eff46f90fdec..e1e23ee608b80 100644
--- 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
index 0e94335ba0c43..1b6671d846c49 100644
--- 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;
-};
+};
\ No newline at end of file
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index b709f6e4a4cef..cebedfacbf96b 100644
--- 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>
 	);
-};
+};
\ No newline at end of file
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
index 453baca597a2c..26453b0a4f7f9 100644
--- 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
index cf4631b34d2cb..26d23e7f618cb 100644
--- 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
index de94ea8ca9589..f58a4dfac14cd 100644
--- 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 {

From 55bc70f33111c125a33c3e8e4f8468cf2d96a165 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 9 May 2025 17:55:45 +0000
Subject: [PATCH 2/2] Run FMT

---
 site/src/components/Paywall/Paywall.tsx       |  2 +-
 .../src/components/Paywall/PopoverPaywall.tsx |  2 +-
 site/src/components/Pill/Pill.stories.tsx     |  2 +-
 .../src/modules/resources/AppLink/AppLink.tsx | 20 +++++++++++++++----
 .../WorkspaceStatusBadge.tsx                  |  4 ++--
 .../WorkspacePage/ChangeVersionDialog.tsx     |  7 +++++--
 .../WorkspaceNotifications.tsx                |  2 +-
 site/src/utils/workspace.tsx                  |  2 +-
 8 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index e131530ed45bf..56c0e9cc390de 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -1,9 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { CircleCheckBigIcon } from "lucide-react";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
+import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 export interface PaywallProps {
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index 54625f52f952b..2b999c7014d16 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -1,9 +1,9 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { CircleCheckBigIcon } from "lucide-react";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
+import { CircleCheckBigIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 
 export interface PopoverPaywallProps {
diff --git a/site/src/components/Pill/Pill.stories.tsx b/site/src/components/Pill/Pill.stories.tsx
index e1e23ee608b80..0786216146862 100644
--- a/site/src/components/Pill/Pill.stories.tsx
+++ b/site/src/components/Pill/Pill.stories.tsx
@@ -1,5 +1,5 @@
-import { InfoIcon } from "lucide-react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { InfoIcon } from "lucide-react";
 import { Pill, PillSpinner } from "./Pill";
 
 const meta: Meta<typeof Pill> = {
diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
index 1b6671d846c49..cda823ae2e78c 100644
--- a/site/src/modules/resources/AppLink/AppLink.tsx
+++ b/site/src/modules/resources/AppLink/AppLink.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import { CircleAlertIcon } from "lucide-react";
 import { API } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
@@ -11,6 +10,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useProxy } from "contexts/ProxyContext";
+import { CircleAlertIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { createAppLinkHref } from "utils/apps";
 import { generateRandomString } from "utils/random";
@@ -74,12 +74,24 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 		primaryTooltip = "Initializing...";
 	}
 	if (app.health === "unhealthy") {
-		icon = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" 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 = <CircleAlertIcon aria-hidden="true" className="size-icon-sm" 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 +187,4 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 	}
 
 	return button;
-};
\ No newline at end of file
+};
diff --git a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
index cebedfacbf96b..1bde6f9181ba6 100644
--- a/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
+++ b/site/src/modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx
@@ -1,4 +1,3 @@
-import { CircleAlertIcon } from "lucide-react";
 import Tooltip, {
 	type TooltipProps,
 	tooltipClasses,
@@ -7,6 +6,7 @@ import type { Workspace } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { Pill } from "components/Pill/Pill";
 import { useClassName } from "hooks/useClassName";
+import { CircleAlertIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
 
@@ -87,4 +87,4 @@ const FailureTooltip: FC<TooltipProps> = ({ children, ...tooltipProps }) => {
 			{children}
 		</Tooltip>
 	);
-};
\ No newline at end of file
+};
diff --git a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
index 26453b0a4f7f9..7990295620d65 100644
--- a/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
+++ b/site/src/pages/WorkspacePage/ChangeVersionDialog.tsx
@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-import { InfoIcon } from "lucide-react";
 import AlertTitle from "@mui/material/AlertTitle";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -14,6 +13,7 @@ import { FormFields } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { InfoIcon } from "lucide-react";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 import { type FC, useRef, useState } from "react";
 import { createDayString } from "utils/createDayString";
@@ -106,7 +106,10 @@ export const ChangeVersionDialog: FC<ChangeVersionDialogProps> = ({
 														>
 															{option.name}
 															{option.message && (
-																<InfoIcon aria-hidden="true" className="size-icon-xs" />
+																<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
index 26d23e7f618cb..7c72c9777aaeb 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { InfoIcon } from "lucide-react";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import type {
@@ -11,6 +10,7 @@ import type {
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import dayjs from "dayjs";
+import { InfoIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
 import { type FC, useEffect, useState } from "react";
diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx
index f58a4dfac14cd..5add9e7bc79ce 100644
--- a/site/src/utils/workspace.tsx
+++ b/site/src/utils/workspace.tsx
@@ -1,5 +1,4 @@
 import type { Theme } from "@emotion/react";
-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";
@@ -9,6 +8,7 @@ import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import minMax from "dayjs/plugin/minMax";
 import utc from "dayjs/plugin/utc";
+import { CircleAlertIcon } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";