Skip to content

Commit 4ac4137

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI icons with Lucide icons - 15 (#17861)
AccountCircleOutlined -> CircleUserIcon BugReportOutlined -> BugIcon ChatOutlined -> MessageSquareIcon ExitToAppOutlined -> LogOutIcon LaunchOutlined -> SquareArrowOutUpRightIcon MenuBook -> BookOpenTextIcon OpenInNew -> EternalLinkIcon EmailOutlined -> MailIcon WebhookOutlined -> WebhookIcon Business -> Building2Icon Person -> UserIcon
1 parent ea63d27 commit 4ac4137

File tree

8 files changed

+36
-29
lines changed

8 files changed

+36
-29
lines changed

‎site/src/components/GitDeviceAuth/GitDeviceAuth.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
32
import AlertTitle from "@mui/material/AlertTitle";
43
import CircularProgress from "@mui/material/CircularProgress";
54
import Link from "@mui/material/Link";
@@ -8,6 +7,7 @@ import type { ExternalAuthDevice } from "api/typesGenerated";
87
import { isAxiosError } from "axios";
98
import { Alert, AlertDetail } from "components/Alert/Alert";
109
import { CopyButton } from "components/CopyButton/CopyButton";
10+
import { ExternalLinkIcon } from "lucide-react";
1111
import type { FC } from "react";
1212

1313
interface GitDeviceAuthProps {
@@ -150,7 +150,7 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
150150
target="_blank"
151151
rel="noreferrer"
152152
>
153-
<OpenInNewIcon fontSize="small" />
153+
<ExternalLinkIcon className="size-icon-xs" />
154154
Open and Paste
155155
</Link>
156156
</div>

‎site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,6 @@ import {
44
type Theme,
55
css,
66
} from "@emotion/react";
7-
import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
8-
import BugIcon from "@mui/icons-material/BugReportOutlined";
9-
import ChatIcon from "@mui/icons-material/ChatOutlined";
10-
import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
11-
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
12-
import DocsIcon from "@mui/icons-material/MenuBook";
137
import Divider from "@mui/material/Divider";
148
import MenuItem from "@mui/material/MenuItem";
159
import type { SvgIconProps } from "@mui/material/SvgIcon";
@@ -19,7 +13,12 @@ import { CopyButton } from "components/CopyButton/CopyButton";
1913
import { ExternalImage } from "components/ExternalImage/ExternalImage";
2014
import { Stack } from "components/Stack/Stack";
2115
import { usePopover } from "components/deprecated/Popover/Popover";
22-
import { MonitorDownIcon } from "lucide-react";
16+
import { BookOpenTextIcon } from "lucide-react";
17+
import { BugIcon } from "lucide-react";
18+
import { CircleUserIcon } from "lucide-react";
19+
import { LogOutIcon } from "lucide-react";
20+
import { MessageSquareIcon } from "lucide-react";
21+
import { MonitorDownIcon, SquareArrowOutUpRightIcon } from "lucide-react";
2322
import type { FC } from "react";
2423
import { Link } from "react-router-dom";
2524

@@ -53,9 +52,9 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
5352
case "bug":
5453
return <BugIcon css={styles.menuItemIcon} />;
5554
case "chat":
56-
return <ChatIcon css={styles.menuItemIcon} />;
55+
return <MessageSquareIcon css={styles.menuItemIcon} />;
5756
case "docs":
58-
return <DocsIcon css={styles.menuItemIcon} />;
57+
return <BookOpenTextIcon css={styles.menuItemIcon} />;
5958
case "star":
6059
return <GithubStar css={styles.menuItemIcon} />;
6160
default:
@@ -86,13 +85,13 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
8685

8786
<Link to="/settings/account" css={styles.link}>
8887
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
89-
<AccountIcon css={styles.menuItemIcon} />
88+
<CircleUserIcon css={styles.menuItemIcon} />
9089
<span css={styles.menuItemText}>{Language.accountLabel}</span>
9190
</MenuItem>
9291
</Link>
9392

9493
<MenuItem css={styles.menuItem} onClick={onSignOut}>
95-
<LogoutIcon css={styles.menuItemIcon} />
94+
<LogOutIcon css={styles.menuItemIcon} />
9695
<span css={styles.menuItemText}>{Language.signOutLabel}</span>
9796
</MenuItem>
9897

@@ -126,7 +125,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
126125
target="_blank"
127126
rel="noreferrer"
128127
>
129-
{buildInfo?.version} <LaunchIcon />
128+
{buildInfo?.version} <SquareArrowOutUpRightIcon />
130129
</a>
131130
</Tooltip>
132131

‎site/src/modules/notifications/utils.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import EmailIcon from "@mui/icons-material/EmailOutlined";
2-
import WebhookIcon from "@mui/icons-material/WebhookOutlined";
1+
import { MailIcon } from "lucide-react";
2+
import { WebhookIcon } from "lucide-react";
33

44
// TODO: This should be provided by the auto generated types from codersdk
55
const notificationMethods = ["smtp", "webhook"] as const;
66

77
export type NotificationMethod = (typeof notificationMethods)[number];
88

9-
export const methodIcons: Record<NotificationMethod, typeof EmailIcon> = {
10-
smtp: EmailIcon,
9+
export const methodIcons: Record<NotificationMethod, typeof MailIcon> = {
10+
smtp: MailIcon,
1111
webhook: WebhookIcon,
1212
};
1313

‎site/src/modules/provisioners/Provisioner.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useTheme } from "@emotion/react";
2-
import Business from "@mui/icons-material/Business";
3-
import Person from "@mui/icons-material/Person";
42
import Tooltip from "@mui/material/Tooltip";
53
import type { HealthMessage, ProvisionerDaemon } from "api/typesGenerated";
64
import { Pill } from "components/Pill/Pill";
5+
import { Building2Icon } from "lucide-react";
6+
import { UserIcon } from "lucide-react";
77
import type { FC } from "react";
88
import { createDayString } from "utils/createDayString";
99
import { ProvisionerTag } from "./ProvisionerTag";
@@ -19,7 +19,12 @@ export const Provisioner: FC<ProvisionerProps> = ({
1919
}) => {
2020
const theme = useTheme();
2121
const daemonScope = provisioner.tags.scope || "organization";
22-
const iconScope = daemonScope === "organization" ? <Business /> : <Person />;
22+
const iconScope =
23+
daemonScope === "organization" ? (
24+
<Building2Icon className="size-icon-sm" />
25+
) : (
26+
<UserIcon className="size-icon-sm" />
27+
);
2328

2429
const extraTags = Object.entries(provisioner.tags).filter(
2530
([key]) => key !== "scope" && key !== "owner",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
2-
import LaunchOutlinedIcon from "@mui/icons-material/LaunchOutlined";
32
import PublicOutlinedIcon from "@mui/icons-material/PublicOutlined";
43
import Tooltip from "@mui/material/Tooltip";
54
import type * as TypesGen from "api/typesGenerated";
5+
import { SquareArrowOutUpRightIcon } from "lucide-react";
66

77
export interface ShareIconProps {
88
app: TypesGen.WorkspaceApp;
@@ -12,7 +12,7 @@ export const ShareIcon = ({ app }: ShareIconProps) => {
1212
if (app.external) {
1313
return (
1414
<Tooltip title="Open external URL">
15-
<LaunchOutlinedIcon />
15+
<SquareArrowOutUpRightIcon />
1616
</Tooltip>
1717
);
1818
}

‎site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
32
import Link from "@mui/material/Link";
43
import Tooltip from "@mui/material/Tooltip";
54
import type { ApiErrorResponse } from "api/errors";
@@ -9,6 +8,7 @@ import { Avatar } from "components/Avatar/Avatar";
98
import { GitDeviceAuth } from "components/GitDeviceAuth/GitDeviceAuth";
109
import { SignInLayout } from "components/SignInLayout/SignInLayout";
1110
import { Welcome } from "components/Welcome/Welcome";
11+
import { ExternalLinkIcon } from "lucide-react";
1212
import { RotateCwIcon } from "lucide-react";
1313
import type { FC, ReactNode } from "react";
1414

@@ -120,7 +120,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
120120
rel="noreferrer"
121121
css={styles.link}
122122
>
123-
<OpenInNewIcon fontSize="small" />
123+
<ExternalLinkIcon className="size-icon-xs" />
124124
{externalAuth.installations.length > 0 ? "Configure" : "Install"}{" "}
125125
the {externalAuth.display_name} App
126126
</Link>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import LaunchIcon from "@mui/icons-material/LaunchOutlined";
21
import Link from "@mui/material/Link";
2+
import { SquareArrowOutUpRightIcon } from "lucide-react";
33
import type { FC } from "react";
44

55
interface TermsOfServiceLinkProps {
@@ -21,7 +21,7 @@ export const TermsOfServiceLink: FC<TermsOfServiceLinkProps> = ({
2121
rel="noreferrer"
2222
>
2323
Terms of Service&nbsp;
24-
<LaunchIcon css={{ fontSize: 12 }} />
24+
<SquareArrowOutUpRightIcon className="size-icon-xs" />
2525
</Link>
2626
</div>
2727
);

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import AppsIcon from "@mui/icons-material/Apps";
44
import CheckCircle from "@mui/icons-material/CheckCircle";
55
import ErrorIcon from "@mui/icons-material/Error";
66
import InsertDriveFile from "@mui/icons-material/InsertDriveFile";
7-
import OpenInNew from "@mui/icons-material/OpenInNew";
87
import Warning from "@mui/icons-material/Warning";
98
import CircularProgress from "@mui/material/CircularProgress";
109
import Link from "@mui/material/Link";
@@ -16,6 +15,7 @@ import type {
1615
WorkspaceApp,
1716
} from "api/typesGenerated";
1817
import { formatDistance, formatDistanceToNow } from "date-fns";
18+
import { ExternalLinkIcon } from "lucide-react";
1919
import { HourglassIcon } from "lucide-react";
2020
import { CircleHelpIcon } from "lucide-react";
2121
import { useAppLink } from "modules/apps/useAppLink";
@@ -304,7 +304,10 @@ export const AppStatuses: FC<AppStatusesProps> = ({
304304
},
305305
}}
306306
>
307-
<OpenInNew sx={{ mr: 0.5 }} />
307+
<ExternalLinkIcon
308+
className="size-icon-xs"
309+
style={{ marginRight: "4px" }}
310+
/>
308311
<div
309312
css={{
310313
bgcolor: "transparent",

0 commit comments

Comments
 (0)