refactor(site): add minor design improvements on the setup page (#10511)

BrunoQuaresma · web-flow · commit 7d63dc2b0235 · 2023-11-03T12:53:11.000-04:00
diff --git a/site/src/components/Welcome/Welcome.tsx b/site/src/components/Welcome/Welcome.tsx
@@ -37,7 +37,7 @@ export const Welcome: FC<
           font-size: ${theme.spacing(4)};
           font-weight: 400;
           margin: 0;
-          margin-bottom: ${theme.spacing(2)};
+          margin-bottom: ${theme.spacing(4)};
           margin-top: ${theme.spacing(2)};
           line-height: 1.25;
 
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -1,10 +1,6 @@
-import Box from "@mui/material/Box";
 import Checkbox from "@mui/material/Checkbox";
 import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
-import { Stack } from "components/Stack/Stack";
-import { Welcome } from "components/Welcome/Welcome";
 import { type FormikContextType, useFormik } from "formik";
 import {
   getFormHelpers,
@@ -14,6 +10,10 @@ import {
 import * as Yup from "yup";
 import type * as TypesGen from "api/typesGenerated";
 import LoadingButton from "@mui/lab/LoadingButton";
+import { FormFields, VerticalForm } from "components/Form/Form";
+import { CoderIcon } from "components/Icons/CoderIcon";
+import Link from "@mui/material/Link";
+import { docs } from "utils/docs";
 
 export const Language = {
   emailLabel: "Email",
@@ -64,10 +64,40 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
 
   return (
     <SignInLayout>
-      <Welcome message={Language.welcomeMessage} />
-      <form onSubmit={form.handleSubmit}>
-        <Stack>
+      <header
+        css={(theme) => ({
+          textAlign: "center",
+          marginBottom: theme.spacing(4),
+        })}
+      >
+        <CoderIcon
+          css={(theme) => ({
+            color: theme.palette.text.primary,
+            fontSize: theme.spacing(8),
+          })}
+        />
+        <h1
+          css={(theme) => ({
+            fontWeight: 400,
+            margin: 0,
+            marginTop: theme.spacing(2),
+          })}
+        >
+          Welcome to <strong>Coder</strong>
+        </h1>
+        <div
+          css={(theme) => ({
+            marginTop: theme.spacing(1.5),
+            color: theme.palette.text.secondary,
+          })}
+        >
+          Let&lsquo;s create your first admin user account
+        </div>
+      </header>
+      <VerticalForm onSubmit={form.handleSubmit}>
+        <FormFields>
           <TextField
+            autoFocus
             {...getFieldHelpers("username")}
             onChange={onChangeTrimmed(form)}
             autoComplete="username"
@@ -89,40 +119,65 @@ export const SetupPageView: React.FC<SetupPageViewProps> = ({
             label={Language.passwordLabel}
             type="password"
           />
-          <div css={{ borderRadius: 16 }}>
-            <Box display="flex">
-              <div>
-                <Checkbox
-                  id="trial"
-                  name="trial"
-                  defaultChecked
-                  value={form.values.trial}
-                  onChange={form.handleChange}
-                  data-testid="trial"
-                />
-              </div>
 
-              <Box>
-                <Typography variant="h6" style={{ fontSize: 14 }}>
-                  Start a 30-day free trial of Enterprise
-                </Typography>
-                <Typography variant="caption" color="textSecondary">
-                  Get access to high availability, template RBAC, audit logging,
-                  quotas, and more.
-                </Typography>
-              </Box>
-            </Box>
-          </div>
+          <label
+            htmlFor="trial"
+            css={{
+              display: "flex",
+              cursor: "pointer",
+              alignItems: "flex-start",
+              gap: 4,
+              marginTop: -4,
+              marginBottom: 8,
+            }}
+          >
+            <Checkbox
+              id="trial"
+              name="trial"
+              value={form.values.trial}
+              onChange={form.handleChange}
+              data-testid="trial"
+              size="small"
+            />
+
+            <div css={{ fontSize: 14, paddingTop: 4 }}>
+              <span css={{ display: "block", fontWeight: 600 }}>
+                Start a 30-day free trial of Enterprise
+              </span>
+              <span
+                css={(theme) => ({
+                  display: "block",
+                  fontSize: 13,
+                  color: theme.palette.text.secondary,
+                  lineHeight: "1.6",
+                })}
+              >
+                Get access to high availability, template RBAC, audit logging,
+                quotas, and more.
+              </span>
+              <Link
+                href={docs("/enterprise")}
+                target="_blank"
+                css={{ marginTop: 4, display: "inline-block", fontSize: 13 }}
+              >
+                Read more
+              </Link>
+            </div>
+          </label>
+
           <LoadingButton
             fullWidth
             loading={isLoading}
             type="submit"
             data-testid="create"
+            size="large"
+            variant="contained"
+            color="primary"
           >
             {Language.create}
           </LoadingButton>
-        </Stack>
-      </form>
+        </FormFields>
+      </VerticalForm>
     </SignInLayout>
   );
 };
