Skip to content

Commit 7bb6938

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Create a new section for the settings layout
1 parent f7424f7 commit 7bb6938

File tree

5 files changed

+98
-6
lines changed

5 files changed

+98
-6
lines changed

‎site/src/components/Section/Section.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import Typography from "@material-ui/core/Typography"
33
import { FC } from "react"
4+
import { combineClasses } from "../../util/combineClasses"
45
import { SectionAction } from "../SectionAction/SectionAction"
56

67
type SectionLayout = "fixed" | "fluid"
@@ -30,7 +31,7 @@ export const Section: SectionFC = ({
3031
}) => {
3132
const styles = useStyles({ layout })
3233
return (
33-
<section className={className}>
34+
<section className={combineClasses([styles.root, className])}>
3435
<div className={styles.inner}>
3536
{(title || description) && (
3637
<div className={styles.header}>
@@ -59,21 +60,33 @@ export const Section: SectionFC = ({
5960
Section.Action = SectionAction
6061

6162
const useStyles = makeStyles((theme) => ({
63+
root: {
64+
backgroundColor: theme.palette.background.paper,
65+
boxShadow: theme.shadows[6],
66+
marginBottom: theme.spacing(1),
67+
padding: theme.spacing(6),
68+
borderRadius: theme.shape.borderRadius,
69+
border: `1px solid ${theme.palette.divider}`,
70+
71+
[theme.breakpoints.down("sm")]: {
72+
padding: theme.spacing(4, 3, 4, 3),
73+
},
74+
},
6275
inner: ({ layout }: { layout: SectionLayout }) => ({
6376
maxWidth: layout === "fluid" ? "100%" : 500,
6477
}),
6578
alert: {
6679
marginBottom: theme.spacing(1),
6780
},
6881
header: {
69-
marginBottom: theme.spacing(3),
82+
marginBottom: theme.spacing(4),
7083
display: "flex",
7184
flexDirection: "row",
7285
justifyContent: "space-between",
7386
},
7487
description: {
7588
color: theme.palette.text.secondary,
7689
fontSize: 16,
77-
marginTop: theme.spacing(0.5),
90+
marginTop: theme.spacing(2),
7891
},
7992
}))

‎site/src/components/SettingsLayout/Section.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { makeStyles } from "@material-ui/core/styles"
2+
import Typography from "@material-ui/core/Typography"
3+
import { FC } from "react"
4+
import { SectionAction } from "../SectionAction/SectionAction"
5+
6+
type SectionLayout = "fixed" | "fluid"
7+
8+
export interface SectionProps {
9+
title?: React.ReactNode | string
10+
description?: React.ReactNode
11+
toolbar?: React.ReactNode
12+
alert?: React.ReactNode
13+
layout?: SectionLayout
14+
className?: string
15+
children?: React.ReactNode
16+
}
17+
18+
type SectionFC = FC<React.PropsWithChildren<SectionProps>> & {
19+
Action: typeof SectionAction
20+
}
21+
22+
export const Section: SectionFC = ({
23+
title,
24+
description,
25+
toolbar,
26+
alert,
27+
className = "",
28+
children,
29+
layout = "fixed",
30+
}) => {
31+
const styles = useStyles({ layout })
32+
return (
33+
<section className={className}>
34+
<div className={styles.inner}>
35+
{(title || description) && (
36+
<div className={styles.header}>
37+
<div>
38+
{title && <Typography variant="h4">{title}</Typography>}
39+
{description && typeof description === "string" && (
40+
<Typography className={styles.description}>
41+
{description}
42+
</Typography>
43+
)}
44+
{description && typeof description !== "string" && (
45+
<div className={styles.description}>{description}</div>
46+
)}
47+
</div>
48+
{toolbar && <div>{toolbar}</div>}
49+
</div>
50+
)}
51+
{alert && <div className={styles.alert}>{alert}</div>}
52+
{children}
53+
</div>
54+
</section>
55+
)
56+
}
57+
58+
// Sub-components
59+
Section.Action = SectionAction
60+
61+
const useStyles = makeStyles((theme) => ({
62+
inner: ({ layout }: { layout: SectionLayout }) => ({
63+
maxWidth: layout === "fluid" ? "100%" : 500,
64+
}),
65+
alert: {
66+
marginBottom: theme.spacing(1),
67+
},
68+
header: {
69+
marginBottom: theme.spacing(3),
70+
display: "flex",
71+
flexDirection: "row",
72+
justifyContent: "space-between",
73+
},
74+
description: {
75+
color: theme.palette.text.secondary,
76+
fontSize: 16,
77+
marginTop: theme.spacing(0.5),
78+
},
79+
}))

‎site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useActor } from "@xstate/react"
22
import React, { useContext } from "react"
3-
import { Section } from "../../../components/Section/Section"
3+
import { Section } from "../../../components/SettingsLayout/Section"
44
import { AccountForm } from "../../../components/SettingsAccountForm/SettingsAccountForm"
55
import { XServiceContext } from "../../../xServices/StateContext"
66

‎site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useActor } from "@xstate/react"
22
import React, { useContext, useEffect } from "react"
33
import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog"
4-
import { Section } from "../../../components/Section/Section"
4+
import { Section } from "../../../components/SettingsLayout/Section"
55
import { XServiceContext } from "../../../xServices/StateContext"
66
import { SSHKeysPageView } from "./SSHKeysPageView"
77

‎site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useMachine } from "@xstate/react"
22
import { useMe } from "hooks/useMe"
33
import React from "react"
44
import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService"
5-
import { Section } from "../../../components/Section/Section"
5+
import { Section } from "../../../components/SettingsLayout/Section"
66
import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
77

88
export const Language = {

0 commit comments

Comments
 (0)