Skip to content

Commit 598c675

Browse files
aslilacaslilac
committed
🌭
1 parent dff53d0 commit 598c675

File tree

37 files changed

+236
-133
lines changed

37 files changed

+236
-133
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: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,11 @@ 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>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
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
}
6+
s;

‎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: 1 addition & 7 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,11 +29,6 @@ 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>

‎site/src/components/Alert/Alert.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Alert: FC<AlertProps> = ({
2121
children,
2222
actions,
2323
dismissible,
24-
severity,
24+
severity = "info",
2525
onDismiss,
2626
...alertProps
2727
}) => {

‎site/src/components/BuildAvatar/BuildAvatar.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
1717
const theme = useTheme();
1818
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
1919
const badgeType = useClassName(
20-
(css, theme) => css`
21-
background-color: ${theme.palette[type].light};
22-
`,
20+
(css, theme) => css({ backgroundColor: theme.palette[type].light }),
2321
[type],
2422
);
2523

‎site/src/components/Callout/Callout.stories.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Callout } from "./Callout";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof Callout> = {
5+
title: "components/Callout",
6+
component: Callout,
7+
};
8+
9+
export default meta;
10+
type Story = StoryObj<typeof Callout>;
11+
12+
export const Danger: Story = {
13+
args: {
14+
children: "Danger",
15+
type: "danger",
16+
},
17+
};
18+
19+
export const Error: Story = {
20+
args: {
21+
children: "Error",
22+
type: "error",
23+
},
24+
};
25+
26+
export const Warning: Story = {
27+
args: {
28+
children: "Warning",
29+
type: "warning",
30+
},
31+
};
32+
33+
export const Notice: Story = {
34+
args: {
35+
children: "Notice",
36+
type: "notice",
37+
},
38+
};
39+
40+
export const Info: Story = {
41+
args: {
42+
children: "Information",
43+
type: "info",
44+
},
45+
};
46+
47+
export const Success: Story = {
48+
args: {
49+
children: "Success",
50+
type: "success",
51+
},
52+
};
53+
54+
export const Active: Story = {
55+
args: {
56+
children: "Active",
57+
type: "active",
58+
},
59+
};
60+
61+
export const Default: Story = {
62+
args: {
63+
children: "Neutral/default",
64+
},
65+
};
66+
67+
export const DefaultLight: Story = {
68+
args: {
69+
children: "Neutral/default",
70+
},
71+
};

‎site/src/components/Callout/Callout.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { type FC, type ReactNode } from "react";
2+
import { useTheme } from "@emotion/react";
3+
4+
// TODO: use a `ThemeRole` type or something
5+
export type CalloutType =
6+
| "danger"
7+
| "error"
8+
| "warning"
9+
| "notice"
10+
| "info"
11+
| "success"
12+
| "active";
13+
// | "neutral";
14+
15+
export interface CalloutProps {
16+
children?: ReactNode;
17+
icon?: ReactNode | boolean;
18+
type: CalloutType;
19+
}
20+
21+
export const Callout: FC<CalloutProps> = ({ children, type }) => {
22+
const theme = useTheme();
23+
24+
return (
25+
<div
26+
css={{
27+
backgroundColor: theme.experimental.roles[type].background,
28+
border: `1px solid ${theme.experimental.roles[type].outline}`,
29+
borderRadius: theme.shape.borderRadius,
30+
color: theme.experimental.roles[type].text,
31+
padding: "8px 16px",
32+
}}
33+
>
34+
{children}
35+
</div>
36+
);
37+
};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "@emotion/react";
77
import Link from "@mui/material/Link";
88
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";
1212
import { colors } from "theme/colors";
@@ -32,7 +32,7 @@ export interface LicenseBannerViewProps {
3232
warnings: string[];
3333
}
3434

35-
export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
35+
export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
3636
errors,
3737
warnings,
3838
}) => {

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ 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";
1313
import { colors } from "theme/colors";
14-
import type * as TypesGen from "api/typesGenerated";
1514
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
16-
import { ProxyContextValue } from "contexts/ProxyContext";
15+
import type * as TypesGen from "api/typesGenerated";
16+
import type { ProxyContextValue } from "contexts/ProxyContext";
1717
import { displayError } from "components/GlobalSnackbar/utils";
18-
import { CoderIcon } from "components/Icons/CoderIcon";
1918
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
19+
import { CoderIcon } from "components/Icons/CoderIcon";
2020
import { usePermissions } from "hooks/usePermissions";
2121
import { UserDropdown } from "./UserDropdown/UserDropdown";
2222

@@ -115,8 +115,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
115115
<nav
116116
css={{
117117
height: navHeight,
118-
borderBottom: `1px solid ${theme.palette.divider}`,
119118
backgroundColor: theme.palette.background.paper,
119+
borderBottom: `1px solid ${theme.palette.divider}`,
120120
}}
121121
>
122122
<div css={styles.wrapper}>
@@ -279,9 +279,9 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
279279
<div
280280
css={{
281281
width: "100%",
282+
maxWidth: "320px",
282283
fontSize: 14,
283284
padding: 16,
284-
maxWidth: "320px",
285285
lineHeight: "140%",
286286
}}
287287
>
@@ -297,12 +297,12 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
297297
Select a region nearest to you
298298
</h4>
299299
<p
300-
css={(theme) => ({
300+
css={{
301301
fontSize: 13,
302302
color: theme.palette.text.secondary,
303303
lineHeight: "inherit",
304304
marginTop: 0.5,
305-
})}
305+
}}
306306
>
307307
Workspace proxies improve terminal and web app connections to
308308
workspaces. This does not apply to CLI connections. A region must be

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const Example: Story = {
2020
args: {
2121
description: "Do you really want to delete me?",
2222
hideCancel: false,
23-
type: "delete",
23+
type: "danger",
2424
},
2525
};
2626

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const CONFIRM_DIALOG_DEFAULTS: Record<
1717
ConfirmDialogType,
1818
ConfirmDialogTypeConfig
1919
> = {
20-
delete: {
21-
confirmText: "Delete",
20+
danger: {
21+
confirmText: "Delete", // TODO: this feels gross given the rename of delete -> danger
2222
hideCancel: false,
2323
},
2424
info: {

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@ import {
55
useId,
66
useState,
77
} from "react";
8-
9-
import { useTheme } from "@emotion/react";
108
import TextField from "@mui/material/TextField";
119
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog";
10+
import { Callout } from "../../Callout/Callout";
1211

1312
export interface DeleteDialogProps {
1413
isOpen: boolean;
@@ -30,7 +29,6 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
3029
confirmLoading,
3130
}) => {
3231
const hookId = useId();
33-
const theme = useTheme();
3432

3533
const [userConfirmationText, setUserConfirmationText] = useState("");
3634
const [isFocused, setIsFocused] = useState(false);
@@ -49,7 +47,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
4947

5048
return (
5149
<ConfirmDialog
52-
type="delete"
50+
type="danger"
5351
hideCancel={false}
5452
open={isOpen}
5553
title={`Delete ${entity}`}
@@ -61,14 +59,12 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
6159
<>
6260
<p>Deleting this {entity} is irreversible!</p>
6361

64-
{Boolean(info) && (
65-
<p css={{ color: theme.palette.warning.light }}>{info}</p>
66-
)}
62+
{Boolean(info) && <Callout type="danger">{info}</Callout>}
6763

6864
<p>Are you sure you want to proceed?</p>
6965

7066
<p>
71-
Type &ldquo;<strong>{name}</strong>&rdquo; below to confirm.
67+
Type <strong>{name}</strong> below to confirm.
7268
</p>
7369

7470
<form onSubmit={onSubmit}>

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export interface DialogActionButtonsProps {
2121
}
2222

2323
const typeToColor = (type: ConfirmDialogType): LoadingButtonProps["color"] => {
24-
if (type === "delete") {
24+
if (type === "danger") {
2525
return "secondary";
2626
}
2727
return "primary";
@@ -58,7 +58,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
5858
disabled={disabled}
5959
type="submit"
6060
css={[
61-
type === "delete" && styles.warningButton,
61+
type === "danger" && styles.dangerButton,
6262
type === "success" && styles.successButton,
6363
]}
6464
>
@@ -70,7 +70,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
7070
};
7171

7272
const styles = {
73-
warningButton: (theme) => ({
73+
dangerButton: (theme) => ({
7474
"&.MuiButton-contained": {
7575
backgroundColor: theme.palette.warning.main,
7676
borderColor: theme.palette.warning.main,

‎site/src/components/Dialogs/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export type ConfirmDialogType = "delete" | "info" | "success";
1+
export type ConfirmDialogType = "danger" | "info" | "success";

‎site/src/components/HelpTooltip/HelpTooltip.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,7 @@ const styles = {
295295
display: "flex",
296296
alignItems: "center",
297297
...(theme.typography.body2 as CSSObject),
298+
color: theme.palette.text.primary,
298299
}),
299300

300301
linkIcon: {

‎site/src/components/InfoTooltip/InfoTooltip.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
} from "components/HelpTooltip/HelpTooltip";
77
import InfoIcon from "@mui/icons-material/InfoOutlined";
88
import { Interpolation, Theme, css, useTheme } from "@emotion/react";
9+
import type { ThemeRole } from "theme/experimental";
910

1011
interface InfoTooltipProps {
11-
// TODO: use a `ThemeRole` type or something
12-
type?: "warning" | "notice" | "info";
12+
type?: ThemeRole;
1313
title: ReactNode;
1414
message: ReactNode;
1515
}
@@ -20,12 +20,13 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
2020
type = "info",
2121
}) => {
2222
const theme = useTheme();
23+
const iconColor = theme.experimental.roles[type].outline;
2324

2425
return (
2526
<HelpTooltip
2627
size="small"
2728
icon={InfoIcon}
28-
iconStyles={{ color: theme.experimental.roles[type].outline }}
29+
iconStyles={{ color: iconColor }}
2930
buttonStyles={styles.button}
3031
>
3132
<HelpTooltipTitle>{title}</HelpTooltipTitle>

0 commit comments

Comments
 (0)