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

Commit15bd7a3

Browse files
chore: replace MUI icons with Lucide icons - 5 (#17750)
Replacements:MUI | LucideOpenInNewOutlined | ExternalLinkIconHelpOutline | CircleHelpIconErrorOutline | CircleAlertIcon
1 parente0dd50d commit15bd7a3

File tree

18 files changed

+48
-55
lines changed

18 files changed

+48
-55
lines changed

‎site/migrate-icons.md

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎site/src/components/Filter/Filter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import{useTheme}from"@emotion/react";
2-
importOpenInNewOutlinedfrom"@mui/icons-material/OpenInNewOutlined";
32
importButtonfrom"@mui/material/Button";
43
importDividerfrom"@mui/material/Divider";
54
importMenufrom"@mui/material/Menu";
@@ -14,6 +13,7 @@ import {
1413
import{InputGroup}from"components/InputGroup/InputGroup";
1514
import{SearchField}from"components/SearchField/SearchField";
1615
import{useDebouncedFunction}from"hooks/debounce";
16+
import{ExternalLinkIcon}from"lucide-react";
1717
import{ChevronDownIcon}from"lucide-react";
1818
import{typeFC,typeReactNode,useEffect,useRef,useState}from"react";
1919
importtype{useSearchParams}from"react-router-dom";
@@ -311,7 +311,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
311311
setIsOpen(false);
312312
}}
313313
>
314-
<OpenInNewOutlinedcss={{fontSize:"14px !important"}}/>
314+
<ExternalLinkIconclassName="size-icon-xs"/>
315315
View advanced filtering
316316
</MenuItem>
317317
)}
@@ -325,7 +325,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
325325
setIsOpen(false);
326326
}}
327327
>
328-
<OpenInNewOutlinedcss={{fontSize:"14px !important"}}/>
328+
<ExternalLinkIconclassName="size-icon-xs"/>
329329
{learnMoreLabel2}
330330
</MenuItem>
331331
)}

‎site/src/components/HelpTooltip/HelpTooltip.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
css,
66
useTheme,
77
}from"@emotion/react";
8-
importHelpIconfrom"@mui/icons-material/HelpOutline";
98
importOpenInNewIconfrom"@mui/icons-material/OpenInNew";
109
importLinkfrom"@mui/material/Link";
1110
import{Stack}from"components/Stack/Stack";
@@ -17,6 +16,7 @@ import {
1716
PopoverTrigger,
1817
usePopover,
1918
}from"components/deprecated/Popover/Popover";
19+
import{CircleHelpIcon}from"lucide-react";
2020
import{
2121
typeFC,
2222
typeHTMLAttributes,
@@ -25,11 +25,11 @@ import {
2525
forwardRef,
2626
}from"react";
2727

28-
typeIcon=typeofHelpIcon;
28+
typeIcon=typeofCircleHelpIcon;
2929

3030
typeSize="small"|"medium";
3131

32-
exportconstHelpTooltipIcon=HelpIcon;
32+
exportconstHelpTooltipIcon=CircleHelpIcon;
3333

3434
exportconstHelpTooltip:FC<PopoverProps>=(props)=>{
3535
return<Popovermode="hover"{...props}/>;

‎site/src/components/Latency/Latency.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import{useTheme}from"@emotion/react";
2-
importHelpOutlinefrom"@mui/icons-material/HelpOutline";
32
importCircularProgressfrom"@mui/material/CircularProgress";
43
importTooltipfrom"@mui/material/Tooltip";
54
import{visuallyHidden}from"@mui/utils";
65
import{Abbr}from"components/Abbr/Abbr";
6+
import{CircleHelpIcon}from"lucide-react";
77
importtype{FC}from"react";
88
import{getLatencyColor}from"utils/latency";
99

@@ -41,10 +41,10 @@ export const Latency: FC<LatencyProps> = ({
4141
<>
4242
<spancss={{ ...visuallyHidden}}>{notAvailableText}</span>
4343

44-
<HelpOutline
44+
<CircleHelpIcon
45+
className="size-icon-sm"
4546
css={{
4647
marginLeft:"auto",
47-
fontSize:"14px !important",
4848
}}
4949
style={{ color}}
5050
/>

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
2-
importErrorOutlinefrom"@mui/icons-material/ErrorOutline";
32
importSettingsIconfrom"@mui/icons-material/Settings";
43
importButtonfrom"@mui/material/Button";
54
importFormControlLabelfrom"@mui/material/FormControlLabel";
@@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
1413
import{MemoizedMarkdown}from"components/Markdown/Markdown";
1514
import{Pill}from"components/Pill/Pill";
1615
import{Stack}from"components/Stack/Stack";
16+
import{CircleAlertIcon}from"lucide-react";
1717
import{typeFC,typeReactNode,useState}from"react";
1818
importtype{
1919
AutofillBuildParameter,
@@ -143,7 +143,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
143143
)}
144144
{!parameter.mutable&&(
145145
<Tooltiptitle="This value cannot be modified after the workspace has been created.">
146-
<Pilltype="warning"icon={<ErrorOutline/>}>
146+
<Pill
147+
type="warning"
148+
icon={<CircleAlertIconclassName="size-icon-xs"/>}
149+
>
147150
Immutable
148151
</Pill>
149152
</Tooltip>

‎site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import BuildingIcon from "@mui/icons-material/Build";
44
importDownloadIconfrom"@mui/icons-material/CloudDownload";
55
importUploadIconfrom"@mui/icons-material/CloudUpload";
66
importCollectedIconfrom"@mui/icons-material/Compare";
7-
importErrorIconfrom"@mui/icons-material/ErrorOutline";
87
importRefreshIconfrom"@mui/icons-material/Refresh";
98
importLatencyIconfrom"@mui/icons-material/SettingsEthernet";
109
importWebTerminalIconfrom"@mui/icons-material/WebAsset";
@@ -24,6 +23,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
2423
import{Stack}from"components/Stack/Stack";
2524
importdayjsfrom"dayjs";
2625
import{typeClassName,useClassName}from"hooks/useClassName";
26+
import{CircleAlertIcon}from"lucide-react";
2727
importprettyBytesfrom"pretty-bytes";
2828
import{
2929
typeFC,
@@ -151,7 +151,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
151151
to="/health"
152152
css={[styles.statusBadge,styles.unhealthy]}
153153
>
154-
<ErrorIcon/>
154+
<CircleAlertIconclassName="size-icon-sm"/>
155155
</Link>
156156
) :(
157157
<divcss={styles.statusBadge}>
@@ -372,9 +372,9 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
372372

373373
return(
374374
<Stackdirection="row"spacing={1}alignItems="center">
375-
<ErrorIcon
376-
css={{width:16,height:16}}
377-
htmlColor={theme.roles.error.outline}
375+
<CircleAlertIcon
376+
className="size-icon-sm"
377+
css={{color:theme.roles.error.outline}}
378378
/>
379379
{children}
380380
</Stack>

‎site/src/modules/resources/AgentOutdatedTooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import{useTheme}from"@emotion/react";
2-
importRefreshIconfrom"@mui/icons-material/RefreshOutlined";
32
importtype{WorkspaceAgent}from"api/typesGenerated";
43
import{
54
HelpTooltip,
@@ -11,6 +10,7 @@ import {
1110
}from"components/HelpTooltip/HelpTooltip";
1211
import{Stack}from"components/Stack/Stack";
1312
import{PopoverTrigger}from"components/deprecated/Popover/Popover";
13+
import{RotateCcwIcon}from"lucide-react";
1414
importtype{FC}from"react";
1515
import{agentVersionStatus}from"../../utils/workspace";
1616

@@ -68,7 +68,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
6868

6969
<HelpTooltipLinksGroup>
7070
<HelpTooltipAction
71-
icon={RefreshIcon}
71+
icon={RotateCcwIcon}
7272
onClick={onUpdate}
7373
ariaLabel="Update workspace"
7474
>

‎site/src/modules/resources/PortForwardButton.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
22
importLockIconfrom"@mui/icons-material/Lock";
33
importLockOpenIconfrom"@mui/icons-material/LockOpen";
4-
importOpenInNewOutlinedfrom"@mui/icons-material/OpenInNewOutlined";
54
importSensorsIconfrom"@mui/icons-material/Sensors";
65
importLoadingButtonfrom"@mui/lab/LoadingButton";
76
importButtonfrom"@mui/material/Button";
@@ -40,8 +39,7 @@ import {
4039
}from"components/deprecated/Popover/Popover";
4140
import{typeFormikContextType,useFormik}from"formik";
4241
import{typeClassName,useClassName}from"hooks/useClassName";
43-
import{XasXIcon}from"lucide-react";
44-
import{ChevronDownIcon}from"lucide-react";
42+
import{ChevronDownIcon,ExternalLinkIcon,XasXIcon}from"lucide-react";
4543
import{useDashboard}from"modules/dashboard/useDashboard";
4644
import{typeFC,useState}from"react";
4745
import{useMutation,useQuery}from"react-query";
@@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
308306
minWidth:0,
309307
}}
310308
>
311-
<OpenInNewOutlined
309+
<ExternalLinkIcon
310+
className="size-icon-xs"
312311
css={{
313312
flexShrink:0,
314-
width:14,
315-
height:14,
316313
color:theme.palette.text.primary,
317314
}}
318315
/>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
22
importInfoIconfrom"@mui/icons-material/InfoOutlined";
3-
importRefreshIconfrom"@mui/icons-material/Refresh";
43
importLinkfrom"@mui/material/Link";
54
importSkeletonfrom"@mui/material/Skeleton";
65
import{getErrorDetail,getErrorMessage}from"api/errors";
@@ -17,6 +16,7 @@ import {
1716
HelpTooltipTrigger,
1817
}from"components/HelpTooltip/HelpTooltip";
1918
import{usePopover}from"components/deprecated/Popover/Popover";
19+
import{RotateCcwIcon}from"lucide-react";
2020
import{linkToTemplate,useLinks}from"modules/navigation";
2121
importtype{FC}from"react";
2222
import{useQuery}from"react-query";
@@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({ workspace }) => {
104104

105105
<HelpTooltipLinksGroup>
106106
<HelpTooltipAction
107-
icon={RefreshIcon}
107+
icon={RotateCcwIcon}
108108
onClick={updateWorkspace.update}
109109
>
110110
Update

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import{css}from"@emotion/css";
22
import{typeInterpolation,typeTheme,useTheme}from"@emotion/react";
3-
importOpenInNewOutlinedfrom"@mui/icons-material/OpenInNewOutlined";
43
importMUITooltip,{
54
typeTooltipPropsasMUITooltipProps,
65
}from"@mui/material/Tooltip";
6+
import{ExternalLinkIcon}from"lucide-react";
77
importtype{FC,HTMLProps}from"react";
88
import{Link,typeLinkProps}from"react-router-dom";
99

@@ -36,7 +36,7 @@ export const TooltipShortDescription: FC<HTMLProps<HTMLSpanElement>> = (
3636
exportconstTooltipLink:FC<LinkProps>=(props)=>{
3737
return(
3838
<Link{...props}css={styles.link}>
39-
<OpenInNewOutlined/>
39+
<ExternalLinkIconclassName="size-icon-xs"/>
4040
{props.children}
4141
</Link>
4242
);

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ import {
5050
TableToolbar,
5151
}from"components/TableToolbar/TableToolbar";
5252
import{MemberAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
53-
import{TrashIcon}from"lucide-react";
54-
import{EllipsisVertical}from"lucide-react";
53+
import{EllipsisVertical,TrashIcon}from"lucide-react";
5554
import{typeFC,useState}from"react";
5655
import{Helmet}from"react-helmet-async";
5756
import{useMutation,useQuery,useQueryClient}from"react-query";
@@ -134,7 +133,7 @@ const GroupPage: FC = () => {
134133
onClick={()=>{
135134
setIsDeletingGroup(true);
136135
}}
137-
startIcon={<TrashIconclassName="size-icon-sm"/>}
136+
startIcon={<TrashIconclassName="size-icon-xs"/>}
138137
css={styles.removeButton}
139138
>
140139
Delete&hellip;

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import{css}from"@emotion/css";
22
import{useTheme}from"@emotion/react";
3-
importErrorOutlinefrom"@mui/icons-material/ErrorOutline";
43
importLinkfrom"@mui/material/Link";
54
importtype{HealthCode,HealthSeverity}from"api/typesGenerated";
6-
import{CircleCheckasCircleCheckIcon}from"lucide-react";
7-
import{CircleMinusasCircleMinusIcon}from"lucide-react";
5+
import{CircleAlertIcon}from"lucide-react";
6+
import{CircleCheckIcon,CircleMinusIcon}from"lucide-react";
87
import{
98
typeComponentProps,
109
typeFC,
@@ -57,7 +56,7 @@ interface HealthIconProps {
5756
exportconstHealthIcon:FC<HealthIconProps>=({ size, severity})=>{
5857
consttheme=useTheme();
5958
constcolor=healthyColor(theme,severity);
60-
constIcon=severity==="error" ?ErrorOutline :CircleCheckIcon;
59+
constIcon=severity==="error" ?CircleAlertIcon :CircleCheckIcon;
6160

6261
return<Iconcss={{width:size,height:size, color}}/>;
6362
};

‎site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{useTheme}from"@emotion/react";
22
importPlusIconfrom"@mui/icons-material/AddOutlined";
3-
importViewCodeIconfrom"@mui/icons-material/OpenInNewOutlined";
43
importButtonfrom"@mui/material/Button";
54
importtype{TemplateExample}from"api/typesGenerated";
65
import{ErrorAlert}from"components/Alert/ErrorAlert";
@@ -14,6 +13,7 @@ import {
1413
PageHeaderTitle,
1514
}from"components/PageHeader/PageHeader";
1615
import{Stack}from"components/Stack/Stack";
16+
import{ExternalLinkIcon}from"lucide-react";
1717
importtype{FC}from"react";
1818
import{Link}from"react-router-dom";
1919

@@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
5050
target="_blank"
5151
href={starterTemplate.url}
5252
rel="noreferrer"
53-
startIcon={<ViewCodeIcon/>}
53+
startIcon={<ExternalLinkIconclassName="size-icon-sm"/>}
5454
>
5555
View source code
5656
</Button>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
importCheckIconfrom"@mui/icons-material/CheckOutlined";
2-
importErrorIconfrom"@mui/icons-material/ErrorOutline";
32
importQueuedIconfrom"@mui/icons-material/HourglassEmpty";
43
importtype{TemplateVersion}from"api/typesGenerated";
54
import{Pill,PillSpinner}from"components/Pill/Pill";
5+
import{CircleAlertIcon}from"lucide-react";
66
importtype{FC,ReactNode}from"react";
77
importtype{ThemeRole}from"theme/roles";
88
import{getPendingStatusLabel}from"utils/provisionerJob";
@@ -57,14 +57,14 @@ const getStatus = (
5757
return{
5858
type:"inactive",
5959
text:"Canceled",
60-
icon:<ErrorIcon/>,
60+
icon:<CircleAlertIconclassName="size-icon-sm"/>,
6161
};
6262
case"unknown":
6363
case"failed":
6464
return{
6565
type:"error",
6666
text:"Failed",
67-
icon:<ErrorIcon/>,
67+
icon:<CircleAlertIconclassName="size-icon-sm"/>,
6868
};
6969
case"succeeded":
7070
return{

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
5858
<TableCellwidth="20%">Last Used</TableCell>
5959
<TableCellwidth="20%">Expires At</TableCell>
6060
<TableCellwidth="20%">Created At</TableCell>
61-
<TableCellwidth="0%"></TableCell>
61+
<TableCellwidth="0%"/>
6262
</TableRow>
6363
</TableHead>
6464
<TableBody>

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react";
33
importAppsIconfrom"@mui/icons-material/Apps";
44
importCheckCirclefrom"@mui/icons-material/CheckCircle";
55
importErrorIconfrom"@mui/icons-material/Error";
6-
importHelpOutlinefrom"@mui/icons-material/HelpOutline";
76
importHourglassEmptyfrom"@mui/icons-material/HourglassEmpty";
87
importInsertDriveFilefrom"@mui/icons-material/InsertDriveFile";
98
importOpenInNewfrom"@mui/icons-material/OpenInNew";
@@ -18,6 +17,7 @@ import type {
1817
WorkspaceApp,
1918
}from"api/typesGenerated";
2019
import{formatDistance,formatDistanceToNow}from"date-fns";
20+
import{CircleHelpIcon}from"lucide-react";
2121
import{useAppLink}from"modules/apps/useAppLink";
2222
importtype{FC}from"react";
2323

@@ -224,7 +224,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
224224
}}
225225
>
226226
{getStatusIcon(theme,status.state,isLatest)||(
227-
<HelpOutlinesx={{fontSize:18,color:"text.disabled"}}/>
227+
<CircleHelpIcon
228+
className="size-icon-sm"
229+
css={{color:theme.palette.text.disabled}}
230+
/>
228231
)}
229232
</div>
230233

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp