opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace MUI icons with Lucide icons - 11 (#17814)

Browse Source 
PersonOutlined -> UserIcon
Schedule -> ClockIcon
SettingsSuggest -> SettingsIcon
SettingsOutlined -> SettingsIcon
CodeOutlined -> CodeIcon
TimerOutlined -> TimerIcon
This commit is contained in:
Bruno Quaresma
2025-05-14 08:48:08 -03:00
committed by GitHub
parent c71839294b
commit f87dbe757e
7 changed files with 26 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/pages/HealthPage/DERPRegionPage.tsx
+4 -2
View File
@@ -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 = () => {
<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
</Tooltip>
<Tooltip title="Region Code">
<Pill icon={<CodeOutlined />}>{region!.RegionCode}</Pill>
<Pill icon={<CodeIcon className="size-icon-sm" />}>
{region!.RegionCode}
</Pill>
</Tooltip>
<BooleanPill value={region!.EmbeddedRelay}>
Embedded Relay
site/src/pages/HealthPage/WebsocketPage.tsx
+4 -2
View File
@@ -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 = () => {
<section>
<Tooltip title="Code">
<Pill icon={<CodeOutlined />}>{websocket.code}</Pill>
<Pill icon={<CodeIcon className="size-icon-sm" />}>
{websocket.code}
</Pill>
</Tooltip>
</section>
site/src/pages/TemplatePage/TemplatePageHeader.tsx
+2 -2
View File
@@ -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<TemplateMenuProps> = ({
<DropdownMenuItem
onClick={() => navigate(`${templateLink}/settings`)}
>
<SettingsIcon />
<SettingsIcon className="size-icon-sm" />
Settings
</DropdownMenuItem>
site/src/pages/TemplateSettingsPage/Sidebar.tsx
+2 -2
View File
@@ -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";
site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
+3 -3
View File
@@ -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 {
site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx
+5 -8
View File
@@ -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<StageProps> = ({ workspaces }) => {
>
{dayjs(workspace.last_used_at).fromNow()}
</span>
<ScheduleIcon css={styles.summaryIcon} />
<ClockIcon className="size-icon-xs" />
</Stack>
</Stack>
</Stack>
@@ -209,7 +208,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
</Stack>
{mostRecent && (
<Stack direction="row" alignItems="center" spacing={1}>
<ScheduleIcon css={styles.summaryIcon} />
<ClockIcon className="size-icon-xs" />
<span>Last used {dayjs(mostRecent.last_used_at).fromNow()}</span>
</Stack>
)}
@@ -264,10 +263,8 @@ const Resources: FC<StageProps> = ({ 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 <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
// Using the Lucide icon with appropriate size class
return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
};
const styles = {
site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
+6 -10
View File
@@ -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<DormantWorkspacesProps> = ({ workspaces }) => {
</span>
</Stack>
<Stack direction="row" alignItems="center" spacing={1}>
<ScheduleIcon css={styles.summaryIcon} />
<ClockIcon className="size-icon-xs" />
<span
css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}
>
@@ -317,7 +315,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
</Stack>
{mostRecent && (
<Stack direction="row" alignItems="center" spacing={1}>
<ScheduleIcon css={styles.summaryIcon} />
<ClockIcon className="size-icon-xs" />
<span>Last used {lastUsed(mostRecent.last_used_at)}</span>
</Stack>
)}
@@ -358,7 +356,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
</Stack>
{updateCount && (
<Stack direction="row" alignItems="center" spacing={1}>
<SettingsSuggestIcon css={styles.summaryIcon} />
<SettingsIcon className="size-icon-xs" />
<span>{updateCount}</span>
</Stack>
)}
@@ -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 <PersonOutlinedIcon css={{ width: 18, height: 18, margin: -1 }} />;
// Using the Lucide icon with appropriate size class
return <UserIcon className="size-icon-sm" css={{ margin: -1 }} />;
};
const styles = {