Update layout

coder · BrunoQuaresma · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022
commit 042910d9830a02a2450804dfa26c66ea8808487c
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -1,5 +1,6 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
+import { ClassNameMap } from "@material-ui/core/styles/withStyles"
 import { FC } from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 
@@ -8,36 +9,22 @@ export const Language = {
   defaultSubmitLabel: "Submit",
 }
 
+type FormFooterStyles = ClassNameMap<"footer" | "button">
 export interface FormFooterProps {
   onCancel: () => void
   isLoading: boolean
+  styles?: FormFooterStyles
   submitLabel?: string
   submitDisabled?: boolean
 }
 
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    display: "flex",
-    flex: "0",
-    // The first button is the submit so it is the first element to be focused
-    // on tab so we use row-reverse to display it on the right
-    flexDirection: "row-reverse",
-    gap: theme.spacing(1.5),
-    alignItems: "center",
-    marginTop: theme.spacing(3),
-  },
-  button: {
-    width: "100%",
-  },
-}))
-
-export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
+export const FormFooter: FC<FormFooterProps> = ({
   onCancel,
   isLoading,
-  submitLabel = Language.defaultSubmitLabel,
   submitDisabled,
+  submitLabel = Language.defaultSubmitLabel,
+  styles = defaultStyles(),
 }) => {
-  const styles = useStyles()
   return (
     <div className={styles.footer}>
       <LoadingButton
@@ -63,3 +50,19 @@ export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
     </div>
   )
 }
+
+const defaultStyles = makeStyles((theme) => ({
+  footer: {
+    display: "flex",
+    flex: "0",
+    // The first button is the submit so it is the first element to be focused
+    // on tab so we use row-reverse to display it on the right
+    flexDirection: "row-reverse",
+    gap: theme.spacing(1.5),
+    alignItems: "center",
+    marginTop: theme.spacing(3),
+  },
+  button: {
+    width: "100%",
+  },
+}))
diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -0,0 +1,50 @@
+import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import { Margins } from "components/Margins/Margins"
+import { FC, ReactNode } from "react"
+
+export interface FormTitleProps {
+  title: string
+  detail?: ReactNode
+}
+
+export interface FullPageHorizontalFormProps {
+  title: string
+  detail?: ReactNode
+  onCancel: () => void
+}
+
+export const FullPageHorizontalForm: FC<
+  React.PropsWithChildren<FullPageHorizontalFormProps>
+> = ({ title, detail, onCancel, children }) => {
+  const styles = useStyles()
+
+  return (
+    <>
+      <header className={styles.title}>
+        <Margins size="medium">
+          <Typography variant="h3">{title}</Typography>
+          {detail && <Typography variant="caption">{detail}</Typography>}
+        </Margins>
+      </header>
+
+      <FormCloseButton onClose={onCancel} />
+
+      <main className={styles.main}>
+        <Margins size="medium">{children}</Margins>
+      </main>
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    paddingTop: theme.spacing(6),
+    paddingBottom: theme.spacing(8),
+  },
+
+  main: {
+    paddingBottom: theme.spacing(10),
+  },
+}))
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -1,12 +1,16 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
-import { containerWidth, sidePadding } from "../../theme/constants"
+import {
+  containerWidth,
+  containerWidthMedium,
+  sidePadding,
+} from "../../theme/constants"
 
 type Size = "regular" | "medium" | "small"
 
 const widthBySize: Record<Size, number> = {
   regular: containerWidth,
-  medium: containerWidth / 2,
+  medium: containerWidthMedium,
   small: containerWidth / 3,
 }
 

diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -7,7 +7,6 @@ import TextField from "@material-ui/core/TextField"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import { ParameterSchema } from "../../api/typesGenerated"
-import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
 const isBoolean = (schema: ParameterSchema) => {
   return schema.validation_value_type === "bool"
@@ -16,12 +15,18 @@ const isBoolean = (schema: ParameterSchema) => {
 const ParameterLabel: React.FC<{ schema: ParameterSchema }> = ({ schema }) => {
   const styles = useStyles()
 
-  return (
-    <label className={styles.label} htmlFor={schema.name}>
-      <strong>var.{schema.name}</strong>
-      {schema.description && (
+  if (schema.name && schema.description) {
+    return (
+      <label htmlFor={schema.name}>
+        <span className={styles.labelName}>var.{schema.name}</span>
         <span className={styles.labelDescription}>{schema.description}</span>
-      )}
+      </label>
+    )
+  }
+
+  return (
+    <label htmlFor={schema.name}>
+      <span className={styles.labelDescription}>var.{schema.name}</span>
     </label>
   )
 }
@@ -38,7 +43,7 @@ export const ParameterInput: FC<
   const styles = useStyles()
 
   return (
-    <Stack direction="column" className={styles.root}>
+    <Stack direction="column" spacing={1}>
       <ParameterLabel schema={schema} />
       <div className={styles.input}>
         <ParameterField
@@ -119,19 +124,16 @@ const ParameterField: React.FC<
 }
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(2),
-  },
-  label: {
-    display: "flex",
-    flexDirection: "column",
-    fontSize: 21,
+  labelName: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
+    display: "block",
+    marginBottom: theme.spacing(1),
   },
   labelDescription: {
-    fontSize: 14,
-    marginTop: theme.spacing(1),
+    fontSize: 16,
+    color: theme.palette.text.primary,
+    display: "block",
   },
   input: {
     display: "flex",

diff --git a/site/src/components/WorkspaceQuota/WorkspaceQuota.tsx b/site/src/components/WorkspaceQuota/WorkspaceQuota.tsx
@@ -6,7 +6,6 @@ import { AlertBanner } from "components/AlertBanner/AlertBanner"
 import { Stack } from "components/Stack/Stack"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
 export const Language = {
   of: "of",
@@ -27,7 +26,7 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
     return (
       <Box>
         <Stack spacing={1} className={styles.stack}>
-          <span className={styles.title}>Workspace Quota</span>
+          <span className={styles.title}>Usage Quota</span>
           <AlertBanner severity="error" error={error} />
         </Stack>
       </Box>
@@ -39,7 +38,7 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
     return (
       <Box>
         <Stack spacing={1} className={styles.stack}>
-          <span className={styles.title}>Workspace Quota</span>
+          <span className={styles.title}>Usage quota</span>
           <LinearProgress color="primary" />
           <div className={styles.label}>
             <Skeleton className={styles.skeleton} />
@@ -64,8 +63,23 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
 
   return (
     <Box>
-      <Stack spacing={1} className={styles.stack}>
-        <span className={styles.title}>Workspace Quota</span>
+      <Stack spacing={1.5} className={styles.stack}>
+        <Stack direction="row" justifyContent="space-between">
+          <span className={styles.title}>Usage Quota</span>
+          <div className={styles.label}>
+            <span className={styles.labelHighlight}>
+              {quota.user_workspace_count}
+            </span>{" "}
+            {Language.of}{" "}
+            <span className={styles.labelHighlight}>
+              {quota.user_workspace_limit}
+            </span>{" "}
+            {quota.user_workspace_limit === 1
+              ? Language.workspace
+              : Language.workspaces}
+            {" used"}
+          </div>
+        </Stack>
         <LinearProgress
           className={
             quota.user_workspace_count >= quota.user_workspace_limit
@@ -75,14 +89,6 @@ export const WorkspaceQuota: FC<WorkspaceQuotaProps> = ({ quota, error }) => {
           value={value}
           variant="determinate"
         />
-        <div className={styles.label}>
-          {quota.user_workspace_count} {Language.of}{" "}
-          {quota.user_workspace_limit}{" "}
-          {quota.user_workspace_limit === 1
-            ? Language.workspace
-            : Language.workspaces}
-          {" used"}
-        </div>
       </Stack>
     </Box>
   )
@@ -101,18 +107,16 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   title: {
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    fontSize: 21,
-    paddingBottom: "8px",
+    fontSize: 16,
   },
   label: {
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    fontSize: 12,
-    textTransform: "uppercase",
+    fontSize: 14,
     display: "block",
-    fontWeight: 600,
     color: theme.palette.text.secondary,
   },
+  labelHighlight: {
+    color: theme.palette.text.primary,
+  },
   skeleton: {
     minWidth: "150px",
   },

diff --git a/site/src/i18n/en/createWorkspacePage.json b/site/src/i18n/en/createWorkspacePage.json
@@ -1,5 +1,5 @@
 {
   "templateLabel": "Template",
-  "nameLabel": "Name",
-  "ownerLabel": "Workspace Owner"
+  "nameLabel": "Workspace Name",
+  "ownerLabel": "Owner"
 }
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
@@ -25,7 +25,6 @@ const CreateWorkspacePage: FC = () => {
     shallowEqual,
   )
   const workspaceQuotaEnabled = featureVisibility[FeatureNames.WorkspaceQuota]
-
   const [authState] = useActor(xServices.authXService)
   const { me } = authState.context
   const [createWorkspaceState, send] = useMachine(createWorkspaceMachine, {
@@ -89,7 +88,8 @@ const CreateWorkspacePage: FC = () => {
           })
         }}
         onCancel={() => {
-          navigate("/templates")
+          // Go back
+          navigate(-1)
         }}
         onSubmit={(request) => {
           send({