Skip to content

Commit 2eb0c99

Browse files
aslilacaslilac
committed
emotion: Fieldset 
1 parent 48f3bfc commit 2eb0c99

File tree

1 file changed

+67
-57
lines changed

1 file changed

+67
-57
lines changed

‎site/src/components/DeploySettingsLayout/Fieldset.tsx

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,82 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { FC, ReactNode, FormEventHandler } from "react";
1+
import type { FC, ReactNode, FormEventHandler } from "react";
32
import Button from "@mui/material/Button";
3+
import { type CSSObject, useTheme } from "@emotion/react";
44

5-
export const Fieldset: FC<{
5+
interface FieldsetProps {
66
children: ReactNode;
77
title: string | JSX.Element;
88
subtitle?: string | JSX.Element;
99
validation?: string | JSX.Element | false;
1010
button?: JSX.Element | false;
1111
onSubmit: FormEventHandler<HTMLFormElement>;
1212
isSubmitting?: boolean;
13-
}> = ({
14-
title,
15-
subtitle,
16-
children,
17-
validation,
18-
button,
19-
onSubmit,
20-
isSubmitting,
21-
}) => {
22-
const styles = useStyles();
13+
}
14+
15+
export const Fieldset: FC<FieldsetProps> = (props) => {
16+
const {
17+
title,
18+
subtitle,
19+
children,
20+
validation,
21+
button,
22+
onSubmit,
23+
isSubmitting,
24+
} = props;
25+
const theme = useTheme();
2326

2427
return (
25-
<form className={styles.fieldset} onSubmit={onSubmit}>
26-
<header className={styles.header}>
27-
<div className={styles.title}>{title}</div>
28-
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
29-
<div className={styles.body}>{children}</div>
28+
<form
29+
css={{
30+
borderRadius: theme.spacing(1),
31+
border: `1px solid ${theme.palette.divider}`,
32+
background: theme.palette.background.paper,
33+
marginTop: theme.spacing(4),
34+
}}
35+
onSubmit={onSubmit}
36+
>
37+
<header css={{ padding: theme.spacing(3) }}>
38+
<div
39+
css={{
40+
fontSize: theme.spacing(2.5),
41+
margin: 0,
42+
fontWeight: 600,
43+
}}
44+
>
45+
{title}
46+
</div>
47+
{subtitle && (
48+
<div
49+
css={{
50+
color: theme.palette.text.secondary,
51+
fontSize: 14,
52+
marginTop: theme.spacing(1),
53+
}}
54+
>
55+
{subtitle}
56+
</div>
57+
)}
58+
<div
59+
css={[
60+
theme.typography.body2 as CSSObject,
61+
{ paddingTop: theme.spacing(2) },
62+
]}
63+
>
64+
{children}
65+
</div>
3066
</header>
31-
<footer className={styles.footer}>
32-
<div className={styles.validation}>{validation}</div>
67+
<footer
68+
css={[
69+
theme.typography.body2 as CSSObject,
70+
{
71+
background: theme.palette.background.paperLight,
72+
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
73+
display: "flex",
74+
alignItems: "center",
75+
justifyContent: "space-between",
76+
},
77+
]}
78+
>
79+
<div css={{ color: theme.palette.text.secondary }}>{validation}</div>
3380
{button || (
3481
<Button type="submit" disabled={isSubmitting}>
3582
Submit
@@ -39,40 +86,3 @@ export const Fieldset: FC<{
3986
</form>
4087
);
4188
};
42-
43-
const useStyles = makeStyles((theme) => ({
44-
fieldset: {
45-
borderRadius: theme.spacing(1),
46-
border: `1px solid ${theme.palette.divider}`,
47-
background: theme.palette.background.paper,
48-
marginTop: theme.spacing(4),
49-
},
50-
title: {
51-
fontSize: theme.spacing(2.5),
52-
margin: 0,
53-
fontWeight: 600,
54-
},
55-
subtitle: {
56-
color: theme.palette.text.secondary,
57-
fontSize: 14,
58-
marginTop: theme.spacing(1),
59-
},
60-
body: {
61-
...theme.typography.body2,
62-
paddingTop: theme.spacing(2),
63-
},
64-
validation: {
65-
color: theme.palette.text.secondary,
66-
},
67-
header: {
68-
padding: theme.spacing(3),
69-
},
70-
footer: {
71-
...theme.typography.body2,
72-
background: theme.palette.background.paperLight,
73-
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
74-
display: "flex",
75-
alignItems: "center",
76-
justifyContent: "space-between",
77-
},
78-
}));

0 commit comments

Comments
 (0)