feat(SW-360): register form headings and styling fixes

components/Forms/Register/form.module.css

@@ -1,41 +1,21 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-}
-
-.title {
-  grid-area: title;
-}
-
 .form {
   display: grid;
   gap: var(--Spacing-x5);
   grid-area: form;
 }
 
-.btnContainer {
+.title {
+  grid-area: title;
+}
+
+.formWrapper {
   display: flex;
-  flex-direction: column-reverse;
-  gap: var(--Spacing-x1);
-  grid-area: buttons;
-}
-
-@media screen and (min-width: 768px) {
-  .form {
-    grid-template-columns: 1fr;
-  }
-
-  .btnContainer {
-    align-self: center;
-    flex-direction: row;
-    gap: var(--Spacing-x2);
-    justify-self: flex-end;
-  }
+  flex-direction: column;
+  gap: var(--Spacing-x3);
 }
 
+.userInfo,
 .password,
-.user,
 .terms {
   align-self: flex-start;
   display: grid;
@@ -43,11 +23,27 @@
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}
+
+.nameInputs {
+  display: grid;
   gap: var(--Spacing-x2);
 }
 
-@media (min-width: 768px) {
-  .divider {
-    display: none;
+.dateField {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .formWrapper {
+    gap: var(--Spacing-x5);
+  }
+
+  .nameInputs {
+    grid-template-columns: 1fr 1fr;
   }
 }

components/Forms/Register/index.tsx

@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 
 import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import DateSelect from "@/components/TempDesignSystem/Form/Date"
@@ -15,6 +14,8 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
@@ -65,7 +66,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
   }
 
   return (
-    <section className={styles.container}>
+    <section className={styles.formWrapper}>
       <Title as="h3">{title}</Title>
       <FormProvider {...methods}>
         <form
@@ -78,23 +79,37 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
           action={registerUser}
           onSubmit={methods.handleSubmit(handleSubmit)}
         >
-          <section className={styles.user}>
+          <section className={styles.userInfo}>
             <div className={styles.container}>
-              <Input
-                label={"firstName"}
-                name="firstName"
-                registerOptions={{ required: true }}
-              />
-              <Input
-                label={"lastName"}
-                name="lastName"
+              <header>
+                <Subtitle type="two">
+                  {intl.formatMessage({ id: "Contact information" })}
+                </Subtitle>
+              </header>
+              <div className={styles.nameInputs}>
+                <Input
+                  label={"firstName"}
+                  name="firstName"
+                  registerOptions={{ required: true }}
+                />
+                <Input
+                  label={"lastName"}
+                  name="lastName"
+                  registerOptions={{ required: true }}
+                />
+              </div>
+            </div>
+            <div className={styles.dateField}>
+              <header>
+                <Caption textTransform="bold">
+                  {intl.formatMessage({ id: "Birth date" })}
+                </Caption>
+              </header>
+              <DateSelect
+                name="dateOfBirth"
                 registerOptions={{ required: true }}
               />
             </div>
-            <DateSelect
-              name="dateOfBirth"
-              registerOptions={{ required: true }}
-            />
             <div className={styles.container}>
               <Input
                 label={zipCode}
@@ -115,12 +130,11 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
             />
             <Phone label={phoneNumber} name="phoneNumber" />
           </section>
-          <Divider className={styles.divider} color="subtle" />
           <section className={styles.password}>
             <header>
-              <Body textTransform="bold">
+              <Subtitle type="two">
                 {intl.formatMessage({ id: "Password" })}
-              </Body>
+              </Subtitle>
             </header>
             <NewPassword
               name="password"
@@ -130,9 +144,9 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
           </section>
           <section className={styles.terms}>
             <header>
-              <Body textTransform="bold">
+              <Subtitle type="two">
                 {intl.formatMessage({ id: "Terms and conditions" })}
-              </Body>
+              </Subtitle>
             </header>
             <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
               <Body>