From 8ddc8b3447fa75f68c172b807fe7878955d79ade Mon Sep 17 00:00:00 2001 From: Kayla Washburn Date: Wed, 15 Nov 2023 16:39:26 -0500 Subject: [PATCH] site: new dark theme (#10331) --- site/.storybook/preview.jsx | 24 +- site/src/App.tsx | 2 +- site/src/components/Avatar/Avatar.stories.tsx | 32 +- site/src/components/Avatar/Avatar.tsx | 20 +- site/src/components/AvatarCard/AvatarCard.tsx | 10 +- site/src/components/Badges/Badges.stories.tsx | 38 +++ .../Badges.tsx | 20 +- .../components/BuildAvatar/BuildAvatar.tsx | 2 +- .../LicenseBanner/LicenseBannerView.tsx | 12 +- .../ServiceBanner/ServiceBannerView.tsx | 5 +- .../DeploySettingsLayout/Option.tsx | 12 +- .../DeploySettingsLayout/Sidebar.tsx | 8 +- site/src/components/Dialogs/Dialog.tsx | 4 +- site/src/components/Form/Form.tsx | 2 +- .../components/GroupAvatar/GroupAvatar.tsx | 4 +- .../InfoTooltip/InfoTooltip.stories.tsx | 8 + .../components/InfoTooltip/InfoTooltip.tsx | 10 +- site/src/components/Markdown/Markdown.tsx | 4 +- site/src/components/Paywall/Paywall.tsx | 9 +- site/src/components/Pill/Pill.stories.tsx | 69 ++-- site/src/components/Pill/Pill.tsx | 54 +--- .../components/Resources/ResourceAvatar.tsx | 2 +- .../RichParameterInput/RichParameterInput.tsx | 6 - .../SyntaxHighlighter/coderTheme.ts | 17 +- site/src/components/Tabs/Tabs.tsx | 2 +- site/src/components/UserAvatar/UserAvatar.tsx | 6 +- .../WorkspaceOutdatedTooltip.tsx | 9 +- .../WorkspaceStatusBadge.tsx | 9 +- .../AuditLogRow/AuditLogDiff/AuditLogDiff.tsx | 22 +- site/src/pages/AuditPage/AuditPaywall.tsx | 2 +- .../AppearanceSettingsPageView.tsx | 27 +- .../ExternalAuthSettingsPageView.tsx | 2 +- .../LicensesSettingsPageView.tsx | 3 +- .../NetworkSettingsPageView.tsx | 8 +- .../ObservabilitySettingsPageView.tsx | 4 +- .../SecuritySettingsPageView.tsx | 4 +- .../UserAuthSettingsPageView.tsx | 8 +- .../ExternalAuthPage/ExternalAuthPageView.tsx | 6 +- .../TemplateInsightsPage.tsx | 7 +- .../TemplateVersionsPage/VersionRow.tsx | 6 +- .../MonacoEditor.tsx | 7 +- .../TemplateVersionStatusBadge.tsx | 2 +- .../AccountPage/AccountUserGroups.tsx | 1 + .../WorkspaceProxyPage/WorkspaceProxyRow.tsx | 8 +- .../UsersPage/UsersTable/UsersTableBody.tsx | 2 +- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 28 +- site/src/theme/colors.ts | 302 +++--------------- site/src/theme/experimental.ts | 10 +- site/src/theme/mui.ts | 22 +- site/src/utils/workspace.tsx | 16 +- 50 files changed, 338 insertions(+), 559 deletions(-) create mode 100644 site/src/components/Badges/Badges.stories.tsx rename site/src/components/{DeploySettingsLayout => Badges}/Badges.tsx (82%) diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx index 2f196db0c5..6d67202178 100644 --- a/site/.storybook/preview.jsx +++ b/site/.storybook/preview.jsx @@ -7,14 +7,21 @@ 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/mui"; +import { dark as experimental } from "theme/experimental"; +import colors from "theme/tailwind"; import "theme/globalFonts"; import { QueryClient, QueryClientProvider } from "react-query"; +const theme = { + ...dark, + experimental, +}; + export const decorators = [ (Story) => ( - - + + @@ -39,6 +46,19 @@ export const decorators = [ ]; export const parameters = { + backgrounds: { + default: "dark", + values: [ + { + name: "dark", + value: colors.gray[950], + }, + { + name: "light", + value: colors.gray[50], + }, + ], + }, actions: { argTypesRegex: "^(on|handler)[A-Z].*", }, diff --git a/site/src/App.tsx b/site/src/App.tsx index a05bf95e08..de3fe2a5bd 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -1,7 +1,7 @@ import CssBaseline from "@mui/material/CssBaseline"; import { QueryClient, QueryClientProvider } from "react-query"; import { AuthProvider } from "components/AuthProvider/AuthProvider"; -import { FC, PropsWithChildren, ReactNode } from "react"; +import type { FC, PropsWithChildren, ReactNode } from "react"; import { HelmetProvider } from "react-helmet-async"; import { AppRouter } from "./AppRouter"; import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"; diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx index fb510e6ee3..c6f93a5eda 100644 --- a/site/src/components/Avatar/Avatar.stories.tsx +++ b/site/src/components/Avatar/Avatar.stories.tsx @@ -10,62 +10,50 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Letter: Story = { +export const WithLetter: Story = { args: { children: "Coder", }, }; -export const LetterXL = { +export const WithLetterXL = { args: { children: "Coder", size: "xl", }, }; -export const LetterDarken = { - args: { - children: "Coder", - colorScheme: "darken", - }, -}; - -export const Image = { +export const WithImage = { args: { src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", }, }; -export const ImageXL = { +export const WithImageXL = { args: { src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4", size: "xl", }, }; -export const MuiIcon = { +export const WithMuiIcon = { args: { + background: true, children: , }, }; -export const MuiIconDarken = { - args: { - children: , - colorScheme: "darken", - }, -}; - -export const MuiIconXL = { +export const WithMuiIconXL = { args: { + background: true, children: , size: "xl", }, }; -export const AvatarIconDarken = { +export const WithAvatarIcon = { args: { + background: true, children: , - colorScheme: "darken", }, }; diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx index f751fa260a..f47f85e326 100644 --- a/site/src/components/Avatar/Avatar.tsx +++ b/site/src/components/Avatar/Avatar.tsx @@ -8,7 +8,7 @@ import { visuallyHidden } from "@mui/utils"; export type AvatarProps = MuiAvatarProps & { size?: "xs" | "sm" | "md" | "xl"; - colorScheme?: "light" | "darken"; + background?: boolean; fitImage?: boolean; }; @@ -33,14 +33,6 @@ const sizeStyles = { }, } satisfies Record>; -const colorStyles = { - light: {}, - darken: (theme) => ({ - background: theme.palette.divider, - color: theme.palette.text.primary, - }), -} satisfies Record>; - const fitImageStyles = css` & .MuiAvatar-img { object-fit: contain; @@ -49,18 +41,24 @@ const fitImageStyles = css` export const Avatar: FC = ({ size = "md", - colorScheme = "light", fitImage, children, + background, ...muiProps }) => { + const fromName = !muiProps.src && typeof children === "string"; + return ( ({ + background: + background || fromName ? theme.palette.divider : undefined, + color: theme.palette.text.primary, + }), ]} > {typeof children === "string" ? firstLetter(children) : children} diff --git a/site/src/components/AvatarCard/AvatarCard.tsx b/site/src/components/AvatarCard/AvatarCard.tsx index 7896789abf..bd029108ef 100644 --- a/site/src/components/AvatarCard/AvatarCard.tsx +++ b/site/src/components/AvatarCard/AvatarCard.tsx @@ -1,12 +1,12 @@ import { type ReactNode } from "react"; import { Avatar } from "components/Avatar/Avatar"; import { type CSSObject, useTheme } from "@emotion/react"; -import { colors } from "theme/colors"; type AvatarCardProps = { header: string; imgUrl: string; altText: string; + background?: boolean; subtitle?: ReactNode; maxWidth?: number | "none"; @@ -16,6 +16,7 @@ export function AvatarCard({ header, imgUrl, altText, + background, subtitle, maxWidth = "none", }: AvatarCardProps) { @@ -71,12 +72,7 @@ export function AvatarCard({ )} - + {header} diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx new file mode 100644 index 0000000000..e699b6317f --- /dev/null +++ b/site/src/components/Badges/Badges.stories.tsx @@ -0,0 +1,38 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { + Badges, + AlphaBadge, + EnabledBadge, + EntitledBadge, + EnterpriseBadge, +} from "./Badges"; + +const meta: Meta = { + title: "components/Badges", + component: Badges, + args: {}, +}; + +export default meta; +type Story = StoryObj; + +export const Enabled: Story = { + args: { + children: , + }, +}; +export const Entitled: Story = { + args: { + children: , + }, +}; +export const Enterprise: Story = { + args: { + children: , + }, +}; +export const Alpha: Story = { + args: { + children: , + }, +}; diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/Badges/Badges.tsx similarity index 82% rename from site/src/components/DeploySettingsLayout/Badges.tsx rename to site/src/components/Badges/Badges.tsx index aa5ca7941d..2e4f9a2ea1 100644 --- a/site/src/components/DeploySettingsLayout/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren, FC } from "react"; import Tooltip from "@mui/material/Tooltip"; import { type Interpolation, type Theme } from "@emotion/react"; import { Stack } from "components/Stack/Stack"; -import { colors } from "theme/colors"; +import colors from "theme/tailwind"; const styles = { badge: { @@ -20,16 +20,16 @@ const styles = { }, enabledBadge: (theme) => ({ - border: `1px solid ${theme.palette.success.light}`, - backgroundColor: theme.palette.success.dark, + border: `1px solid ${theme.experimental.roles.success.outline}`, + backgroundColor: theme.experimental.roles.success.background, }), errorBadge: (theme) => ({ - border: `1px solid ${theme.palette.error.light}`, - backgroundColor: theme.palette.error.dark, + border: `1px solid ${theme.experimental.roles.error.outline}`, + backgroundColor: theme.experimental.roles.error.background, }), warnBadge: (theme) => ({ - border: `1px solid ${theme.palette.warning.light}`, - backgroundColor: theme.palette.warning.dark, + border: `1px solid ${theme.experimental.roles.warning.outline}`, + backgroundColor: theme.experimental.roles.warning.background, }), } satisfies Record>; @@ -111,9 +111,9 @@ export const AlphaBadge: FC = () => { css={[ styles.badge, { - border: `1px solid ${colors.violet[10]}`, - backgroundColor: colors.violet[14], - color: colors.violet[1], + border: `1px solid ${colors.violet[600]}`, + backgroundColor: colors.violet[950], + color: colors.violet[50], }, ]} > diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx index 7f825ce9ef..e0edfdc634 100644 --- a/site/src/components/BuildAvatar/BuildAvatar.tsx +++ b/site/src/components/BuildAvatar/BuildAvatar.tsx @@ -46,7 +46,7 @@ export const BuildAvatar: FC = ({ build, size }) => { }} badgeContent={
} > - + diff --git a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx index 78e9c0b37e..daec3210cd 100644 --- a/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx +++ b/site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx @@ -48,15 +48,13 @@ export const LicenseBannerView: React.FC = ({ display: flex; align-items: center; padding: 12px; - background-color: ${type === "error" - ? colors.red[12] - : theme.palette.warning.main}; + background-color: ${type === "error" ? colors.red[10] : colors.orange[10]}; `; if (messages.length === 1) { return (
- +
{messages[0]}   @@ -70,11 +68,7 @@ export const LicenseBannerView: React.FC = ({ return (
- +
{Language.exceeded} diff --git a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx index b79c6e5929..0c4e7a3ec8 100644 --- a/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx +++ b/site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx @@ -1,8 +1,7 @@ import { Pill } from "components/Pill/Pill"; import ReactMarkdown from "react-markdown"; import { colors } from "theme/colors"; -import { useTheme } from "@mui/system"; -import { css } from "@emotion/react"; +import { css, useTheme } from "@emotion/react"; import { readableForegroundColor } from "utils/colors"; export interface ServiceBannerViewProps { @@ -43,7 +42,7 @@ export const ServiceBannerView: React.FC = ({ } `} > - {isPreview && } + {isPreview && }
= (props) => { const { children } = props; - return ( - - {children} - - ); + return {children}; }; export const OptionDescription: FC = (props) => { diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx index a8683b0cc9..8d6c834d1d 100644 --- a/site/src/components/DeploySettingsLayout/Sidebar.tsx +++ b/site/src/components/DeploySettingsLayout/Sidebar.tsx @@ -12,8 +12,8 @@ import { Stack } from "components/Stack/Stack"; import type { ElementType, FC, PropsWithChildren, ReactNode } from "react"; import { NavLink } from "react-router-dom"; import { useDashboard } from "components/Dashboard/DashboardProvider"; -import { useTheme } from "@mui/system"; import { css } from "@emotion/css"; +import { useTheme } from "@emotion/react"; const SidebarNavItem: FC< PropsWithChildren<{ href: string; icon: ReactNode }> @@ -74,11 +74,7 @@ export const Sidebar: React.FC = () => { const dashboard = useDashboard(); return ( -