From 1a146e8a4e366a0b4d0941f42d1cbb1fdfb06cfa Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Fri, 27 May 2022 20:25:52 +0000
Subject: [PATCH 1/3] Adjust form alignment

---
 .../CreateUserForm/CreateUserForm.tsx         |  55 ++++-----
 site/src/components/FormFooter/FormFooter.tsx |   7 +-
 site/src/components/FormTitle/FormTitle.tsx   |   5 +-
 .../components/FullPageForm/FullPageForm.tsx  |   2 +-
 site/src/components/Margins/Margins.tsx       |  22 +++-
 .../CreateWorkspacePageView.tsx               | 107 +++++++++---------
 site/src/theme/constants.ts                   |   4 +-
 7 files changed, 107 insertions(+), 95 deletions(-)

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
index 710d41d6b6576..f33fa711d4ea0 100644
--- a/site/src/components/CreateUserForm/CreateUserForm.tsx
+++ b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -7,6 +7,7 @@ import * as TypesGen from "../../api/typesGenerated"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
+import { Stack } from "../Stack/Stack"
 
 export const Language = {
   emailLabel: "Email",
@@ -57,32 +58,34 @@ export const CreateUserForm: React.FC<CreateUserFormProps> = ({
   return (
     <FullPageForm title="Create user" onCancel={onCancel}>
       <form onSubmit={form.handleSubmit}>
-        <TextField
-          {...getFieldHelpers("username")}
-          onChange={onChangeTrimmed(form)}
-          autoComplete="username"
-          autoFocus
-          fullWidth
-          label={Language.usernameLabel}
-          variant="outlined"
-        />
-        <TextField
-          {...getFieldHelpers("email")}
-          onChange={onChangeTrimmed(form)}
-          autoComplete="email"
-          fullWidth
-          label={Language.emailLabel}
-          variant="outlined"
-        />
-        <TextField
-          {...getFieldHelpers("password")}
-          autoComplete="current-password"
-          fullWidth
-          id="password"
-          label={Language.passwordLabel}
-          type="password"
-          variant="outlined"
-        />
+        <Stack spacing={1}>
+          <TextField
+            {...getFieldHelpers("username")}
+            onChange={onChangeTrimmed(form)}
+            autoComplete="username"
+            autoFocus
+            fullWidth
+            label={Language.usernameLabel}
+            variant="outlined"
+          />
+          <TextField
+            {...getFieldHelpers("email")}
+            onChange={onChangeTrimmed(form)}
+            autoComplete="email"
+            fullWidth
+            label={Language.emailLabel}
+            variant="outlined"
+          />
+          <TextField
+            {...getFieldHelpers("password")}
+            autoComplete="current-password"
+            fullWidth
+            id="password"
+            label={Language.passwordLabel}
+            type="password"
+            variant="outlined"
+          />
+        </Stack>
         {error && <FormHelperText error>{error}</FormHelperText>}
         <FormFooter onCancel={onCancel} isLoading={isLoading} />
       </form>
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
index ec41d99a38ac9..d5c2ac41656f1 100644
--- a/site/src/components/FormFooter/FormFooter.tsx
+++ b/site/src/components/FormFooter/FormFooter.tsx
@@ -14,16 +14,17 @@ export interface FormFooterProps {
   submitLabel?: string
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   footer: {
     display: "flex",
     flex: "0",
     flexDirection: "row",
-    justifyContent: "center",
+    gap: theme.spacing(1.5),
     alignItems: "center",
+    marginTop: theme.spacing(3),
   },
   button: {
-    margin: "1em",
+    width: "100%",
   },
 }))
 
diff --git a/site/src/components/FormTitle/FormTitle.tsx b/site/src/components/FormTitle/FormTitle.tsx
index 59b9ef7e7beea..b3043b6521849 100644
--- a/site/src/components/FormTitle/FormTitle.tsx
+++ b/site/src/components/FormTitle/FormTitle.tsx
@@ -9,9 +9,8 @@ export interface FormTitleProps {
 
 const useStyles = makeStyles((theme) => ({
   title: {
-    textAlign: "center",
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(5),
+    marginTop: theme.spacing(6),
+    marginBottom: theme.spacing(4),
 
     "& h3": {
       marginBottom: theme.spacing(1),
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
index cc131e1280385..4c4d09c1e1cf0 100644
--- a/site/src/components/FullPageForm/FullPageForm.tsx
+++ b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -23,7 +23,7 @@ export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCan
   const styles = useStyles()
   return (
     <main className={styles.root}>
-      <Margins>
+      <Margins size="small">
         <FormTitle title={title} detail={detail} />
         <FormCloseButton onClose={onCancel} />
 
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
index e927a1ac4eaf6..f0e94a3079eaf 100644
--- a/site/src/components/Margins/Margins.tsx
+++ b/site/src/components/Margins/Margins.tsx
@@ -1,18 +1,30 @@
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
-import { maxWidth, sidePadding } from "../../theme/constants"
+import { containerWidth, sidePadding } from "../../theme/constants"
+
+type Size = "regular" | "medium" | "small"
+
+const widthBySize: Record<Size, number> = {
+  regular: containerWidth,
+  medium: containerWidth / 2,
+  small: containerWidth / 3,
+}
 
 const useStyles = makeStyles(() => ({
   margins: {
     margin: "0 auto",
-    maxWidth,
-    padding: `0 ${sidePadding}`,
+    maxWidth: ({ maxWidth }: { maxWidth: number }) => maxWidth,
+    padding: `0 ${sidePadding}px`,
     flex: 1,
     width: "100%",
   },
 }))
 
-export const Margins: React.FC = ({ children }) => {
-  const styles = useStyles()
+interface MarginsProps {
+  size?: Size
+}
+
+export const Margins: React.FC<MarginsProps> = ({ children, size = "regular" }) => {
+  const styles = useStyles({ maxWidth: widthBySize[size] })
   return <div className={styles.margins}>{children}</div>
 }
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index 07c7dbe680fce..c0611f964611e 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -7,7 +7,6 @@ import * as TypesGen from "../../api/typesGenerated"
 import { FormFooter } from "../../components/FormFooter/FormFooter"
 import { FullPageForm } from "../../components/FullPageForm/FullPageForm"
 import { Loader } from "../../components/Loader/Loader"
-import { Margins } from "../../components/Margins/Margins"
 import { ParameterInput } from "../../components/ParameterInput/ParameterInput"
 import { Stack } from "../../components/Stack/Stack"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
@@ -85,67 +84,65 @@ export const CreateWorkspacePageView: React.FC<CreateWorkspacePageViewProps> = (
   }
 
   return (
-    <Margins>
-      <FullPageForm title="Create workspace" onCancel={props.onCancel}>
-        <form onSubmit={form.handleSubmit}>
-          {props.loadingTemplates && <Loader />}
+    <FullPageForm title="Create workspace" onCancel={props.onCancel}>
+      <form onSubmit={form.handleSubmit}>
+        {props.loadingTemplates && <Loader />}
 
-          <Stack>
-            {props.templates && (
+        <Stack>
+          {props.templates && (
+            <TextField
+              {...getFieldHelpers("template_id")}
+              disabled={form.isSubmitting}
+              onChange={handleTemplateChange}
+              autoFocus
+              fullWidth
+              label={Language.templateLabel}
+              variant="outlined"
+              select
+            >
+              {props.templates.map((template) => (
+                <MenuItem key={template.id} value={template.id}>
+                  {template.name}
+                </MenuItem>
+              ))}
+            </TextField>
+          )}
+
+          {props.selectedTemplate && props.templateSchema && (
+            <>
               <TextField
-                {...getFieldHelpers("template_id")}
+                {...getFieldHelpers("name")}
                 disabled={form.isSubmitting}
-                onChange={handleTemplateChange}
+                onChange={onChangeTrimmed(form)}
                 autoFocus
                 fullWidth
-                label={Language.templateLabel}
+                label={Language.nameLabel}
                 variant="outlined"
-                select
-              >
-                {props.templates.map((template) => (
-                  <MenuItem key={template.id} value={template.id}>
-                    {template.name}
-                  </MenuItem>
-                ))}
-              </TextField>
-            )}
-
-            {props.selectedTemplate && props.templateSchema && (
-              <>
-                <TextField
-                  {...getFieldHelpers("name")}
-                  disabled={form.isSubmitting}
-                  onChange={onChangeTrimmed(form)}
-                  autoFocus
-                  fullWidth
-                  label={Language.nameLabel}
-                  variant="outlined"
-                />
+              />
 
-                {props.templateSchema.length > 0 && (
-                  <Stack>
-                    {props.templateSchema.map((schema) => (
-                      <ParameterInput
-                        disabled={form.isSubmitting}
-                        key={schema.id}
-                        onChange={(value) => {
-                          setParameterValues({
-                            ...parameterValues,
-                            [schema.name]: value,
-                          })
-                        }}
-                        schema={schema}
-                      />
-                    ))}
-                  </Stack>
-                )}
+              {props.templateSchema.length > 0 && (
+                <Stack>
+                  {props.templateSchema.map((schema) => (
+                    <ParameterInput
+                      disabled={form.isSubmitting}
+                      key={schema.id}
+                      onChange={(value) => {
+                        setParameterValues({
+                          ...parameterValues,
+                          [schema.name]: value,
+                        })
+                      }}
+                      schema={schema}
+                    />
+                  ))}
+                </Stack>
+              )}
 
-                <FormFooter onCancel={props.onCancel} isLoading={props.creatingWorkspace} />
-              </>
-            )}
-          </Stack>
-        </form>
-      </FullPageForm>
-    </Margins>
+              <FormFooter onCancel={props.onCancel} isLoading={props.creatingWorkspace} />
+            </>
+          )}
+        </Stack>
+      </form>
+    </FullPageForm>
   )
 }
diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts
index 9664f441280b8..7df2057e61821 100644
--- a/site/src/theme/constants.ts
+++ b/site/src/theme/constants.ts
@@ -7,8 +7,8 @@ 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 = 62
-export const maxWidth = 1380
-export const sidePadding = "50px"
+export const containerWidth = 1380
+export const sidePadding = 24
 export const TitleIconSize = 48
 export const CardRadius = 2
 export const CardPadding = 20

From 453db7dae4d92a9a25cbec06053e9fb0e9e4f513 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 31 May 2022 14:55:37 +0000
Subject: [PATCH 2/3] Add link to template field

---
 .../ParameterInput/ParameterInput.tsx         | 19 +++++------
 .../WorkspaceScheduleForm.tsx                 | 19 +++--------
 .../CreateWorkspacePageView.tsx               | 34 +++++++++++++++++++
 3 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
index d56768fe65884..a12d3c07f012d 100644
--- a/site/src/components/ParameterInput/ParameterInput.tsx
+++ b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -1,8 +1,7 @@
 import FormControlLabel from "@material-ui/core/FormControlLabel"
-import Paper from "@material-ui/core/Paper"
 import Radio from "@material-ui/core/Radio"
 import RadioGroup from "@material-ui/core/RadioGroup"
-import { lighten, makeStyles } from "@material-ui/core/styles"
+import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { FC } from "react"
 import { ParameterSchema } from "../../api/typesGenerated"
@@ -17,7 +16,7 @@ export interface ParameterInputProps {
 export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
   const styles = useStyles()
   return (
-    <Paper className={styles.paper}>
+    <div className={styles.root}>
       <div className={styles.title}>
         <h2>var.{schema.name}</h2>
         {schema.description && <span>{schema.description}</span>}
@@ -25,7 +24,7 @@ export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, sc
       <div className={styles.input}>
         <ParameterField disabled={disabled} onChange={onChange} schema={schema} />
       </div>
-    </Paper>
+    </div>
   )
 }
 
@@ -67,28 +66,26 @@ const ParameterField: React.FC<ParameterInputProps> = ({ disabled, onChange, sch
 }
 
 const useStyles = makeStyles((theme) => ({
-  paper: {
+  root: {
     display: "flex",
     flexDirection: "column",
     fontFamily: MONOSPACE_FONT_FAMILY,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
   },
   title: {
-    background: lighten(theme.palette.background.default, 0.1),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    padding: theme.spacing(3),
     display: "flex",
     flexDirection: "column",
     "& h2": {
       margin: 0,
     },
     "& span": {
-      paddingTop: theme.spacing(2),
+      paddingTop: theme.spacing(1),
     },
   },
   input: {
-    padding: theme.spacing(3),
+    marginTop: theme.spacing(2),
     display: "flex",
     flexDirection: "column",
-    maxWidth: 480,
   },
 }))
diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
index 0a763b8f6bbe2..1d8864f29f32e 100644
--- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
+++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -167,8 +167,8 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 
   return (
     <FullPageForm onCancel={onCancel} title="Workspace Schedule">
-      <form className={styles.form} onSubmit={form.handleSubmit}>
-        <Stack className={styles.stack}>
+      <form onSubmit={form.handleSubmit}>
+        <Stack>
           <TextField
             {...formHelpers("startTime", Language.startTimeHelperText)}
             disabled={form.isSubmitting || isLoading}
@@ -212,6 +212,9 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
                       disabled={!form.values.startTime || form.isSubmitting || isLoading}
                       onChange={form.handleChange}
                       name={checkbox.name}
+                      color="primary"
+                      size="small"
+                      disableRipple
                     />
                   }
                   key={checkbox.name}
@@ -240,18 +243,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 }
 
 const useStyles = makeStyles({
-  form: {
-    display: "flex",
-    justifyContent: "center",
-  },
-  stack: {
-    // REMARK: 360 is 'arbitrary' in that it gives the helper text enough room
-    //         to render on one line. If we change the text, we might want to
-    //         adjust these. Without constraining the width, the date picker
-    //         and number inputs aren't visually appealing or maximally usable.
-    maxWidth: 360,
-    minWidth: 360,
-  },
   daysOfWeekLabel: {
     fontSize: 12,
   },
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index e52fa211c7629..93e6728d57e04 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,7 +1,11 @@
+import Link from "@material-ui/core/Link"
 import MenuItem from "@material-ui/core/MenuItem"
+import { makeStyles } from "@material-ui/core/styles"
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
+import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import { FormikContextType, useFormik } from "formik"
 import { FC, useState } from "react"
+import { Link as RouterLink } from "react-router-dom"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
 import { FormFooter } from "../../components/FormFooter/FormFooter"
@@ -34,6 +38,7 @@ export const validationSchema = Yup.object({
 
 export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props) => {
   const [parameterValues, setParameterValues] = useState<Record<string, string>>({})
+  const styles = useStyles()
   const form: FormikContextType<TypesGen.CreateWorkspaceRequest> = useFormik<TypesGen.CreateWorkspaceRequest>({
     initialValues: {
       name: "",
@@ -66,6 +71,10 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
     },
   })
   const getFieldHelpers = getFormHelpers<TypesGen.CreateWorkspaceRequest>(form)
+  const selectedTemplate =
+    props.templates &&
+    form.values.template_id &&
+    props.templates.find((template) => template.id === form.values.template_id)
 
   const handleTemplateChange: TextFieldProps["onChange"] = (event) => {
     if (!props.templates) {
@@ -99,6 +108,18 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
               label={Language.templateLabel}
               variant="outlined"
               select
+              helperText={
+                selectedTemplate && (
+                  <Link
+                    className={styles.readMoreLink}
+                    component={RouterLink}
+                    to={`/templates/${selectedTemplate.name}`}
+                    target="_blank"
+                  >
+                    Read more about this template <OpenInNewIcon />
+                  </Link>
+                )
+              }
             >
               {props.templates.map((template) => (
                 <MenuItem key={template.id} value={template.id}>
@@ -146,3 +167,16 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = (props)
     </FullPageForm>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  readMoreLink: {
+    display: "flex",
+    alignItems: "center",
+
+    "& svg": {
+      width: 12,
+      height: 12,
+      marginLeft: theme.spacing(0.5),
+    },
+  },
+}))

From 91becd13bec6fb4a918b7c168d40e84d7aa3c9f4 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Tue, 31 May 2022 18:18:33 +0000
Subject: [PATCH 3/3] Change workspace schedule inputs to contained

---
 .../WorkspaceScheduleForm/WorkspaceScheduleForm.tsx    |  3 ---
 site/src/theme/overrides.ts                            | 10 ++++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
index f7add83c541d9..b883c4ed07b91 100644
--- a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
+++ b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -177,7 +177,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
             }}
             label={Language.startTimeLabel}
             type="time"
-            variant="standard"
           />
 
           <TextField
@@ -195,7 +194,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
               shrink: true,
             }}
             label={Language.timezoneLabel}
-            variant="standard"
           />
 
           <FormControl component="fieldset" error={Boolean(form.errors.monday)}>
@@ -232,7 +230,6 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
             inputProps={{ min: 0, step: 1 }}
             label={Language.ttlLabel}
             type="number"
-            variant="standard"
           />
 
           <FormFooter onCancel={onCancel} isLoading={form.isSubmitting || isLoading} />
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 88f78f5d32353..803706bfeedc4 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -95,5 +95,15 @@ export const getOverrides = (palette: PaletteOptions) => {
         border: `1px solid ${palette.divider}`,
       },
     },
+    MuiFormHelperText: {
+      contained: {
+        marginLeft: 0,
+        marginRight: 0,
+      },
+
+      marginDense: {
+        marginTop: 8,
+      },
+    },
   }
 }