Skip to content

Commit 36224f2

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 17 (#17957)
1. ExpandMoreOutlined → ChevronDownIcon 2. Error/ErrorIcon → CircleAlertIcon 3. CheckCircle → CircleCheckIcon 4. Warning → TriangleAlertIcon
1 parent 3e7ff9d commit 36224f2

File tree

7 files changed

+31
-25
lines changed

7 files changed

+31
-25
lines changed

‎site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import type { Theme } from "@emotion/react";
22
import { useTheme } from "@emotion/react";
33
import AppsIcon from "@mui/icons-material/Apps";
4-
import CheckCircle from "@mui/icons-material/CheckCircle";
5-
import ErrorIcon from "@mui/icons-material/Error";
64
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
7-
import Warning from "@mui/icons-material/Warning";
85
import CircularProgress from "@mui/material/CircularProgress";
96
import type {
107
WorkspaceAppStatus as APIWorkspaceAppStatus,
118
Workspace,
129
WorkspaceAgent,
1310
WorkspaceApp,
1411
} from "api/typesGenerated";
12+
import { CircleCheckIcon } from "lucide-react";
13+
import { CircleAlertIcon } from "lucide-react";
14+
import { TriangleAlertIcon } from "lucide-react";
1515
import { ExternalLinkIcon } from "lucide-react";
1616
import { useAppLink } from "modules/apps/useAppLink";
1717
import type { FC } from "react";
@@ -46,13 +46,13 @@ const getStatusIcon = (theme: Theme, state: APIWorkspaceAppStatus["state"]) => {
4646
const color = getStatusColor(theme, state);
4747
switch (state) {
4848
case "complete":
49-
return <CheckCircle sx={{ color, fontSize: 16 }} />;
49+
return <CircleCheckIcon className="size-icon-xs" style={{ color }} />;
5050
case "failure":
51-
return <ErrorIcon sx={{ color, fontSize: 16 }} />;
51+
return <CircleAlertIcon className="size-icon-xs" style={{ color }} />;
5252
case "working":
5353
return <CircularProgress size={16} sx={{ color }} />;
5454
default:
55-
return <Warning sx={{ color, fontSize: 16 }} />;
55+
return <TriangleAlertIcon className="size-icon-xs" style={{ color }} />;
5656
}
5757
};
5858

‎site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import ErrorSharp from "@mui/icons-material/ErrorSharp";
32
import type { TimingStage } from "api/typesGenerated";
3+
import { CircleAlertIcon } from "lucide-react";
44
import { InfoIcon } from "lucide-react";
55
import type { FC } from "react";
66
import { Bar, ClickableBar } from "./Chart/Bar";
@@ -159,9 +159,9 @@ export const StagesChart: FC<StagesChartProps> = ({
159159
}}
160160
>
161161
{t.error && (
162-
<ErrorSharp
162+
<CircleAlertIcon
163+
className="size-icon-sm"
163164
css={{
164-
fontSize: 18,
165165
color: "#F87171",
166166
marginRight: 4,
167167
}}

‎site/src/pages/ChatPage/ChatToolInvocation.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import type { ToolCall, ToolResult } from "@ai-sdk/provider-utils";
22
import { useTheme } from "@emotion/react";
33
import ArticleIcon from "@mui/icons-material/Article";
44
import BuildIcon from "@mui/icons-material/Build";
5-
import CheckCircle from "@mui/icons-material/CheckCircle";
65
import CodeIcon from "@mui/icons-material/Code";
76
import DeleteIcon from "@mui/icons-material/Delete";
8-
import ErrorIcon from "@mui/icons-material/Error";
97
import FileUploadIcon from "@mui/icons-material/FileUpload";
108
import PersonIcon from "@mui/icons-material/Person";
119
import SettingsIcon from "@mui/icons-material/Settings";
1210
import CircularProgress from "@mui/material/CircularProgress";
1311
import Tooltip from "@mui/material/Tooltip";
1412
import type * as TypesGen from "api/typesGenerated";
1513
import { Avatar } from "components/Avatar/Avatar";
14+
import { CircleCheckIcon } from "lucide-react";
15+
import { CircleAlertIcon } from "lucide-react";
1616
import { InfoIcon } from "lucide-react";
1717
import type React from "react";
1818
import { type FC, memo, useMemo, useState } from "react";
@@ -96,9 +96,15 @@ export const ChatToolInvocation: FC<ChatToolInvocationProps> = ({
9696
)}
9797
{toolInvocation.state === "result" ? (
9898
hasError ? (
99-
<ErrorIcon sx={{ color: statusColor, fontSize: 16 }} />
99+
<CircleAlertIcon
100+
className="size-icon-xs"
101+
style={{ color: statusColor }}
102+
/>
100103
) : (
101-
<CheckCircle sx={{ color: statusColor, fontSize: 16 }} />
104+
<CircleCheckIcon
105+
className="size-icon-xs"
106+
style={{ color: statusColor }}
107+
/>
102108
)
103109
) : null}
104110
<div

‎site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
21
import Menu from "@mui/material/Menu";
32
import MenuItem from "@mui/material/MenuItem";
43
import { Button } from "components/Button/Button";
4+
import { ChevronDownIcon } from "lucide-react";
55
import { CheckIcon } from "lucide-react";
66
import { type FC, useRef, useState } from "react";
77

@@ -41,7 +41,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
4141
variant="outline"
4242
>
4343
{insightsIntervals[value].label}
44-
<ExpandMoreOutlined className="size-icon-xs ml-1" />
44+
<ChevronDownIcon className="size-icon-xs ml-1" />
4545
</Button>
4646
<Menu
4747
id="interval-menu"

‎site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
21
import Button from "@mui/material/Button";
32
import Menu from "@mui/material/Menu";
43
import MenuItem from "@mui/material/MenuItem";
54
import { differenceInWeeks } from "date-fns";
5+
import { ChevronDownIcon } from "lucide-react";
66
import { CheckIcon } from "lucide-react";
77
import { type FC, useRef, useState } from "react";
88
import type { DateRangeValue } from "./DateRange";
@@ -35,7 +35,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
3535
aria-haspopup="true"
3636
aria-expanded={open ? "true" : undefined}
3737
onClick={() => setOpen(true)}
38-
endIcon={<ExpandMoreOutlined />}
38+
endIcon={<ChevronDownIcon className="size-icon-xs" />}
3939
>
4040
Last {numberOfWeeks} weeks
4141
</Button>

‎site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
21
import Link from "@mui/material/Link";
32
import useTheme from "@mui/system/useTheme";
43
import type { ProvisionerDaemon } from "api/typesGenerated";
@@ -9,6 +8,7 @@ import {
98
PopoverContent,
109
PopoverTrigger,
1110
} from "components/deprecated/Popover/Popover";
11+
import { ChevronDownIcon } from "lucide-react";
1212
import { ProvisionerTagsField } from "modules/provisioners/ProvisionerTagsField";
1313
import type { FC } from "react";
1414
import { docs } from "utils/docs";
@@ -31,7 +31,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
3131
color="neutral"
3232
css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
3333
>
34-
<ExpandMoreOutlined css={{ fontSize: 14 }} />
34+
<ChevronDownIcon className="size-icon-xs" />
3535
<span className="sr-only">Expand provisioner tags</span>
3636
</TopbarButton>
3737
</PopoverTrigger>

‎site/src/pages/WorkspacePage/AppStatuses.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import type { Theme } from "@emotion/react";
22
import { useTheme } from "@emotion/react";
33
import AppsIcon from "@mui/icons-material/Apps";
4-
import CheckCircle from "@mui/icons-material/CheckCircle";
5-
import ErrorIcon from "@mui/icons-material/Error";
64
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
7-
import Warning from "@mui/icons-material/Warning";
85
import CircularProgress from "@mui/material/CircularProgress";
96
import Link from "@mui/material/Link";
107
import Tooltip from "@mui/material/Tooltip";
@@ -15,6 +12,9 @@ import type {
1512
WorkspaceApp,
1613
} from "api/typesGenerated";
1714
import { formatDistance, formatDistanceToNow } from "date-fns";
15+
import { CircleCheckIcon } from "lucide-react";
16+
import { CircleAlertIcon } from "lucide-react";
17+
import { TriangleAlertIcon } from "lucide-react";
1818
import { ExternalLinkIcon } from "lucide-react";
1919
import { HourglassIcon } from "lucide-react";
2020
import { CircleHelpIcon } from "lucide-react";
@@ -49,9 +49,9 @@ const getStatusIcon = (
4949
: theme.palette.text.disabled;
5050
switch (state) {
5151
case "complete":
52-
return <CheckCircle sx={{ color, fontSize: 18 }} />;
52+
return <CircleCheckIcon className="size-icon-sm" style={{ color }} />;
5353
case "failure":
54-
return <ErrorIcon sx={{ color, fontSize: 18 }} />;
54+
return <CircleAlertIcon className="size-icon-sm" style={{ color }} />;
5555
case "working":
5656
// Use Hourglass for past "working" states, spinner for the current one
5757
return isLatest ? (
@@ -60,7 +60,7 @@ const getStatusIcon = (
6060
<HourglassIcon className="size-icon-sm" style={{ color }} />
6161
);
6262
default:
63-
return <Warning sx={{ color, fontSize: 18 }} />;
63+
return <TriangleAlertIcon className="size-icon-sm" style={{ color }} />;
6464
}
6565
};
6666

0 commit comments

Comments
 (0)