mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
chore: replace MUI icons - 2 (#17732)
Replace icons: Check | CheckIcon KeyboardArrowDown | ChevronDownIcon KeyboardArrowUp | ChevronUpIcon
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user