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

Lines changed: 2 additions & 5 deletions
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

Lines changed: 12 additions & 10 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 4 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 2 additions & 3 deletions
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

Lines changed: 12 additions & 10 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy