synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-13 21:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
HourglassEmpty -> HourglassIcon
Star -> StarIcon
CloudQueue -> CloudIcon
InstallDesktop -> MonitorDownIcon
WarningRounded -> TriangleAlertIcon
ArrowBackOutlined -> ChevronLeftIcon
MonetizationOnOutlined -> CircleDollarSign
This commit is contained in:
Bruno Quaresma
2025-05-15 12:08:35 -03:00
committed by GitHub
parent 6ff6e95417
commit 257500c12f
12 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View File

@ -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";
@ -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";
@ -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>

14
site/src/modules/resources/AgentStatus.tsx
View File

@ -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";
@ -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,
@ -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>
@ -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>
@ -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>
@ -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>
@ -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>

7
site/src/pages/HealthPage/DERPRegionPage.tsx
View File

@ -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 {
@ -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";
@ -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>

4
site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View File

@ -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";
@ -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";
@ -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>

4
site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx
View File

@ -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";
@ -44,7 +44,7 @@ const getStatus = (
return {
type: "active",
text: getPendingStatusLabel(version.job),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
};
case "canceling":
return {

4
site/src/pages/WorkspacePage/AppStatuses.tsx
View File

@ -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";
@ -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";
@ -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 }} />;

4
site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
View File

@ -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,
@ -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";
@ -259,7 +259,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
<Notifications
items={warningNotifications}
severity="warning"
icon={<WarningRounded />}
icon={<TriangleAlertIcon className="size-icon-sm" />}
/>
)}
</div>

11
site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View File

@ -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";
@ -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";
@ -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>
@ -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>

4
site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
View File

@ -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";
@ -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";
@ -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 && (

4
site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View File

@ -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";
@ -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";
@ -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"

6
site/src/pages/WorkspacesPage/WorkspacesTable.tsx
View File

@ -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";
@ -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,
@ -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} />
)}

4
site/src/utils/workspace.tsx
View File

@ -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";
@ -249,7 +249,7 @@ export const getDisplayWorkspaceStatus = (
return {
type: "active",
text: getPendingStatusLabel(provisionerJob),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
} as const;
}
};