Skip to content

chore: replace MUI icons with Lucide icons - 10 #17797

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 13, 2025
Merged

chore: replace MUI icons with Lucide icons - 10 #17797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions site/src/components/Search/Search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { Interpolation, Theme } from "@emotion/react";
import SearchOutlined from "@mui/icons-material/SearchOutlined";
// biome-ignore lint/nursery/noRestrictedImports: use it to have the component prop
import Box, { type BoxProps } from "@mui/material/Box";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { SearchIcon } from "lucide-react";
import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";

interface SearchProps extends Omit<BoxProps, "ref"> {
Expand All @@ -21,7 +21,7 @@ interface SearchProps extends Omit<BoxProps, "ref"> {
export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
return (
<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
<SearchOutlined css={SearchStyles.icon} />
<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
{children}
</Box>
);
Expand Down
7 changes: 3 additions & 4 deletions site/src/components/SearchField/SearchField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { useTheme } from "@emotion/react";
import CloseIcon from "@mui/icons-material/CloseOutlined";
import SearchIcon from "@mui/icons-material/SearchOutlined";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { SearchIcon, XIcon } from "lucide-react";
import { type FC, useEffect, useRef } from "react";

export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
Expand Down Expand Up @@ -41,8 +40,8 @@ export const SearchField: FC<SearchFieldProps> = ({
startAdornment: (
<InputAdornment position="start">
<SearchIcon
className="size-icon-xs"
css={{
fontSize: 16,
color: theme.palette.text.secondary,
}}
/>
Expand All @@ -57,7 +56,7 @@ export const SearchField: FC<SearchFieldProps> = ({
onChange("");
}}
>
<CloseIcon css={{ fontSize: 14 }} />
<XIcon className="size-icon-xs" />
<span css={{ ...visuallyHidden }}>Clear search</span>
</IconButton>
</Tooltip>
Expand Down
7 changes: 3 additions & 4 deletions site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import type { CSSInterpolation } from "@emotion/css/dist/declarations/src/create-instance";
import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
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 RefreshIcon from "@mui/icons-material/Refresh";
import LatencyIcon from "@mui/icons-material/SettingsEthernet";
import WebTerminalIcon from "@mui/icons-material/WebAsset";
import Button from "@mui/material/Button";
Expand All @@ -23,6 +21,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 { RotateCwIcon, WrenchIcon } from "lucide-react";
import { CircleAlertIcon } from "lucide-react";
import prettyBytes from "pretty-bytes";
import {
Expand Down Expand Up @@ -322,7 +321,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
}}
variant="text"
>
<RefreshIcon />
<RotateCwIcon className="size-icon-xs" />
{timeUntilRefresh}s
</Button>
</Tooltip>
Expand All @@ -344,7 +343,7 @@ const WorkspaceBuildValue: FC<WorkspaceBuildValueProps> = ({
let statusText = displayStatus.text;
let icon = displayStatus.icon;
if (status === "starting") {
icon = <BuildingIcon />;
icon = <WrenchIcon className="size-icon-xs" />;
statusText = "Building";
}

Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import AddIcon from "@mui/icons-material/AddOutlined";
import RefreshIcon from "@mui/icons-material/Refresh";
import LoadingButton from "@mui/lab/LoadingButton";
import Button from "@mui/material/Button";
import MuiLink from "@mui/material/Link";
Expand All @@ -15,6 +14,7 @@ import {
} from "components/SettingsHeader/SettingsHeader";
import { Stack } from "components/Stack/Stack";
import { useWindowSize } from "hooks/useWindowSize";
import { RotateCwIcon } from "lucide-react";
import type { FC } from "react";
import Confetti from "react-confetti";
import { Link } from "react-router-dom";
Expand Down Expand Up @@ -84,7 +84,7 @@ const LicensesSettingsPageView: FC<Props> = ({
loadingPosition="start"
loading={isRefreshing}
onClick={refreshEntitlements}
startIcon={<RefreshIcon />}
startIcon={<RotateCwIcon className="size-icon-xs" />}
>
Refresh
</LoadingButton>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import type { Interpolation, Theme } from "@emotion/react";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import RefreshIcon from "@mui/icons-material/Refresh";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import type { ApiErrorResponse } from "api/errors";
Expand All @@ -10,6 +9,7 @@ import { Avatar } from "components/Avatar/Avatar";
import { GitDeviceAuth } from "components/GitDeviceAuth/GitDeviceAuth";
import { SignInLayout } from "components/SignInLayout/SignInLayout";
import { Welcome } from "components/Welcome/Welcome";
import { RotateCwIcon } from "lucide-react";
import type { FC, ReactNode } from "react";

export interface ExternalAuthPageViewProps {
Expand Down Expand Up @@ -132,7 +132,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
onReauthenticate();
}}
>
<RefreshIcon /> Reauthenticate
<RotateCwIcon className="size-icon-xs" /> Reauthenticate
</Link>
</div>
</SignInLayout>
Expand Down
7 changes: 3 additions & 4 deletions site/src/pages/IconsPage/IconsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { useTheme } from "@emotion/react";
import ClearIcon from "@mui/icons-material/CloseOutlined";
import SearchIcon from "@mui/icons-material/SearchOutlined";
import IconButton from "@mui/material/IconButton";
import InputAdornment from "@mui/material/InputAdornment";
import Link from "@mui/material/Link";
Expand All @@ -15,6 +13,7 @@ import {
PageHeaderTitle,
} from "components/PageHeader/PageHeader";
import { Stack } from "components/Stack/Stack";
import { SearchIcon, XIcon } from "lucide-react";
import { type FC, type ReactNode, useMemo, useState } from "react";
import { Helmet } from "react-helmet-async";
import {
Expand Down Expand Up @@ -129,8 +128,8 @@ const IconsPage: FC = () => {
startAdornment: (
<InputAdornment position="start">
<SearchIcon
className="size-icon-xs"
css={{
fontSize: 14,
color: theme.palette.text.secondary,
}}
/>
Expand All @@ -143,7 +142,7 @@ const IconsPage: FC = () => {
size="small"
onClick={() => setSearchInputText("")}
>
<ClearIcon css={{ fontSize: 14 }} />
<XIcon className="size-icon-xs" />
</IconButton>
</Tooltip>
</InputAdornment>
Expand Down
5 changes: 2 additions & 3 deletions site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import CreateIcon from "@mui/icons-material/AddOutlined";
import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
import CloseOutlined from "@mui/icons-material/CloseOutlined";
import WarningOutlined from "@mui/icons-material/WarningOutlined";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
Expand All @@ -27,7 +26,7 @@ import {
} from "components/FullPageLayout/Topbar";
import { displayError } from "components/GlobalSnackbar/utils";
import { Loader } from "components/Loader/Loader";
import { PlayIcon } from "lucide-react";
import { PlayIcon, XIcon } from "lucide-react";
import { linkToTemplate, useLinks } from "modules/navigation";
import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
Expand Down Expand Up @@ -567,7 +566,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
borderRadius: 0,
}}
>
<CloseOutlined css={{ width: 16, height: 16 }} />
<XIcon className="size-icon-xs" />
</IconButton>
)}
</div>
Expand Down
Loading