Minor form spacing and verbiage improvements

BrunoQuaresma · Emyrk · commit e388f1cb7cff · 2023-06-28T11:46:44.000-04:00
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -8,8 +8,8 @@ import {
   onChangeTrimmed,
 } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
-import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { Form, FormFields } from "components/Form/Form"
 
 export interface AccountFormValues {
   username: string
@@ -18,7 +18,7 @@ export interface AccountFormValues {
 export const Language = {
   usernameLabel: "Username",
   emailLabel: "Email",
-  updateSettings: "Update settings",
+  updateSettings: "Update account",
 }
 
 const validationSchema = Yup.object({
@@ -59,8 +59,8 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
 
   return (
     <>
-      <form onSubmit={form.handleSubmit}>
-        <Stack>
+      <Form onSubmit={form.handleSubmit}>
+        <FormFields>
           {Boolean(updateProfileError) && (
             <ErrorAlert error={updateProfileError} />
           )}
@@ -91,8 +91,8 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
               {isLoading ? "" : Language.updateSettings}
             </LoadingButton>
           </div>
-        </Stack>
-      </form>
+        </FormFields>
+      </Form>
     </>
   )
 }
diff --git a/site/src/components/SettingsLayout/Section.tsx b/site/src/components/SettingsLayout/Section.tsx
@@ -35,7 +35,7 @@ export const Section: SectionFC = ({
         {(title || description) && (
           <div className={styles.header}>
             <div>
-              {title && <Typography variant="h4">{title}</Typography>}
+              {title && <Typography variant="h4" sx={{ fontSize: 24 }}>{title}</Typography>}
               {description && typeof description === "string" && (
                 <Typography className={styles.description}>
                   {description}
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -4,8 +4,8 @@ import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers } from "../../utils/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
-import { Stack } from "../Stack/Stack"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
+import { Form, FormFields } from "components/Form/Form"
 
 interface SecurityFormValues {
   old_password: string
@@ -70,8 +70,8 @@ export const SecurityForm: FC<SecurityFormProps> = ({
 
   return (
     <>
-      <form onSubmit={form.handleSubmit}>
-        <Stack>
+      <Form onSubmit={form.handleSubmit}>
+        <FormFields>
           {Boolean(updateSecurityError) && (
             <ErrorAlert error={updateSecurityError} />
           )}
@@ -106,8 +106,8 @@ export const SecurityForm: FC<SecurityFormProps> = ({
               {isLoading ? "" : Language.updatePassword}
             </LoadingButton>
           </div>
-        </Stack>
-      </form>
+        </FormFields>
+      </Form>
     </>
   )
 }
