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

chore: replace MUI icons with Lucide icons - 5#17750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 6 commits intomainfrombq/replace-mui-5
May 12, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletionssite/migrate-icons.md
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletionssite/src/components/Filter/Filter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
import Menu from "@mui/material/Menu";
Expand All@@ -14,6 +13,7 @@ import {
import { InputGroup } from "components/InputGroup/InputGroup";
import { SearchField } from "components/SearchField/SearchField";
import { useDebouncedFunction } from "hooks/debounce";
import { ExternalLinkIcon } from "lucide-react";
import { ChevronDownIcon } from "lucide-react";
import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
import type { useSearchParams } from "react-router-dom";
Expand DownExpand Up@@ -311,7 +311,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
setIsOpen(false);
}}
>
<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
<ExternalLinkIcon className="size-icon-xs" />
View advanced filtering
</MenuItem>
)}
Expand All@@ -325,7 +325,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
setIsOpen(false);
}}
>
<OpenInNewOutlined css={{ fontSize: "14px !important" }} />
<ExternalLinkIcon className="size-icon-xs" />
{learnMoreLabel2}
</MenuItem>
)}
Expand Down
6 changes: 3 additions & 3 deletionssite/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,6 @@ import {
css,
useTheme,
} from "@emotion/react";
import HelpIcon from "@mui/icons-material/HelpOutline";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import Link from "@mui/material/Link";
import { Stack } from "components/Stack/Stack";
Expand All@@ -17,6 +16,7 @@ import {
PopoverTrigger,
usePopover,
} from "components/deprecated/Popover/Popover";
import { CircleHelpIcon } from "lucide-react";
import {
type FC,
type HTMLAttributes,
Expand All@@ -25,11 +25,11 @@ import {
forwardRef,
} from "react";

type Icon = typeofHelpIcon;
type Icon = typeofCircleHelpIcon;

type Size = "small" | "medium";

export const HelpTooltipIcon =HelpIcon;
export const HelpTooltipIcon =CircleHelpIcon;

export const HelpTooltip: FC<PopoverProps> = (props) => {
return <Popover mode="hover" {...props} />;
Expand Down
6 changes: 3 additions & 3 deletionssite/src/components/Latency/Latency.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import { useTheme } from "@emotion/react";
import HelpOutline from "@mui/icons-material/HelpOutline";
import CircularProgress from "@mui/material/CircularProgress";
import Tooltip from "@mui/material/Tooltip";
import { visuallyHidden } from "@mui/utils";
import { Abbr } from "components/Abbr/Abbr";
import { CircleHelpIcon } from "lucide-react";
import type { FC } from "react";
import { getLatencyColor } from "utils/latency";

Expand DownExpand Up@@ -41,10 +41,10 @@ export const Latency: FC<LatencyProps> = ({
<>
<span css={{ ...visuallyHidden }}>{notAvailableText}</span>

<HelpOutline
<CircleHelpIcon
className="size-icon-sm"
css={{
marginLeft: "auto",
fontSize: "14px !important",
}}
style={{ color }}
/>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import ErrorOutline from "@mui/icons-material/ErrorOutline";
import SettingsIcon from "@mui/icons-material/Settings";
import Button from "@mui/material/Button";
import FormControlLabel from "@mui/material/FormControlLabel";
Expand All@@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { MemoizedMarkdown } from "components/Markdown/Markdown";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import { CircleAlertIcon } from "lucide-react";
import { type FC, type ReactNode, useState } from "react";
import type {
AutofillBuildParameter,
Expand DownExpand Up@@ -143,7 +143,10 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
)}
{!parameter.mutable && (
<Tooltip title="This value cannot be modified after the workspace has been created.">
<Pill type="warning" icon={<ErrorOutline />}>
<Pill
type="warning"
icon={<CircleAlertIcon className="size-icon-xs" />}
>
Immutable
</Pill>
</Tooltip>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,6 @@ import BuildingIcon from "@mui/icons-material/Build";
import DownloadIcon from "@mui/icons-material/CloudDownload";
import UploadIcon from "@mui/icons-material/CloudUpload";
import CollectedIcon from "@mui/icons-material/Compare";
import ErrorIcon from "@mui/icons-material/ErrorOutline";
import RefreshIcon from "@mui/icons-material/Refresh";
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
import WebTerminalIcon from "@mui/icons-material/WebAsset";
Expand All@@ -24,6 +23,7 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import { type ClassName, useClassName } from "hooks/useClassName";
import { CircleAlertIcon } from "lucide-react";
import prettyBytes from "pretty-bytes";
import {
type FC,
Expand DownExpand Up@@ -151,7 +151,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
to="/health"
css={[styles.statusBadge, styles.unhealthy]}
>
<ErrorIcon />
<CircleAlertIcon className="size-icon-sm" />
</Link>
) : (
<div css={styles.statusBadge}>
Expand DownExpand Up@@ -372,9 +372,9 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {

return (
<Stack direction="row" spacing={1} alignItems="center">
<ErrorIcon
css={{ width: 16, height: 16 }}
htmlColor={theme.roles.error.outline}
<CircleAlertIcon
className="size-icon-sm"
css={{ color:theme.roles.error.outline }}
/>
{children}
</Stack>
Expand Down
4 changes: 2 additions & 2 deletionssite/src/modules/resources/AgentOutdatedTooltip.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import RefreshIcon from "@mui/icons-material/RefreshOutlined";
import type { WorkspaceAgent } from "api/typesGenerated";
import {
HelpTooltip,
Expand All@@ -11,6 +10,7 @@ import {
} from "components/HelpTooltip/HelpTooltip";
import { Stack } from "components/Stack/Stack";
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
import { RotateCcwIcon } from "lucide-react";
import type { FC } from "react";
import { agentVersionStatus } from "../../utils/workspace";

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

<HelpTooltipLinksGroup>
<HelpTooltipAction
icon={RefreshIcon}
icon={RotateCcwIcon}
onClick={onUpdate}
ariaLabel="Update workspace"
>
Expand Down
9 changes: 3 additions & 6 deletionssite/src/modules/resources/PortForwardButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
import SensorsIcon from "@mui/icons-material/Sensors";
import LoadingButton from "@mui/lab/LoadingButton";
import Button from "@mui/material/Button";
Expand DownExpand Up@@ -40,8 +39,7 @@ import {
} from "components/deprecated/Popover/Popover";
import { type FormikContextType, useFormik } from "formik";
import { type ClassName, useClassName } from "hooks/useClassName";
import { X as XIcon } from "lucide-react";
import { ChevronDownIcon } from "lucide-react";
import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, useState } from "react";
import { useMutation, useQuery } from "react-query";
Expand DownExpand Up@@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
minWidth: 0,
}}
>
<OpenInNewOutlined
<ExternalLinkIcon
className="size-icon-xs"
css={{
flexShrink: 0,
width: 14,
height: 14,
color: theme.palette.text.primary,
}}
/>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import RefreshIcon from "@mui/icons-material/Refresh";
import Link from "@mui/material/Link";
import Skeleton from "@mui/material/Skeleton";
import { getErrorDetail, getErrorMessage } from "api/errors";
Expand All@@ -17,6 +16,7 @@ import {
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { usePopover } from "components/deprecated/Popover/Popover";
import { RotateCcwIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import type { FC } from "react";
import { useQuery } from "react-query";
Expand DownExpand Up@@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({ workspace }) => {

<HelpTooltipLinksGroup>
<HelpTooltipAction
icon={RefreshIcon}
icon={RotateCcwIcon}
onClick={updateWorkspace.update}
>
Update
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import { css } from "@emotion/css";
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
import MUITooltip, {
type TooltipProps as MUITooltipProps,
} from "@mui/material/Tooltip";
import { ExternalLinkIcon } from "lucide-react";
import type { FC, HTMLProps } from "react";
import { Link, type LinkProps } from "react-router-dom";

Expand DownExpand Up@@ -36,7 +36,7 @@ export const TooltipShortDescription: FC<HTMLProps<HTMLSpanElement>> = (
export const TooltipLink: FC<LinkProps> = (props) => {
return (
<Link {...props} css={styles.link}>
<OpenInNewOutlined />
<ExternalLinkIcon className="size-icon-xs" />
{props.children}
</Link>
);
Expand Down
5 changes: 2 additions & 3 deletionssite/src/pages/GroupsPage/GroupPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -50,8 +50,7 @@ import {
TableToolbar,
} from "components/TableToolbar/TableToolbar";
import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
import { TrashIcon } from "lucide-react";
import { EllipsisVertical } from "lucide-react";
import { EllipsisVertical, TrashIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Helmet } from "react-helmet-async";
import { useMutation, useQuery, useQueryClient } from "react-query";
Expand DownExpand Up@@ -134,7 +133,7 @@ const GroupPage: FC = () => {
onClick={() => {
setIsDeletingGroup(true);
}}
startIcon={<TrashIcon className="size-icon-sm" />}
startIcon={<TrashIcon className="size-icon-xs" />}
css={styles.removeButton}
>
Delete&hellip;
Expand Down
7 changes: 3 additions & 4 deletionssite/src/pages/HealthPage/Content.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
import { css } from "@emotion/css";
import { useTheme } from "@emotion/react";
import ErrorOutline from "@mui/icons-material/ErrorOutline";
import Link from "@mui/material/Link";
import type { HealthCode, HealthSeverity } from "api/typesGenerated";
import {CircleCheck as CircleCheckIcon } from "lucide-react";
import {CircleMinus as CircleMinusIcon } from "lucide-react";
import {CircleAlertIcon } from "lucide-react";
import {CircleCheckIcon, CircleMinusIcon } from "lucide-react";
import {
type ComponentProps,
type FC,
Expand DownExpand Up@@ -57,7 +56,7 @@ interface HealthIconProps {
export const HealthIcon: FC<HealthIconProps> = ({ size, severity }) => {
const theme = useTheme();
const color = healthyColor(theme, severity);
const Icon = severity === "error" ?ErrorOutline : CircleCheckIcon;
const Icon = severity === "error" ?CircleAlertIcon : CircleCheckIcon;

return <Icon css={{ width: size, height: size, color }} />;
};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { useTheme } from "@emotion/react";
import PlusIcon from "@mui/icons-material/AddOutlined";
import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined";
import Button from "@mui/material/Button";
import type { TemplateExample } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
Expand All@@ -14,6 +13,7 @@ import {
PageHeaderTitle,
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
import { ExternalLinkIcon } from "lucide-react";
import type { FC } from "react";
import { Link } from "react-router-dom";

Expand DownExpand Up@@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
target="_blank"
href={starterTemplate.url}
rel="noreferrer"
startIcon={<ViewCodeIcon />}
startIcon={<ExternalLinkIcon className="size-icon-sm" />}
>
View source code
</Button>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
import CheckIcon from "@mui/icons-material/CheckOutlined";
import ErrorIcon from "@mui/icons-material/ErrorOutline";
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
import type { TemplateVersion } from "api/typesGenerated";
import { Pill, PillSpinner } from "components/Pill/Pill";
import { CircleAlertIcon } from "lucide-react";
import type { FC, ReactNode } from "react";
import type { ThemeRole } from "theme/roles";
import { getPendingStatusLabel } from "utils/provisionerJob";
Expand DownExpand Up@@ -57,14 +57,14 @@ const getStatus = (
return {
type: "inactive",
text: "Canceled",
icon: <ErrorIcon />,
icon: <CircleAlertIcon className="size-icon-sm" />,
};
case "unknown":
case "failed":
return {
type: "error",
text: "Failed",
icon: <ErrorIcon />,
icon: <CircleAlertIcon className="size-icon-sm" />,
};
case "succeeded":
return {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const TokensPageView: FC<TokensPageViewProps> = ({
<TableCell width="20%">Last Used</TableCell>
<TableCell width="20%">Expires At</TableCell>
<TableCell width="20%">Created At</TableCell>
<TableCell width="0%"></TableCell>
<TableCell width="0%" />
</TableRow>
</TableHead>
<TableBody>
Expand Down
7 changes: 5 additions & 2 deletionssite/src/pages/WorkspacePage/AppStatuses.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react";
import AppsIcon from "@mui/icons-material/Apps";
import CheckCircle from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import HelpOutline from "@mui/icons-material/HelpOutline";
import HourglassEmpty from "@mui/icons-material/HourglassEmpty";
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import OpenInNew from "@mui/icons-material/OpenInNew";
Expand All@@ -18,6 +17,7 @@ import type {
WorkspaceApp,
} from "api/typesGenerated";
import { formatDistance, formatDistanceToNow } from "date-fns";
import { CircleHelpIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";

Expand DownExpand Up@@ -224,7 +224,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
}}
>
{getStatusIcon(theme, status.state, isLatest) || (
<HelpOutline sx={{ fontSize: 18, color: "text.disabled" }} />
<CircleHelpIcon
className="size-icon-sm"
css={{ color: theme.palette.text.disabled }}
/>
)}
</div>

Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp