opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace MUI icons with Lucide icons - 13 (#17831)

Browse Source 
OpenInNew -> ExternalLinkIcon
InfoOutlined -> InfoIcon
CloudDownload -> CloudDownloadIcon
CloudUpload -> CloudUploadIcon
Compare -> GitCompareArrowsIcon
SettingsEthernet -> GaugeIcon
WebAsset -> AppWindowIcon
This commit is contained in:
Bruno Quaresma
2025-05-15 11:43:35 -03:00
committed by GitHub
parent ba6690f2ee
commit 6ff6e95417
6 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/modules/dashboard/DashboardLayout.tsx
+3 -2
View File
@@ -1,9 +1,9 @@
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import Link from "@mui/material/Link";
import Snackbar from "@mui/material/Snackbar";
import { Button } from "components/Button/Button";
import { Loader } from "components/Loader/Loader";
import { useAuthenticated } from "hooks";
import { InfoIcon } from "lucide-react";
import { AnnouncementBanners } from "modules/dashboard/AnnouncementBanners/AnnouncementBanners";
import { LicenseBanner } from "modules/dashboard/LicenseBanner/LicenseBanner";
import { type FC, type HTMLAttributes, Suspense } from "react";
@@ -74,7 +74,8 @@ export const DashboardLayout: FC = () => {
}}
message={
<div css={{ display: "flex", gap: 16 }}>
<InfoOutlined
<InfoIcon
className="size-icon-xs"
css={(theme) => ({
fontSize: 16,
height: 20, // 20 is the height of the text line so we can align them
site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
+10 -10
View File
@@ -1,10 +1,5 @@
import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
import DownloadIcon from "@mui/icons-material/CloudDownload";
import UploadIcon from "@mui/icons-material/CloudUpload";
import CollectedIcon from "@mui/icons-material/Compare";
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
import WebTerminalIcon from "@mui/icons-material/WebAsset";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
@@ -21,6 +16,11 @@ import { VSCodeIcon } from "components/Icons/VSCodeIcon";
import { Stack } from "components/Stack/Stack";
import dayjs from "dayjs";
import { type ClassName, useClassName } from "hooks/useClassName";
import { CloudDownloadIcon } from "lucide-react";
import { CloudUploadIcon } from "lucide-react";
import { GitCompareArrowsIcon } from "lucide-react";
import { GaugeIcon } from "lucide-react";
import { AppWindowIcon } from "lucide-react";
import { RotateCwIcon, WrenchIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import prettyBytes from "pretty-bytes";
@@ -197,14 +197,14 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
<div css={styles.values}>
<Tooltip title="Data sent to workspaces">
<div css={styles.value}>
<DownloadIcon />
<CloudDownloadIcon className="size-icon-xs" />
{stats ? prettyBytes(stats.workspaces.rx_bytes) : "-"}
</div>
</Tooltip>
<ValueSeparator />
<Tooltip title="Data sent from workspaces">
<div css={styles.value}>
<UploadIcon />
<CloudUploadIcon className="size-icon-xs" />
{stats ? prettyBytes(stats.workspaces.tx_bytes) : "-"}
</div>
</Tooltip>
@@ -217,7 +217,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
}
>
<div css={styles.value}>
<LatencyIcon />
<GaugeIcon className="size-icon-xs" />
{displayLatency > 0 ? `${displayLatency?.toFixed(2)} ms` : "-"}
</div>
</Tooltip>
@@ -269,7 +269,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
<ValueSeparator />
<Tooltip title="Web Terminal Sessions">
<div css={styles.value}>
<WebTerminalIcon />
<AppWindowIcon className="size-icon-xs" />
{typeof stats?.session_count.reconnecting_pty === "undefined"
? "-"
: stats?.session_count.reconnecting_pty}
@@ -289,7 +289,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
>
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
<div css={styles.value}>
<CollectedIcon />
<GitCompareArrowsIcon className="size-icon-xs" />
{lastAggregated}
</div>
</Tooltip>
site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
+5 -6
View File
@@ -4,7 +4,6 @@ import AppsIcon from "@mui/icons-material/Apps";
import CheckCircle from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
import OpenInNew from "@mui/icons-material/OpenInNew";
import Warning from "@mui/icons-material/Warning";
import CircularProgress from "@mui/material/CircularProgress";
import type {
@@ -13,6 +12,7 @@ import type {
WorkspaceAgent,
WorkspaceApp,
} from "api/typesGenerated";
import { ExternalLinkIcon } from "lucide-react";
import { useAppLink } from "modules/apps/useAppLink";
import type { FC } from "react";
@@ -186,13 +186,12 @@ export const WorkspaceAppStatus = ({
},
}}
>
<OpenInNew
sx={{
fontSize: 11,
<ExternalLinkIcon
className="size-icon-xs"
css={{
opacity: 0.7,
mt: -0.125,
flexShrink: 0,
mr: 0.5,
marginRight: 2,
}}
/>
<span
site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+1 -1
View File
@@ -1,5 +1,4 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import InfoIcon from "@mui/icons-material/InfoOutlined";
import Link from "@mui/material/Link";
import Skeleton from "@mui/material/Skeleton";
import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -16,6 +15,7 @@ import {
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { usePopover } from "components/deprecated/Popover/Popover";
import { InfoIcon } from "lucide-react";
import { RotateCcwIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import type { FC } from "react";
site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
+5 -2
View File
@@ -1,7 +1,7 @@
import type { Interpolation, Theme } from "@emotion/react";
import ErrorSharp from "@mui/icons-material/ErrorSharp";
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import type { TimingStage } from "api/typesGenerated";
import { InfoIcon } from "lucide-react";
import type { FC } from "react";
import { Bar, ClickableBar } from "./Chart/Bar";
import { Blocks } from "./Chart/Blocks";
@@ -107,7 +107,10 @@ export const StagesChart: FC<StagesChartProps> = ({
<span css={styles.stageLabel}>
{stage.label}
<Tooltip {...stage.tooltip}>
<InfoOutlined css={styles.info} />
<InfoIcon
className="size-icon-xs"
css={styles.info}
/>
</Tooltip>
</span>
</YAxisLabel>
site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
@@ -10,6 +9,7 @@ import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Pill } from "components/Pill/Pill";
import { Stack } from "components/Stack/Stack";
import { TimelineEntry } from "components/Timeline/TimelineEntry";
import { InfoIcon } from "lucide-react";
import { NetworkIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
@@ -191,9 +191,8 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
</div>
}
>
<InfoOutlined
<InfoIcon
css={(theme) => ({
fontSize: 20,
color: theme.palette.info.light,
})}
/>