Skip to content

Commit eb9a651

Browse files
BrunoQuaresmaBrunoQuaresma
authored
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
1 parent 02425ee commit eb9a651

File tree

8 files changed

+36
-38
lines changed

8 files changed

+36
-38
lines changed

‎site/src/components/SelectMenu/SelectMenu.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import CheckOutlined from "@mui/icons-material/CheckOutlined";
21
import Button, { type ButtonProps } from "@mui/material/Button";
32
import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
43
import MenuList, { type MenuListProps } from "@mui/material/MenuList";
@@ -12,6 +11,7 @@ import {
1211
PopoverContent,
1312
PopoverTrigger,
1413
} from "components/deprecated/Popover/Popover";
14+
import { CheckIcon } from "lucide-react";
1515
import {
1616
Children,
1717
type FC,
@@ -145,10 +145,7 @@ export const SelectMenuItem: FC<MenuItemProps> = (props) => {
145145
>
146146
{props.children}
147147
{props.selected && (
148-
<CheckOutlined
149-
// TODO: Don't set the menu icon font size on default theme
150-
css={{ marginLeft: "auto", fontSize: "inherit !important" }}
151-
/>
148+
<CheckIcon className="size-icon-xs" css={{ marginLeft: "auto" }} />
152149
)}
153150
</MenuItem>
154151
);

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

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
2-
import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
3-
import SecurityIcon from "@mui/icons-material/LockOutlined";
4-
import AccountIcon from "@mui/icons-material/Person";
5-
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
61
import type { Meta, StoryObj } from "@storybook/react";
72
import { Avatar } from "components/Avatar/Avatar";
3+
import {
4+
CalendarCogIcon,
5+
FingerprintIcon,
6+
KeyIcon,
7+
LockIcon,
8+
UserIcon,
9+
} from "lucide-react";
810
import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
911

1012
const meta: Meta<typeof Sidebar> = {
@@ -24,19 +26,19 @@ export const Default: Story = {
2426
title="Jon"
2527
subtitle="jon@coder.com"
2628
/>
27-
<SidebarNavItem href="account" icon={AccountIcon}>
29+
<SidebarNavItem href="account" icon={UserIcon}>
2830
Account
2931
</SidebarNavItem>
30-
<SidebarNavItem href="schedule" icon={ScheduleIcon}>
32+
<SidebarNavItem href="schedule" icon={CalendarCogIcon}>
3133
Schedule
3234
</SidebarNavItem>
33-
<SidebarNavItem href="security" icon={SecurityIcon}>
35+
<SidebarNavItem href="security" icon={LockIcon}>
3436
Security
3537
</SidebarNavItem>
36-
<SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
38+
<SidebarNavItem href="ssh-keys" icon={FingerprintIcon}>
3739
SSH Keys
3840
</SidebarNavItem>
39-
<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
41+
<SidebarNavItem href="tokens" icon={KeyIcon}>
4042
Tokens
4143
</SidebarNavItem>
4244
</Sidebar>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import CheckOutlined from "@mui/icons-material/CheckOutlined";
21
import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
32
import Button from "@mui/material/Button";
43
import FormControlLabel from "@mui/material/FormControlLabel";
@@ -10,6 +9,7 @@ import { FormSection, VerticalForm } from "components/Form/Form";
109
import { Loader } from "components/Loader/Loader";
1110
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
1211
import { useClipboard } from "hooks/useClipboard";
12+
import { CheckIcon } from "lucide-react";
1313
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
1414
import { type FC, useEffect, useState } from "react";
1515
import { Helmet } from "react-helmet-async";
@@ -187,7 +187,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
187187
css={{ borderRadius: 999 }}
188188
startIcon={
189189
clipboard.showCopiedSuccess ? (
190-
<CheckOutlined />
190+
<CheckIcon className="size-icon-sm" />
191191
) : (
192192
<FileCopyOutlined />
193193
)

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import CheckOutlined from "@mui/icons-material/CheckOutlined";
21
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
32
import Button from "@mui/material/Button";
43
import Menu from "@mui/material/Menu";
54
import MenuItem from "@mui/material/MenuItem";
5+
import { CheckIcon } from "lucide-react";
66
import { type FC, useRef, useState } from "react";
77

88
const insightsIntervals = {
@@ -71,9 +71,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
7171
>
7272
{label}
7373
<div css={{ width: 16, height: 16 }}>
74-
{value === interval && (
75-
<CheckOutlined css={{ width: 16, height: 16 }} />
76-
)}
74+
{value === interval && <CheckIcon className="size-icon-xs" />}
7775
</div>
7876
</MenuItem>
7977
);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import CheckOutlined from "@mui/icons-material/CheckOutlined";
21
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
32
import Button from "@mui/material/Button";
43
import Menu from "@mui/material/Menu";
54
import MenuItem from "@mui/material/MenuItem";
65
import { differenceInWeeks } from "date-fns";
6+
import { CheckIcon } from "lucide-react";
77
import { type FC, useRef, useState } from "react";
88
import type { DateRangeValue } from "./DateRange";
99
import { lastWeeks } from "./utils";
@@ -71,7 +71,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
7171
Last {option} weeks
7272
<div css={{ width: 16, height: 16 }}>
7373
{numberOfWeeks === option && (
74-
<CheckOutlined css={{ width: 16, height: 16 }} />
74+
<CheckIcon className="size-icon-xs" />
7575
)}
7676
</div>
7777
</MenuItem>

‎site/src/pages/TemplateSettingsPage/Sidebar.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import VariablesIcon from "@mui/icons-material/CodeOutlined";
2-
import SecurityIcon from "@mui/icons-material/LockOutlined";
32
import GeneralIcon from "@mui/icons-material/SettingsOutlined";
43
import ScheduleIcon from "@mui/icons-material/TimerOutlined";
54
import type { Template } from "api/typesGenerated";
@@ -9,6 +8,7 @@ import {
98
SidebarHeader,
109
SidebarNavItem,
1110
} from "components/Sidebar/Sidebar";
11+
import { LockIcon } from "lucide-react";
1212
import { linkToTemplate, useLinks } from "modules/navigation";
1313
import type { FC } from "react";
1414

@@ -35,7 +35,7 @@ export const Sidebar: FC<SidebarProps> = ({ template }) => {
3535
<SidebarNavItem href="" icon={GeneralIcon}>
3636
General
3737
</SidebarNavItem>
38-
<SidebarNavItem href="permissions" icon={SecurityIcon}>
38+
<SidebarNavItem href="permissions" icon={LockIcon}>
3939
Permissions
4040
</SidebarNavItem>
4141
<SidebarNavItem href="variables" icon={VariablesIcon}>

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import CheckIcon from "@mui/icons-material/CheckOutlined";
21
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
32
import type { TemplateVersion } from "api/typesGenerated";
43
import { Pill, PillSpinner } from "components/Pill/Pill";
5-
import { CircleAlertIcon } from "lucide-react";
4+
import { CheckIcon, CircleAlertIcon } from "lucide-react";
65
import type { FC, ReactNode } from "react";
76
import type { ThemeRole } from "theme/roles";
87
import { getPendingStatusLabel } from "utils/provisionerJob";
@@ -70,7 +69,7 @@ const getStatus = (
7069
return {
7170
type: "success",
7271
text: "Success",
73-
icon: <CheckIcon />,
72+
icon: <CheckIcon className="size-icon-sm" />,
7473
};
7574
}
7675
};

‎site/src/pages/UserSettingsPage/Sidebar.tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import AppearanceIcon from "@mui/icons-material/Brush";
2-
import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
3-
import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
4-
import SecurityIcon from "@mui/icons-material/LockOutlined";
52
import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
6-
import AccountIcon from "@mui/icons-material/Person";
7-
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
83
import type { User } from "api/typesGenerated";
94
import { Avatar } from "components/Avatar/Avatar";
105
import { GitIcon } from "components/Icons/GitIcon";
@@ -13,6 +8,13 @@ import {
138
SidebarHeader,
149
SidebarNavItem,
1510
} from "components/Sidebar/Sidebar";
11+
import {
12+
CalendarCogIcon,
13+
FingerprintIcon,
14+
KeyIcon,
15+
LockIcon,
16+
UserIcon,
17+
} from "lucide-react";
1618
import { useDashboard } from "modules/dashboard/useDashboard";
1719
import type { FC } from "react";
1820

@@ -32,7 +34,7 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
3234
title={user.username}
3335
subtitle={user.email}
3436
/>
35-
<SidebarNavItem href="account" icon={AccountIcon}>
37+
<SidebarNavItem href="account" icon={UserIcon}>
3638
Account
3739
</SidebarNavItem>
3840
<SidebarNavItem href="appearance" icon={AppearanceIcon}>
@@ -42,17 +44,17 @@ export const Sidebar: FC<SidebarProps> = ({ user }) => {
4244
External Authentication
4345
</SidebarNavItem>
4446
{showSchedulePage && (
45-
<SidebarNavItem href="schedule" icon={ScheduleIcon}>
47+
<SidebarNavItem href="schedule" icon={CalendarCogIcon}>
4648
Schedule
4749
</SidebarNavItem>
4850
)}
49-
<SidebarNavItem href="security" icon={SecurityIcon}>
51+
<SidebarNavItem href="security" icon={LockIcon}>
5052
Security
5153
</SidebarNavItem>
52-
<SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
54+
<SidebarNavItem href="ssh-keys" icon={FingerprintIcon}>
5355
SSH Keys
5456
</SidebarNavItem>
55-
<SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
57+
<SidebarNavItem href="tokens" icon={KeyIcon}>
5658
Tokens
5759
</SidebarNavItem>
5860
<SidebarNavItem href="notifications" icon={NotificationsIcon}>

0 commit comments

Comments
 (0)