From fd621412aa237d875362196dad69481d7e252518 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 13 May 2025 23:40:33 +0000
Subject: [PATCH 1/2] chore: replace MUI icons with Lucide icons - 12

---
 .../LicensesSettingsPageView.tsx                     |  5 ++---
 .../OAuth2AppsSettingsPageView.tsx                   |  4 ++--
 site/src/pages/GroupsPage/GroupsPageView.tsx         |  4 ++--
 .../CustomRolesPage/CustomRolesPageView.tsx          | 12 +++++++-----
 .../StarterTemplatePage/StarterTemplatePageView.tsx  |  5 ++---
 site/src/pages/TemplatePage/TemplatePageHeader.tsx   |  6 ++----
 .../TemplateVersionEditor.tsx                        |  5 ++---
 .../pages/UserSettingsPage/TokensPage/TokensPage.tsx |  8 ++++++--
 .../WorkspacePage/WorkspaceScheduleControls.tsx      | 10 ++++------
 9 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index a7d39d8536c62..7c6e460057d3f 100644
--- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Button from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
@@ -14,7 +13,7 @@ import {
 } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import { useWindowSize } from "hooks/useWindowSize";
-import { RotateCwIcon } from "lucide-react";
+import { PlusIcon, RotateCwIcon } from "lucide-react";
 import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
@@ -75,7 +74,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 					<Button
 						component={Link}
 						to="/deployment/licenses/add"
-						startIcon={<AddIcon />}
+						startIcon={<PlusIcon className="size-icon-sm" />}
 					>
 						Add a license
 					</Button>
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
index b3ee4e0f5d0fa..8c443775b0848 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Button from "@mui/material/Button";
 import Table from "@mui/material/Table";
@@ -19,6 +18,7 @@ import {
 import { Stack } from "components/Stack/Stack";
 import { TableLoader } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
@@ -52,7 +52,7 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
 				<Button
 					component={Link}
 					to="/deployment/oauth2-provider/apps/add"
-					startIcon={<AddIcon />}
+					startIcon={<PlusIcon className="size-icon-sm" />}
 				>
 					Add application
 				</Button>
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index f0e3647ebc664..c1cc60ec83aa6 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddOutlined from "@mui/icons-material/AddOutlined";
 import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import Skeleton from "@mui/material/Skeleton";
 import type { Group } from "api/typesGenerated";
@@ -24,6 +23,7 @@ import {
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
 import { useClickableTableRow } from "hooks";
+import { PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
@@ -81,7 +81,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
 													canCreateGroup && (
 														<Button asChild>
 															<RouterLink to="create">
-																<AddOutlined />
+																<PlusIcon className="size-icon-sm" />
 																Create group
 															</RouterLink>
 														</Button>
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index 2c360a8dd4e45..91ca7b5fa2732 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -1,6 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
-import AddOutlined from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
 import type { AssignableRoles, Role } from "api/typesGenerated";
@@ -27,7 +25,7 @@ import {
 	TableLoaderSkeleton,
 	TableRowSkeleton,
 } from "components/TableLoader/TableLoader";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
 import { docs } from "utils/docs";
@@ -74,7 +72,11 @@ export const CustomRolesPageView: FC<CustomRolesPageViewProps> = ({
 					</span>
 				</span>
 				{canCreateOrgRole && isCustomRolesEnabled && (
-					<Button component={RouterLink} startIcon={<AddIcon />} to="create">
+					<Button
+						component={RouterLink}
+						startIcon={<PlusIcon className="size-icon-sm" />}
+						to="create"
+					>
 						Create custom role
 					</Button>
 				)}
@@ -158,7 +160,7 @@ const RoleTable: FC<RoleTableProps> = ({
 											<Button
 												component={RouterLink}
 												to="create"
-												startIcon={<AddOutlined />}
+												startIcon={<PlusIcon className="size-icon-sm" />}
 												variant="contained"
 											>
 												Create custom role
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index 00872ed8d5bfb..3767ca9b1cab2 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import PlusIcon from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import type { TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -13,7 +12,7 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, PlusIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link } from "react-router-dom";
 
@@ -58,7 +57,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 							variant="contained"
 							component={Link}
 							to={`/templates/new?exampleId=${starterTemplate.id}`}
-							startIcon={<PlusIcon />}
+							startIcon={<PlusIcon className="size-icon-sm" />}
 						>
 							Use template
 						</Button>
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
index 48fe621f2b827..9ce46cd6ab838 100644
--- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx
+++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -1,4 +1,3 @@
-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";
@@ -29,8 +28,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
-import { TrashIcon } from "lucide-react";
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical, PlusIcon, TrashIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { WorkspacePermissions } from "modules/permissions/workspaces";
 import type { FC } from "react";
@@ -190,7 +188,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
 							workspacePermissions.createWorkspaceForUserID && (
 								<Button
 									variant="contained"
-									startIcon={<AddIcon />}
+									startIcon={<PlusIcon className="size-icon-sm" />}
 									component={RouterLink}
 									to={`${templateLink}/workspace`}
 								>
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 2040fab3878d9..7d8a3c36517a8 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import CreateIcon from "@mui/icons-material/AddOutlined";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
@@ -26,7 +25,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { PlayIcon, XIcon } from "lucide-react";
+import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -360,7 +359,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 											event.currentTarget.blur();
 										}}
 									>
-										<CreateIcon css={{ width: 16, height: 16 }} />
+										<PlusIcon className="size-icon-xs" />
 									</IconButton>
 								</Tooltip>
 							</div>
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
index 92d0a4d977fd7..9668b0fa7bb96 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
 import Button from "@mui/material/Button";
 import type { APIKeyWithOwner } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
+import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { Section } from "../Section";
@@ -65,7 +65,11 @@ const TokensPage: FC = () => {
 
 const TokenActions: FC = () => (
 	<Stack direction="row" justifyContent="end" css={{ marginBottom: 8 }}>
-		<Button startIcon={<AddIcon />} component={RouterLink} to="new">
+		<Button
+			startIcon={<PlusIcon className="size-icon-sm" />}
+			component={RouterLink}
+			to="new"
+		>
 			Add token
 		</Button>
 	</Stack>
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index dc5e14572e14e..e8bb193c4e3b8 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -1,7 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import AddIcon from "@mui/icons-material/AddOutlined";
-import RemoveIcon from "@mui/icons-material/RemoveOutlined";
-import ScheduleOutlined from "@mui/icons-material/ScheduleOutlined";
 import IconButton from "@mui/material/IconButton";
 import Link, { type LinkProps } from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -16,6 +13,7 @@ import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import dayjs, { type Dayjs } from "dayjs";
 import { useTime } from "hooks/useTime";
+import { ClockIcon, PlusIcon, TrashIcon } from "lucide-react";
 import { getWorkspaceActivityStatus } from "modules/workspaces/activity";
 import { type FC, type ReactNode, forwardRef, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -41,7 +39,7 @@ const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
 }) => {
 	const icon = (
 		<TopbarIcon>
-			<ScheduleOutlined aria-label="Schedule" />
+			<ClockIcon aria-label="Schedule" className="size-icon-sm" />
 		</TopbarIcon>
 	);
 
@@ -211,7 +209,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						handleDeadlineChange(deadline.subtract(1, "h"));
 					}}
 				>
-					<RemoveIcon />
+					<TrashIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Subtract 1 hour</span>
 				</IconButton>
 			</Tooltip>
@@ -224,7 +222,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						handleDeadlineChange(deadline.add(1, "h"));
 					}}
 				>
-					<AddIcon />
+					<PlusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Add 1 hour</span>
 				</IconButton>
 			</Tooltip>

From 31300b4264608cfcd1024fcd7315df861d68e04f Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 14 May 2025 12:46:52 +0000
Subject: [PATCH 2/2] Use minus instead of trash

---
 site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index e8bb193c4e3b8..5bced6f668d0f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -13,7 +13,7 @@ import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import dayjs, { type Dayjs } from "dayjs";
 import { useTime } from "hooks/useTime";
-import { ClockIcon, PlusIcon, TrashIcon } from "lucide-react";
+import { ClockIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { getWorkspaceActivityStatus } from "modules/workspaces/activity";
 import { type FC, type ReactNode, forwardRef, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -209,7 +209,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						handleDeadlineChange(deadline.subtract(1, "h"));
 					}}
 				>
-					<TrashIcon className="size-icon-xs" />
+					<MinusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Subtract 1 hour</span>
 				</IconButton>
 			</Tooltip>