diff --git a/site/migrate-icons.md b/site/migrate-icons.md deleted file mode 100644 index 5bf361c2151a1..0000000000000 --- a/site/migrate-icons.md +++ /dev/null @@ -1,8 +0,0 @@ -Look for all the @mui/icons-material icons below and replace them accordinlying with the Lucide icon: - -MUI | Lucide -TaskAlt | CircleCheckBigIcon -InfoOutlined | InfoIcon -ErrorOutline | CircleAlertIcon - -You should update the imports and usage. diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx index 66b0312f804c1..ede669416d743 100644 --- a/site/src/components/Filter/Filter.tsx +++ b/site/src/components/Filter/Filter.tsx @@ -1,5 +1,4 @@ import { useTheme } from "@emotion/react"; -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import Divider from "@mui/material/Divider"; import Menu from "@mui/material/Menu"; @@ -14,6 +13,7 @@ import { import { InputGroup } from "components/InputGroup/InputGroup"; import { SearchField } from "components/SearchField/SearchField"; import { useDebouncedFunction } from "hooks/debounce"; +import { ExternalLinkIcon } from "lucide-react"; import { ChevronDownIcon } from "lucide-react"; import { type FC, type ReactNode, useEffect, useRef, useState } from "react"; import type { useSearchParams } from "react-router-dom"; @@ -311,7 +311,7 @@ const PresetMenu: FC = ({ setIsOpen(false); }} > - + View advanced filtering )} @@ -325,7 +325,7 @@ const PresetMenu: FC = ({ setIsOpen(false); }} > - + {learnMoreLabel2} )} diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx index cf30e2b169e33..2ae8700114b3b 100644 --- a/site/src/components/HelpTooltip/HelpTooltip.tsx +++ b/site/src/components/HelpTooltip/HelpTooltip.tsx @@ -5,7 +5,6 @@ import { css, useTheme, } from "@emotion/react"; -import HelpIcon from "@mui/icons-material/HelpOutline"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import Link from "@mui/material/Link"; import { Stack } from "components/Stack/Stack"; @@ -17,6 +16,7 @@ import { PopoverTrigger, usePopover, } from "components/deprecated/Popover/Popover"; +import { CircleHelpIcon } from "lucide-react"; import { type FC, type HTMLAttributes, @@ -25,11 +25,11 @@ import { forwardRef, } from "react"; -type Icon = typeof HelpIcon; +type Icon = typeof CircleHelpIcon; type Size = "small" | "medium"; -export const HelpTooltipIcon = HelpIcon; +export const HelpTooltipIcon = CircleHelpIcon; export const HelpTooltip: FC = (props) => { return ; diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx index 706bf106876b5..b5509ba450847 100644 --- a/site/src/components/Latency/Latency.tsx +++ b/site/src/components/Latency/Latency.tsx @@ -1,9 +1,9 @@ import { useTheme } from "@emotion/react"; -import HelpOutline from "@mui/icons-material/HelpOutline"; import CircularProgress from "@mui/material/CircularProgress"; import Tooltip from "@mui/material/Tooltip"; import { visuallyHidden } from "@mui/utils"; import { Abbr } from "components/Abbr/Abbr"; +import { CircleHelpIcon } from "lucide-react"; import type { FC } from "react"; import { getLatencyColor } from "utils/latency"; @@ -41,10 +41,10 @@ export const Latency: FC = ({ <> {notAvailableText} - diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 84fe47bbbfee3..e62f1d57a9a39 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,5 +1,4 @@ import type { Interpolation, Theme } from "@emotion/react"; -import ErrorOutline from "@mui/icons-material/ErrorOutline"; import SettingsIcon from "@mui/icons-material/Settings"; import Button from "@mui/material/Button"; import FormControlLabel from "@mui/material/FormControlLabel"; @@ -14,6 +13,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { MemoizedMarkdown } from "components/Markdown/Markdown"; import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; +import { CircleAlertIcon } from "lucide-react"; import { type FC, type ReactNode, useState } from "react"; import type { AutofillBuildParameter, @@ -143,7 +143,10 @@ const ParameterLabel: FC = ({ parameter, isPreset }) => { )} {!parameter.mutable && ( - }> + } + > Immutable diff --git a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx index dd3c29e262986..c4e313d103f02 100644 --- a/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx +++ b/site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx @@ -4,7 +4,6 @@ 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 ErrorIcon from "@mui/icons-material/ErrorOutline"; import RefreshIcon from "@mui/icons-material/Refresh"; import LatencyIcon from "@mui/icons-material/SettingsEthernet"; import WebTerminalIcon from "@mui/icons-material/WebAsset"; @@ -24,6 +23,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 { CircleAlertIcon } from "lucide-react"; import prettyBytes from "pretty-bytes"; import { type FC, @@ -151,7 +151,7 @@ export const DeploymentBannerView: FC = ({ to="/health" css={[styles.statusBadge, styles.unhealthy]} > - + ) : (
@@ -372,9 +372,9 @@ const HealthIssue: FC = ({ children }) => { return ( - {children} diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx index e5bd25d79b228..c961def910589 100644 --- a/site/src/modules/resources/AgentOutdatedTooltip.tsx +++ b/site/src/modules/resources/AgentOutdatedTooltip.tsx @@ -1,5 +1,4 @@ import { useTheme } from "@emotion/react"; -import RefreshIcon from "@mui/icons-material/RefreshOutlined"; import type { WorkspaceAgent } from "api/typesGenerated"; import { HelpTooltip, @@ -11,6 +10,7 @@ import { } from "components/HelpTooltip/HelpTooltip"; import { Stack } from "components/Stack/Stack"; import { PopoverTrigger } from "components/deprecated/Popover/Popover"; +import { RotateCcwIcon } from "lucide-react"; import type { FC } from "react"; import { agentVersionStatus } from "../../utils/workspace"; @@ -68,7 +68,7 @@ export const AgentOutdatedTooltip: FC = ({ diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx index e2670eed65b02..437adf881e745 100644 --- a/site/src/modules/resources/PortForwardButton.tsx +++ b/site/src/modules/resources/PortForwardButton.tsx @@ -1,7 +1,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import LockIcon from "@mui/icons-material/Lock"; import LockOpenIcon from "@mui/icons-material/LockOpen"; -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import SensorsIcon from "@mui/icons-material/Sensors"; import LoadingButton from "@mui/lab/LoadingButton"; import Button from "@mui/material/Button"; @@ -40,8 +39,7 @@ import { } from "components/deprecated/Popover/Popover"; import { type FormikContextType, useFormik } from "formik"; import { type ClassName, useClassName } from "hooks/useClassName"; -import { X as XIcon } from "lucide-react"; -import { ChevronDownIcon } from "lucide-react"; +import { ChevronDownIcon, ExternalLinkIcon, X as XIcon } from "lucide-react"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, useState } from "react"; import { useMutation, useQuery } from "react-query"; @@ -308,11 +306,10 @@ export const PortForwardPopoverView: FC = ({ minWidth: 0, }} > - diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx index 9615560840c59..eed553b588ec6 100644 --- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx @@ -1,6 +1,5 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react"; import InfoIcon from "@mui/icons-material/InfoOutlined"; -import RefreshIcon from "@mui/icons-material/Refresh"; import Link from "@mui/material/Link"; import Skeleton from "@mui/material/Skeleton"; import { getErrorDetail, getErrorMessage } from "api/errors"; @@ -17,6 +16,7 @@ import { HelpTooltipTrigger, } from "components/HelpTooltip/HelpTooltip"; import { usePopover } from "components/deprecated/Popover/Popover"; +import { RotateCcwIcon } from "lucide-react"; import { linkToTemplate, useLinks } from "modules/navigation"; import type { FC } from "react"; import { useQuery } from "react-query"; @@ -104,7 +104,7 @@ const WorkspaceOutdatedTooltipContent: FC = ({ workspace }) => { Update diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx index fc1ab550a8854..85b556c786a07 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx @@ -1,9 +1,9 @@ import { css } from "@emotion/css"; import { type Interpolation, type Theme, useTheme } from "@emotion/react"; -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import MUITooltip, { type TooltipProps as MUITooltipProps, } from "@mui/material/Tooltip"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC, HTMLProps } from "react"; import { Link, type LinkProps } from "react-router-dom"; @@ -36,7 +36,7 @@ export const TooltipShortDescription: FC> = ( export const TooltipLink: FC = (props) => { return ( - + {props.children} ); diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx index 365f105f6ffb4..f97ec2d82be09 100644 --- a/site/src/pages/GroupsPage/GroupPage.tsx +++ b/site/src/pages/GroupsPage/GroupPage.tsx @@ -50,8 +50,7 @@ import { TableToolbar, } from "components/TableToolbar/TableToolbar"; import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; -import { TrashIcon } from "lucide-react"; -import { EllipsisVertical } from "lucide-react"; +import { EllipsisVertical, TrashIcon } from "lucide-react"; import { type FC, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -134,7 +133,7 @@ const GroupPage: FC = () => { onClick={() => { setIsDeletingGroup(true); }} - startIcon={} + startIcon={} css={styles.removeButton} > Delete… diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx index 2bd5e96f2450e..74cbc9a5b87c1 100644 --- a/site/src/pages/HealthPage/Content.tsx +++ b/site/src/pages/HealthPage/Content.tsx @@ -1,10 +1,9 @@ import { css } from "@emotion/css"; import { useTheme } from "@emotion/react"; -import ErrorOutline from "@mui/icons-material/ErrorOutline"; import Link from "@mui/material/Link"; import type { HealthCode, HealthSeverity } from "api/typesGenerated"; -import { CircleCheck as CircleCheckIcon } from "lucide-react"; -import { CircleMinus as CircleMinusIcon } from "lucide-react"; +import { CircleAlertIcon } from "lucide-react"; +import { CircleCheckIcon, CircleMinusIcon } from "lucide-react"; import { type ComponentProps, type FC, @@ -57,7 +56,7 @@ interface HealthIconProps { export const HealthIcon: FC = ({ size, severity }) => { const theme = useTheme(); const color = healthyColor(theme, severity); - const Icon = severity === "error" ? ErrorOutline : CircleCheckIcon; + const Icon = severity === "error" ? CircleAlertIcon : CircleCheckIcon; return ; }; diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx index c79bfc809556f..00872ed8d5bfb 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx @@ -1,6 +1,5 @@ import { useTheme } from "@emotion/react"; import PlusIcon from "@mui/icons-material/AddOutlined"; -import ViewCodeIcon from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import type { TemplateExample } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; @@ -14,6 +13,7 @@ import { PageHeaderTitle, } from "components/PageHeader/PageHeader"; import { Stack } from "components/Stack/Stack"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { Link } from "react-router-dom"; @@ -50,7 +50,7 @@ export const StarterTemplatePageView: FC = ({ target="_blank" href={starterTemplate.url} rel="noreferrer" - startIcon={} + startIcon={} > View source code diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index 94f2d17769d08..cfee103357422 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx @@ -1,8 +1,8 @@ import CheckIcon from "@mui/icons-material/CheckOutlined"; -import ErrorIcon from "@mui/icons-material/ErrorOutline"; import QueuedIcon from "@mui/icons-material/HourglassEmpty"; import type { TemplateVersion } from "api/typesGenerated"; import { Pill, PillSpinner } from "components/Pill/Pill"; +import { CircleAlertIcon } from "lucide-react"; import type { FC, ReactNode } from "react"; import type { ThemeRole } from "theme/roles"; import { getPendingStatusLabel } from "utils/provisionerJob"; @@ -57,14 +57,14 @@ const getStatus = ( return { type: "inactive", text: "Canceled", - icon: , + icon: , }; case "unknown": case "failed": return { type: "error", text: "Failed", - icon: , + icon: , }; case "succeeded": return { diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx index f9a2467196ecb..1be416a48c3b2 100644 --- a/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx +++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx @@ -58,7 +58,7 @@ export const TokensPageView: FC = ({ Last Used Expires At Created At - + diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx index a285f8acc0e53..9d8b8ed4752c3 100644 --- a/site/src/pages/WorkspacePage/AppStatuses.tsx +++ b/site/src/pages/WorkspacePage/AppStatuses.tsx @@ -3,7 +3,6 @@ import { useTheme } from "@emotion/react"; import AppsIcon from "@mui/icons-material/Apps"; import CheckCircle from "@mui/icons-material/CheckCircle"; import ErrorIcon from "@mui/icons-material/Error"; -import HelpOutline from "@mui/icons-material/HelpOutline"; import HourglassEmpty from "@mui/icons-material/HourglassEmpty"; import InsertDriveFile from "@mui/icons-material/InsertDriveFile"; import OpenInNew from "@mui/icons-material/OpenInNew"; @@ -18,6 +17,7 @@ import type { WorkspaceApp, } from "api/typesGenerated"; import { formatDistance, formatDistanceToNow } from "date-fns"; +import { CircleHelpIcon } from "lucide-react"; import { useAppLink } from "modules/apps/useAppLink"; import type { FC } from "react"; @@ -224,7 +224,10 @@ export const AppStatuses: FC = ({ }} > {getStatusIcon(theme, status.state, isLatest) || ( - + )}
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx index a3bc7964f9558..443e7183cca60 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx @@ -1,4 +1,3 @@ -import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"; import Button from "@mui/material/Button"; import { API } from "api/api"; import { isApiValidationError } from "api/errors"; @@ -9,6 +8,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert"; import { EmptyState } from "components/EmptyState/EmptyState"; import { Loader } from "components/Loader/Loader"; import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"; +import { ExternalLinkIcon } from "lucide-react"; import type { FC } from "react"; import { Helmet } from "react-helmet-async"; import { useMutation, useQuery } from "react-query"; @@ -143,7 +143,7 @@ export const WorkspaceParametersPageView: FC<