Skip to content

Commit 3011eca

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 16 (#17862)
Close -> XIcon WarningOutlined -> TriangleAlertIcon FileCopyOutlined -> CopyIcon KeyboardArrowRight -> ChevronRightIcon Add -> PlusIcon Send -> SendIcon ChevronRight -> ChevronRightIcon MoreHorizOutlined -> EllipsisIcon
1 parent 952c254 commit 3011eca

File tree

19 files changed

+39
-57
lines changed

19 files changed

+39
-57
lines changed

‎site/src/modules/provisioners/ProvisionerTag.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import CloseIcon from "@mui/icons-material/Close";
32
import IconButton from "@mui/material/IconButton";
43
import { Pill } from "components/Pill/Pill";
5-
import { CircleCheck as CircleCheckIcon } from "lucide-react";
6-
import { CircleMinus as CircleMinusIcon } from "lucide-react";
7-
import { Tag as TagIcon } from "lucide-react";
4+
import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react";
85
import type { ComponentProps, FC } from "react";
96

107
const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -51,7 +48,7 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
5148
onDelete(tagName);
5249
}}
5350
>
54-
<CloseIcon fontSize="inherit" css={{ width: 14, height: 14 }} />
51+
<XIcon className="size-icon-xs" />
5552
<span className="sr-only">Delete {tagName}</span>
5653
</IconButton>
5754
</>

‎site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { css } from "@emotion/react";
2-
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
32
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
43
import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
54
import Menu from "@mui/material/Menu";
65
import MenuItem from "@mui/material/MenuItem";
76
import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
87
import { DockerIcon } from "components/Icons/DockerIcon";
8+
import { ChevronRightIcon } from "lucide-react";
99
import { type CSSProperties, type ElementType, type FC, useState } from "react";
1010
import type { FileTree } from "utils/filetree";
1111

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
2+
import { EllipsisIcon } from "lucide-react";
33
import { type FC, useEffect, useRef, useState } from "react";
44

55
const spaceBetweenBlocks = 4;
@@ -37,7 +37,7 @@ export const Blocks: FC<BlocksProps> = ({ count }) => {
3737
))}
3838
{!hasSpacing && (
3939
<div css={styles.more}>
40-
<MoreHorizOutlined />
40+
<EllipsisIcon className="size-icon-sm" />
4141
</div>
4242
)}
4343
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import ChevronRight from "@mui/icons-material/ChevronRight";
32
import {
43
SearchField,
54
type SearchFieldProps,
65
} from "components/SearchField/SearchField";
6+
import { ChevronRightIcon } from "lucide-react";
77
import type { FC, HTMLProps } from "react";
88
import React, { useEffect, useRef } from "react";
99
import type { BarColors } from "./Bar";
@@ -81,7 +81,7 @@ export const ChartBreadcrumbs: FC<ChartBreadcrumbsProps> = ({
8181
</li>
8282
{!isLast && (
8383
<li role="presentation">
84-
<ChevronRight />
84+
<ChevronRightIcon />
8585
</li>
8686
)}
8787
</React.Fragment>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import SendIcon from "@mui/icons-material/Send";
32
import Button from "@mui/material/Button";
43
import IconButton from "@mui/material/IconButton";
54
import Paper from "@mui/material/Paper";
@@ -9,6 +8,7 @@ import { createChat } from "api/queries/chats";
98
import type { Chat } from "api/typesGenerated";
109
import { Margins } from "components/Margins/Margins";
1110
import { useAuthenticated } from "hooks";
11+
import { SendIcon } from "lucide-react";
1212
import { type FC, type FormEvent, useState } from "react";
1313
import { useMutation, useQueryClient } from "react-query";
1414
import { useNavigate } from "react-router-dom";

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import AddIcon from "@mui/icons-material/Add";
32
import Button from "@mui/material/Button";
43
import List from "@mui/material/List";
54
import ListItem from "@mui/material/ListItem";
@@ -13,6 +12,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
1312
import { Loader } from "components/Loader/Loader";
1413
import { Margins } from "components/Margins/Margins";
1514
import { useAgenticChat } from "contexts/useAgenticChat";
15+
import { PlusIcon } from "lucide-react";
1616
import {
1717
type FC,
1818
type PropsWithChildren,
@@ -169,7 +169,7 @@ export const ChatLayout: FC = () => {
169169
<Button
170170
variant="outlined"
171171
size="small"
172-
startIcon={<AddIcon fontSize="small" />}
172+
startIcon={<PlusIcon className="size-icon-sm" />}
173173
onClick={handleNewChat}
174174
disabled={createChatMutation.isLoading}
175175
css={{

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { type Message, useChat } from "@ai-sdk/react";
22
import { type Theme, keyframes, useTheme } from "@emotion/react";
3-
import SendIcon from "@mui/icons-material/Send";
43
import IconButton from "@mui/material/IconButton";
54
import Paper from "@mui/material/Paper";
65
import TextField from "@mui/material/TextField";
76
import { getChatMessages } from "api/queries/chats";
87
import type { ChatMessage, CreateChatMessageRequest } from "api/typesGenerated";
98
import { ErrorAlert } from "components/Alert/ErrorAlert";
109
import { Loader } from "components/Loader/Loader";
10+
import { SendIcon } from "lucide-react";
1111
import {
1212
type FC,
1313
type KeyboardEvent,

‎site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import WarningOutlined from "@mui/icons-material/WarningOutlined";
32
import Button from "@mui/material/Button";
43
import Drawer from "@mui/material/Drawer";
54
import IconButton from "@mui/material/IconButton";
65
import { visuallyHidden } from "@mui/utils";
76
import { JobError } from "api/queries/templates";
87
import type { TemplateVersion } from "api/typesGenerated";
98
import { Loader } from "components/Loader/Loader";
10-
import { X as XIcon } from "lucide-react";
9+
import { TriangleAlertIcon, XIcon } from "lucide-react";
1110
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
1211
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
1312
import { useWatchVersionLogs } from "modules/templates/useWatchVersionLogs";
@@ -66,7 +65,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
6665
<header css={styles.header}>
6766
<h3 css={styles.title}>Creating template...</h3>
6867
<IconButton size="small" onClick={drawerProps.onClose}>
69-
<XIcon css={styles.closeIcon} />
68+
<XIcon className="size-icon-sm" />
7069
<span style={visuallyHidden}>Close build logs</span>
7170
</IconButton>
7271
</header>
@@ -113,7 +112,7 @@ const MissingVariablesBanner: FC<MissingVariablesBannerProps> = ({
113112
return (
114113
<div css={bannerStyles.root}>
115114
<div css={bannerStyles.content}>
116-
<WarningOutlined css={bannerStyles.icon} />
115+
<TriangleAlertIcon className="size-icon-lg" css={bannerStyles.icon} />
117116
<h4 css={bannerStyles.title}>Missing variables</h4>
118117
<p css={bannerStyles.description}>
119118
During the build process, we identified some missing variables. Rest
@@ -152,9 +151,6 @@ const styles = {
152151
fontWeight: 500,
153152
fontSize: 16,
154153
},
155-
closeIcon: {
156-
fontSize: 20,
157-
},
158154
logs: (theme) => ({
159155
flex: 1,
160156
overflow: "auto",
@@ -177,7 +173,6 @@ const bannerStyles = {
177173
maxWidth: 360,
178174
},
179175
icon: (theme) => ({
180-
fontSize: 32,
181176
color: theme.roles.warning.fill.outline,
182177
}),
183178
title: {

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import CopyIcon from "@mui/icons-material/FileCopyOutlined";
32
import Divider from "@mui/material/Divider";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
@@ -24,6 +23,7 @@ import {
2423
import { Spinner } from "components/Spinner/Spinner";
2524
import { Stack } from "components/Stack/Stack";
2625
import { TableLoader } from "components/TableLoader/TableLoader";
26+
import { CopyIcon } from "lucide-react";
2727
import { ChevronLeftIcon } from "lucide-react";
2828
import { type FC, useState } from "react";
2929
import { Link as RouterLink, useSearchParams } from "react-router-dom";
@@ -149,21 +149,20 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
149149
<dt>Client ID</dt>
150150
<dd>
151151
<CopyableValue value={app.id}>
152-
{app.id} <CopyIcon css={{ width: 16, height: 16 }} />
152+
{app.id} <CopyIcon className="size-icon-xs" />
153153
</CopyableValue>
154154
</dd>
155155
<dt>Authorization URL</dt>
156156
<dd>
157157
<CopyableValue value={app.endpoints.authorization}>
158158
{app.endpoints.authorization}{" "}
159-
<CopyIcon css={{ width: 16, height: 16 }} />
159+
<CopyIcon className="size-icon-xs" />
160160
</CopyableValue>
161161
</dd>
162162
<dt>Token URL</dt>
163163
<dd>
164164
<CopyableValue value={app.endpoints.token}>
165-
{app.endpoints.token}{" "}
166-
<CopyIcon css={{ width: 16, height: 16 }} />
165+
{app.endpoints.token} <CopyIcon className="size-icon-xs" />
167166
</CopyableValue>
168167
</dd>
169168
</dl>

‎site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx

+2-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
32
import Button from "@mui/material/Button";
43
import Table from "@mui/material/Table";
54
import TableBody from "@mui/material/TableBody";
@@ -18,7 +17,7 @@ import {
1817
import { Stack } from "components/Stack/Stack";
1918
import { TableLoader } from "components/TableLoader/TableLoader";
2019
import { useClickableTableRow } from "hooks/useClickableTableRow";
21-
import { PlusIcon } from "lucide-react";
20+
import { ChevronRightIcon, PlusIcon } from "lucide-react";
2221
import type { FC } from "react";
2322
import { Link, useNavigate } from "react-router-dom";
2423

@@ -111,13 +110,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
111110

112111
<TableCell>
113112
<div css={{ display: "flex", paddingLeft: 16 }}>
114-
<KeyboardArrowRight
115-
css={{
116-
color: theme.palette.text.secondary,
117-
width: 20,
118-
height: 20,
119-
}}
120-
/>
113+
<ChevronRightIcon className="size-icon-sm" />
121114
</div>
122115
</TableCell>
123116
</TableRow>

‎site/src/pages/GroupsPage/GroupPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import PersonAdd from "@mui/icons-material/PersonAdd";
32
import MuiButton from "@mui/material/Button";
43
import { getErrorMessage } from "api/errors";
54
import {
@@ -49,6 +48,7 @@ import {
4948
TableToolbar,
5049
} from "components/TableToolbar/TableToolbar";
5150
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
51+
import { UserPlusIcon } from "lucide-react";
5252
import { SettingsIcon } from "lucide-react";
5353
import { EllipsisVertical, TrashIcon } from "lucide-react";
5454
import { type FC, useState } from "react";
@@ -281,7 +281,7 @@ const AddGroupMember: FC<AddGroupMemberProps> = ({
281281

282282
<Button disabled={!selectedUser || isLoading} type="submit">
283283
<Spinner loading={isLoading}>
284-
<PersonAdd />
284+
<UserPlusIcon className="size-icon-sm" />
285285
</Spinner>
286286
Add user
287287
</Button>

‎site/src/pages/GroupsPage/GroupsPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import GroupAdd from "@mui/icons-material/GroupAddOutlined";
21
import { getErrorMessage } from "api/errors";
32
import { groupsByOrganization } from "api/queries/groups";
43
import { organizationsPermissions } from "api/queries/organizations";
@@ -12,6 +11,7 @@ import {
1211
SettingsHeaderTitle,
1312
} from "components/SettingsHeader/SettingsHeader";
1413
import { Stack } from "components/Stack/Stack";
14+
import { PlusIcon } from "lucide-react";
1515
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
1616
import { RequirePermission } from "modules/permissions/RequirePermission";
1717
import { type FC, useEffect } from "react";
@@ -95,7 +95,7 @@ const GroupsPage: FC = () => {
9595
{groupsEnabled && permissions.createGroup && (
9696
<Button asChild>
9797
<RouterLink to="create">
98-
<GroupAdd />
98+
<PlusIcon className="size-icon-sm" />
9999
Create group
100100
</RouterLink>
101101
</Button>

‎site/src/pages/GroupsPage/GroupsPageView.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
32
import Skeleton from "@mui/material/Skeleton";
43
import type { Group } from "api/typesGenerated";
54
import { Avatar } from "components/Avatar/Avatar";
@@ -23,7 +22,7 @@ import {
2322
TableRowSkeleton,
2423
} from "components/TableLoader/TableLoader";
2524
import { useClickableTableRow } from "hooks";
26-
import { PlusIcon } from "lucide-react";
25+
import { ChevronRightIcon, PlusIcon } from "lucide-react";
2726
import type { FC } from "react";
2827
import { Link as RouterLink, useNavigate } from "react-router-dom";
2928
import { docs } from "utils/docs";
@@ -158,7 +157,7 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
158157

159158
<TableCell>
160159
<div css={styles.arrowCell}>
161-
<KeyboardArrowRight css={styles.arrowRight} />
160+
<ChevronRightIcon className="size-icon-sm" />
162161
</div>
163162
</TableCell>
164163
</TableRow>

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import PersonAdd from "@mui/icons-material/PersonAdd";
21
import { getErrorMessage } from "api/errors";
32
import type {
43
Group,
@@ -35,6 +34,7 @@ import {
3534
} from "components/Table/Table";
3635
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
3736
import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
37+
import { UserPlusIcon } from "lucide-react";
3838
import { EllipsisVertical, TriangleAlert } from "lucide-react";
3939
import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell";
4040
import { type FC, useState } from "react";
@@ -243,7 +243,7 @@ const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
243243
variant="outline"
244244
>
245245
<Spinner loading={isLoading}>
246-
<PersonAdd />
246+
<UserPlusIcon className="size-icon-sm" />
247247
</Spinner>
248248
Add user
249249
</Button>

‎site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import FileCopyOutlined from "@mui/icons-material/FileCopyOutlined";
21
import Button from "@mui/material/Button";
32
import FormControlLabel from "@mui/material/FormControlLabel";
43
import Radio from "@mui/material/Radio";
@@ -9,7 +8,7 @@ import { FormSection, VerticalForm } from "components/Form/Form";
98
import { Loader } from "components/Loader/Loader";
109
import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
1110
import { useClipboard } from "hooks/useClipboard";
12-
import { CheckIcon } from "lucide-react";
11+
import { CheckIcon, CopyIcon } from "lucide-react";
1312
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
1413
import { type FC, useEffect, useState } from "react";
1514
import { Helmet } from "react-helmet-async";
@@ -189,7 +188,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
189188
clipboard.showCopiedSuccess ? (
190189
<CheckIcon className="size-icon-sm" />
191190
) : (
192-
<FileCopyOutlined />
191+
<CopyIcon className="size-icon-sm" />
193192
)
194193
}
195194
variant="contained"

‎site/src/pages/TemplatePage/TemplatePageHeader.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import EditIcon from "@mui/icons-material/EditOutlined";
2-
import CopyIcon from "@mui/icons-material/FileCopyOutlined";
32
import Button from "@mui/material/Button";
43
import { workspaces } from "api/queries/workspaces";
54
import type {
@@ -27,6 +26,7 @@ import {
2726
} from "components/PageHeader/PageHeader";
2827
import { Pill } from "components/Pill/Pill";
2928
import { Stack } from "components/Stack/Stack";
29+
import { CopyIcon } from "lucide-react";
3030
import {
3131
EllipsisVertical,
3232
PlusIcon,
@@ -99,7 +99,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
9999
navigate(`/templates/new?fromTemplate=${templateId}`)
100100
}
101101
>
102-
<CopyIcon />
102+
<CopyIcon className="size-icon-sm" />
103103
Duplicate&hellip;
104104
</DropdownMenuItem>
105105
<DropdownMenuSeparator />

0 commit comments

Comments
 (0)