Create a new section for the settings layout

coder · BrunoQuaresma · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
commit 7bb69388c5dce2fb8a9098387fef23542a252989
diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
@@ -1,6 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { FC } from "react"
+import { combineClasses } from "../../util/combineClasses"
 import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"
@@ -30,7 +31,7 @@ export const Section: SectionFC = ({
 }) => {
   const styles = useStyles({ layout })
   return (
-    <section className={className}>
+    <section className={combineClasses([styles.root, className])}>
       <div className={styles.inner}>
         {(title || description) && (
           <div className={styles.header}>
@@ -59,21 +60,33 @@ export const Section: SectionFC = ({
 Section.Action = SectionAction
 
 const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[6],
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(6),
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`,
+
+    [theme.breakpoints.down("sm")]: {
+      padding: theme.spacing(4, 3, 4, 3),
+    },
+  },
   inner: ({ layout }: { layout: SectionLayout }) => ({
     maxWidth: layout === "fluid" ? "100%" : 500,
   }),
   alert: {
     marginBottom: theme.spacing(1),
   },
   header: {
-    marginBottom: theme.spacing(3),
+    marginBottom: theme.spacing(4),
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
   },
   description: {
     color: theme.palette.text.secondary,
     fontSize: 16,
-    marginTop: theme.spacing(0.5),
+    marginTop: theme.spacing(2),
   },
 }))
diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -0,0 +1,79 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import { FC } from "react"
+import { SectionAction } from "../SectionAction/SectionAction"
+
+type SectionLayout = "fixed" | "fluid"
+
+export interface SectionProps {
+  title?: React.ReactNode | string
+  description?: React.ReactNode
+  toolbar?: React.ReactNode
+  alert?: React.ReactNode
+  layout?: SectionLayout
+  className?: string
+  children?: React.ReactNode
+}
+
+type SectionFC = FC<React.PropsWithChildren<SectionProps>> & {
+  Action: typeof SectionAction
+}
+
+export const Section: SectionFC = ({
+  title,
+  description,
+  toolbar,
+  alert,
+  className = "",
+  children,
+  layout = "fixed",
+}) => {
+  const styles = useStyles({ layout })
+  return (
+    <section className={className}>
+      <div className={styles.inner}>
+        {(title || description) && (
+          <div className={styles.header}>
+            <div>
+              {title && <Typography variant="h4">{title}</Typography>}
+              {description && typeof description === "string" && (
+                <Typography className={styles.description}>
+                  {description}
+                </Typography>
+              )}
+              {description && typeof description !== "string" && (
+                <div className={styles.description}>{description}</div>
+              )}
+            </div>
+            {toolbar && <div>{toolbar}</div>}
+          </div>
+        )}
+        {alert && <div className={styles.alert}>{alert}</div>}
+        {children}
+      </div>
+    </section>
+  )
+}
+
+// Sub-components
+Section.Action = SectionAction
+
+const useStyles = makeStyles((theme) => ({
+  inner: ({ layout }: { layout: SectionLayout }) => ({
+    maxWidth: layout === "fluid" ? "100%" : 500,
+  }),
+  alert: {
+    marginBottom: theme.spacing(1),
+  },
+  header: {
+    marginBottom: theme.spacing(3),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  description: {
+    color: theme.palette.text.secondary,
+    fontSize: 16,
+    marginTop: theme.spacing(0.5),
+  },
+}))
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,6 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { Section } from "../../../components/Section/Section"
+import { Section } from "../../../components/SettingsLayout/Section"
 import { AccountForm } from "../../../components/SettingsAccountForm/SettingsAccountForm"
 import { XServiceContext } from "../../../xServices/StateContext"
 

diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -1,7 +1,7 @@
 import { useActor } from "@xstate/react"
 import React, { useContext, useEffect } from "react"
 import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog"
-import { Section } from "../../../components/Section/Section"
+import { Section } from "../../../components/SettingsLayout/Section"
 import { XServiceContext } from "../../../xServices/StateContext"
 import { SSHKeysPageView } from "./SSHKeysPageView"
 

diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -2,7 +2,7 @@ import { useMachine } from "@xstate/react"
 import { useMe } from "hooks/useMe"
 import React from "react"
 import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService"
-import { Section } from "../../../components/Section/Section"
+import { Section } from "../../../components/SettingsLayout/Section"
 import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
 
 export const Language = {