From 57c6b0b1bf4c20c713100593861d75c4c560b2f9 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 12 May 2025 20:26:55 +0000 Subject: [PATCH 1/2] chore: replace MUI icons with Lucide icons - 8 --- site/src/components/SelectMenu/SelectMenu.tsx | 10 +++++----- .../src/components/Sidebar/Sidebar.stories.tsx | 18 +++++++----------- .../TemplateEmbedPage/TemplateEmbedPage.tsx | 6 +++--- .../TemplateInsightsPage/IntervalMenu.tsx | 6 +++--- .../TemplateInsightsPage/WeekPicker.tsx | 6 +++--- .../src/pages/TemplateSettingsPage/Sidebar.tsx | 6 +++--- .../TemplateVersionStatusBadge.tsx | 7 +++---- site/src/pages/UserSettingsPage/Sidebar.tsx | 18 +++++++----------- 8 files changed, 34 insertions(+), 43 deletions(-) diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx index e7877db30222b..ac16e335a74f2 100644 --- a/site/src/components/SelectMenu/SelectMenu.tsx +++ b/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"; @@ -7,6 +6,7 @@ import { SearchField, type SearchFieldProps, } from "components/SearchField/SearchField"; +import { CheckIcon } from "lucide-react"; import { Popover, PopoverContent, @@ -145,11 +145,11 @@ export const SelectMenuItem: FC = (props) => { > {props.children} {props.selected && ( - )} ); -}; +}; \ No newline at end of file diff --git a/site/src/components/Sidebar/Sidebar.stories.tsx b/site/src/components/Sidebar/Sidebar.stories.tsx index 6f8d578230b7a..548ee70f46849 100644 --- a/site/src/components/Sidebar/Sidebar.stories.tsx +++ b/site/src/components/Sidebar/Sidebar.stories.tsx @@ -1,8 +1,4 @@ -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 { CalendarCogIcon, FingerprintIcon, KeyIcon, LockIcon, UserIcon } from "lucide-react"; import type { Meta, StoryObj } from "@storybook/react"; import { Avatar } from "components/Avatar/Avatar"; import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar"; @@ -24,22 +20,22 @@ export const Default: Story = { title="Jon" subtitle="jon@coder.com" /> - + Account - + Schedule - + Security - + SSH Keys - + Tokens ), }, -}; +}; \ No newline at end of file diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx index 24aa6a8e7068b..d61bd48d189c1 100644 --- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx +++ b/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"; @@ -6,6 +5,7 @@ import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; import { API } from "api/api"; import type { Template, TemplateVersionParameter } from "api/typesGenerated"; +import { CheckIcon } from "lucide-react"; import { FormSection, VerticalForm } from "components/Form/Form"; import { Loader } from "components/Loader/Loader"; import { RichParameterInput } from "components/RichParameterInput/RichParameterInput"; @@ -187,7 +187,7 @@ export const TemplateEmbedPageView: FC = ({ css={{ borderRadius: 999 }} startIcon={ clipboard.showCopiedSuccess ? ( - + ) : ( ) @@ -206,4 +206,4 @@ export const TemplateEmbedPageView: FC = ({ ); }; -export default TemplateEmbedPage; +export default TemplateEmbedPage; \ No newline at end of file diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index 9386f0916629c..cc783424960df 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/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 = { @@ -72,7 +72,7 @@ export const IntervalMenu: FC = ({ value, onChange }) => { {label}
{value === interval && ( - + )}
@@ -81,4 +81,4 @@ export const IntervalMenu: FC = ({ value, onChange }) => { ); -}; +}; \ No newline at end of file diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx index fcea07639eb4c..fd7777de0190b 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx +++ b/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 = ({ value, onChange }) => { Last {option} weeks
{numberOfWeeks === option && ( - + )}
@@ -80,4 +80,4 @@ export const WeekPicker: FC = ({ value, onChange }) => { ); -}; +}; \ No newline at end of file diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index d9ba11f642a52..d26e905eaf5d0 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -1,7 +1,7 @@ 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 { LockIcon } from "lucide-react"; import type { Template } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { @@ -35,7 +35,7 @@ export const Sidebar: FC = ({ template }) => { General - + Permissions @@ -46,4 +46,4 @@ export const Sidebar: FC = ({ template }) => { ); -}; +}; \ No newline at end of file diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index cfee103357422..d4c81832072ca 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/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: , + icon: , }; } -}; +}; \ No newline at end of file diff --git a/site/src/pages/UserSettingsPage/Sidebar.tsx b/site/src/pages/UserSettingsPage/Sidebar.tsx index 4a1e44bd16dd0..590abb047d110 100644 --- a/site/src/pages/UserSettingsPage/Sidebar.tsx +++ b/site/src/pages/UserSettingsPage/Sidebar.tsx @@ -1,10 +1,6 @@ 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 { CalendarCogIcon, FingerprintIcon, KeyIcon, LockIcon, UserIcon } from "lucide-react"; import type { User } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { GitIcon } from "components/Icons/GitIcon"; @@ -32,7 +28,7 @@ export const Sidebar: FC = ({ user }) => { title={user.username} subtitle={user.email} /> - + Account @@ -42,17 +38,17 @@ export const Sidebar: FC = ({ user }) => { External Authentication {showSchedulePage && ( - + Schedule )} - + Security - + SSH Keys - + Tokens @@ -60,4 +56,4 @@ export const Sidebar: FC = ({ user }) => { ); -}; +}; \ No newline at end of file From 4dcd7e3fc9695091349ad3c53ea649a274058f15 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Mon, 12 May 2025 20:29:00 +0000 Subject: [PATCH 2/2] FMT --- site/src/components/SelectMenu/SelectMenu.tsx | 9 +++------ site/src/components/Sidebar/Sidebar.stories.tsx | 10 ++++++++-- .../TemplateEmbedPage/TemplateEmbedPage.tsx | 4 ++-- .../TemplatePage/TemplateInsightsPage/IntervalMenu.tsx | 6 ++---- .../TemplatePage/TemplateInsightsPage/WeekPicker.tsx | 2 +- site/src/pages/TemplateSettingsPage/Sidebar.tsx | 4 ++-- .../TemplateVersionStatusBadge.tsx | 2 +- site/src/pages/UserSettingsPage/Sidebar.tsx | 10 ++++++++-- 8 files changed, 27 insertions(+), 20 deletions(-) diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx index ac16e335a74f2..57164c0c3dbe6 100644 --- a/site/src/components/SelectMenu/SelectMenu.tsx +++ b/site/src/components/SelectMenu/SelectMenu.tsx @@ -6,12 +6,12 @@ import { SearchField, type SearchFieldProps, } from "components/SearchField/SearchField"; -import { CheckIcon } from "lucide-react"; import { Popover, PopoverContent, PopoverTrigger, } from "components/deprecated/Popover/Popover"; +import { CheckIcon } from "lucide-react"; import { Children, type FC, @@ -145,11 +145,8 @@ export const SelectMenuItem: FC = (props) => { > {props.children} {props.selected && ( - + )} ); -}; \ No newline at end of file +}; diff --git a/site/src/components/Sidebar/Sidebar.stories.tsx b/site/src/components/Sidebar/Sidebar.stories.tsx index 548ee70f46849..075de1e584ca2 100644 --- a/site/src/components/Sidebar/Sidebar.stories.tsx +++ b/site/src/components/Sidebar/Sidebar.stories.tsx @@ -1,6 +1,12 @@ -import { CalendarCogIcon, FingerprintIcon, KeyIcon, LockIcon, UserIcon } from "lucide-react"; 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 = { @@ -38,4 +44,4 @@ export const Default: Story = { ), }, -}; \ No newline at end of file +}; diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx index d61bd48d189c1..bcbab3fe49ad2 100644 --- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx +++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx @@ -5,11 +5,11 @@ import Radio from "@mui/material/Radio"; import RadioGroup from "@mui/material/RadioGroup"; import { API } from "api/api"; import type { Template, TemplateVersionParameter } from "api/typesGenerated"; -import { CheckIcon } from "lucide-react"; 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"; @@ -206,4 +206,4 @@ export const TemplateEmbedPageView: FC = ({ ); }; -export default TemplateEmbedPage; \ No newline at end of file +export default TemplateEmbedPage; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx index cc783424960df..6f14cb0e38e75 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx @@ -71,9 +71,7 @@ export const IntervalMenu: FC = ({ value, onChange }) => { > {label}
- {value === interval && ( - - )} + {value === interval && }
); @@ -81,4 +79,4 @@ export const IntervalMenu: FC = ({ value, onChange }) => { ); -}; \ No newline at end of file +}; diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx index fd7777de0190b..36b6fb65e7e9f 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx @@ -80,4 +80,4 @@ export const WeekPicker: FC = ({ value, onChange }) => { ); -}; \ No newline at end of file +}; diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index d26e905eaf5d0..e872effe88c05 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -1,7 +1,6 @@ import VariablesIcon from "@mui/icons-material/CodeOutlined"; import GeneralIcon from "@mui/icons-material/SettingsOutlined"; import ScheduleIcon from "@mui/icons-material/TimerOutlined"; -import { LockIcon } from "lucide-react"; import type { Template } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { @@ -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"; @@ -46,4 +46,4 @@ export const Sidebar: FC = ({ template }) => { ); -}; \ No newline at end of file +}; diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index d4c81832072ca..ac91c470fd3e2 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx @@ -72,4 +72,4 @@ const getStatus = ( icon: , }; } -}; \ No newline at end of file +}; diff --git a/site/src/pages/UserSettingsPage/Sidebar.tsx b/site/src/pages/UserSettingsPage/Sidebar.tsx index 590abb047d110..5503f32799aad 100644 --- a/site/src/pages/UserSettingsPage/Sidebar.tsx +++ b/site/src/pages/UserSettingsPage/Sidebar.tsx @@ -1,6 +1,5 @@ import AppearanceIcon from "@mui/icons-material/Brush"; import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined"; -import { CalendarCogIcon, FingerprintIcon, KeyIcon, LockIcon, UserIcon } from "lucide-react"; import type { User } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { GitIcon } from "components/Icons/GitIcon"; @@ -9,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"; @@ -56,4 +62,4 @@ export const Sidebar: FC = ({ user }) => { ); -}; \ No newline at end of file +};