From c6cefb8cd121d6712430329354f15ff1ecd58778 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 13 May 2025 22:47:49 +0000
Subject: [PATCH] chore: replace MUI icons with Lucide icons - 11

---
 site/src/pages/HealthPage/DERPRegionPage.tsx     |  6 ++++--
 site/src/pages/HealthPage/WebsocketPage.tsx      |  6 ++++--
 .../pages/TemplatePage/TemplatePageHeader.tsx    |  4 ++--
 site/src/pages/TemplateSettingsPage/Sidebar.tsx  |  4 ++--
 site/src/pages/WorkspaceSettingsPage/Sidebar.tsx |  6 +++---
 .../WorkspacesPage/BatchDeleteConfirmation.tsx   | 13 +++++--------
 .../WorkspacesPage/BatchUpdateConfirmation.tsx   | 16 ++++++----------
 7 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 4a1be16138315..a32350e7afe2b 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
-import CodeOutlined from "@mui/icons-material/CodeOutlined";
 import TagOutlined from "@mui/icons-material/TagOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type {
@@ -11,6 +10,7 @@ import type {
 	HealthcheckReport,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { CodeIcon } from "lucide-react";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { Link, useOutletContext, useParams } from "react-router-dom";
@@ -94,7 +94,9 @@ const DERPRegionPage: FC = () => {
 							<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
 						</Tooltip>
 						<Tooltip title="Region Code">
-							<Pill icon={<CodeOutlined />}>{region!.RegionCode}</Pill>
+							<Pill icon={<CodeIcon className="size-icon-sm" />}>
+								{region!.RegionCode}
+							</Pill>
 						</Tooltip>
 						<BooleanPill value={region!.EmbeddedRelay}>
 							Embedded Relay
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index a3f4a92d4da0b..fed223163e8e1 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
-import CodeOutlined from "@mui/icons-material/CodeOutlined";
 import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import { CodeIcon } from "lucide-react";
 import { Helmet } from "react-helmet-async";
 import { useOutletContext } from "react-router-dom";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
@@ -49,7 +49,9 @@ const WebsocketPage = () => {
 
 				<section>
 					<Tooltip title="Code">
-						<Pill icon={<CodeOutlined />}>{websocket.code}</Pill>
+						<Pill icon={<CodeIcon className="size-icon-sm" />}>
+							{websocket.code}
+						</Pill>
 					</Tooltip>
 				</section>
 
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 48fe621f2b827..834c83905cbf5 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -1,7 +1,6 @@
 import AddIcon from "@mui/icons-material/AddOutlined";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import CopyIcon from "@mui/icons-material/FileCopyOutlined";
-import SettingsIcon from "@mui/icons-material/SettingsOutlined";
 import Button from "@mui/material/Button";
 import { workspaces } from "api/queries/workspaces";
 import type {
@@ -29,6 +28,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { SettingsIcon } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { EllipsisVertical } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -79,7 +79,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
 					<DropdownMenuItem
 						onClick={() => navigate(`${templateLink}/settings`)}
 					>
-						<SettingsIcon />
+						<SettingsIcon className="size-icon-sm" />
 						Settings
 					</DropdownMenuItem>
 
diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
index f8b41f7829fd4..1aaa426061968 100644
--- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx
+++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx
@@ -1,5 +1,3 @@
-import VariablesIcon from "@mui/icons-material/CodeOutlined";
-import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import {
@@ -7,6 +5,8 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { CodeIcon as VariablesIcon } from "lucide-react";
+import { TimerIcon as ScheduleIcon } from "lucide-react";
 import { SettingsIcon } from "lucide-react";
 import { LockIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
index 604fc2ed70d23..91aea9ac9cf12 100644
--- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -1,6 +1,3 @@
-import ParameterIcon from "@mui/icons-material/CodeOutlined";
-import GeneralIcon from "@mui/icons-material/SettingsOutlined";
-import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Workspace } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import {
@@ -8,6 +5,9 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { CodeIcon as ParameterIcon } from "lucide-react";
+import { SettingsIcon as GeneralIcon } from "lucide-react";
+import { TimerIcon as ScheduleIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface SidebarProps {
diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
index a4a79c0c1e91f..587cecf25efdd 100644
--- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
@@ -1,6 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
-import ScheduleIcon from "@mui/icons-material/Schedule";
 import { visuallyHidden } from "@mui/utils";
 import type { Workspace } from "api/typesGenerated";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
@@ -8,6 +6,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { ClockIcon, UserIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import { getResourceIconPath } from "utils/workspace";
 
@@ -190,7 +189,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
 									>
 										{dayjs(workspace.last_used_at).fromNow()}
 									</span>
-									<ScheduleIcon css={styles.summaryIcon} />
+									<ClockIcon className="size-icon-xs" />
 								</Stack>
 							</Stack>
 						</Stack>
@@ -209,7 +208,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
 				</Stack>
 				{mostRecent && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<ScheduleIcon css={styles.summaryIcon} />
+						<ClockIcon className="size-icon-xs" />
 						<span>Last used {dayjs(mostRecent.last_used_at).fromNow()}</span>
 					</Stack>
 				)}
@@ -264,10 +263,8 @@ const Resources: FC<StageProps> = ({ workspaces }) => {
 };
 
 const PersonIcon: FC = () => {
-	// This size doesn't match the rest of the icons because MUI is just really
-	// inconsistent. We have to make it bigger than the rest, and pull things in
-	// on the sides to compensate.
-	return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
+	// Using the Lucide icon with appropriate size class
+	return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
 };
 
 const styles = {
diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
index bd4fef445bf8e..ac36009dacb70 100644
--- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
@@ -1,8 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
-import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";
-import ScheduleIcon from "@mui/icons-material/Schedule";
-import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest";
 import { API } from "api/api";
 import type { TemplateVersion, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -12,6 +9,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
 import { useQueries } from "react-query";
 
@@ -293,7 +291,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
 									</span>
 								</Stack>
 								<Stack direction="row" alignItems="center" spacing={1}>
-									<ScheduleIcon css={styles.summaryIcon} />
+									<ClockIcon className="size-icon-xs" />
 									<span
 										css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
 									>
@@ -317,7 +315,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
 				</Stack>
 				{mostRecent && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<ScheduleIcon css={styles.summaryIcon} />
+						<ClockIcon className="size-icon-xs" />
 						<span>Last used {lastUsed(mostRecent.last_used_at)}</span>
 					</Stack>
 				)}
@@ -358,7 +356,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
 				</Stack>
 				{updateCount && (
 					<Stack direction="row" alignItems="center" spacing={1}>
-						<SettingsSuggestIcon css={styles.summaryIcon} />
+						<SettingsIcon className="size-icon-xs" />
 						<span>{updateCount}</span>
 					</Stack>
 				)}
@@ -433,10 +431,8 @@ const lastUsed = (time: string) => {
 };
 
 const PersonIcon: FC = () => {
-	// This size doesn't match the rest of the icons because MUI is just really
-	// inconsistent. We have to make it bigger than the rest, and pull things in
-	// on the sides to compensate.
-	return <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
+	// Using the Lucide icon with appropriate size class
+	return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
 };
 
 const styles = {

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17814.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17814.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17814.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17814.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>