From 821374d773b474b5038cc0c0a7821f57d2d96b2e Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 8 May 2025 20:15:05 +0000
Subject: [PATCH 1/3] chore: replace MUI icons #2

---
 site/src/components/CopyButton/CopyButton.tsx              | 4 ++--
 site/src/components/DropdownArrow/DropdownArrow.tsx        | 5 ++---
 site/src/components/DurationField/DurationField.tsx        | 4 ++--
 site/src/components/Filter/Filter.tsx                      | 4 ++--
 site/src/modules/resources/PortForwardButton.tsx           | 4 ++--
 site/src/modules/resources/SSHButton/SSHButton.tsx         | 6 +++---
 .../workspaces/WorkspaceTiming/WorkspaceTimings.tsx        | 7 +++----
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx       | 4 ++--
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx          | 6 +++---
 9 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
index c52ba5b26c204..86a14c2a2ff48 100644
--- a/site/src/components/CopyButton/CopyButton.tsx
+++ b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme, css } from "@emotion/react";
-import Check from "@mui/icons-material/Check";
 import IconButton from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon } from "lucide-react";
 import { type ReactNode, forwardRef } from "react";
 import { FileCopyIcon } from "../Icons/FileCopyIcon";
 
@@ -48,7 +48,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
 						onClick={copyToClipboard}
 					>
 						{showCopiedSuccess ? (
-							<Check css={styles.copyIcon} />
+							<CheckIcon css={styles.copyIcon} />
 						) : (
 							<FileCopyIcon css={styles.copyIcon} />
 						)}
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
index daa7fd415a08f..a791f2e26e1cc 100644
--- a/site/src/components/DropdownArrow/DropdownArrow.tsx
+++ b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface ArrowProps {
@@ -14,7 +13,7 @@ export const DropdownArrow: FC<ArrowProps> = ({
 	color,
 	close,
 }) => {
-	const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
+	const Arrow = close ? ChevronUpIcon : ChevronDownIcon;
 
 	return (
 		<Arrow
diff --git a/site/src/components/DurationField/DurationField.tsx b/site/src/components/DurationField/DurationField.tsx
index 9fa6e1229940d..1f7bb861e9c52 100644
--- a/site/src/components/DurationField/DurationField.tsx
+++ b/site/src/components/DurationField/DurationField.tsx
@@ -1,4 +1,4 @@
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { ChevronDownIcon } from "lucide-react";
 import FormHelperText from "@mui/material/FormHelperText";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
@@ -126,7 +126,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
 						});
 					}}
 					inputProps={{ "aria-label": "Time unit" }}
-					IconComponent={KeyboardArrowDown}
+					IconComponent={ChevronDownIcon}
 				>
 					<MenuItem value="hours">Hours</MenuItem>
 					<MenuItem
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 7129351db2f58..8bec5cc094626 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { ChevronDownIcon } from "lucide-react";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
@@ -267,7 +267,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 			<Button
 				onClick={() => setIsOpen(true)}
 				ref={anchorRef}
-				endIcon={<KeyboardArrowDown />}
+				endIcon={<ChevronDownIcon className="size-4" />}
 			>
 				Filters
 			</Button>
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index b83a26cbfb32c..bb449a0fcecfe 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -1,7 +1,7 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import LockIcon from "@mui/icons-material/Lock";
+import { ChevronDownIcon } from "lucide-react";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import SensorsIcon from "@mui/icons-material/Sensors";
@@ -82,7 +82,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
 					disabled={!portsQuery.data}
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 					startIcon={
 						portsQuery.data ? (
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index d5351a3ff5466..0444d445fe781 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { ChevronDownIcon } from "lucide-react";
 import Button from "@mui/material/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import {
@@ -36,7 +36,7 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
 				<Button
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH
@@ -98,7 +98,7 @@ export const AgentDevcontainerSSHButton: FC<
 				<Button
 					size="small"
 					variant="text"
-					endIcon={<KeyboardArrowDown />}
+					endIcon={<ChevronDownIcon className="size-4" />}
 					css={{ fontSize: 13, padding: "8px 12px" }}
 				>
 					Connect via SSH
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
index 2cb0a7c20d5d8..089a5499fbe5c 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
+++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
@@ -102,9 +101,9 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				onClick={() => setIsOpen((o) => !o)}
 			>
 				{isOpen ? (
-					<KeyboardArrowUp css={{ fontSize: 16, marginRight: 16 }} />
+					<ChevronUpIcon css={{ width: 16, height: 16, marginRight: 16 }} />
 				) : (
-					<KeyboardArrowDown css={{ fontSize: 16, marginRight: 16 }} />
+					<ChevronDownIcon css={{ width: 16, height: 16, marginRight: 16 }} />
 				)}
 				<span>Build timeline</span>
 				<span
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 6633f884e1263..bea49f1b11f38 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,8 +1,8 @@
 import CloudQueue from "@mui/icons-material/CloudQueue";
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
-import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
 import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
 import StopOutlined from "@mui/icons-material/StopOutlined";
+import { ChevronDownIcon } from "lucide-react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
@@ -144,7 +144,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									variant="text"
 									size="small"
 									css={{ borderRadius: 9999, marginLeft: "auto" }}
-									endIcon={<KeyboardArrowDownOutlined />}
+									endIcon={<ChevronDownIcon className="size-4" />}
 								>
 									Actions
 								</LoadingButton>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index b4f1c98b27261..468b327f44d7b 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -1,4 +1,4 @@
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import { ChevronRightIcon } from "lucide-react";
 import Star from "@mui/icons-material/Star";
 import Checkbox from "@mui/material/Checkbox";
 import Skeleton from "@mui/material/Skeleton";
@@ -303,7 +303,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 							/>
 							<TableCell>
 								<div className="flex">
-									<KeyboardArrowRight className="text-content-secondary size-icon-sm" />
+									<ChevronRightIcon className="text-content-secondary size-icon-sm" />
 								</div>
 							</TableCell>
 						</WorkspacesRow>
@@ -385,7 +385,7 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
 				</TableCell>
 				<TableCell>
 					<div className="flex">
-						<KeyboardArrowRight className="text-content-disabled size-icon-sm" />
+						<ChevronRightIcon className="text-content-disabled size-icon-sm" />
 					</div>
 				</TableCell>
 			</TableRowSkeleton>

From c81d99c95ab883b45270b9beb6b8aaf8c1624ce3 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 9 May 2025 14:16:32 +0000
Subject: [PATCH 2/3] Run fmt

---
 site/src/components/DurationField/DurationField.tsx             | 2 +-
 site/src/components/Filter/Filter.tsx                           | 2 +-
 site/src/modules/resources/PortForwardButton.tsx                | 2 +-
 site/src/modules/resources/SSHButton/SSHButton.tsx              | 2 +-
 .../src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx | 2 +-
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx            | 2 +-
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx               | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/src/components/DurationField/DurationField.tsx b/site/src/components/DurationField/DurationField.tsx
index 1f7bb861e9c52..7ee5153964164 100644
--- a/site/src/components/DurationField/DurationField.tsx
+++ b/site/src/components/DurationField/DurationField.tsx
@@ -1,8 +1,8 @@
-import { ChevronDownIcon } from "lucide-react";
 import FormHelperText from "@mui/material/FormHelperText";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, useEffect, useReducer } from "react";
 import {
 	type TimeUnit,
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 8bec5cc094626..66b0312f804c1 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import { ChevronDownIcon } from "lucide-react";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
@@ -15,6 +14,7 @@ import {
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
 import type { useSearchParams } from "react-router-dom";
 
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index bb449a0fcecfe..3921d5266ef2d 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -1,7 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CloseIcon from "@mui/icons-material/Close";
 import LockIcon from "@mui/icons-material/Lock";
-import { ChevronDownIcon } from "lucide-react";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
 import SensorsIcon from "@mui/icons-material/Sensors";
@@ -42,6 +41,7 @@ import {
 } from "components/deprecated/Popover/Popover";
 import { type FormikContextType, useFormik } from "formik";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { ChevronDownIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { type FC, useState } from "react";
 import { useMutation, useQuery } from "react-query";
diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx
index 0444d445fe781..2673d8a8e2241 100644
--- a/site/src/modules/resources/SSHButton/SSHButton.tsx
+++ b/site/src/modules/resources/SSHButton/SSHButton.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { ChevronDownIcon } from "lucide-react";
 import Button from "@mui/material/Button";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import {
@@ -14,6 +13,7 @@ import {
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
 import { type ClassName, useClassName } from "hooks/useClassName";
+import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 import { docs } from "utils/docs";
 
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
index 089a5499fbe5c..8b3f42c7b93e3 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
+++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
@@ -10,6 +9,7 @@ import type {
 } from "api/typesGenerated";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import {
 	type TimeRange,
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index bea49f1b11f38..0dbf6be62d6d9 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -2,7 +2,6 @@ import CloudQueue from "@mui/icons-material/CloudQueue";
 import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
 import StopOutlined from "@mui/icons-material/StopOutlined";
-import { ChevronDownIcon } from "lucide-react";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, Workspace } from "api/typesGenerated";
@@ -22,6 +21,7 @@ import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
+import { ChevronDownIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
 import type { UseQueryResult } from "react-query";
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 468b327f44d7b..90f675e35af67 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -1,4 +1,3 @@
-import { ChevronRightIcon } from "lucide-react";
 import Star from "@mui/icons-material/Star";
 import Checkbox from "@mui/material/Checkbox";
 import Skeleton from "@mui/material/Skeleton";
@@ -52,6 +51,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useAuthenticated } from "hooks";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
+import { ChevronRightIcon } from "lucide-react";
 import {
 	BanIcon,
 	PlayIcon,

From 66a4787f6331472504f70c4c633f7f459f7334db Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 9 May 2025 14:18:45 +0000
Subject: [PATCH 3/3] Run FMT

---
 site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 80f97c3ed04ee..a62c99d591d7c 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -18,7 +18,7 @@ import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { Stack } from "components/Stack/Stack";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
-import { PlayIcon, SquareIcon, TrashIcon, ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
 import type { FC } from "react";
 import type { UseQueryResult } from "react-query";