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

Skip to content

Commit b06ccdc

Browse files
aslilacaslilac
committed
do a couple more (to fix storybook)
1 parent 9f6d826 commit b06ccdc

File tree

3 files changed

+107
-108
lines changed

3 files changed

+107
-108
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
4040
<>
4141
<MenuItem
4242
css={(theme) => css`
43-
height: ${navHeight};
43+
height: ${navHeight}px;
4444
padding: ${theme.spacing(1.5, 0)};
4545
4646
&:hover {

‎site/src/components/EmptyState/EmptyState.tsx

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import Box from "@mui/material/Box";
2-
import { makeStyles } from "@mui/styles";
32
import Typography from "@mui/material/Typography";
4-
import { FC, ReactNode } from "react";
5-
import { combineClasses } from "utils/combineClasses";
3+
import type { FC, ReactNode } from "react";
4+
import { useTheme } from "@emotion/react";
65

76
export interface EmptyStateProps {
87
/** Text Message to display, placed inside Typography component */
@@ -25,54 +24,56 @@ export interface EmptyStateProps {
2524
export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
2625
props,
2726
) => {
28-
const { message, description, cta, className, image, ...boxProps } = props;
29-
const styles = useStyles();
27+
const { message, description, cta, image, ...boxProps } = props;
28+
const theme = useTheme();
3029

3130
return (
32-
<Box className={combineClasses([styles.root, className])} {...boxProps}>
33-
<Typography variant="h5" className={styles.title}>
31+
<Box
32+
css={{
33+
overflow: "hidden",
34+
display: "flex",
35+
flexDirection: "column",
36+
justifyContent: "center",
37+
alignItems: "center",
38+
textAlign: "center",
39+
minHeight: 360,
40+
padding: theme.spacing(10, 5),
41+
position: "relative",
42+
}}
43+
{...boxProps}
44+
>
45+
<Typography
46+
variant="h5"
47+
css={{
48+
fontSize: theme.spacing(3),
49+
}}
50+
>
3451
{message}
3552
</Typography>
3653
{description && (
3754
<Typography
3855
variant="body2"
3956
color="textSecondary"
40-
className={styles.description}
57+
css={{
58+
marginTop: theme.spacing(1.5),
59+
fontSize: theme.spacing(2),
60+
lineHeight: "140%",
61+
maxWidth: theme.spacing(60),
62+
}}
4163
>
4264
{description}
4365
</Typography>
4466
)}
45-
{cta && <div className={styles.cta}>{cta}</div>}
67+
{cta && (
68+
<div
69+
css={{
70+
marginTop: theme.spacing(4),
71+
}}
72+
>
73+
{cta}
74+
</div>
75+
)}
4676
{image}
4777
</Box>
4878
);
4979
};
50-
51-
const useStyles = makeStyles((theme) => ({
52-
root: {
53-
overflow: "hidden",
54-
display: "flex",
55-
flexDirection: "column",
56-
justifyContent: "center",
57-
alignItems: "center",
58-
textAlign: "center",
59-
minHeight: 360,
60-
padding: theme.spacing(10, 5),
61-
position: "relative",
62-
},
63-
64-
title: {
65-
fontSize: theme.spacing(3),
66-
},
67-
68-
description: {
69-
marginTop: theme.spacing(1.5),
70-
fontSize: theme.spacing(2),
71-
lineHeight: "140%",
72-
maxWidth: theme.spacing(60),
73-
},
74-
75-
cta: {
76-
marginTop: theme.spacing(4),
77-
},
78-
}));

‎site/src/components/PageHeader/PageHeader.tsx

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { makeStyles } from "@mui/styles";
21
import { type FC, type PropsWithChildren, type ReactNode } from "react";
3-
import { combineClasses } from "utils/combineClasses";
42
import { Stack } from "../Stack/Stack";
53

64
export interface PageHeaderProps {
@@ -13,16 +11,37 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
1311
actions,
1412
className,
1513
}) => {
16-
const styles = useStyles({});
17-
1814
return (
1915
<header
20-
className={combineClasses([styles.root, className])}
16+
className={className}
17+
css={(theme) => ({
18+
display: "flex",
19+
alignItems: "center",
20+
paddingTop: theme.spacing(6),
21+
paddingBottom: theme.spacing(6),
22+
gap: theme.spacing(4),
23+
24+
[theme.breakpoints.down("md")]: {
25+
flexDirection: "column",
26+
alignItems: "flex-start",
27+
},
28+
})}
2129
data-testid="header"
2230
>
2331
<hgroup>{children}</hgroup>
2432
{actions && (
25-
<Stack direction="row" className={styles.actions}>
33+
<Stack
34+
direction="row"
35+
css={(theme) => ({
36+
marginLeft: "auto",
37+
38+
[theme.breakpoints.down("md")]: {
39+
marginTop: theme.spacing(3),
40+
marginLeft: "initial",
41+
width: "100%",
42+
},
43+
})}
44+
>
2645
{actions}
2746
</Stack>
2847
)}
@@ -33,75 +52,54 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
3352
export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
3453
children,
3554
}) => {
36-
const styles = useStyles({});
37-
38-
return <h1 className={styles.title}>{children}</h1>;
55+
return (
56+
<h1
57+
css={(theme) => ({
58+
fontSize: theme.spacing(3),
59+
fontWeight: 400,
60+
margin: 0,
61+
display: "flex",
62+
alignItems: "center",
63+
lineHeight: "140%",
64+
})}
65+
>
66+
{children}
67+
</h1>
68+
);
3969
};
4070

4171
export const PageHeaderSubtitle: FC<
4272
PropsWithChildren<{ condensed?: boolean }>
4373
> = ({ children, condensed }) => {
44-
const styles = useStyles({
45-
condensed,
46-
});
47-
48-
return <h2 className={styles.subtitle}>{children}</h2>;
74+
return (
75+
<h2
76+
css={(theme) => ({
77+
fontSize: theme.spacing(2),
78+
color: theme.palette.text.secondary,
79+
fontWeight: 400,
80+
display: "block",
81+
margin: 0,
82+
marginTop: condensed ? theme.spacing(0.5) : theme.spacing(1),
83+
lineHeight: "140%",
84+
})}
85+
>
86+
{children}
87+
</h2>
88+
);
4989
};
5090

5191
export const PageHeaderCaption: FC<PropsWithChildren> = ({ children }) => {
52-
const styles = useStyles({});
53-
return <span className={styles.caption}>{children}</span>;
92+
return (
93+
<span
94+
css={(theme) => ({
95+
fontSize: 12,
96+
color: theme.palette.text.secondary,
97+
fontWeight: 600,
98+
textTransform: "uppercase",
99+
letterSpacing: "0.1em",
100+
})}
101+
>
102+
{children}
103+
</span>
104+
);
54105
};
55-
56-
const useStyles = makeStyles((theme) => ({
57-
root: {
58-
display: "flex",
59-
alignItems: "center",
60-
paddingTop: theme.spacing(6),
61-
paddingBottom: theme.spacing(6),
62-
gap: theme.spacing(4),
63-
64-
[theme.breakpoints.down("md")]: {
65-
flexDirection: "column",
66-
alignItems: "flex-start",
67-
},
68-
},
69-
70-
title: {
71-
fontSize: theme.spacing(3),
72-
fontWeight: 400,
73-
margin: 0,
74-
display: "flex",
75-
alignItems: "center",
76-
lineHeight: "140%",
77-
},
78-
79-
subtitle: {
80-
fontSize: theme.spacing(2),
81-
color: theme.palette.text.secondary,
82-
fontWeight: 400,
83-
display: "block",
84-
margin: 0,
85-
marginTop: ({ condensed }: { condensed?: boolean }) =>
86-
condensed ? theme.spacing(0.5) : theme.spacing(1),
87-
lineHeight: "140%",
88-
},
89-
90-
actions: {
91-
marginLeft: "auto",
92-
93-
[theme.breakpoints.down("md")]: {
94-
marginTop: theme.spacing(3),
95-
marginLeft: "initial",
96-
width: "100%",
97-
},
98-
},
99-
100-
caption: {
101-
fontSize: 12,
102-
color: theme.palette.text.secondary,
103-
fontWeight: 600,
104-
textTransform: "uppercase",
105-
letterSpacing: "0.1em",
106-
},
107-
}));

0 commit comments

Comments
 (0)