Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf87dbe7

Browse files
chore: replace MUI icons with Lucide icons - 11 (#17814)
PersonOutlined -> UserIconSchedule -> ClockIconSettingsSuggest -> SettingsIconSettingsOutlined -> SettingsIconCodeOutlined -> CodeIconTimerOutlined -> TimerIcon
1 parentc718392 commitf87dbe7

File tree

7 files changed

+26
-29
lines changed

7 files changed

+26
-29
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
22
importArrowBackOutlinedfrom"@mui/icons-material/ArrowBackOutlined";
3-
importCodeOutlinedfrom"@mui/icons-material/CodeOutlined";
43
importTagOutlinedfrom"@mui/icons-material/TagOutlined";
54
importTooltipfrom"@mui/material/Tooltip";
65
importtype{
@@ -11,6 +10,7 @@ import type {
1110
HealthcheckReport,
1211
}from"api/typesGenerated";
1312
import{Alert}from"components/Alert/Alert";
13+
import{CodeIcon}from"lucide-react";
1414
importtype{FC}from"react";
1515
import{Helmet}from"react-helmet-async";
1616
import{Link,useOutletContext,useParams}from"react-router-dom";
@@ -94,7 +94,9 @@ const DERPRegionPage: FC = () => {
9494
<Pillicon={<TagOutlined/>}>{region!.RegionID}</Pill>
9595
</Tooltip>
9696
<Tooltiptitle="Region Code">
97-
<Pillicon={<CodeOutlined/>}>{region!.RegionCode}</Pill>
97+
<Pillicon={<CodeIconclassName="size-icon-sm"/>}>
98+
{region!.RegionCode}
99+
</Pill>
98100
</Tooltip>
99101
<BooleanPillvalue={region!.EmbeddedRelay}>
100102
Embedded Relay

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import{useTheme}from"@emotion/react";
2-
importCodeOutlinedfrom"@mui/icons-material/CodeOutlined";
32
importTooltipfrom"@mui/material/Tooltip";
43
importtype{HealthcheckReport}from"api/typesGenerated";
54
import{Alert}from"components/Alert/Alert";
5+
import{CodeIcon}from"lucide-react";
66
import{Helmet}from"react-helmet-async";
77
import{useOutletContext}from"react-router-dom";
88
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
@@ -49,7 +49,9 @@ const WebsocketPage = () => {
4949

5050
<section>
5151
<Tooltiptitle="Code">
52-
<Pillicon={<CodeOutlined/>}>{websocket.code}</Pill>
52+
<Pillicon={<CodeIconclassName="size-icon-sm"/>}>
53+
{websocket.code}
54+
</Pill>
5355
</Tooltip>
5456
</section>
5557

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
importAddIconfrom"@mui/icons-material/AddOutlined";
22
importEditIconfrom"@mui/icons-material/EditOutlined";
33
importCopyIconfrom"@mui/icons-material/FileCopyOutlined";
4-
importSettingsIconfrom"@mui/icons-material/SettingsOutlined";
54
importButtonfrom"@mui/material/Button";
65
import{workspaces}from"api/queries/workspaces";
76
importtype{
@@ -29,6 +28,7 @@ import {
2928
}from"components/PageHeader/PageHeader";
3029
import{Pill}from"components/Pill/Pill";
3130
import{Stack}from"components/Stack/Stack";
31+
import{SettingsIcon}from"lucide-react";
3232
import{TrashIcon}from"lucide-react";
3333
import{EllipsisVertical}from"lucide-react";
3434
import{linkToTemplate,useLinks}from"modules/navigation";
@@ -79,7 +79,7 @@ const TemplateMenu: FC<TemplateMenuProps> = ({
7979
<DropdownMenuItem
8080
onClick={()=>navigate(`${templateLink}/settings`)}
8181
>
82-
<SettingsIcon/>
82+
<SettingsIconclassName="size-icon-sm"/>
8383
Settings
8484
</DropdownMenuItem>
8585

‎site/src/pages/TemplateSettingsPage/Sidebar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
importVariablesIconfrom"@mui/icons-material/CodeOutlined";
2-
importScheduleIconfrom"@mui/icons-material/TimerOutlined";
31
importtype{Template}from"api/typesGenerated";
42
import{Avatar}from"components/Avatar/Avatar";
53
import{
64
SidebarasBaseSidebar,
75
SidebarHeader,
86
SidebarNavItem,
97
}from"components/Sidebar/Sidebar";
8+
import{CodeIconasVariablesIcon}from"lucide-react";
9+
import{TimerIconasScheduleIcon}from"lucide-react";
1010
import{SettingsIcon}from"lucide-react";
1111
import{LockIcon}from"lucide-react";
1212
import{linkToTemplate,useLinks}from"modules/navigation";

‎site/src/pages/WorkspaceSettingsPage/Sidebar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
importParameterIconfrom"@mui/icons-material/CodeOutlined";
2-
importGeneralIconfrom"@mui/icons-material/SettingsOutlined";
3-
importScheduleIconfrom"@mui/icons-material/TimerOutlined";
41
importtype{Workspace}from"api/typesGenerated";
52
import{Avatar}from"components/Avatar/Avatar";
63
import{
74
SidebarasBaseSidebar,
85
SidebarHeader,
96
SidebarNavItem,
107
}from"components/Sidebar/Sidebar";
8+
import{CodeIconasParameterIcon}from"lucide-react";
9+
import{SettingsIconasGeneralIcon}from"lucide-react";
10+
import{TimerIconasScheduleIcon}from"lucide-react";
1111
importtype{FC}from"react";
1212

1313
interfaceSidebarProps{

‎site/src/pages/WorkspacesPage/BatchDeleteConfirmation.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
2-
importPersonOutlinedIconfrom"@mui/icons-material/PersonOutlined";
3-
importScheduleIconfrom"@mui/icons-material/Schedule";
42
import{visuallyHidden}from"@mui/utils";
53
importtype{Workspace}from"api/typesGenerated";
64
import{ConfirmDialog}from"components/Dialogs/ConfirmDialog/ConfirmDialog";
75
import{ExternalImage}from"components/ExternalImage/ExternalImage";
86
import{Stack}from"components/Stack/Stack";
97
importdayjsfrom"dayjs";
108
importrelativeTimefrom"dayjs/plugin/relativeTime";
9+
import{ClockIcon,UserIcon}from"lucide-react";
1110
import{typeFC,typeReactNode,useState}from"react";
1211
import{getResourceIconPath}from"utils/workspace";
1312

@@ -190,7 +189,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
190189
>
191190
{dayjs(workspace.last_used_at).fromNow()}
192191
</span>
193-
<ScheduleIconcss={styles.summaryIcon}/>
192+
<ClockIconclassName="size-icon-xs"/>
194193
</Stack>
195194
</Stack>
196195
</Stack>
@@ -209,7 +208,7 @@ const Workspaces: FC<StageProps> = ({ workspaces }) => {
209208
</Stack>
210209
{mostRecent&&(
211210
<Stackdirection="row"alignItems="center"spacing={1}>
212-
<ScheduleIconcss={styles.summaryIcon}/>
211+
<ClockIconclassName="size-icon-xs"/>
213212
<span>Last used{dayjs(mostRecent.last_used_at).fromNow()}</span>
214213
</Stack>
215214
)}
@@ -264,10 +263,8 @@ const Resources: FC<StageProps> = ({ workspaces }) => {
264263
};
265264

266265
constPersonIcon:FC=()=>{
267-
// This size doesn't match the rest of the icons because MUI is just really
268-
// inconsistent. We have to make it bigger than the rest, and pull things in
269-
// on the sides to compensate.
270-
return<PersonOutlinedIconcss={{width:18,height:18,margin:-1}}/>;
266+
// Using the Lucide icon with appropriate size class
267+
return<UserIconclassName="size-icon-sm"css={{margin:-1}}/>;
271268
};
272269

273270
conststyles={

‎site/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
22
importInstallDesktopIconfrom"@mui/icons-material/InstallDesktop";
3-
importPersonOutlinedIconfrom"@mui/icons-material/PersonOutlined";
4-
importScheduleIconfrom"@mui/icons-material/Schedule";
5-
importSettingsSuggestIconfrom"@mui/icons-material/SettingsSuggest";
63
import{API}from"api/api";
74
importtype{TemplateVersion,Workspace}from"api/typesGenerated";
85
import{ErrorAlert}from"components/Alert/ErrorAlert";
@@ -12,6 +9,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
129
import{Stack}from"components/Stack/Stack";
1310
importdayjsfrom"dayjs";
1411
importrelativeTimefrom"dayjs/plugin/relativeTime";
12+
import{ClockIcon,SettingsIcon,UserIcon}from"lucide-react";
1513
import{typeFC,typeReactNode,useEffect,useMemo,useState}from"react";
1614
import{useQueries}from"react-query";
1715

@@ -293,7 +291,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
293291
</span>
294292
</Stack>
295293
<Stackdirection="row"alignItems="center"spacing={1}>
296-
<ScheduleIconcss={styles.summaryIcon}/>
294+
<ClockIconclassName="size-icon-xs"/>
297295
<span
298296
css={{whiteSpace:"nowrap",textOverflow:"ellipsis"}}
299297
>
@@ -317,7 +315,7 @@ const DormantWorkspaces: FC<DormantWorkspacesProps> = ({ workspaces }) => {
317315
</Stack>
318316
{mostRecent&&(
319317
<Stackdirection="row"alignItems="center"spacing={1}>
320-
<ScheduleIconcss={styles.summaryIcon}/>
318+
<ClockIconclassName="size-icon-xs"/>
321319
<span>Last used{lastUsed(mostRecent.last_used_at)}</span>
322320
</Stack>
323321
)}
@@ -358,7 +356,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
358356
</Stack>
359357
{updateCount&&(
360358
<Stackdirection="row"alignItems="center"spacing={1}>
361-
<SettingsSuggestIconcss={styles.summaryIcon}/>
359+
<SettingsIconclassName="size-icon-xs"/>
362360
<span>{updateCount}</span>
363361
</Stack>
364362
)}
@@ -433,10 +431,8 @@ const lastUsed = (time: string) => {
433431
};
434432

435433
constPersonIcon:FC=()=>{
436-
// This size doesn't match the rest of the icons because MUI is just really
437-
// inconsistent. We have to make it bigger than the rest, and pull things in
438-
// on the sides to compensate.
439-
return<PersonOutlinedIconcss={{width:18,height:18,margin:-1}}/>;
434+
// Using the Lucide icon with appropriate size class
435+
return<UserIconclassName="size-icon-sm"css={{margin:-1}}/>;
440436
};
441437

442438
conststyles={

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp