From f87dbe757ecba39710e4f7ff681d04feda96c844 Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Wed, 14 May 2025 08:48:08 -0300 Subject: [PATCH] chore: replace MUI icons with Lucide icons - 11 (#17814) PersonOutlined -> UserIcon Schedule -> ClockIcon SettingsSuggest -> SettingsIcon SettingsOutlined -> SettingsIcon CodeOutlined -> CodeIcon TimerOutlined -> TimerIcon --- site/src/pages/HealthPage/DERPRegionPage.tsx | 6 ++++-- site/src/pages/HealthPage/WebsocketPage.tsx | 6 ++++-- .../pages/TemplatePage/TemplatePageHeader.tsx | 4 ++-- site/src/pages/TemplateSettingsPage/Sidebar.tsx | 4 ++-- site/src/pages/WorkspaceSettingsPage/Sidebar.tsx | 6 +++--- .../WorkspacesPage/BatchDeleteConfirmation.tsx | 13 +++++-------- .../WorkspacesPage/BatchUpdateConfirmation.tsx | 16 ++++++---------- 7 files changed, 26 insertions(+), 29 deletions(-) diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx index 4a1be16138..a32350e7af 100644 --- a/site/src/pages/HealthPage/DERPRegionPage.tsx +++ b/site/src/pages/HealthPage/DERPRegionPage.tsx @@ -1,6 +1,5 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined"; -import CodeOutlined from "@mui/icons-material/CodeOutlined"; import TagOutlined from "@mui/icons-material/TagOutlined"; import Tooltip from "@mui/material/Tooltip"; import type { @@ -11,6 +10,7 @@ import type { HealthcheckReport, } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; +import { CodeIcon } from "lucide-react"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { Link, useOutletContext, useParams } from "react-router-dom"; @@ -94,7 +94,9 @@ const DERPRegionPage: FC = () => { }>{region!.RegionID} - }>{region!.RegionCode} + }> + {region!.RegionCode} + Embedded Relay diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx index a3f4a92d4d..fed223163e 100644 --- a/site/src/pages/HealthPage/WebsocketPage.tsx +++ b/site/src/pages/HealthPage/WebsocketPage.tsx @@ -1,8 +1,8 @@ import { useTheme } from "@emotion/react"; -import CodeOutlined from "@mui/icons-material/CodeOutlined"; import Tooltip from "@mui/material/Tooltip"; import type { HealthcheckReport } from "api/typesGenerated"; import { Alert } from "components/Alert/Alert"; +import { CodeIcon } from "lucide-react"; import { Helmet } from "react-helmet-async"; import { useOutletContext } from "react-router-dom"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; @@ -49,7 +49,9 @@ const WebsocketPage = () => {
- }>{websocket.code} + }> + {websocket.code} +
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx index 48fe621f2b..834c83905c 100644 --- a/site/src/pages/TemplatePage/TemplatePageHeader.tsx +++ b/site/src/pages/TemplatePage/TemplatePageHeader.tsx @@ -1,7 +1,6 @@ import AddIcon from "@mui/icons-material/AddOutlined"; import EditIcon from "@mui/icons-material/EditOutlined"; import CopyIcon from "@mui/icons-material/FileCopyOutlined"; -import SettingsIcon from "@mui/icons-material/SettingsOutlined"; import Button from "@mui/material/Button"; import { workspaces } from "api/queries/workspaces"; import type { @@ -29,6 +28,7 @@ import { } from "components/PageHeader/PageHeader"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; +import { SettingsIcon } from "lucide-react"; import { TrashIcon } from "lucide-react"; import { EllipsisVertical } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; @@ -79,7 +79,7 @@ const TemplateMenu: FC = ({ navigate(`${templateLink}/settings`)} > - + Settings diff --git a/site/src/pages/TemplateSettingsPage/Sidebar.tsx b/site/src/pages/TemplateSettingsPage/Sidebar.tsx index f8b41f7829..1aaa426061 100644 --- a/site/src/pages/TemplateSettingsPage/Sidebar.tsx +++ b/site/src/pages/TemplateSettingsPage/Sidebar.tsx @@ -1,5 +1,3 @@ -import VariablesIcon from "@mui/icons-material/CodeOutlined"; -import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Template } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { @@ -7,6 +5,8 @@ import { SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; +import { CodeIcon as VariablesIcon } from "lucide-react"; +import { TimerIcon as ScheduleIcon } from "lucide-react"; import { SettingsIcon } from "lucide-react"; import { LockIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index 604fc2ed70..91aea9ac9c 100644 --- a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx +++ b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx @@ -1,6 +1,3 @@ -import ParameterIcon from "@mui/icons-material/CodeOutlined"; -import GeneralIcon from "@mui/icons-material/SettingsOutlined"; -import ScheduleIcon from "@mui/icons-material/TimerOutlined"; import type { Workspace } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { @@ -8,6 +5,9 @@ import { SidebarHeader, SidebarNavItem, } from "components/Sidebar/Sidebar"; +import { CodeIcon as ParameterIcon } from "lucide-react"; +import { SettingsIcon as GeneralIcon } from "lucide-react"; +import { TimerIcon as ScheduleIcon } from "lucide-react"; import type { FC } from "react"; interface SidebarProps { diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx index a4a79c0c1e..587cecf25e 100644 --- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx +++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx @@ -1,6 +1,4 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; -import ScheduleIcon from "@mui/icons-material/Schedule"; import { visuallyHidden } from "@mui/utils"; import type { Workspace } from "api/typesGenerated"; import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog"; @@ -8,6 +6,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { Stack } from "components/Stack/Stack"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; +import { ClockIcon, UserIcon } from "lucide-react"; import { type FC, type ReactNode, useState } from "react"; import { getResourceIconPath } from "utils/workspace"; @@ -190,7 +189,7 @@ const Workspaces: FC = ({ workspaces }) => { > {dayjs(workspace.last_used_at).fromNow()} - + @@ -209,7 +208,7 @@ const Workspaces: FC = ({ workspaces }) => { {mostRecent && ( - + Last used {dayjs(mostRecent.last_used_at).fromNow()} )} @@ -264,10 +263,8 @@ const Resources: FC = ({ workspaces }) => { }; const PersonIcon: FC = () => { - // This size doesn't match the rest of the icons because MUI is just really - // inconsistent. We have to make it bigger than the rest, and pull things in - // on the sides to compensate. - return ; + // Using the Lucide icon with appropriate size class + return ; }; const styles = { diff --git a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx index bd4fef445b..ac36009dac 100644 --- a/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx +++ b/site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx @@ -1,8 +1,5 @@ import type { Interpolation, Theme } from "@emotion/react"; import InstallDesktopIcon from "@mui/icons-material/InstallDesktop"; -import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined"; -import ScheduleIcon from "@mui/icons-material/Schedule"; -import SettingsSuggestIcon from "@mui/icons-material/SettingsSuggest"; import { API } from "api/api"; import type { TemplateVersion, Workspace } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; @@ -12,6 +9,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown"; import { Stack } from "components/Stack/Stack"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; +import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react"; import { type FC, type ReactNode, useEffect, useMemo, useState } from "react"; import { useQueries } from "react-query"; @@ -293,7 +291,7 @@ const DormantWorkspaces: FC = ({ workspaces }) => { - + @@ -317,7 +315,7 @@ const DormantWorkspaces: FC = ({ workspaces }) => { {mostRecent && ( - + Last used {lastUsed(mostRecent.last_used_at)} )} @@ -358,7 +356,7 @@ const Updates: FC = ({ workspaces, updates, error }) => { {updateCount && ( - + {updateCount} )} @@ -433,10 +431,8 @@ const lastUsed = (time: string) => { }; const PersonIcon: FC = () => { - // This size doesn't match the rest of the icons because MUI is just really - // inconsistent. We have to make it bigger than the rest, and pull things in - // on the sides to compensate. - return ; + // Using the Lucide icon with appropriate size class + return ; }; const styles = {