Skip to content

Commit ebd6c1b

Browse files
aslilacaslilac
authored
feat(site): bring back dark blue (coder#11071)
1 parent 716759a commit ebd6c1b

File tree

36 files changed

+1762
-932
lines changed

36 files changed

+1762
-932
lines changed

‎site/.storybook/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import turbosnap from "vite-plugin-turbosnap";
2-
import { mergeConfig } from "vite";
32

43
module.exports = {
54
stories: ["../src/**/*.stories.tsx"],

‎site/.storybook/preview.jsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,16 @@ import {
66
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
77
import { withRouter } from "storybook-addon-react-router-v6";
88
import { HelmetProvider } from "react-helmet-async";
9-
import { dark } from "theme/mui";
10-
import { dark as experimental } from "theme/experimental";
9+
import theme from "theme";
1110
import colors from "theme/tailwind";
1211
import "theme/globalFonts";
1312
import { QueryClient, QueryClientProvider } from "react-query";
1413

15-
const theme = {
16-
...dark,
17-
experimental,
18-
};
19-
2014
export const decorators = [
2115
(Story) => (
2216
<StyledEngineProvider injectFirst>
23-
<MuiThemeProvider theme={theme}>
24-
<EmotionThemeProvider theme={theme}>
17+
<MuiThemeProvider theme={theme.dark}>
18+
<EmotionThemeProvider theme={theme.dark}>
2519
<CssBaseline />
2620
<Story />
2721
</EmotionThemeProvider>

‎site/src/@types/emotion.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { Theme as MuiTheme } from "@mui/material/styles";
1+
import type { Theme as CoderTheme } from "theme";
22

33
declare module "@emotion/react" {
4-
interface Theme extends MuiTheme {}
4+
interface Theme extends CoderTheme {}
55
}

‎site/src/@types/mui.d.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,3 @@ declare module "@mui/material/Button" {
2424
xlarge: true;
2525
}
2626
}
27-
28-
declare module "@mui/system" {
29-
interface Theme {
30-
experimental: NewTheme;
31-
}
32-
}

‎site/src/App.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { HelmetProvider } from "react-helmet-async";
66
import { AppRouter } from "./AppRouter";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
88
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
9-
import { dark } from "./theme/mui";
10-
import { dark as experimental } from "./theme/experimental";
9+
import theme from "./theme";
1110
import "./theme/globalFonts";
1211
import {
1312
StyledEngineProvider,
@@ -30,16 +29,11 @@ const defaultQueryClient = new QueryClient({
3029
},
3130
});
3231

33-
const theme = {
34-
...dark,
35-
experimental,
36-
};
37-
3832
export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
3933
return (
4034
<StyledEngineProvider injectFirst>
41-
<MuiThemeProvider theme={theme}>
42-
<EmotionThemeProvider theme={theme}>
35+
<MuiThemeProvider theme={theme.dark}>
36+
<EmotionThemeProvider theme={theme.dark}>
4337
<CssBaseline enableColorScheme />
4438
{children}
4539
</EmotionThemeProvider>

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ import { RocketIcon } from "components/Icons/RocketIcon";
3737
import ErrorIcon from "@mui/icons-material/ErrorOutline";
3838
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
3939
import { getDisplayWorkspaceStatus } from "utils/workspace";
40-
import { colors } from "theme/colors";
4140
import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
4241
import { Stack } from "components/Stack/Stack";
4342
import { type ClassName, useClassName } from "hooks/useClassName";
@@ -373,9 +372,14 @@ const ValueSeparator: FC = () => {
373372
};
374373

375374
const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
375+
const theme = useTheme();
376+
376377
return (
377378
<Stack direction="row" spacing={1} alignItems="center">
378-
<ErrorIcon css={{ width: 16, height: 16 }} htmlColor={colors.red[10]} />
379+
<ErrorIcon
380+
css={{ width: 16, height: 16 }}
381+
htmlColor={theme.colors.red[10]}
382+
/>
379383
{children}
380384
</Stack>
381385
);
@@ -435,8 +439,8 @@ const styles = {
435439
height: 16px;
436440
}
437441
`,
438-
unhealthy: css`
439-
background-color: ${colors.red[10]};
442+
unhealthy: (theme) => css`
443+
background-color: ${theme.colors.red[10]};
440444
`,
441445
group: css`
442446
display: flex;

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1+
import Link from "@mui/material/Link";
12
import {
3+
css,
24
type CSSObject,
35
type Interpolation,
46
type Theme,
57
useTheme,
68
} from "@emotion/react";
7-
import Link from "@mui/material/Link";
8-
import { css } from "@emotion/react";
9-
import { useState } from "react";
9+
import { type FC, useState } from "react";
1010
import { Expander } from "components/Expander/Expander";
1111
import { Pill } from "components/Pill/Pill";
12-
import { colors } from "theme/colors";
1312

1413
export const Language = {
1514
licenseIssue: "License Issue",
@@ -32,7 +31,7 @@ export interface LicenseBannerViewProps {
3231
warnings: string[];
3332
}
3433

35-
export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
34+
export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
3635
errors,
3736
warnings,
3837
}) => {
@@ -48,7 +47,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
4847
display: flex;
4948
align-items: center;
5049
padding: 12px;
51-
background-color: ${type === "error" ? colors.red[10] : colors.orange[10]};
50+
background-color: ${type === "error"
51+
? theme.colors.red[10]
52+
: theme.colors.orange[10]};
5253
`;
5354

5455
if (messages.length === 1) {

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import MenuIcon from "@mui/icons-material/Menu";
1010
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1111
import { type FC, type ReactNode, useRef, useState } from "react";
1212
import { NavLink, useLocation, useNavigate } from "react-router-dom";
13-
import { colors } from "theme/colors";
14-
import type * as TypesGen from "api/typesGenerated";
1513
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
16-
import { ProxyContextValue } from "contexts/ProxyContext";
14+
import type * as TypesGen from "api/typesGenerated";
15+
import type { ProxyContextValue } from "contexts/ProxyContext";
1716
import { displayError } from "components/GlobalSnackbar/utils";
18-
import { CoderIcon } from "components/Icons/CoderIcon";
1917
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
18+
import { CoderIcon } from "components/Icons/CoderIcon";
2019
import { usePermissions } from "hooks/usePermissions";
2120
import { UserDropdown } from "./UserDropdown/UserDropdown";
2221

@@ -124,8 +123,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
124123
<nav
125124
css={{
126125
height: navHeight,
127-
borderBottom: `1px solid ${theme.palette.divider}`,
128126
backgroundColor: theme.palette.background.paper,
127+
borderBottom: `1px solid ${theme.palette.divider}`,
129128
}}
130129
>
131130
<div css={styles.wrapper}>
@@ -290,9 +289,9 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
290289
<div
291290
css={{
292291
width: "100%",
292+
maxWidth: "320px",
293293
fontSize: 14,
294294
padding: 16,
295-
maxWidth: "320px",
296295
lineHeight: "140%",
297296
}}
298297
>
@@ -308,12 +307,12 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
308307
Select a region nearest to you
309308
</h4>
310309
<p
311-
css={(theme) => ({
310+
css={{
312311
fontSize: 13,
313312
color: theme.palette.text.secondary,
314313
lineHeight: "inherit",
315314
marginTop: 0.5,
316-
})}
315+
}}
317316
>
318317
Workspace proxies improve terminal and web app connections to
319318
workspaces. This does not apply to CLI connections. A region must be
@@ -457,7 +456,7 @@ const styles = {
457456
},
458457
link: (theme) => css`
459458
align-items: center;
460-
color: ${colors.gray[6]};
459+
color: ${theme.colors.gray[6]};
461460
display: flex;
462461
flex: 1;
463462
font-size: 16px;

‎site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import Badge from "@mui/material/Badge";
2-
import { type FC, type PropsWithChildren } from "react";
3-
import { colors } from "theme/colors";
2+
import { type FC, type ReactNode } from "react";
43
import type * as TypesGen from "api/typesGenerated";
54
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
65
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
76
import { UserAvatar } from "components/UserAvatar/UserAvatar";
87
import { UserDropdownContent } from "./UserDropdownContent";
9-
import { css } from "@emotion/react";
8+
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
109
import {
1110
Popover,
1211
PopoverContent,
@@ -19,67 +18,49 @@ export interface UserDropdownProps {
1918
supportLinks?: TypesGen.LinkConfig[];
2019
onSignOut: () => void;
2120
isDefaultOpen?: boolean;
21+
children?: ReactNode;
2222
}
2323

24-
export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
24+
export const UserDropdown: FC<UserDropdownProps> = ({
2525
buildInfo,
2626
user,
2727
supportLinks,
2828
onSignOut,
2929
isDefaultOpen,
30-
}: UserDropdownProps) => {
30+
}) => {
31+
const theme = useTheme();
32+
3133
return (
3234
<Popover isDefaultOpen={isDefaultOpen}>
3335
{(popover) => (
3436
<>
3537
<PopoverTrigger>
36-
<button
37-
css={css`
38-
background: none;
39-
border: 0;
40-
cursor: pointer;
41-
height: ${navHeight}px;
42-
padding: 12px 0;
43-
44-
&:hover {
45-
background-color: transparent;
46-
}
47-
`}
48-
data-testid="user-dropdown-trigger"
49-
>
50-
<div
51-
css={{
52-
display: "flex",
53-
alignItems: "center",
54-
minWidth: 0,
55-
maxWidth: 300,
56-
}}
57-
>
38+
<button css={styles.button} data-testid="user-dropdown-trigger">
39+
<div css={styles.badgeContainer}>
5840
<Badge overlap="circular">
5941
<UserAvatar
60-
css={{
61-
width: BUTTON_SM_HEIGHT,
62-
height: BUTTON_SM_HEIGHT,
63-
fontSize: 16,
64-
}}
42+
css={styles.avatar}
6543
username={user.username}
6644
avatarURL={user.avatar_url}
6745
/>
6846
</Badge>
69-
<DropdownArrow color={colors.gray[6]} close={popover.isOpen} />
47+
<DropdownArrow
48+
color={theme.colors.gray[6]}
49+
close={popover.isOpen}
50+
/>
7051
</div>
7152
</button>
7253
</PopoverTrigger>
7354

7455
<PopoverContent
7556
horizontal="right"
76-
css={(theme) => ({
57+
css={{
7758
".MuiPaper-root": {
7859
minWidth: "auto",
7960
width: 260,
8061
boxShadow: theme.shadows[6],
8162
},
82-
})}
63+
}}
8364
>
8465
<UserDropdownContent
8566
user={user}
@@ -93,3 +74,30 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
9374
</Popover>
9475
);
9576
};
77+
78+
const styles = {
79+
button: css`
80+
background: none;
81+
border: 0;
82+
cursor: pointer;
83+
height: ${navHeight}px;
84+
padding: 12px 0;
85+
86+
&:hover {
87+
background-color: transparent;
88+
}
89+
`,
90+
91+
badgeContainer: {
92+
display: "flex",
93+
alignItems: "center",
94+
minWidth: 0,
95+
maxWidth: 300,
96+
},
97+
98+
avatar: {
99+
width: BUTTON_SM_HEIGHT,
100+
height: BUTTON_SM_HEIGHT,
101+
fontSize: 16,
102+
},
103+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Pill } from "components/Pill/Pill";
22
import ReactMarkdown from "react-markdown";
3-
import { colors } from "theme/colors";
43
import { css, useTheme } from "@emotion/react";
54
import { readableForegroundColor } from "utils/colors";
65

@@ -38,7 +37,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
3837
align-items: center;
3938
4039
&.error {
41-
background-color: ${colors.red[12]};
40+
background-color: ${theme.colors.red[12]};
4241
}
4342
`}
4443
>

‎site/src/components/IconField/IconField.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Picker from "@emoji-mart/react";
66
import { type FC } from "react";
77
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
88
import { Stack } from "components/Stack/Stack";
9-
import { colors } from "theme/colors";
109
import data from "@emoji-mart/data/sets/14/twitter.json";
1110
import icons from "theme/icons.json";
1211
import {
@@ -103,8 +102,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
103102
styles={css`
104103
em-emoji-picker {
105104
--rgb-background: ${theme.palette.background.paper};
106-
--rgb-input: ${colors.gray[17]};
107-
--rgb-color: ${colors.gray[4]};
105+
--rgb-input: ${theme.colors.gray[17]};
106+
--rgb-color: ${theme.colors.gray[4]};
108107
109108
// Hack to prevent the right side from being cut off
110109
width: 350px;

‎site/src/components/Pill/Pill.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { type FC, type ReactNode, useMemo, forwardRef } from "react";
22
import { css, type Interpolation, type Theme } from "@emotion/react";
3-
import { colors } from "theme/colors";
43
import type { ThemeRole } from "theme/experimental";
54

65
export type PillType = ThemeRole | keyof typeof themeOverrides;
@@ -14,10 +13,10 @@ export interface PillProps {
1413
}
1514

1615
const themeOverrides = {
17-
neutral: {
18-
backgroundColor: colors.gray[13],
19-
borderColor: colors.gray[6],
20-
},
16+
neutral: (theme) => ({
17+
backgroundColor: theme.colors.gray[13],
18+
borderColor: theme.colors.gray[6],
19+
}),
2120
} satisfies Record<string, Interpolation<Theme>>;
2221

2322
const themeStyles = (type: ThemeRole) => (theme: Theme) => {

0 commit comments

Comments
 (0)