Skip to content

chore: replace MUI icons with Lucide icons - 17 #17957

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 1 commit into from
May 21, 2025
Merged

chore: replace MUI icons with Lucide icons - 17 #17957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 6 additions & 6 deletions site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
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,
Workspace,
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";
Expand Down Expand Up @@ -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 }} />;
}
};

Expand Down
6 changes: 3 additions & 3 deletions site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -159,9 +159,9 @@ export const StagesChart: FC<StagesChartProps> = ({
}}
>
{t.error && (
<ErrorSharp
<CircleAlertIcon
className="size-icon-sm"
css={{
fontSize: 18,
color: "#F87171",
marginRight: 4,
}}
Expand Down
14 changes: 10 additions & 4 deletions site/src/pages/ChatPage/ChatToolInvocation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ 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";
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";
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand All @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions site/src/pages/WorkspacePage/AppStatuses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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 ? (
Expand All @@ -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 }} />;
}
};

Expand Down
Loading