From d24864b480be58def90d592f3f688a7afec89e62 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 9 Nov 2023 18:40:58 +0000 Subject: [PATCH 1/2] refactor: add experimental `NewTheme` --- site/.storybook/preview.jsx | 2 +- site/src/@types/emotion.d.ts | 5 +- site/src/@types/mui.d.ts | 17 +- site/src/App.tsx | 12 +- .../components/BuildAvatar/BuildAvatar.tsx | 10 +- .../Dashboard/Navbar/NavbarView.tsx | 2 +- .../Navbar/UserDropdown/UserDropdown.tsx | 2 +- .../DeploySettingsLayout/Option.tsx | 2 +- site/src/theme/constants.ts | 5 + site/src/theme/experimental.ts | 154 +++++++++ site/src/theme/index.ts | 1 - site/src/theme/{theme.ts => mui.ts} | 13 +- site/src/theme/tailwind.ts | 291 ++++++++++++++++++ 13 files changed, 495 insertions(+), 21 deletions(-) create mode 100644 site/src/theme/experimental.ts delete mode 100644 site/src/theme/index.ts rename site/src/theme/{theme.ts => mui.ts} (97%) create mode 100644 site/src/theme/tailwind.ts diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 212abbc82cf39..2f196db0c51a5 100644 --- a/site/.storybook/preview.jsx +++ b/site/.storybook/preview.jsx @@ -6,7 +6,7 @@ import { import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { withRouter } from "storybook-addon-react-router-v6"; import { HelmetProvider } from "react-helmet-async"; -import { dark } from "theme"; +import { dark } from "theme/mui"; import "theme/globalFonts"; import { QueryClient, QueryClientProvider } from "react-query"; diff --git a/site/src/@types/emotion.d.ts b/site/src/@types/emotion.d.ts index 41f9e922d5091..1bb431a7e2e41 100644 --- a/site/src/@types/emotion.d.ts +++ b/site/src/@types/emotion.d.ts @@ -1,5 +1,8 @@ import type { DefaultTheme as MuiTheme } from "@mui/system"; +import type { NewTheme } from "theme/experimental"; declare module "@emotion/react" { - interface Theme extends MuiTheme {} + interface Theme extends MuiTheme { + experimental: NewTheme; + } } diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts index 3783826c0138c..4cba286dc6dee 100644 --- a/site/src/@types/mui.d.ts +++ b/site/src/@types/mui.d.ts @@ -1,10 +1,19 @@ -import { PaletteColor, PaletteColorOptions, Theme } from "@mui/material/styles"; +import type { + PaletteColor, + PaletteColorOptions, + Theme, +} from "@mui/material/styles"; +import type { NewTheme } from "theme/experimental"; declare module "@mui/styles/defaultTheme" { interface DefaultTheme extends Theme {} } declare module "@mui/material/styles" { + interface Theme { + experimental: NewTheme; + } + interface TypeBackground { paperLight: string; } @@ -23,3 +32,9 @@ declare module "@mui/material/Button" { neutral: true; } } + +declare module "@mui/system" { + interface Theme { + experimental: NewTheme; + } +} diff --git a/site/src/App.tsx b/site/src/App.tsx index 6e083bfb7792b..a05bf95e08f49 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -6,7 +6,8 @@ import { HelmetProvider } from "react-helmet-async"; import { AppRouter } from "./AppRouter"; import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"; import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"; -import { dark } from "./theme"; +import { dark } from "./theme/mui"; +import { dark as experimental } from "./theme/experimental"; import "./theme/globalFonts"; import { StyledEngineProvider, @@ -25,11 +26,16 @@ const defaultQueryClient = new QueryClient({ }, }); +const theme = { + ...dark, + experimental, +}; + export const ThemeProviders: FC = ({ children }) => { return ( - - + + {children} diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index 810df5d83a6a8..7f825ce9ef195 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/BuildAvatar/BuildAvatar.tsx @@ -1,11 +1,11 @@ import Badge from "@mui/material/Badge"; -import { useTheme, withStyles } from "@mui/styles"; -import { FC } from "react"; +import { withStyles } from "@mui/styles"; +import { type FC } from "react"; import { WorkspaceBuild } from "api/typesGenerated"; import { getDisplayWorkspaceBuildStatus } from "utils/workspace"; import { Avatar, AvatarProps } from "components/Avatar/Avatar"; -import { PaletteIndex } from "theme/theme"; -import { Theme } from "@mui/material/styles"; +import type { PaletteIndex } from "theme/mui"; +import { useTheme } from "@emotion/react"; import { BuildIcon } from "components/BuildIcon/BuildIcon"; interface StylesBadgeProps { @@ -30,7 +30,7 @@ export interface BuildAvatarProps { } export const BuildAvatar: FC = ({ build, size }) => { - const theme = useTheme(); + const theme = useTheme(); const displayBuildStatus = getDisplayWorkspaceBuildStatus(theme, build); return ( diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx index 372b685564972..538a780aeb48c 100644 --- a/site/src/components/Dashboard/Navbar/NavbarView.tsx +++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx @@ -17,7 +17,7 @@ import { ProxyContextValue } from "contexts/ProxyContext"; import { displayError } from "components/GlobalSnackbar/utils"; import Divider from "@mui/material/Divider"; import Skeleton from "@mui/material/Skeleton"; -import { BUTTON_SM_HEIGHT } from "theme/theme"; +import { BUTTON_SM_HEIGHT } from "theme/constants"; import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"; import { usePermissions } from "hooks/usePermissions"; import Typography from "@mui/material/Typography"; diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx index 48b1503cdeea9..0c656e8361d4a 100644 --- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -6,7 +6,7 @@ import { navHeight } from "theme/constants"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { UserDropdownContent } from "./UserDropdownContent"; -import { BUTTON_SM_HEIGHT } from "theme/theme"; +import { BUTTON_SM_HEIGHT } from "theme/constants"; import { css } from "@emotion/react"; import { Popover, diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index 153d71e7bd5e8..4ffa48a79261c 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren, FC } from "react"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; import Box, { BoxProps } from "@mui/material/Box"; -import { useTheme } from "@mui/system"; +import { useTheme } from "@emotion/react"; import { DisabledBadge, EnabledBadge } from "./Badges"; import { css } from "@emotion/react"; import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index a768dc4ab18e7..32282a1ad73a8 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -7,3 +7,8 @@ export const containerWidth = 1380; export const containerWidthMedium = 1080; export const sidePadding = 24; export const dashboardContentBottomPadding = 8 * 6; + +// MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit +export const BUTTON_LG_HEIGHT = 40; +export const BUTTON_MD_HEIGHT = 36; +export const BUTTON_SM_HEIGHT = 32; diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts new file mode 100644 index 0000000000000..6b3fe52f032bc --- /dev/null +++ b/site/src/theme/experimental.ts @@ -0,0 +1,154 @@ +import colors from "./tailwind"; + +export interface NewTheme { + l1: Role; // page background, things which sit at the "root level" + l2: InteractiveRole; // sidebars, table headers, navigation + l3: InteractiveRole; // buttons, inputs + modal: Role; // modals/popovers/dropdowns + + roles: { + danger: InteractiveRole; // delete, immutable parameters, stuff that sucks to fix + error: Role; // something went wrong + warning: Role; // something is amiss + notice: Role; // like info, but actionable. "this is fine, but you may want to..." + info: Role; // just sharing :) + success: InteractiveRole; // yay!! it's working!! + active: Role; // selected items, focused inputs, in progress + }; +} + +export interface Role { + background: string; + outline: string; + fill: string; + // contrastOutline?: string; + text: string; +} + +export interface InteractiveRole extends Role { + disabled: Role; + hover: Role; +} + +export const dark: NewTheme = { + l1: { + background: colors.gray[950], + outline: colors.gray[700], + fill: "#f00", + text: colors.white, + }, + + l2: { + background: colors.gray[900], + outline: colors.gray[700], + fill: "#f00", + text: colors.white, + disabled: { + background: "#f00", + outline: "#f00", + fill: "#f00", + text: colors.gray[200], + }, + hover: { + background: "#f00", + outline: "#f00", + fill: "#f00", + text: colors.white, + }, + }, + + l3: { + background: colors.gray[800], + outline: colors.gray[700], + fill: "#f00", + text: colors.white, + disabled: { + background: "#f00", + outline: "#f00", + fill: "#f00", + text: colors.gray[200], + }, + hover: { + background: "#f00", + outline: "#f00", + fill: "#f00", + text: colors.white, + }, + }, + + modal: { + background: "#f00", + outline: "#f00", + fill: "#f00", + text: colors.white, + }, + + roles: { + danger: { + background: colors.orange[950], + outline: colors.orange[500], + fill: colors.orange[600], + text: colors.orange[50], + disabled: { + background: colors.orange[950], + outline: colors.orange[600], + fill: colors.orange[800], + text: colors.orange[200], + }, + hover: { + background: colors.orange[900], + outline: colors.orange[500], + fill: colors.orange[500], + text: colors.orange[50], + }, + }, + error: { + background: colors.red[950], + outline: colors.red[500], + fill: colors.red[600], + text: colors.red[50], + }, + warning: { + background: colors.amber[950], + outline: colors.amber[300], + fill: "#f00", + text: colors.amber[50], + }, + notice: { + background: colors.yellow[950], + outline: colors.yellow[200], + fill: "#f00", + text: colors.yellow[50], + }, + info: { + background: colors.blue[950], + outline: colors.blue[400], + fill: "#f00", + text: colors.blue[50], + }, + success: { + background: colors.green[950], + outline: colors.green[500], + fill: colors.green[600], + text: colors.green[50], + disabled: { + background: colors.green[950], + outline: colors.green[600], + fill: colors.green[800], + text: colors.green[200], + }, + hover: { + background: colors.green[900], + outline: colors.green[500], + fill: colors.green[500], + text: colors.green[50], + }, + }, + active: { + background: colors.sky[950], + outline: colors.sky[500], + fill: "#f00", + text: colors.sky[50], + }, + }, +}; diff --git a/site/src/theme/index.ts b/site/src/theme/index.ts deleted file mode 100644 index 7cc5f34d8cda2..0000000000000 --- a/site/src/theme/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { dark } from "./theme"; diff --git a/site/src/theme/theme.ts b/site/src/theme/mui.ts similarity index 97% rename from site/src/theme/theme.ts rename to site/src/theme/mui.ts index 8747ec39d0d0f..41569d4fcb581 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/mui.ts @@ -1,11 +1,12 @@ import { colors, experimentalTheme } from "./colors"; import { createTheme, type ThemeOptions } from "@mui/material/styles"; -import { BODY_FONT_FAMILY, borderRadius } from "./constants"; - -// MUI does not have aligned heights for buttons and inputs so we have to "hack" it a little bit -export const BUTTON_LG_HEIGHT = 40; -export const BUTTON_MD_HEIGHT = 36; -export const BUTTON_SM_HEIGHT = 32; +import { + BODY_FONT_FAMILY, + borderRadius, + BUTTON_LG_HEIGHT, + BUTTON_MD_HEIGHT, + BUTTON_SM_HEIGHT, +} from "./constants"; export type PaletteIndex = | "primary" diff --git a/site/src/theme/tailwind.ts b/site/src/theme/tailwind.ts new file mode 100644 index 0000000000000..c640546616d97 --- /dev/null +++ b/site/src/theme/tailwind.ts @@ -0,0 +1,291 @@ +export default { + black: "#000", + white: "#fff", + slate: { + 50: "#f8fafc", + 100: "#f1f5f9", + 200: "#e2e8f0", + 300: "#cbd5e1", + 400: "#94a3b8", + 500: "#64748b", + 600: "#475569", + 700: "#334155", + 800: "#1e293b", + 900: "#0f172a", + 950: "#020617", + }, + gray: { + 50: "#f9fafb", + 100: "#f3f4f6", + 200: "#e5e7eb", + 300: "#d1d5db", + 400: "#9ca3af", + 500: "#6b7280", + 600: "#4b5563", + 700: "#374151", + 800: "#1f2937", + 900: "#111827", + 950: "#030712", + }, + zinc: { + 50: "#fafafa", + 100: "#f4f4f5", + 200: "#e4e4e7", + 300: "#d4d4d8", + 400: "#a1a1aa", + 500: "#71717a", + 600: "#52525b", + 650: "#4b4b52", + 700: "#3f3f46", + 800: "#27272a", + 900: "#18181b", + 950: "#09090b", + }, + neutral: { + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#e5e5e5", + 300: "#d4d4d4", + 400: "#a3a3a3", + 500: "#737373", + 600: "#525252", + 700: "#404040", + 800: "#262626", + 900: "#171717", + 950: "#0a0a0a", + }, + stone: { + 50: "#fafaf9", + 100: "#f5f5f4", + 200: "#e7e5e4", + 300: "#d6d3d1", + 400: "#a8a29e", + 500: "#78716c", + 600: "#57534e", + 700: "#44403c", + 800: "#292524", + 900: "#1c1917", + 950: "#0c0a09", + }, + red: { + 50: "#fef2f2", + 100: "#fee2e2", + 200: "#fecaca", + 300: "#fca5a5", + 400: "#f87171", + 500: "#ef4444", + 600: "#dc2626", + 700: "#b91c1c", + 800: "#991b1b", + 900: "#7f1d1d", + 950: "#450a0a", + }, + orange: { + 50: "#fff7ed", + 100: "#ffedd5", + 200: "#fed7aa", + 300: "#fdba74", + 400: "#fb923c", + 500: "#f97316", + 600: "#ea580c", + 700: "#c2410c", + 800: "#9a3412", + 900: "#7c2d12", + 950: "#431407", + }, + amber: { + 50: "#fffbeb", + 100: "#fef3c7", + 200: "#fde68a", + 300: "#fcd34d", + 400: "#fbbf24", + 500: "#f59e0b", + 600: "#d97706", + 700: "#b45309", + 800: "#92400e", + 900: "#78350f", + 950: "#451a03", + }, + yellow: { + 50: "#fefce8", + 100: "#fef9c3", + 200: "#fef08a", + 300: "#fde047", + 400: "#facc15", + 500: "#eab308", + 600: "#ca8a04", + 700: "#a16207", + 800: "#854d0e", + 900: "#713f12", + 950: "#422006", + }, + lime: { + 50: "#f7fee7", + 100: "#ecfccb", + 200: "#d9f99d", + 300: "#bef264", + 400: "#a3e635", + 500: "#84cc16", + 600: "#65a30d", + 700: "#4d7c0f", + 800: "#3f6212", + 900: "#365314", + 950: "#1a2e05", + }, + green: { + 50: "#f0fdf4", + 100: "#dcfce7", + 200: "#bbf7d0", + 300: "#86efac", + 400: "#4ade80", + 500: "#22c55e", + 600: "#16a34a", + 700: "#15803d", + 800: "#166534", + 900: "#14532d", + 950: "#052e16", + }, + emerald: { + 50: "#ecfdf5", + 100: "#d1fae5", + 200: "#a7f3d0", + 300: "#6ee7b7", + 400: "#34d399", + 500: "#10b981", + 600: "#059669", + 700: "#047857", + 800: "#065f46", + 900: "#064e3b", + 950: "#022c22", + }, + teal: { + 50: "#f0fdfa", + 100: "#ccfbf1", + 200: "#99f6e4", + 300: "#5eead4", + 400: "#2dd4bf", + 500: "#14b8a6", + 600: "#0d9488", + 700: "#0f766e", + 800: "#115e59", + 900: "#134e4a", + 950: "#042f2e", + }, + cyan: { + 50: "#ecfeff", + 100: "#cffafe", + 200: "#a5f3fc", + 300: "#67e8f9", + 400: "#22d3ee", + 500: "#06b6d4", + 600: "#0891b2", + 700: "#0e7490", + 800: "#155e75", + 900: "#164e63", + 950: "#083344", + }, + sky: { + 50: "#f0f9ff", + 100: "#e0f2fe", + 200: "#bae6fd", + 300: "#7dd3fc", + 400: "#38bdf8", + 500: "#0ea5e9", + 600: "#0284c7", + 700: "#0369a1", + 800: "#075985", + 900: "#0c4a6e", + 950: "#082f49", + }, + blue: { + 50: "#eff6ff", + 100: "#dbeafe", + 200: "#bfdbfe", + 300: "#93c5fd", + 400: "#60a5fa", + 500: "#3b82f6", + 600: "#2563eb", + 700: "#1d4ed8", + 800: "#1e40af", + 900: "#1e3a8a", + 950: "#172554", + }, + indigo: { + 50: "#eef2ff", + 100: "#e0e7ff", + 200: "#c7d2fe", + 300: "#a5b4fc", + 400: "#818cf8", + 500: "#6366f1", + 600: "#4f46e5", + 700: "#4338ca", + 800: "#3730a3", + 900: "#312e81", + 950: "#1e1b4b", + }, + violet: { + 50: "#f5f3ff", + 100: "#ede9fe", + 200: "#ddd6fe", + 300: "#c4b5fd", + 400: "#a78bfa", + 500: "#8b5cf6", + 600: "#7c3aed", + 700: "#6d28d9", + 800: "#5b21b6", + 900: "#4c1d95", + 950: "#2e1065", + }, + purple: { + 50: "#faf5ff", + 100: "#f3e8ff", + 200: "#e9d5ff", + 300: "#d8b4fe", + 400: "#c084fc", + 500: "#a855f7", + 600: "#9333ea", + 700: "#7e22ce", + 800: "#6b21a8", + 900: "#581c87", + 950: "#3b0764", + }, + fuchsia: { + 50: "#fdf4ff", + 100: "#fae8ff", + 200: "#f5d0fe", + 300: "#f0abfc", + 400: "#e879f9", + 500: "#d946ef", + 600: "#c026d3", + 700: "#a21caf", + 800: "#86198f", + 900: "#701a75", + 950: "#4a044e", + }, + pink: { + 50: "#fdf2f8", + 100: "#fce7f3", + 200: "#fbcfe8", + 300: "#f9a8d4", + 400: "#f472b6", + 500: "#ec4899", + 600: "#db2777", + 700: "#be185d", + 800: "#9d174d", + 900: "#831843", + 950: "#500724", + }, + rose: { + 50: "#fff1f2", + 100: "#ffe4e6", + 200: "#fecdd3", + 300: "#fda4af", + 400: "#fb7185", + 500: "#f43f5e", + 600: "#e11d48", + 700: "#be123c", + 800: "#9f1239", + 900: "#881337", + 950: "#4c0519", + }, +}; From 278ac13f92996f6d817a6eb7026697139656bd3e Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 13 Nov 2023 16:53:14 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Navbar/NavbarView.tsx | 25 +++++++++---------- .../Navbar/UserDropdown/UserDropdown.tsx | 3 +-- .../DeploySettingsLayout/Option.tsx | 7 +++--- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/site/src/components/Dashboard/Navbar/NavbarView.tsx b/site/src/components/Dashboard/Navbar/NavbarView.tsx index 538a780aeb48c..7db339d966051 100644 --- a/site/src/components/Dashboard/Navbar/NavbarView.tsx +++ b/site/src/components/Dashboard/Navbar/NavbarView.tsx @@ -1,27 +1,26 @@ import Drawer from "@mui/material/Drawer"; import IconButton from "@mui/material/IconButton"; -import MenuIcon from "@mui/icons-material/Menu"; -import { CoderIcon } from "components/Icons/CoderIcon"; -import { type FC, type ReactNode, useRef, useState } from "react"; -import { NavLink, useLocation, useNavigate } from "react-router-dom"; -import { colors } from "theme/colors"; -import * as TypesGen from "api/typesGenerated"; -import { navHeight } from "theme/constants"; -import { UserDropdown } from "./UserDropdown/UserDropdown"; +import Divider from "@mui/material/Divider"; +import Skeleton from "@mui/material/Skeleton"; import Box from "@mui/material/Box"; import Menu from "@mui/material/Menu"; import Button from "@mui/material/Button"; import MenuItem from "@mui/material/MenuItem"; import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined"; +import MenuIcon from "@mui/icons-material/Menu"; +import Typography from "@mui/material/Typography"; +import { css, type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { type FC, type ReactNode, useRef, useState } from "react"; +import { NavLink, useLocation, useNavigate } from "react-router-dom"; +import { colors } from "theme/colors"; +import type * as TypesGen from "api/typesGenerated"; +import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants"; import { ProxyContextValue } from "contexts/ProxyContext"; import { displayError } from "components/GlobalSnackbar/utils"; -import Divider from "@mui/material/Divider"; -import Skeleton from "@mui/material/Skeleton"; -import { BUTTON_SM_HEIGHT } from "theme/constants"; +import { CoderIcon } from "components/Icons/CoderIcon"; import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"; import { usePermissions } from "hooks/usePermissions"; -import Typography from "@mui/material/Typography"; -import { css, type Interpolation, type Theme, useTheme } from "@emotion/react"; +import { UserDropdown } from "./UserDropdown/UserDropdown"; export const USERS_LINK = `/users?filter=${encodeURIComponent( "status:active", diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx index 0c656e8361d4a..a1c5cba6ad687 100644 --- a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx +++ b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx @@ -2,11 +2,10 @@ import Badge from "@mui/material/Badge"; import { type FC, type PropsWithChildren } from "react"; import { colors } from "theme/colors"; import type * as TypesGen from "api/typesGenerated"; -import { navHeight } from "theme/constants"; +import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { UserDropdownContent } from "./UserDropdownContent"; -import { BUTTON_SM_HEIGHT } from "theme/constants"; import { css } from "@emotion/react"; import { Popover, diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx index 4ffa48a79261c..747c6f07457df 100644 --- a/site/src/components/DeploySettingsLayout/Option.tsx +++ b/site/src/components/DeploySettingsLayout/Option.tsx @@ -1,10 +1,9 @@ +import Box, { type BoxProps } from "@mui/material/Box"; +import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; +import { css, useTheme } from "@emotion/react"; import type { PropsWithChildren, FC } from "react"; import { MONOSPACE_FONT_FAMILY } from "theme/constants"; -import Box, { BoxProps } from "@mui/material/Box"; -import { useTheme } from "@emotion/react"; import { DisabledBadge, EnabledBadge } from "./Badges"; -import { css } from "@emotion/react"; -import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined"; export const OptionName: FC = (props) => { const { children } = props;