feat: add margins to pages (#1217)

* Add Margin, use constants

* Change throughout

* Add to a page, lint

* Format

site/src/components/FullPageForm/FullPageForm.tsx

@@ -2,6 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
 import { FormTitle } from "../FormTitle/FormTitle"
+import { Margins } from "../Margins/Margins"
 
 export interface FullPageFormProps {
   title: string
@@ -11,7 +12,6 @@ export interface FullPageFormProps {
 
 const useStyles = makeStyles(() => ({
   root: {
-    maxWidth: "1380px",
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -23,10 +23,12 @@ export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCan
   const styles = useStyles()
   return (
     <main className={styles.root}>
+      <Margins>
         <FormTitle title={title} detail={detail} />
         <FormCloseButton onClose={onCancel} />
 
         {children}
+      </Margins>
     </main>
   )
 }

site/src/components/Header/Header.tsx

@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
+import { maxWidth, sidePadding } from "../../theme/constants"
 import { HeaderButton } from "../HeaderButton/HeaderButton"
 
 export interface HeaderAction {
@@ -66,18 +67,19 @@ const useStyles = makeStyles((theme) => ({
     position: "relative",
     display: "flex",
     alignItems: "center",
-    height: 150,
+    height: 126,
     background: theme.palette.hero.main,
     boxShadow: theme.shadows[3],
   },
   topInner: {
     display: "flex",
     alignItems: "center",
-    maxWidth: "1380px",
+    maxWidth,
     margin: "0 auto",
     flex: 1,
     height: 68,
     minWidth: 0,
+    padding: `0 ${sidePadding}`,
   },
   title: {
     display: "flex",

site/src/components/Margins/Margins.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { Margins } from "./Margins"
+
+export default {
+  title: "components/Margins",
+  component: Margins,
+} as ComponentMeta<typeof Margins>
+
+const Template: Story = (args) => (
+  <Margins {...args}>
+    <div style={{ width: "100%", background: "lightgrey" }}>Here is some content that will not get too wide!</div>
+  </Margins>
+)
+
+export const Example = Template.bind({})

site/src/components/Margins/Margins.tsx

@@ -0,0 +1,21 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { maxWidth, sidePadding } from "../../theme/constants"
+
+const useStyles = makeStyles(() => ({
+  margins: {
+    margin: "0 auto",
+    maxWidth,
+    padding: `0 ${sidePadding}`,
+    flex: 1,
+  },
+}))
+
+export const Margins: React.FC = ({ children }) => {
+  const styles = useStyles()
+  return (
+    <div>
+      <div className={styles.margins}>{children}</div>
+    </div>
+  )
+}

site/src/components/PreferencesLayout/PreferencesLayout.tsx

@@ -2,6 +2,7 @@ import Box from "@material-ui/core/Box"
 import React from "react"
 import { Outlet } from "react-router-dom"
 import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
+import { Margins } from "../Margins/Margins"
 import { TabPanel } from "../TabPanel/TabPanel"
 
 export const Language = {
@@ -23,11 +24,11 @@ export const PreferencesLayout: React.FC = () => {
   return (
     <AuthAndFrame>
       <Box display="flex" flexDirection="column">
-        <Box style={{ maxWidth: "1380px", margin: "1em auto" }}>
+        <Margins>
           <TabPanel title={Language.preferencesLabel} menuItems={menuItems}>
             <Outlet />
           </TabPanel>
-        </Box>
+        </Margins>
       </Box>
     </AuthAndFrame>
   )

site/src/forms/CreateTemplateForm.tsx

@@ -10,6 +10,7 @@ import { FormSection } from "../components/FormSection/FormSection"
 import { FormTextField } from "../components/FormTextField/FormTextField"
 import { FormTitle } from "../components/FormTitle/FormTitle"
 import { LoadingButton } from "../components/LoadingButton/LoadingButton"
+import { maxWidth } from "../theme/constants"
 
 export interface CreateTemplateFormProps {
   provisioners: Provisioner[]
@@ -121,7 +122,7 @@ export const CreateTemplateForm: React.FC<CreateTemplateFormProps> = ({
 
 const useStyles = makeStyles(() => ({
   root: {
-    maxWidth: "1380px",
+    maxWidth,
     width: "100%",
     display: "flex",
     flexDirection: "column",

site/src/forms/CreateWorkspaceForm.tsx

@@ -9,6 +9,7 @@ import { FormSection } from "../components/FormSection/FormSection"
 import { FormTextField } from "../components/FormTextField/FormTextField"
 import { FormTitle } from "../components/FormTitle/FormTitle"
 import { LoadingButton } from "../components/LoadingButton/LoadingButton"
+import { maxWidth } from "../theme/constants"
 
 export interface CreateWorkspaceForm {
   template: Template
@@ -82,7 +83,7 @@ export const CreateWorkspaceForm: React.FC<CreateWorkspaceForm> = ({ template, o
 
 const useStyles = makeStyles(() => ({
   root: {
-    maxWidth: "1380px",
+    maxWidth,
     width: "100%",
     display: "flex",
     flexDirection: "column",

site/src/pages/TemplatesPages/OrganizationPage/TemplatePage/TemplatePage.tsx

@@ -1,5 +1,3 @@
-import Paper from "@material-ui/core/Paper"
-import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Link, useNavigate, useParams } from "react-router-dom"
 import useSWR from "swr"
@@ -8,12 +6,13 @@ import { EmptyState } from "../../../../components/EmptyState/EmptyState"
 import { ErrorSummary } from "../../../../components/ErrorSummary/ErrorSummary"
 import { Header } from "../../../../components/Header/Header"
 import { FullScreenLoader } from "../../../../components/Loader/FullScreenLoader"
+import { Margins } from "../../../../components/Margins/Margins"
+import { Stack } from "../../../../components/Stack/Stack"
 import { Column, Table } from "../../../../components/Table/Table"
 import { unsafeSWRArgument } from "../../../../util"
 import { firstOrItem } from "../../../../util/array"
 
 export const TemplatePage: React.FC = () => {
-  const styles = useStyles()
   const navigate = useNavigate()
   const { template: templateName, organization: organizationName } = useParams()
 
@@ -82,7 +81,7 @@ export const TemplatePage: React.FC = () => {
   }
 
   return (
-    <div className={styles.root}>
+    <Stack spacing={4}>
       <Header
         title={firstOrItem(templateName, "")}
         description={firstOrItem(organizationName, "")}
@@ -93,25 +92,9 @@ export const TemplatePage: React.FC = () => {
         }}
       />
 
-      <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
+      <Margins>
         <Table {...tableProps} />
-      </Paper>
+      </Margins>
-    </div>
+    </Stack>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  header: {
-    display: "flex",
-    flexDirection: "row-reverse",
-    justifyContent: "space-between",
-    margin: "1em auto",
-    maxWidth: "1380px",
-    padding: theme.spacing(2, 6.25, 0),
-    width: "100%",
-  },
-}))

site/src/pages/TemplatesPages/TemplatesPage.tsx

@@ -1,4 +1,3 @@
-import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Link } from "react-router-dom"
@@ -9,6 +8,8 @@ import { EmptyState } from "../../components/EmptyState/EmptyState"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { Header } from "../../components/Header/Header"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { Margins } from "../../components/Margins/Margins"
+import { Stack } from "../../components/Stack/Stack"
 import { Column, Table } from "../../components/Table/Table"
 
 export const TemplatesPage: React.FC = () => {
@@ -68,20 +69,16 @@ export const TemplatesPage: React.FC = () => {
   const subTitle = `${templates.length} total`
 
   return (
-    <div className={styles.root}>
+    <Stack spacing={4}>
       <Header title="Templates" subTitle={subTitle} />
-      <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
+      <Margins>
         <Table {...tableProps} />
-      </Paper>
+      </Margins>
-    </div>
+    </Stack>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
   descriptionLabel: {
     marginBottom: theme.spacing(1),
   },

site/src/pages/UsersPage/CreateUserPage/CreateUserPage.tsx

@@ -3,6 +3,7 @@ import React, { useContext } from "react"
 import { useNavigate } from "react-router"
 import { CreateUserRequest } from "../../../api/types"
 import { CreateUserForm } from "../../../components/CreateUserForm/CreateUserForm"
+import { Margins } from "../../../components/Margins/Margins"
 import { selectOrgId } from "../../../xServices/auth/authSelectors"
 import { XServiceContext } from "../../../xServices/StateContext"
 
@@ -21,6 +22,7 @@ export const CreateUserPage: React.FC = () => {
     createUserError || createUserFormErrors?.organization_id || !myOrgId ? Language.unknownError : undefined
 
   return (
+    <Margins>
       <CreateUserForm
         formErrors={createUserFormErrors}
         onSubmit={(user: CreateUserRequest) => usersSend({ type: "CREATE", user })}
@@ -29,5 +31,6 @@ export const CreateUserPage: React.FC = () => {
         error={genericError}
         myOrgId={myOrgId ?? ""}
       />
+    </Margins>
   )
 }

site/src/pages/UsersPage/UsersPageView.tsx

@@ -1,8 +1,8 @@
-import Paper from "@material-ui/core/Paper"
-import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { UserResponse } from "../../api/types"
 import { Header } from "../../components/Header/Header"
+import { Margins } from "../../components/Margins/Margins"
+import { Stack } from "../../components/Stack/Stack"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 
 export const Language = {
@@ -16,21 +16,12 @@ export interface UsersPageViewProps {
 }
 
 export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, openUserCreationDialog }) => {
-  const styles = useStyles()
-
   return (
-    <div className={styles.flexColumn}>
+    <Stack spacing={4}>
       <Header title={Language.pageTitle} action={{ text: Language.newUserButton, onClick: openUserCreationDialog }} />
-      <Paper style={{ maxWidth: "1380px", margin: "1em auto", width: "100%" }}>
+      <Margins>
         <UsersTable users={users} />
-      </Paper>
+      </Margins>
-    </div>
+    </Stack>
   )
 }
-
-const useStyles = makeStyles(() => ({
-  flexColumn: {
-    display: "flex",
-    flexDirection: "column",
-  },
-}))

site/src/pages/WorkspacesPage/WorkspacesPage.tsx

@@ -1,16 +1,16 @@
-import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { useParams } from "react-router-dom"
 import useSWR from "swr"
 import * as Types from "../../api/types"
 import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
 import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
+import { Margins } from "../../components/Margins/Margins"
+import { Stack } from "../../components/Stack/Stack"
 import { Workspace } from "../../components/Workspace/Workspace"
 import { unsafeSWRArgument } from "../../util"
 import { firstOrItem } from "../../util/array"
 
 export const WorkspacePage: React.FC = () => {
-  const styles = useStyles()
   const { workspace: workspaceQueryParam } = useParams()
 
   const { data: workspace, error: workspaceError } = useSWR<Types.Workspace, Error>(() => {
@@ -45,22 +45,10 @@ export const WorkspacePage: React.FC = () => {
   }
 
   return (
-    <div className={styles.root}>
+    <Margins>
-      <div className={styles.inner}>
+      <Stack spacing={4}>
         <Workspace organization={organization} template={template} workspace={workspace} />
-      </div>
+      </Stack>
-    </div>
+    </Margins>
   )
 }
-
-const useStyles = makeStyles(() => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  inner: {
-    maxWidth: "1380px",
-    margin: "1em auto",
-    width: "100%",
-  },
-}))

site/src/theme/constants.ts

@@ -7,3 +7,5 @@ export const BODY_FONT_FAMILY = `"Inter", sans-serif`
 export const lightButtonShadow = "0 2px 2px rgba(0, 23, 121, 0.08)"
 export const emptyBoxShadow = "none"
 export const navHeight = 56
+export const maxWidth = 1380
+export const sidePadding = "50px"