Skip to content

chore: replace MUI icons with Lucide icons - 14 #17832

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 15, 2025
Merged

chore: replace MUI icons with Lucide icons - 14 #17832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b6d4d7
chore: replace MUI icons with Lucide icons - 14
BrunoQuaresma May 14, 2025
cfd862d
Merge branch 'main' of https://github.com/coder/coder into bq/chore-r…
BrunoQuaresma May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
import BugIcon from "@mui/icons-material/BugReportOutlined";
import ChatIcon from "@mui/icons-material/ChatOutlined";
import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
import DocsIcon from "@mui/icons-material/MenuBook";
import Divider from "@mui/material/Divider";
Expand All @@ -20,6 +19,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Stack } from "components/Stack/Stack";
import { usePopover } from "components/deprecated/Popover/Popover";
import { MonitorDownIcon } from "lucide-react";
import type { FC } from "react";
import { Link } from "react-router-dom";

Expand Down Expand Up @@ -79,7 +79,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({

<Link to="/install" css={styles.link}>
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
<InstallDesktopIcon css={styles.menuItemIcon} />
<MonitorDownIcon css={styles.menuItemIcon} />
<span css={styles.menuItemText}>Install CLI</span>
</MenuItem>
</Link>
Expand Down
14 changes: 7 additions & 7 deletions site/src/modules/resources/AgentStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import WarningRounded from "@mui/icons-material/WarningRounded";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import type { WorkspaceAgent } from "api/typesGenerated";
Expand All @@ -11,9 +10,10 @@ import {
HelpTooltipTitle,
} from "components/HelpTooltip/HelpTooltip";
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
import { TriangleAlertIcon } from "lucide-react";
import type { FC } from "react";

// If we think in the agent status and lifecycle into a single enum/state I’d
// If we think in the agent status and lifecycle into a single enum/state I'd
// say we would have: connecting, timeout, disconnected, connected:created,
// connected:starting, connected:start_timeout, connected:start_error,
// connected:ready, connected:shutting_down, connected:shutdown_timeout,
Expand Down Expand Up @@ -50,7 +50,7 @@ const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Agent timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>

<HelpTooltipContent>
Expand All @@ -75,7 +75,7 @@ const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Start error">
<WarningRounded css={styles.errorWarning} />
<TriangleAlertIcon css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
Expand Down Expand Up @@ -111,7 +111,7 @@ const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
Expand All @@ -135,7 +135,7 @@ const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop error">
<WarningRounded css={styles.errorWarning} />
<TriangleAlertIcon css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
Expand Down Expand Up @@ -231,7 +231,7 @@ const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
Expand Down
7 changes: 4 additions & 3 deletions site/src/pages/HealthPage/DERPRegionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import TagOutlined from "@mui/icons-material/TagOutlined";
import Tooltip from "@mui/material/Tooltip";
import type {
Expand All @@ -10,6 +9,7 @@ import type {
HealthcheckReport,
} from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import { ChevronLeftIcon } from "lucide-react";
import { CodeIcon } from "lucide-react";
import type { FC } from "react";
import { Helmet } from "react-helmet-async";
Expand Down Expand Up @@ -63,8 +63,9 @@ const DERPRegionPage: FC = () => {
}}
to="/health/derp"
>
<ArrowBackOutlined
css={{ fontSize: 12, verticalAlign: "middle", marginRight: 8 }}
<ChevronLeftIcon
className="size-icon-xs"
css={{ verticalAlign: "middle", marginRight: 8 }}
/>
Back to DERP
</Link>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import WarningOutlined from "@mui/icons-material/WarningOutlined";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
Expand All @@ -25,6 +24,7 @@ import {
} from "components/FullPageLayout/Topbar";
import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { ChevronLeftIcon } from "lucide-react";
import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
Expand Down Expand Up @@ -217,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<div>
<Tooltip title="Back to the template">
<TopbarIconButton component={RouterLink} to={templateLink}>
<ArrowBackOutlined />
<ChevronLeftIcon className="size-icon-sm" />
</TopbarIconButton>
</Tooltip>
</div>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
import type { TemplateVersion } from "api/typesGenerated";
import { Pill, PillSpinner } from "components/Pill/Pill";
import { HourglassIcon } from "lucide-react";
import { CheckIcon, CircleAlertIcon } from "lucide-react";
import type { FC, ReactNode } from "react";
import type { ThemeRole } from "theme/roles";
Expand Down Expand Up @@ -44,7 +44,7 @@ const getStatus = (
return {
type: "active",
text: getPendingStatusLabel(version.job),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
};
case "canceling":
return {
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/WorkspacePage/AppStatuses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react";
import AppsIcon from "@mui/icons-material/Apps";
import CheckCircle from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import HourglassEmpty from "@mui/icons-material/HourglassEmpty";
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import OpenInNew from "@mui/icons-material/OpenInNew";
import Warning from "@mui/icons-material/Warning";
Expand All @@ -17,6 +16,7 @@ import type {
WorkspaceApp,
} from "api/typesGenerated";
import { formatDistance, formatDistanceToNow } from "date-fns";
import { HourglassIcon } from "lucide-react";
import { CircleHelpIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";
Expand Down Expand Up @@ -57,7 +57,7 @@ const getStatusIcon = (
return isLatest ? (
<CircularProgress size={18} sx={{ color }} />
) : (
<HourglassEmpty sx={{ color, fontSize: 18 }} />
<HourglassIcon className="size-icon-sm" style={{ color }} />
);
default:
return <Warning sx={{ color, fontSize: 18 }} />;
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import WarningRounded from "@mui/icons-material/WarningRounded";
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
import type {
Template,
Expand All @@ -10,6 +9,7 @@ import type {
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import dayjs from "dayjs";
import { TriangleAlertIcon } from "lucide-react";
import { InfoIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
Expand Down Expand Up @@ -259,7 +259,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
<Notifications
items={warningNotifications}
severity="warning"
icon={<WarningRounded />}
icon={<TriangleAlertIcon className="size-icon-sm" />}
/>
)}
</div>
Expand Down
11 changes: 7 additions & 4 deletions site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import { workspaceQuota } from "api/queries/workspaceQuota";
Expand All @@ -17,6 +15,8 @@ import {
} from "components/FullPageLayout/Topbar";
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
import { ChevronLeftIcon } from "lucide-react";
import { CircleDollarSign } from "lucide-react";
import { TrashIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { linkToTemplate, useLinks } from "modules/navigation";
Expand Down Expand Up @@ -108,7 +108,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
<Topbar css={{ gridArea: "topbar" }}>
<Tooltip title="Back to workspaces">
<TopbarIconButton component={RouterLink} to="/workspaces">
<ArrowBackOutlined />
<ChevronLeftIcon className="size-icon-sm" />
</TopbarIconButton>
</Tooltip>

Expand Down Expand Up @@ -163,7 +163,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
>
<TopbarData>
<TopbarIcon>
<QuotaIcon aria-label="Daily usage" />
<CircleDollarSign
className="size-icon-sm"
aria-label="Daily usage"
/>
</TopbarIcon>

<span>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
import { API } from "api/api";
import type { TemplateVersion, Workspace } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
Expand All @@ -9,6 +8,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { MonitorDownIcon } from "lucide-react";
import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
import { useQueries } from "react-query";
Expand Down Expand Up @@ -351,7 +351,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
css={styles.summary}
>
<Stack direction="row" alignItems="center" spacing={1}>
<InstallDesktopIcon css={styles.summaryIcon} />
<MonitorDownIcon className="size-icon-sm" />
<span>{workspaceCount}</span>
</Stack>
{updateCount && (
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import CloudQueue from "@mui/icons-material/CloudQueue";
import { hasError, isApiValidationError } from "api/errors";
import type { Template, Workspace } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
Expand All @@ -18,6 +17,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg
import { Spinner } from "components/Spinner/Spinner";
import { Stack } from "components/Stack/Stack";
import { TableToolbar } from "components/TableToolbar/TableToolbar";
import { CloudIcon } from "lucide-react";
import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
import type { FC } from "react";
Expand Down Expand Up @@ -172,7 +172,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={onUpdateAll}>
<CloudQueue /> Update&hellip;
<CloudIcon className="size-icon-sm" /> Update&hellip;
</DropdownMenuItem>
<DropdownMenuItem
className="text-content-destructive focus:text-content-destructive"
Expand Down
6 changes: 4 additions & 2 deletions site/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import Star from "@mui/icons-material/Star";
import Checkbox from "@mui/material/Checkbox";
import Skeleton from "@mui/material/Skeleton";
import { templateVersion } from "api/queries/templates";
Expand Down Expand Up @@ -45,6 +44,7 @@ import {
} from "components/Tooltip/Tooltip";
import { useAuthenticated } from "hooks";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import { StarIcon } from "lucide-react";
import { EllipsisVertical } from "lucide-react";
import {
BanIcon,
Expand Down Expand Up @@ -231,7 +231,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
title={
<Stack direction="row" spacing={0.5} alignItems="center">
{workspace.name}
{workspace.favorite && <Star className="w-4 h-4" />}
{workspace.favorite && (
<StarIcon className="size-icon-xs" />
)}
{workspace.outdated && (
<WorkspaceOutdatedTooltip workspace={workspace} />
)}
Expand Down
4 changes: 2 additions & 2 deletions site/src/utils/workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import type { Theme } from "@emotion/react";
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
import type * as TypesGen from "api/typesGenerated";
import { PillSpinner } from "components/Pill/Pill";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import minMax from "dayjs/plugin/minMax";
import utc from "dayjs/plugin/utc";
import { HourglassIcon } from "lucide-react";
import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
import semver from "semver";
import { getPendingStatusLabel } from "./provisionerJob";
Expand Down Expand Up @@ -249,7 +249,7 @@ export const getDisplayWorkspaceStatus = (
return {
type: "active",
text: getPendingStatusLabel(provisionerJob),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
} as const;
}
};
Expand Down
Loading