chore: replace MUI icons - 2 (#17732)

Replace icons: 

Check | CheckIcon
KeyboardArrowDown | ChevronDownIcon
KeyboardArrowUp | ChevronUpIcon
This commit is contained in:
Bruno Quaresma
2025-05-09 14:44:10 -03:00
committed by GitHub
parent 9e44f18b4b
commit b0a4ef01a8
9 changed files with 21 additions and 24 deletions
@@ -1,8 +1,8 @@
import { type Interpolation, type Theme, css } from "@emotion/react";
import Check from "@mui/icons-material/Check";
import IconButton from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import { useClipboard } from "hooks/useClipboard";
import { CheckIcon } from "lucide-react";
import { type ReactNode, forwardRef } from "react";
import { FileCopyIcon } from "../Icons/FileCopyIcon";
@@ -48,7 +48,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
onClick={copyToClipboard}
>
{showCopiedSuccess ? (
<Check css={styles.copyIcon} />
<CheckIcon css={styles.copyIcon} />
) : (
<FileCopyIcon css={styles.copyIcon} />
)}
@@ -1,6 +1,5 @@
import type { Interpolation, Theme } from "@emotion/react";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type { FC } from "react";
interface ArrowProps {
@@ -14,7 +13,7 @@ export const DropdownArrow: FC<ArrowProps> = ({
color,
close,
}) => {
const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
const Arrow = close ? ChevronUpIcon : ChevronDownIcon;
return (
<Arrow
@@ -1,8 +1,8 @@
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import FormHelperText from "@mui/material/FormHelperText";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import TextField, { type TextFieldProps } from "@mui/material/TextField";
import { ChevronDownIcon } from "lucide-react";
import { type FC, useEffect, useReducer } from "react";
import {
type TimeUnit,
@@ -126,7 +126,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
});
}}
inputProps={{ "aria-label": "Time unit" }}
IconComponent={KeyboardArrowDown}
IconComponent={ChevronDownIcon}
>
<MenuItem value="hours">Hours</MenuItem>
<MenuItem
+2 -2
View File
@@ -1,5 +1,4 @@
import { useTheme } from "@emotion/react";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
@@ -15,6 +14,7 @@ import {
import { InputGroup } from "components/InputGroup/InputGroup";
import { SearchField } from "components/SearchField/SearchField";
import { useDebouncedFunction } from "hooks/debounce";
import { ChevronDownIcon } from "lucide-react";
import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
import type { useSearchParams } from "react-router-dom";
@@ -267,7 +267,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
<Button
onClick={() => setIsOpen(true)}
ref={anchorRef}
endIcon={<KeyboardArrowDown />}
endIcon={<ChevronDownIcon className="size-4" />}
>
Filters
</Button>
@@ -1,6 +1,5 @@
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
import CloseIcon from "@mui/icons-material/Close";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import LockIcon from "@mui/icons-material/Lock";
import LockOpenIcon from "@mui/icons-material/LockOpen";
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
@@ -42,6 +41,7 @@ import {
} from "components/deprecated/Popover/Popover";
import { type FormikContextType, useFormik } from "formik";
import { type ClassName, useClassName } from "hooks/useClassName";
import { ChevronDownIcon } from "lucide-react";
import { useDashboard } from "modules/dashboard/useDashboard";
import { type FC, useState } from "react";
import { useMutation, useQuery } from "react-query";
@@ -82,7 +82,7 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
disabled={!portsQuery.data}
size="small"
variant="text"
endIcon={<KeyboardArrowDown />}
endIcon={<ChevronDownIcon className="size-4" />}
css={{ fontSize: 13, padding: "8px 12px" }}
startIcon={
portsQuery.data ? (
@@ -1,5 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import Button from "@mui/material/Button";
import { CodeExample } from "components/CodeExample/CodeExample";
import {
@@ -14,6 +13,7 @@ import {
PopoverTrigger,
} from "components/deprecated/Popover/Popover";
import { type ClassName, useClassName } from "hooks/useClassName";
import { ChevronDownIcon } from "lucide-react";
import type { FC } from "react";
import { docs } from "utils/docs";
@@ -36,7 +36,7 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
<Button
size="small"
variant="text"
endIcon={<KeyboardArrowDown />}
endIcon={<ChevronDownIcon className="size-4" />}
css={{ fontSize: 13, padding: "8px 12px" }}
>
Connect via SSH
@@ -98,7 +98,7 @@ export const AgentDevcontainerSSHButton: FC<
<Button
size="small"
variant="text"
endIcon={<KeyboardArrowDown />}
endIcon={<ChevronDownIcon className="size-4" />}
css={{ fontSize: 13, padding: "8px 12px" }}
>
Connect via SSH
@@ -1,6 +1,4 @@
import type { Interpolation, Theme } from "@emotion/react";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import Skeleton from "@mui/material/Skeleton";
@@ -11,6 +9,7 @@ import type {
} from "api/typesGenerated";
import sortBy from "lodash/sortBy";
import uniqBy from "lodash/uniqBy";
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import { type FC, useState } from "react";
import {
type TimeRange,
@@ -102,9 +101,9 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
onClick={() => setIsOpen((o) => !o)}
>
{isOpen ? (
<KeyboardArrowUp css={{ fontSize: 16, marginRight: 16 }} />
<ChevronUpIcon css={{ width: 16, height: 16, marginRight: 16 }} />
) : (
<KeyboardArrowDown css={{ fontSize: 16, marginRight: 16 }} />
<ChevronDownIcon css={{ width: 16, height: 16, marginRight: 16 }} />
)}
<span>Build timeline</span>
<span
@@ -1,5 +1,4 @@
import CloudQueue from "@mui/icons-material/CloudQueue";
import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
import LoadingButton from "@mui/lab/LoadingButton";
import { hasError, isApiValidationError } from "api/errors";
import type { Template, Workspace } from "api/typesGenerated";
@@ -19,7 +18,7 @@ import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
import { Stack } from "components/Stack/Stack";
import { TableToolbar } from "components/TableToolbar/TableToolbar";
import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
import { ChevronDownIcon, PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
import type { FC } from "react";
import type { UseQueryResult } from "react-query";
@@ -142,7 +141,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
variant="text"
size="small"
css={{ borderRadius: 9999, marginLeft: "auto" }}
endIcon={<KeyboardArrowDownOutlined />}
endIcon={<ChevronDownIcon className="size-4" />}
>
Actions
</LoadingButton>
@@ -1,4 +1,3 @@
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import Star from "@mui/icons-material/Star";
import Checkbox from "@mui/material/Checkbox";
import Skeleton from "@mui/material/Skeleton";
@@ -52,6 +51,7 @@ import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useAuthenticated } from "hooks";
import { useClickableTableRow } from "hooks/useClickableTableRow";
import { ChevronRightIcon } from "lucide-react";
import {
BanIcon,
PlayIcon,
@@ -303,7 +303,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
/>
<TableCell>
<div className="flex">
<KeyboardArrowRight className="text-content-secondary size-icon-sm" />
<ChevronRightIcon className="text-content-secondary size-icon-sm" />
</div>
</TableCell>
</WorkspacesRow>
@@ -385,7 +385,7 @@ const TableLoader: FC<TableLoaderProps> = ({ canCheckWorkspaces }) => {
</TableCell>
<TableCell>
<div className="flex">
<KeyboardArrowRight className="text-content-disabled size-icon-sm" />
<ChevronRightIcon className="text-content-disabled size-icon-sm" />
</div>
</TableCell>
</TableRowSkeleton>