Skip to content

Commit a3cbf87

Browse files
EdwardAngertEdwardAngert
committed
chore: replace MUI icons with Lucide icons - update 18 (#17958)
1. PersonOutline → UserIcon 2. Apps → LayoutGridIcon 3. Delete → TrashIcon 4. InsertDriveFile → FileIcon
1 parent dad7d9c commit a3cbf87

File tree

7 files changed

+49
-38
lines changed

7 files changed

+49
-38
lines changed

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import type { Theme } from "@emotion/react";
22
import { useTheme } from "@emotion/react";
3-
import AppsIcon from "@mui/icons-material/Apps";
4-
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
53
import CircularProgress from "@mui/material/CircularProgress";
64
import type {
75
WorkspaceAppStatus as APIWorkspaceAppStatus,
86
Workspace,
97
WorkspaceAgent,
108
WorkspaceApp,
119
} from "api/typesGenerated";
12-
import { CircleCheckIcon } from "lucide-react";
13-
import { CircleAlertIcon } from "lucide-react";
14-
import { TriangleAlertIcon } from "lucide-react";
15-
import { ExternalLinkIcon } from "lucide-react";
10+
import {
11+
CircleAlertIcon,
12+
CircleCheckIcon,
13+
ExternalLinkIcon,
14+
FileIcon,
15+
LayoutGridIcon,
16+
TriangleAlertIcon,
17+
} from "lucide-react";
1618
import { useAppLink } from "modules/apps/useAppLink";
1719
import type { FC } from "react";
1820

@@ -163,11 +165,11 @@ export const WorkspaceAppStatus = ({
163165
...commonStyles,
164166
}}
165167
>
166-
<InsertDriveFile
167-
sx={{
168-
fontSize: "11px",
168+
<FileIcon
169+
className="size-icon-xs"
170+
css={{
169171
opacity: 0.5,
170-
mr: 0.25,
172+
marginRight: "0.25rem",
171173
}}
172174
/>
173175
<span>{formatURI(status.uri)}</span>
@@ -262,9 +264,9 @@ const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
262264
}}
263265
/>
264266
) : (
265-
<AppsIcon
266-
sx={{
267-
fontSize: 14,
267+
<LayoutGridIcon
268+
className="size-icon-xs"
269+
css={{
268270
opacity: 0.7,
269271
}}
270272
/>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@ import { useTheme } from "@emotion/react";
33
import ArticleIcon from "@mui/icons-material/Article";
44
import BuildIcon from "@mui/icons-material/Build";
55
import CodeIcon from "@mui/icons-material/Code";
6-
import DeleteIcon from "@mui/icons-material/Delete";
76
import FileUploadIcon from "@mui/icons-material/FileUpload";
87
import PersonIcon from "@mui/icons-material/Person";
98
import SettingsIcon from "@mui/icons-material/Settings";
109
import CircularProgress from "@mui/material/CircularProgress";
1110
import Tooltip from "@mui/material/Tooltip";
1211
import type * as TypesGen from "api/typesGenerated";
1312
import { Avatar } from "components/Avatar/Avatar";
14-
import { CircleCheckIcon } from "lucide-react";
15-
import { CircleAlertIcon } from "lucide-react";
16-
import { InfoIcon } from "lucide-react";
13+
import {
14+
CircleAlertIcon,
15+
CircleCheckIcon,
16+
InfoIcon,
17+
TrashIcon,
18+
} from "lucide-react";
1719
import type React from "react";
1820
import { type FC, memo, useMemo, useState } from "react";
1921
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -539,7 +541,7 @@ const ChatToolInvocationResultPreview: FC<{
539541
color: theme.palette.text.secondary,
540542
}}
541543
>
542-
<DeleteIcon fontSize="small" />
544+
<TrashIcon className="size-icon-xs" />
543545
{toolInvocation.result}
544546
</div>
545547
);

‎site/src/pages/HealthPage/DERPRegionPage.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import TagOutlined from "@mui/icons-material/TagOutlined";
32
import Tooltip from "@mui/material/Tooltip";
43
import type {
54
DERPNodeReport,
@@ -9,8 +8,7 @@ import type {
98
HealthcheckReport,
109
} from "api/typesGenerated";
1110
import { Alert } from "components/Alert/Alert";
12-
import { ChevronLeftIcon } from "lucide-react";
13-
import { CodeIcon } from "lucide-react";
11+
import { ChevronLeftIcon, CodeIcon, HashIcon } from "lucide-react";
1412
import type { FC } from "react";
1513
import { Helmet } from "react-helmet-async";
1614
import { Link, useOutletContext, useParams } from "react-router-dom";
@@ -92,7 +90,9 @@ const DERPRegionPage: FC = () => {
9290
<section>
9391
<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
9492
<Tooltip title="Region ID">
95-
<Pill icon={<TagOutlined />}>{region!.RegionID}</Pill>
93+
<Pill icon={<HashIcon className="size-icon-sm" />}>
94+
{region!.RegionID}
95+
</Pill>
9696
</Tooltip>
9797
<Tooltip title="Region Code">
9898
<Pill icon={<CodeIcon className="size-icon-sm" />}>

‎site/src/pages/HealthPage/WorkspaceProxyPage.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useTheme } from "@emotion/react";
22
import PublicOutlined from "@mui/icons-material/PublicOutlined";
3-
import TagOutlined from "@mui/icons-material/TagOutlined";
43
import Tooltip from "@mui/material/Tooltip";
54
import type { HealthcheckReport } from "api/typesGenerated";
65
import { Alert } from "components/Alert/Alert";
6+
import { HashIcon } from "lucide-react";
77
import type { FC } from "react";
88
import { Helmet } from "react-helmet-async";
99
import { useOutletContext } from "react-router-dom";
@@ -118,7 +118,9 @@ const WorkspaceProxyPage: FC = () => {
118118
)}
119119
{region.version && (
120120
<Tooltip title="Version">
121-
<Pill icon={<TagOutlined />}>{region.version}</Pill>
121+
<Pill icon={<HashIcon className="size-icon-sm" />}>
122+
{region.version}
123+
</Pill>
122124
</Tooltip>
123125
)}
124126
{region.derp_enabled && (

‎site/src/pages/OrganizationSettingsPage/UserTable/EditRolesButton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import UserIcon from "@mui/icons-material/PersonOutline";
21
import Checkbox from "@mui/material/Checkbox";
32
import Tooltip from "@mui/material/Tooltip";
43
import type { SlimRole } from "api/typesGenerated";
@@ -17,6 +16,7 @@ import {
1716
PopoverContent,
1817
PopoverTrigger,
1918
} from "components/deprecated/Popover/Popover";
19+
import { UserIcon } from "lucide-react";
2020
import { type FC, useEffect, useState } from "react";
2121

2222
const roleDescriptions: Record<string, string> = {
@@ -175,7 +175,7 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
175175
</fieldset>
176176
<div className="p-6 border-t-1 border-solid border-border text-sm">
177177
<div className="flex gap-4">
178-
<UserIcon className="size-icon-sm" />
178+
<UserIcon />
179179
<div className="flex flex-col">
180180
<strong>Member</strong>
181181
<span className="text-xs text-content-secondary">

‎site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import DeleteIcon from "@mui/icons-material/Delete";
32
import GitHub from "@mui/icons-material/GitHub";
43
import HideSourceOutlined from "@mui/icons-material/HideSourceOutlined";
54
import KeyOutlined from "@mui/icons-material/KeyOutlined";
@@ -29,6 +28,7 @@ import {
2928
} from "components/TableLoader/TableLoader";
3029
import dayjs from "dayjs";
3130
import relativeTime from "dayjs/plugin/relativeTime";
31+
import { TrashIcon } from "lucide-react";
3232
import { EllipsisVertical } from "lucide-react";
3333
import type { FC } from "react";
3434
import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell";
@@ -236,7 +236,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
236236
onClick={() => onDeleteUser(user)}
237237
disabled={user.id === actorID}
238238
>
239-
<DeleteIcon />
239+
<TrashIcon className="size-icon-xs" />
240240
Delete&hellip;
241241
</DropdownMenuItem>
242242
</DropdownMenuContent>

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import type { Theme } from "@emotion/react";
22
import { useTheme } from "@emotion/react";
3-
import AppsIcon from "@mui/icons-material/Apps";
4-
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
53
import CircularProgress from "@mui/material/CircularProgress";
64
import Link from "@mui/material/Link";
75
import Tooltip from "@mui/material/Tooltip";
@@ -12,12 +10,16 @@ import type {
1210
WorkspaceApp,
1311
} from "api/typesGenerated";
1412
import { formatDistance, formatDistanceToNow } from "date-fns";
15-
import { CircleCheckIcon } from "lucide-react";
16-
import { CircleAlertIcon } from "lucide-react";
17-
import { TriangleAlertIcon } from "lucide-react";
18-
import { ExternalLinkIcon } from "lucide-react";
19-
import { HourglassIcon } from "lucide-react";
20-
import { CircleHelpIcon } from "lucide-react";
13+
import {
14+
CircleAlertIcon,
15+
CircleCheckIcon,
16+
CircleHelpIcon,
17+
ExternalLinkIcon,
18+
FileIcon,
19+
HourglassIcon,
20+
LayoutGridIcon,
21+
TriangleAlertIcon,
22+
} from "lucide-react";
2123
import { useAppLink } from "modules/apps/useAppLink";
2224
import type { FC } from "react";
2325

@@ -287,7 +289,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
287289
},
288290
}}
289291
>
290-
<InsertDriveFile sx={{ mr: 0.5 }} />
292+
<FileIcon
293+
className="size-icon-xs"
294+
style={{ marginRight: "0.5rem" }}
295+
/>
291296
{formatURI(status.uri)}
292297
</div>
293298
</Tooltip>
@@ -397,7 +402,7 @@ const AppLink: FC<AppLinkProps> = ({ app, agent, workspace }) => {
397402
style={{ borderRadius: "3px" }}
398403
/>
399404
) : (
400-
<AppsIcon />
405+
<LayoutGridIcon className="size-icon-xs" />
401406
)}
402407
{/* Keep app name short */}
403408
<span

0 commit comments

Comments
 (0)