Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 63756a7

Browse files
aslilacaslilac
committed
"themes" :^)
1 parent 8f4b3dc commit 63756a7

File tree

29 files changed

+1097
-544
lines changed

29 files changed

+1097
-544
lines changed

‎site/.storybook/preview.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ 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";
9+
import { dark } from "theme/mui";
1010
import "theme/globalFonts";
1111
import { QueryClient, QueryClientProvider } from "react-query";
1212

‎site/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +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";
9+
import { dark } from "./theme/mui";
1010
import "./theme/globalFonts";
1111
import {
1212
StyledEngineProvider,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const Alert: FC<AlertProps> = ({
1515
children,
1616
actions,
1717
dismissible,
18-
severity,
18+
severity = "info",
1919
onDismiss,
2020
...alertProps
2121
}) => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FC } from "react";
44
import { WorkspaceBuild } from "api/typesGenerated";
55
import { getDisplayWorkspaceBuildStatus } from "utils/workspace";
66
import { Avatar, AvatarProps } from "components/Avatar/Avatar";
7-
import { PaletteIndex } from "theme/theme";
7+
import type { PaletteIndex } from "theme/mui";
88
import { Theme } from "@mui/material/styles";
99
import { BuildIcon } from "components/BuildIcon/BuildIcon";
1010

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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 InfoLight: Story = {
62+
// args: {
63+
// children: "Information",
64+
// type: "info",
65+
// lightBorder: true,
66+
// },
67+
// };
68+
69+
export const Default: Story = {
70+
args: {
71+
children: "Neutral/default",
72+
},
73+
};
74+
75+
export const DefaultLight: Story = {
76+
args: {
77+
children: "Neutral/default",
78+
},
79+
};
80+
81+
// export const WarningLight: Story = {
82+
// args: {
83+
// children: "Warning",
84+
// type: "warning",
85+
// lightBorder: true,
86+
// },
87+
// };

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { ProxyContextValue } from "contexts/ProxyContext";
1717
import { displayError } from "components/GlobalSnackbar/utils";
1818
import Divider from "@mui/material/Divider";
1919
import Skeleton from "@mui/material/Skeleton";
20-
import { BUTTON_SM_HEIGHT } from "theme/theme";
20+
import { BUTTON_SM_HEIGHT } from "theme/mui";
2121
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
2222
import { usePermissions } from "hooks/usePermissions";
2323
import Typography from "@mui/material/Typography";

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { BorderedMenu } from "./BorderedMenu";
88
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
99
import { UserAvatar } from "components/UserAvatar/UserAvatar";
1010
import { UserDropdownContent } from "./UserDropdownContent";
11-
import { BUTTON_SM_HEIGHT } from "theme/theme";
11+
import { BUTTON_SM_HEIGHT } from "theme/mui";
1212
import { css } from "@emotion/react";
1313

1414
export interface UserDropdownProps {

‎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: {

0 commit comments

Comments
 (0)