chore: replace MUI icons with Lucide icons - 8 (#17778)

1. Replaced CheckOutlined with CheckIcon in:
  - TemplateVersionStatusBadge.tsx
  - TemplateEmbedPage.tsx
  - IntervalMenu.tsx
  - WeekPicker.tsx
  - SelectMenu.tsx
2. Replaced EditCalendarOutlined with CalendarCogIcon in:
  - UserSettingsPage/Sidebar.tsx
  - Sidebar.stories.tsx
3. Replaced LockOutlined with LockIcon in:
  - UserSettingsPage/Sidebar.tsx
  - TemplateSettingsPage/Sidebar.tsx
  - Sidebar.stories.tsx
4. Replaced Person with UserIcon in:
  - UserSettingsPage/Sidebar.tsx
  - Sidebar.stories.tsx
5. Replaced VpnKeyOutlined with KeyIcon in:
  - UserSettingsPage/Sidebar.tsx
  - Sidebar.stories.tsx
6. Replaced FingerprintOutlined with FingerprintIcon in:
  - UserSettingsPage/Sidebar.tsx
  - Sidebar.stories.tsx

site/src/components/SelectMenu/SelectMenu.tsx

@@ -1,4 +1,3 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import Button, { type ButtonProps } from "@mui/material/Button";
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
@@ -12,6 +11,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
+import { CheckIcon } from "lucide-react";
 import {
 	Children,
 	type FC,
@@ -145,10 +145,7 @@ export const SelectMenuItem: FC<MenuItemProps> = (props) => {
 		>
 			{props.children}
 			{props.selected && (
-				<CheckOutlined
+				<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
-					// TODO: Don't set the menu icon font size on default theme
-					css={{ marginLeft: "auto", fontSize: "inherit !important" }}
-				/>
 			)}
 		</MenuItem>
 	);

site/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,10 +1,12 @@
-import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
-import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
-import SecurityIcon from "@mui/icons-material/LockOutlined";
-import AccountIcon from "@mui/icons-material/Person";
-import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Avatar } from "components/Avatar/Avatar";
+import {
+	CalendarCogIcon,
+	FingerprintIcon,
+	KeyIcon,
+	LockIcon,
+	UserIcon,
+} from "lucide-react";
 import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
 
 const meta: Meta<typeof Sidebar> = {
@@ -24,19 +26,19 @@ export const Default: Story = {
 					title="Jon"
 					subtitle="jon@coder.com"
 				/>
-				<SidebarNavItem href="account" icon={AccountIcon}>
+				<SidebarNavItem href="account" icon={UserIcon}>
 					Account
 				</SidebarNavItem>
-				<SidebarNavItem href="schedule" icon={ScheduleIcon}>
+				<SidebarNavItem href="schedule" icon={CalendarCogIcon}>
 					Schedule
 				</SidebarNavItem>
-				<SidebarNavItem href="security" icon={SecurityIcon}>
+				<SidebarNavItem href="security" icon={LockIcon}>
 					Security
 				</SidebarNavItem>
-				<SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
+				<SidebarNavItem href="ssh-keys" icon={FingerprintIcon}>
 					SSH Keys
 				</SidebarNavItem>
-				<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
+				<SidebarNavItem href="tokens" icon={KeyIcon}>
 					Tokens
 				</SidebarNavItem>
 			</Sidebar>

site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

@@ -1,4 +1,3 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -10,6 +9,7 @@ import { FormSection, VerticalForm } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
 import { useClipboard } from "hooks/useClipboard";
+import { CheckIcon } from "lucide-react";
 import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
 import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -187,7 +187,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 								css={{ borderRadius: 999 }}
 								startIcon={
 									clipboard.showCopiedSuccess ? (
-										<CheckOutlined />
+										<CheckIcon className="size-icon-sm" />
 									) : (
 										<FileCopyOutlined />
 									)

site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx

@@ -1,8 +1,8 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import { CheckIcon } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 
 const insightsIntervals = {
@@ -71,9 +71,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 						>
 							{label}
 							<div css={{ width: 16, height: 16 }}>
-								{value === interval && (
+								{value === interval && <CheckIcon className="size-icon-xs" />}
-									<CheckOutlined css={{ width: 16, height: 16 }} />
-								)}
 							</div>
 						</MenuItem>
 					);

site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx

@@ -1,9 +1,9 @@
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { differenceInWeeks } from "date-fns";
+import { CheckIcon } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 import type { DateRangeValue } from "./DateRange";
 import { lastWeeks } from "./utils";
@@ -71,7 +71,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 							Last {option} weeks
 							<div css={{ width: 16, height: 16 }}>
 								{numberOfWeeks === option && (
-									<CheckOutlined css={{ width: 16, height: 16 }} />
+									<CheckIcon className="size-icon-xs" />
 								)}
 							</div>
 						</MenuItem>

site/src/pages/TemplateSettingsPage/Sidebar.tsx

@@ -1,5 +1,4 @@
 import VariablesIcon from "@mui/icons-material/CodeOutlined";
-import SecurityIcon from "@mui/icons-material/LockOutlined";
 import GeneralIcon from "@mui/icons-material/SettingsOutlined";
 import ScheduleIcon from "@mui/icons-material/TimerOutlined";
 import type { Template } from "api/typesGenerated";
@@ -9,6 +8,7 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import { LockIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import type { FC } from "react";
 
@@ -35,7 +35,7 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
 			<SidebarNavItem href="" icon={GeneralIcon}>
 				General
 			</SidebarNavItem>
-			<SidebarNavItem href="permissions" icon={SecurityIcon}>
+			<SidebarNavItem href="permissions" icon={LockIcon}>
 				Permissions
 			</SidebarNavItem>
 			<SidebarNavItem href="variables" icon={VariablesIcon}>

site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

@@ -1,8 +1,7 @@
-import CheckIcon from "@mui/icons-material/CheckOutlined";
 import QueuedIcon from "@mui/icons-material/HourglassEmpty";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Pill, PillSpinner } from "components/Pill/Pill";
-import { CircleAlertIcon } from "lucide-react";
+import { CheckIcon, CircleAlertIcon } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import type { ThemeRole } from "theme/roles";
 import { getPendingStatusLabel } from "utils/provisionerJob";
@@ -70,7 +69,7 @@ const getStatus = (
 			return {
 				type: "success",
 				text: "Success",
-				icon: <CheckIcon />,
+				icon: <CheckIcon className="size-icon-sm" />,
 			};
 	}
 };

site/src/pages/UserSettingsPage/Sidebar.tsx

@@ -1,10 +1,5 @@
 import AppearanceIcon from "@mui/icons-material/Brush";
-import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
-import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
-import SecurityIcon from "@mui/icons-material/LockOutlined";
 import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
-import AccountIcon from "@mui/icons-material/Person";
-import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
 import type { User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { GitIcon } from "components/Icons/GitIcon";
@@ -13,6 +8,13 @@ import {
 	SidebarHeader,
 	SidebarNavItem,
 } from "components/Sidebar/Sidebar";
+import {
+	CalendarCogIcon,
+	FingerprintIcon,
+	KeyIcon,
+	LockIcon,
+	UserIcon,
+} from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import type { FC } from "react";
 
@@ -32,7 +34,7 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
 				title={user.username}
 				subtitle={user.email}
 			/>
-			<SidebarNavItem href="account" icon={AccountIcon}>
+			<SidebarNavItem href="account" icon={UserIcon}>
 				Account
 			</SidebarNavItem>
 			<SidebarNavItem href="appearance" icon={AppearanceIcon}>
@@ -42,17 +44,17 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
 				External Authentication
 			</SidebarNavItem>
 			{showSchedulePage && (
-				<SidebarNavItem href="schedule" icon={ScheduleIcon}>
+				<SidebarNavItem href="schedule" icon={CalendarCogIcon}>
 					Schedule
 				</SidebarNavItem>
 			)}
-			<SidebarNavItem href="security" icon={SecurityIcon}>
+			<SidebarNavItem href="security" icon={LockIcon}>
 				Security
 			</SidebarNavItem>
-			<SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
+			<SidebarNavItem href="ssh-keys" icon={FingerprintIcon}>
 				SSH Keys
 			</SidebarNavItem>
-			<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
+			<SidebarNavItem href="tokens" icon={KeyIcon}>
 				Tokens
 			</SidebarNavItem>
 			<SidebarNavItem href="notifications" icon={NotificationsIcon}>