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 - 17 (#17957)

Browse Source 
1. ExpandMoreOutlined → ChevronDownIcon
2. Error/ErrorIcon → CircleAlertIcon
3. CheckCircle → CircleCheckIcon
4. Warning → TriangleAlertIcon
This commit is contained in:
Bruno Quaresma
2025-05-20 22:24:17 -03:00
committed by GitHub
parent 3e7ff9d9e1
commit 36224f263f
7 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
+6 -6
View File
@@ -1,10 +1,7 @@
import type { Theme } from "@emotion/react";
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 InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import Warning from "@mui/icons-material/Warning";
import CircularProgress from "@mui/material/CircularProgress";
import type {
WorkspaceAppStatus as APIWorkspaceAppStatus,
@@ -12,6 +9,9 @@ import type {
WorkspaceAgent,
WorkspaceApp,
} from "api/typesGenerated";
import { CircleCheckIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import { TriangleAlertIcon } from "lucide-react";
import { ExternalLinkIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";
@@ -46,13 +46,13 @@ const getStatusIcon = (theme: Theme, state: APIWorkspaceAppStatus["state"]) => {
const color = getStatusColor(theme, state);
switch (state) {
case "complete":
return <CheckCircle sx={{ color, fontSize: 16 }} />;
return <CircleCheckIcon className="size-icon-xs" style={{ color }} />;
case "failure":
return <ErrorIcon sx={{ color, fontSize: 16 }} />;
return <CircleAlertIcon className="size-icon-xs" style={{ color }} />;
case "working":
return <CircularProgress size={16} sx={{ color }} />;
default:
return <Warning sx={{ color, fontSize: 16 }} />;
return <TriangleAlertIcon className="size-icon-xs" style={{ color }} />;
}
};
site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import type { Interpolation, Theme } from "@emotion/react";
import ErrorSharp from "@mui/icons-material/ErrorSharp";
import type { TimingStage } from "api/typesGenerated";
import { CircleAlertIcon } from "lucide-react";
import { InfoIcon } from "lucide-react";
import type { FC } from "react";
import { Bar, ClickableBar } from "./Chart/Bar";
@@ -159,9 +159,9 @@ export const StagesChart: FC<StagesChartProps> = ({
}}
>
{t.error && (
<ErrorSharp
<CircleAlertIcon
className="size-icon-sm"
css={{
fontSize: 18,
color: "#F87171",
marginRight: 4,
}}
site/src/pages/ChatPage/ChatToolInvocation.tsx
+10 -4
View File
@@ -2,10 +2,8 @@ import type { ToolCall, ToolResult } from "@ai-sdk/provider-utils";
import { useTheme } from "@emotion/react";
import ArticleIcon from "@mui/icons-material/Article";
import BuildIcon from "@mui/icons-material/Build";
import CheckCircle from "@mui/icons-material/CheckCircle";
import CodeIcon from "@mui/icons-material/Code";
import DeleteIcon from "@mui/icons-material/Delete";
import ErrorIcon from "@mui/icons-material/Error";
import FileUploadIcon from "@mui/icons-material/FileUpload";
import PersonIcon from "@mui/icons-material/Person";
import SettingsIcon from "@mui/icons-material/Settings";
@@ -13,6 +11,8 @@ import CircularProgress from "@mui/material/CircularProgress";
import Tooltip from "@mui/material/Tooltip";
import type * as TypesGen from "api/typesGenerated";
import { Avatar } from "components/Avatar/Avatar";
import { CircleCheckIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import { InfoIcon } from "lucide-react";
import type React from "react";
import { type FC, memo, useMemo, useState } from "react";
@@ -96,9 +96,15 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
)}
{toolInvocation.state === "result" ? (
hasError ? (
<ErrorIcon sx={{ color: statusColor, fontSize: 16 }} />
<CircleAlertIcon
className="size-icon-xs"
style={{ color: statusColor }}
/>
) : (
<CheckCircle sx={{ color: statusColor, fontSize: 16 }} />
<CircleCheckIcon
className="size-icon-xs"
style={{ color: statusColor }}
/>
)
) : null}
<div
site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { Button } from "components/Button/Button";
import { ChevronDownIcon } from "lucide-react";
import { CheckIcon } from "lucide-react";
import { type FC, useRef, useState } from "react";
@@ -41,7 +41,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
variant="outline"
>
{insightsIntervals[value].label}
<ExpandMoreOutlined className="size-icon-xs ml-1" />
<ChevronDownIcon className="size-icon-xs ml-1" />
</Button>
<Menu
id="interval-menu"
site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
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 { ChevronDownIcon } from "lucide-react";
import { CheckIcon } from "lucide-react";
import { type FC, useRef, useState } from "react";
import type { DateRangeValue } from "./DateRange";
@@ -35,7 +35,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={() => setOpen(true)}
endIcon={<ExpandMoreOutlined />}
endIcon={<ChevronDownIcon className="size-icon-xs" />}
>
Last {numberOfWeeks} weeks
</Button>
site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+2 -2
View File
@@ -1,4 +1,3 @@
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
import Link from "@mui/material/Link";
import useTheme from "@mui/system/useTheme";
import type { ProvisionerDaemon } from "api/typesGenerated";
@@ -9,6 +8,7 @@ import {
PopoverContent,
PopoverTrigger,
} from "components/deprecated/Popover/Popover";
import { ChevronDownIcon } from "lucide-react";
import { ProvisionerTagsField } from "modules/provisioners/ProvisionerTagsField";
import type { FC } from "react";
import { docs } from "utils/docs";
@@ -31,7 +31,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
color="neutral"
css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
>
<ExpandMoreOutlined css={{ fontSize: 14 }} />
<ChevronDownIcon className="size-icon-xs" />
<span className="sr-only">Expand provisioner tags</span>
</TopbarButton>
</PopoverTrigger>
site/src/pages/WorkspacePage/AppStatuses.tsx
+6 -6
View File
@@ -1,10 +1,7 @@
import type { Theme } from "@emotion/react";
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 InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import Warning from "@mui/icons-material/Warning";
import CircularProgress from "@mui/material/CircularProgress";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
@@ -15,6 +12,9 @@ import type {
WorkspaceApp,
} from "api/typesGenerated";
import { formatDistance, formatDistanceToNow } from "date-fns";
import { CircleCheckIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import { TriangleAlertIcon } from "lucide-react";
import { ExternalLinkIcon } from "lucide-react";
import { HourglassIcon } from "lucide-react";
import { CircleHelpIcon } from "lucide-react";
@@ -49,9 +49,9 @@ const getStatusIcon = (
: theme.palette.text.disabled;
switch (state) {
case "complete":
return <CheckCircle sx={{ color, fontSize: 18 }} />;
return <CircleCheckIcon className="size-icon-sm" style={{ color }} />;
case "failure":
return <ErrorIcon sx={{ color, fontSize: 18 }} />;
return <CircleAlertIcon className="size-icon-sm" style={{ color }} />;
case "working":
// Use Hourglass for past "working" states, spinner for the current one
return isLatest ? (
@@ -60,7 +60,7 @@ const getStatusIcon = (
<HourglassIcon className="size-icon-sm" style={{ color }} />
);
default:
return <Warning sx={{ color, fontSize: 18 }} />;
return <TriangleAlertIcon className="size-icon-sm" style={{ color }} />;
}
};