Skip to content

Commit 7dfe31b

Browse files
aslilacaslilac
committed
oh boy
1 parent f173c2b commit 7dfe31b

File tree

34 files changed

+1939
-897
lines changed

34 files changed

+1939
-897
lines changed

‎site/.storybook/preview.jsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { QueryClient, QueryClientProvider } from "react-query";
1414
export const decorators = [
1515
(Story) => (
1616
<StyledEngineProvider injectFirst>
17-
<MuiThemeProvider theme={theme}>
18-
<EmotionThemeProvider theme={theme}>
17+
<MuiThemeProvider theme={theme.dark}>
18+
<EmotionThemeProvider theme={theme.dark}>
1919
<CssBaseline />
2020
<Story />
2121
</EmotionThemeProvider>
@@ -50,6 +50,13 @@ export const decorators = [
5050
];
5151

5252
export const parameters = {
53+
options: {
54+
storySort: {
55+
method: "alphabetical",
56+
order: ["design", "pages", "components"],
57+
locales: "en-US",
58+
},
59+
},
5360
backgrounds: {
5461
default: "dark",
5562
values: [

‎site/src/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ const defaultQueryClient = new QueryClient({
3232
export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
3333
return (
3434
<StyledEngineProvider injectFirst>
35-
<MuiThemeProvider theme={theme}>
36-
<EmotionThemeProvider theme={theme}>
35+
<MuiThemeProvider theme={theme.dark}>
36+
<EmotionThemeProvider theme={theme.dark}>
3737
<CssBaseline enableColorScheme />
3838
{children}
3939
</EmotionThemeProvider>

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

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

374373
const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
374+
const theme = useTheme();
375+
375376
return (
376377
<Stack direction="row" spacing={1} alignItems="center">
377-
<ErrorIcon css={{ width: 16, height: 16 }} htmlColor={colors.red[10]} />
378+
<ErrorIcon
379+
css={{ width: 16, height: 16 }}
380+
htmlColor={theme.colors.red[10]}
381+
/>
378382
{children}
379383
</Stack>
380384
);
@@ -408,8 +412,8 @@ const styles = {
408412
height: 16px;
409413
}
410414
`,
411-
unhealthy: css`
412-
background-color: ${colors.red[10]};
415+
unhealthy: (theme) => css`
416+
background-color: ${theme.colors.red[10]};
413417
`,
414418
group: css`
415419
display: flex;

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

Lines changed: 5 additions & 4 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";
99
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",
@@ -48,7 +47,9 @@ export const LicenseBannerView: 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: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ 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";
1413
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
1514
import type * as TypesGen from "api/typesGenerated";
1615
import type { ProxyContextValue } from "contexts/ProxyContext";
@@ -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) => {

‎site/src/components/Resources/AgentRow.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import {
2828
} from "react";
2929
import AutoSizer from "react-virtualized-auto-sizer";
3030
import { FixedSizeList as List, ListOnScrollProps } from "react-window";
31-
import { colors } from "theme/colors";
3231
import { Stack } from "../Stack/Stack";
3332
import { AgentLatency } from "./AgentLatency";
3433
import { AgentMetadata } from "./AgentMetadata";
@@ -690,7 +689,7 @@ const styles = {
690689

691690
"&:hover": {
692691
color: theme.palette.text.primary,
693-
backgroundColor: colors.gray[14],
692+
backgroundColor: theme.colors.gray[14],
694693
},
695694

696695
"& svg": {

‎site/src/components/Resources/PortForwardButton.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
55
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
66
import type { FC } from "react";
77
import { useQuery } from "react-query";
8-
import { colors } from "theme/colors";
98
import { docs } from "utils/docs";
109
import { getAgentListeningPorts } from "api/api";
1110
import type {
@@ -194,7 +193,7 @@ const classNames = {
194193
} satisfies Record<string, ClassName>;
195194

196195
const styles = {
197-
portCount: {
196+
portCount: (theme) => ({
198197
fontSize: 12,
199198
fontWeight: 500,
200199
height: 20,
@@ -204,9 +203,9 @@ const styles = {
204203
display: "flex",
205204
alignItems: "center",
206205
justifyContent: "center",
207-
backgroundColor: colors.gray[11],
206+
backgroundColor: theme.colors.gray[11],
208207
marginLeft: 8,
209-
},
208+
}),
210209

211210
portLink: (theme) => ({
212211
color: theme.palette.text.primary,

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Switch from "@mui/material/Switch";
55
import TextField from "@mui/material/TextField";
66
import Link from "@mui/material/Link";
77
import { useTheme } from "@emotion/react";
8-
import { useState } from "react";
8+
import { FC, useState } from "react";
99
import { BlockPicker } from "react-color";
1010
import { useFormik } from "formik";
1111
import type { UpdateAppearanceConfig } from "api/typesGenerated";
@@ -19,7 +19,6 @@ import {
1919
import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
2020
import { Stack } from "components/Stack/Stack";
2121
import { getFormHelpers } from "utils/formUtils";
22-
import { colors } from "theme/colors";
2322

2423
export type AppearanceSettingsPageViewProps = {
2524
appearance: UpdateAppearanceConfig;
@@ -30,14 +29,11 @@ export type AppearanceSettingsPageViewProps = {
3029
) => void;
3130
};
3231

33-
const fallbackBgColor = colors.blue[7];
34-
35-
export const AppearanceSettingsPageView = ({
36-
appearance,
37-
isEntitled,
38-
onSaveAppearance,
39-
}: AppearanceSettingsPageViewProps): JSX.Element => {
32+
export const AppearanceSettingsPageView: FC<
33+
AppearanceSettingsPageViewProps
34+
> = ({ appearance, isEntitled, onSaveAppearance }) => {
4035
const theme = useTheme();
36+
const fallbackBgColor = theme.colors.blue[7];
4137

4238
const applicationNameForm = useFormik<{
4339
application_name: string;

0 commit comments

Comments
 (0)