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 - 14#17832

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 2 commits intomainfrombq/chore-replace-mui-icons-14
May 15, 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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,6 @@ import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
import BugIcon from "@mui/icons-material/BugReportOutlined";
import ChatIcon from "@mui/icons-material/ChatOutlined";
import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
import InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
import DocsIcon from "@mui/icons-material/MenuBook";
import Divider from "@mui/material/Divider";
Expand All@@ -20,6 +19,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { Stack } from "components/Stack/Stack";
import { usePopover } from "components/deprecated/Popover/Popover";
import { MonitorDownIcon } from "lucide-react";
import type { FC } from "react";
import { Link } from "react-router-dom";

Expand DownExpand Up@@ -79,7 +79,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({

<Link to="/install" css={styles.link}>
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
<InstallDesktopIcon css={styles.menuItemIcon} />
<MonitorDownIcon css={styles.menuItemIcon} />
<span css={styles.menuItemText}>Install CLI</span>
</MenuItem>
</Link>
Expand Down
14 changes: 7 additions & 7 deletionssite/src/modules/resources/AgentStatus.tsx
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 WarningRounded from "@mui/icons-material/WarningRounded";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import type { WorkspaceAgent } from "api/typesGenerated";
Expand All@@ -11,9 +10,10 @@ import {
HelpTooltipTitle,
} from "components/HelpTooltip/HelpTooltip";
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
import { TriangleAlertIcon } from "lucide-react";
import type { FC } from "react";

// If we think in the agent status and lifecycle into a single enum/state Id
// If we think in the agent status and lifecycle into a single enum/state I'd
// say we would have: connecting, timeout, disconnected, connected:created,
// connected:starting, connected:start_timeout, connected:start_error,
// connected:ready, connected:shutting_down, connected:shutdown_timeout,
Expand DownExpand Up@@ -50,7 +50,7 @@ const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Agent timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>

<HelpTooltipContent>
Expand All@@ -75,7 +75,7 @@ const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Start error">
<WarningRounded css={styles.errorWarning} />
<TriangleAlertIcon css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
Expand DownExpand Up@@ -111,7 +111,7 @@ const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
Expand All@@ -135,7 +135,7 @@ const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop error">
<WarningRounded css={styles.errorWarning} />
<TriangleAlertIcon css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
Expand DownExpand Up@@ -231,7 +231,7 @@ const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Timeout">
<WarningRounded css={styles.timeoutWarning} />
<TriangleAlertIcon css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
Expand Down
7 changes: 4 additions & 3 deletionssite/src/pages/HealthPage/DERPRegionPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import TagOutlined from "@mui/icons-material/TagOutlined";
import Tooltip from "@mui/material/Tooltip";
import type {
Expand All@@ -10,6 +9,7 @@ import type {
HealthcheckReport,
} from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import { ChevronLeftIcon } from "lucide-react";
import { CodeIcon } from "lucide-react";
import type { FC } from "react";
import { Helmet } from "react-helmet-async";
Expand DownExpand Up@@ -63,8 +63,9 @@ const DERPRegionPage: FC = () => {
}}
to="/health/derp"
>
<ArrowBackOutlined
css={{ fontSize: 12, verticalAlign: "middle", marginRight: 8 }}
<ChevronLeftIcon
className="size-icon-xs"
css={{ verticalAlign: "middle", marginRight: 8 }}
/>
Back to DERP
</Link>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import WarningOutlined from "@mui/icons-material/WarningOutlined";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
Expand All@@ -25,6 +24,7 @@ import {
} from "components/FullPageLayout/Topbar";
import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { ChevronLeftIcon } from "lucide-react";
import { PlayIcon, PlusIcon, XIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
Expand DownExpand Up@@ -217,7 +217,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
<div>
<Tooltip title="Back to the template">
<TopbarIconButton component={RouterLink} to={templateLink}>
<ArrowBackOutlined />
<ChevronLeftIcon className="size-icon-sm" />
</TopbarIconButton>
</Tooltip>
</div>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
import type { TemplateVersion } from "api/typesGenerated";
import { Pill, PillSpinner } from "components/Pill/Pill";
import { HourglassIcon } from "lucide-react";
import { CheckIcon, CircleAlertIcon } from "lucide-react";
import type { FC, ReactNode } from "react";
import type { ThemeRole } from "theme/roles";
Expand DownExpand Up@@ -44,7 +44,7 @@ const getStatus = (
return {
type: "active",
text: getPendingStatusLabel(version.job),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
};
case "canceling":
return {
Expand Down
4 changes: 2 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 HourglassEmpty from "@mui/icons-material/HourglassEmpty";
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import OpenInNew from "@mui/icons-material/OpenInNew";
import Warning from "@mui/icons-material/Warning";
Expand All@@ -17,6 +16,7 @@ import type {
WorkspaceApp,
} from "api/typesGenerated";
import { formatDistance, formatDistanceToNow } from "date-fns";
import { HourglassIcon } from "lucide-react";
import { CircleHelpIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";
Expand DownExpand Up@@ -57,7 +57,7 @@ const getStatusIcon = (
return isLatest ? (
<CircularProgress size={18} sx={{ color }} />
) : (
<HourglassEmpty sx={{ color, fontSize: 18 }} />
<HourglassIcon className="size-icon-sm" style={{ color }} />
);
default:
return <Warning sx={{ color, fontSize: 18 }} />;
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 WarningRounded from "@mui/icons-material/WarningRounded";
import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
import type {
Template,
Expand All@@ -10,6 +9,7 @@ import type {
import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
import formatDistanceToNow from "date-fns/formatDistanceToNow";
import dayjs from "dayjs";
import { TriangleAlertIcon } from "lucide-react";
import { InfoIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { TemplateUpdateMessage } from "modules/templates/TemplateUpdateMessage";
Expand DownExpand Up@@ -259,7 +259,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
<Notifications
items={warningNotifications}
severity="warning"
icon={<WarningRounded />}
icon={<TriangleAlertIcon className="size-icon-sm" />}
/>
)}
</div>
Expand Down
11 changes: 7 additions & 4 deletionssite/src/pages/WorkspacePage/WorkspaceTopbar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import QuotaIcon from "@mui/icons-material/MonetizationOnOutlined";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import { workspaceQuota } from "api/queries/workspaceQuota";
Expand All@@ -17,6 +15,8 @@ import {
} from "components/FullPageLayout/Topbar";
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
import { ChevronLeftIcon } from "lucide-react";
import { CircleDollarSign } from "lucide-react";
import { TrashIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { linkToTemplate, useLinks } from "modules/navigation";
Expand DownExpand Up@@ -108,7 +108,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
<Topbar css={{ gridArea: "topbar" }}>
<Tooltip title="Back to workspaces">
<TopbarIconButton component={RouterLink} to="/workspaces">
<ArrowBackOutlined />
<ChevronLeftIcon className="size-icon-sm" />
</TopbarIconButton>
</Tooltip>

Expand DownExpand Up@@ -163,7 +163,10 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
>
<TopbarData>
<TopbarIcon>
<QuotaIcon aria-label="Daily usage" />
<CircleDollarSign
className="size-icon-sm"
aria-label="Daily usage"
/>
</TopbarIcon>

<span>
Expand Down
4 changes: 2 additions & 2 deletionssite/src/pages/WorkspacesPage/BatchUpdateConfirmation.tsx
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 InstallDesktopIcon from "@mui/icons-material/InstallDesktop";
import { API } from "api/api";
import type { TemplateVersion, Workspace } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
Expand All@@ -9,6 +8,7 @@ import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { MonitorDownIcon } from "lucide-react";
import { ClockIcon, SettingsIcon, UserIcon } from "lucide-react";
import { type FC, type ReactNode, useEffect, useMemo, useState } from "react";
import { useQueries } from "react-query";
Expand DownExpand Up@@ -351,7 +351,7 @@ const Updates: FC<UpdatesProps> = ({ workspaces, updates, error }) => {
css={styles.summary}
>
<Stack direction="row" alignItems="center" spacing={1}>
<InstallDesktopIcon css={styles.summaryIcon} />
<MonitorDownIcon className="size-icon-sm" />
<span>{workspaceCount}</span>
</Stack>
{updateCount && (
Expand Down
4 changes: 2 additions & 2 deletionssite/src/pages/WorkspacesPage/WorkspacesPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
import CloudQueue from "@mui/icons-material/CloudQueue";
import { hasError, isApiValidationError } from "api/errors";
import type { Template, Workspace } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
Expand All@@ -18,6 +17,7 @@ import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidg
import { Spinner } from "components/Spinner/Spinner";
import { Stack } from "components/Stack/Stack";
import { TableToolbar } from "components/TableToolbar/TableToolbar";
import { CloudIcon } from "lucide-react";
import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
import type { FC } from "react";
Expand DownExpand Up@@ -172,7 +172,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={onUpdateAll}>
<CloudQueue /> Update&hellip;
<CloudIcon className="size-icon-sm" /> Update&hellip;
</DropdownMenuItem>
<DropdownMenuItem
className="text-content-destructive focus:text-content-destructive"
Expand Down
6 changes: 4 additions & 2 deletionssite/src/pages/WorkspacesPage/WorkspacesTable.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
import Star from "@mui/icons-material/Star";
import Checkbox from "@mui/material/Checkbox";
import Skeleton from "@mui/material/Skeleton";
import { templateVersion } from "api/queries/templates";
Expand DownExpand Up@@ -45,6 +44,7 @@ import {
} from "components/Tooltip/Tooltip";
import { useAuthenticated } from "hooks";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import { StarIcon } from "lucide-react";
import { EllipsisVertical } from "lucide-react";
import {
BanIcon,
Expand DownExpand Up@@ -231,7 +231,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
title={
<Stack direction="row" spacing={0.5} alignItems="center">
{workspace.name}
{workspace.favorite && <Star className="w-4 h-4" />}
{workspace.favorite && (
<StarIcon className="size-icon-xs" />
)}
{workspace.outdated && (
<WorkspaceOutdatedTooltip workspace={workspace} />
)}
Expand Down
4 changes: 2 additions & 2 deletionssite/src/utils/workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
import type { Theme } from "@emotion/react";
import QueuedIcon from "@mui/icons-material/HourglassEmpty";
import type * as TypesGen from "api/typesGenerated";
import { PillSpinner } from "components/Pill/Pill";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import minMax from "dayjs/plugin/minMax";
import utc from "dayjs/plugin/utc";
import { HourglassIcon } from "lucide-react";
import { CircleAlertIcon, PlayIcon, SquareIcon } from "lucide-react";
import semver from "semver";
import { getPendingStatusLabel } from "./provisionerJob";
Expand DownExpand Up@@ -249,7 +249,7 @@ export const getDisplayWorkspaceStatus = (
return {
type: "active",
text: getPendingStatusLabel(provisionerJob),
icon: <QueuedIcon />,
icon: <HourglassIcon className="size-icon-sm" />,
} as const;
}
};
Expand Down
Loading

[8]ページ先頭

©2009-2025 Movatter.jp