Skip to content

Commit 4b8d739

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: migrate MUI icons to lucide-react (#20193)
1 parent e5d7f43 commit 4b8d739

File tree

14 files changed

+70
-76
lines changed

14 files changed

+70
-76
lines changed

‎site/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"humanize-duration": "3.32.2",
9292
"jszip": "3.10.1",
9393
"lodash": "4.17.21",
94-
"lucide-react": "0.474.0",
94+
"lucide-react": "0.545.0",
9595
"monaco-editor": "0.53.0",
9696
"pretty-bytes": "6.1.1",
9797
"react": "19.1.1",

‎site/pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/modules/resources/AppLink/ShareIcon.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import BusinessIcon from "@mui/icons-material/Business";
2-
import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
3-
import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
41
import Tooltip from "@mui/material/Tooltip";
52
import type * as TypesGen from "api/typesGenerated";
6-
import { SquareArrowOutUpRightIcon } from "lucide-react";
3+
import {
4+
Building2Icon,
5+
GlobeIcon,
6+
SquareArrowOutUpRightIcon,
7+
UsersIcon,
8+
} from "lucide-react";
79

810
interface ShareIconProps {
911
app: TypesGen.WorkspaceApp;
@@ -20,21 +22,21 @@ export const ShareIcon = ({ app }: ShareIconProps) => {
2022
if (app.sharing_level === "authenticated") {
2123
return (
2224
<Tooltip title="Shared with all authenticated users">
23-
<GroupOutlinedIcon />
25+
<UsersIcon />
2426
</Tooltip>
2527
);
2628
}
2729
if (app.sharing_level === "organization") {
2830
return (
2931
<Tooltip title="Shared with organization members">
30-
<BusinessIcon />
32+
<Building2Icon />
3133
</Tooltip>
3234
);
3335
}
3436
if (app.sharing_level === "public") {
3537
return (
3638
<Tooltip title="Shared publicly">
37-
<PublicOutlinedIcon />
39+
<GlobeIcon />
3840
</Tooltip>
3941
);
4042
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import BusinessIcon from "@mui/icons-material/Business";
3-
import LockIcon from "@mui/icons-material/Lock";
4-
import LockOpenIcon from "@mui/icons-material/LockOpen";
5-
import SensorsIcon from "@mui/icons-material/Sensors";
62
import FormControl from "@mui/material/FormControl";
73
import Link from "@mui/material/Link";
84
import MenuItem from "@mui/material/MenuItem";
@@ -45,8 +41,12 @@ import {
4541
} from "components/Tooltip/Tooltip";
4642
import { useFormik } from "formik";
4743
import {
44+
BuildingIcon,
4845
ChevronDownIcon,
4946
ExternalLinkIcon,
47+
LockIcon,
48+
LockOpenIcon,
49+
RadioIcon,
5050
ShareIcon,
5151
X as XIcon,
5252
} from "lucide-react";
@@ -385,7 +385,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
385385
target="_blank"
386386
rel="noreferrer"
387387
>
388-
<SensorsIcon css={{ width: 14, height: 14 }} />
388+
<RadioIcon className="size-icon-sm" />
389389
{port.port}
390390
</Link>
391391
<Link
@@ -475,11 +475,11 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
475475
rel="noreferrer"
476476
>
477477
{share.share_level === "public" ? (
478-
<LockOpenIcon css={{ width: 14, height: 14 }} />
478+
<LockOpenIcon className="size-icon-sm" />
479479
) : share.share_level === "organization" ? (
480-
<BusinessIcon css={{ width: 14, height: 14 }} />
480+
<BuildingIcon className="size-icon-sm" />
481481
) : (
482-
<LockIcon css={{ width: 14, height: 14 }} />
482+
<LockIcon className="size-icon-sm" />
483483
)}
484484
{label}
485485
</Link>

‎site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { css } from "@emotion/react";
2-
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
3-
import FormatAlignLeftOutlined from "@mui/icons-material/FormatAlignLeftOutlined";
42
import Menu from "@mui/material/Menu";
53
import MenuItem from "@mui/material/MenuItem";
64
import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
75
import { DockerIcon } from "components/Icons/DockerIcon";
8-
import { ChevronRightIcon } from "lucide-react";
6+
import {
7+
ChevronDownIcon,
8+
ChevronRightIcon,
9+
TextAlignStartIcon,
10+
} from "lucide-react";
911
import {
1012
type CSSProperties,
1113
type ElementType,
@@ -90,7 +92,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
9092

9193
let icon: ElementType | undefined;
9294
if (isFolder(content)) {
93-
icon = FormatAlignLeftOutlined;
95+
icon = TextAlignStartIcon;
9496
} else if (filename.endsWith(".tf")) {
9597
icon = FileTypeTerraform;
9698
} else if (filename.endsWith(".md")) {
@@ -201,7 +203,7 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
201203

202204
return (
203205
<SimpleTreeView
204-
slots={{ collapseIcon: ExpandMoreIcon, expandIcon: ChevronRightIcon }}
206+
slots={{ collapseIcon: ChevronDownIcon, expandIcon: ChevronRightIcon }}
205207
aria-label="Files"
206208
defaultExpandedItems={activePath ? expandablePaths(activePath) : []}
207209
defaultSelectedItems={activePath}

‎site/src/modules/templates/TemplateFiles/TemplateFiles.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import EditOutlined from "@mui/icons-material/EditOutlined";
3-
import RadioButtonCheckedOutlined from "@mui/icons-material/RadioButtonCheckedOutlined";
42
import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter";
53
import set from "lodash/set";
4+
import { EditIcon } from "lucide-react";
65
import { linkToTemplate, useLinks } from "modules/navigation";
76
import { type FC, useCallback, useMemo } from "react";
87
import { Link } from "react-router";
8+
import { cn } from "utils/cn";
99
import type { FileTree } from "utils/filetree";
1010
import type { TemplateVersionFiles } from "utils/templateVersion";
1111
import { TemplateFileTree } from "./TemplateFileTree";
@@ -94,16 +94,13 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
9494
return (
9595
<div key={filename} css={styles.filePanel} id={filename}>
9696
<header css={styles.fileHeader}>
97-
{filename}
98-
{info.hasDiff && (
99-
<RadioButtonCheckedOutlined
100-
css={{
101-
width: 14,
102-
height: 14,
103-
color: theme.roles.warning.fill.outline,
104-
}}
105-
/>
106-
)}
97+
<span
98+
className={cn({
99+
"text-content-warning": info.hasDiff,
100+
})}
101+
>
102+
{filename}
103+
</span>
107104

108105
<div css={{ marginLeft: "auto" }}>
109106
<Link
@@ -121,7 +118,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
121118
},
122119
}}
123120
>
124-
<EditOutlined css={{ fontSize: "inherit" }} />
121+
<EditIcon className="text-inherit size-icon-xs" />
125122
Edit
126123
</Link>
127124
</div>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
2-
import NotificationOutlined from "@mui/icons-material/NotificationsOutlined";
31
import Skeleton from "@mui/material/Skeleton";
42
import { healthSettings, updateHealthSettings } from "api/queries/debug";
53
import type { HealthSection } from "api/typesGenerated";
64
import { Button } from "components/Button/Button";
75
import { displaySuccess } from "components/GlobalSnackbar/utils";
86
import { Spinner } from "components/Spinner/Spinner";
7+
import { BellIcon, BellOffIcon } from "lucide-react";
98
import { useMutation, useQuery, useQueryClient } from "react-query";
109

1110
export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
@@ -49,7 +48,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
4948
}}
5049
>
5150
<Spinner loading={enableMutation.isPending}>
52-
<NotificationsOffOutlined />
51+
<BellOffIcon />
5352
</Spinner>
5453
Enable warnings
5554
</Button>
@@ -69,7 +68,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
6968
}}
7069
>
7170
<Spinner loading={dismissMutation.isPending}>
72-
<NotificationOutlined />
71+
<BellIcon />
7372
</Spinner>
7473
Dismiss warnings
7574
</Button>

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import { useTheme } from "@emotion/react";
2-
import NotificationsOffOutlined from "@mui/icons-material/NotificationsOffOutlined";
3-
import ReplayIcon from "@mui/icons-material/Replay";
41
import CircularProgress from "@mui/material/CircularProgress";
52
import IconButton from "@mui/material/IconButton";
63
import Tooltip from "@mui/material/Tooltip";
@@ -9,6 +6,7 @@ import type { HealthSeverity } from "api/typesGenerated";
96
import { ErrorAlert } from "components/Alert/ErrorAlert";
107
import { Loader } from "components/Loader/Loader";
118
import kebabCase from "lodash/fp/kebabCase";
9+
import { BellOffIcon, RotateCcwIcon } from "lucide-react";
1210
import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
1311
import { type FC, Suspense } from "react";
1412
import { useMutation, useQuery, useQueryClient } from "react-query";
@@ -28,7 +26,6 @@ const linkStyles = {
2826
};
2927

3028
export const HealthLayout: FC = () => {
31-
const theme = useTheme();
3229
const queryClient = useQueryClient();
3330
const {
3431
data: healthStatus,
@@ -91,7 +88,7 @@ export const HealthLayout: FC = () => {
9188
{isRefreshing ? (
9289
<CircularProgress size={16} />
9390
) : (
94-
<ReplayIcon className="size-5" />
91+
<RotateCcwIcon className="size-5" />
9592
)}
9693
</IconButton>
9794
</Tooltip>
@@ -155,13 +152,7 @@ export const HealthLayout: FC = () => {
155152
/>
156153
{label}
157154
{healthSection.dismissed && (
158-
<NotificationsOffOutlined
159-
css={{
160-
fontSize: 14,
161-
marginLeft: "auto",
162-
color: theme.palette.text.disabled,
163-
}}
164-
/>
155+
<BellOffIcon className="size-icon-sm ml-auto text-content-disabled" />
165156
)}
166157
</NavLink>
167158
);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useTheme } from "@emotion/react";
22
import Tooltip from "@mui/material/Tooltip";
33
import type { HealthcheckReport } from "api/typesGenerated";
44
import { Alert } from "components/Alert/Alert";
5-
import { EarthIcon, HashIcon } from "lucide-react";
5+
import { GlobeIcon, HashIcon } from "lucide-react";
66
import type { FC } from "react";
77
import { useOutletContext } from "react-router";
88
import { createDayString } from "utils/createDayString";
@@ -107,7 +107,7 @@ const WorkspaceProxyPage: FC = () => {
107107
<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
108108
{region.wildcard_hostname && (
109109
<Tooltip title="Wildcard Hostname">
110-
<Pill icon={<EarthIcon />}>
110+
<Pill icon={<GlobeIcon />}>
111111
{region.wildcard_hostname}
112112
</Pill>
113113
</Tooltip>

‎site/src/pages/LoginPage/OAuthSignInForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import GitHubIcon from "@mui/icons-material/GitHub";
2-
import KeyIcon from "@mui/icons-material/VpnKey";
32
import { visuallyHidden } from "@mui/utils";
43
import type { AuthMethods } from "api/typesGenerated";
54
import { Button } from "components/Button/Button";
5+
import { KeyIcon } from "lucide-react";
66
import { type FC, useId } from "react";
77
import { Language } from "./Language";
88

0 commit comments

Comments
 (0)