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;
+  flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x3);
-  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;
-  }
 }
 
+.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) {
+.dateField {
-  .divider {
+  display: grid;
-    display: none;
+  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
+              <header>
-                label={"firstName"}
+                <Subtitle type="two">
-                name="firstName"
+                  {intl.formatMessage({ id: "Contact information" })}
-                registerOptions={{ required: true }}
+                </Subtitle>
-              />
+              </header>
-              <Input
+              <div className={styles.nameInputs}>
-                label={"lastName"}
+                <Input
-                name="lastName"
+                  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>

i18n/dictionaries/da.json

@@ -29,6 +29,7 @@
   "Back to scandichotels.com": "Tilbage til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Book",
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
@@ -63,6 +64,7 @@
   "Coming up": "Er lige om hjørnet",
   "Compare all levels": "Sammenlign alle niveauer",
   "Complete booking & go to payment": "Udfyld booking & gå til betaling",
+  "Contact information": "Kontaktoplysninger",
   "Contact us": "Kontakt os",
   "Continue": "Blive ved",
   "Copyright all rights reserved": "Scandic AB Alle rettigheder forbeholdes",

i18n/dictionaries/de.json

@@ -29,6 +29,7 @@
   "Back to scandichotels.com": "Zurück zu scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bettentyp",
+  "Birth date": "Geburtsdatum",
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
@@ -63,6 +64,7 @@
   "Coming up": "Demnächst",
   "Compare all levels": "Vergleichen Sie alle Levels",
   "Complete booking & go to payment": "Buchung abschließen & zur Bezahlung gehen",
+  "Contact information": "Kontaktinformationen",
   "Contact us": "Kontaktieren Sie uns",
   "Continue": "Weitermachen",
   "Copyright all rights reserved": "Scandic AB Alle Rechte vorbehalten",
@@ -334,4 +336,3 @@
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
 }
-

i18n/dictionaries/en.json

@@ -29,6 +29,7 @@
   "Back to scandichotels.com": "Back to scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Bed type",
+  "Birth date": "Birth date",
   "Book": "Book",
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
@@ -63,6 +64,7 @@
   "Coming up": "Coming up",
   "Compare all levels": "Compare all levels",
   "Complete booking & go to payment": "Complete booking & go to payment",
+  "Contact information": "Contact information",
   "Contact us": "Contact us",
   "Continue": "Continue",
   "Copyright all rights reserved": "Scandic AB All rights reserved",

i18n/dictionaries/fi.json

@@ -29,6 +29,7 @@
   "Back to scandichotels.com": "Takaisin scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Vuodetyyppi",
+  "Birth date": "Syntymäaika",
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
@@ -63,6 +64,7 @@
   "Coming up": "Tulossa",
   "Compare all levels": "Vertaa kaikkia tasoja",
   "Complete booking & go to payment": "Täydennä varaus & siirry maksamaan",
+  "Contact information": "Yhteystiedot",
   "Contact us": "Ota meihin yhteyttä",
   "Continue": "Jatkaa",
   "Copyright all rights reserved": "Scandic AB Kaikki oikeudet pidätetään",

i18n/dictionaries/no.json

@@ -28,6 +28,7 @@
   "Back to scandichotels.com": "Tilbake til scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Seng type",
+  "Birth date": "Fødselsdato",
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
@@ -61,6 +62,7 @@
   "Coming up": "Kommer opp",
   "Compare all levels": "Sammenlign alle nivåer",
   "Complete booking & go to payment": "Fullfør bestilling & gå til betaling",
+  "Contact information": "Kontaktinformasjon",
   "Contact us": "Kontakt oss",
   "Continue": "Fortsette",
   "Copyright all rights reserved": "Scandic AB Alle rettigheter forbeholdt",

i18n/dictionaries/sv.json

@@ -28,6 +28,7 @@
   "Back to scandichotels.com": "Tillbaka till scandichotels.com",
   "Bar": "Bar",
   "Bed type": "Sängtyp",
+  "Birth date": "Födelsedatum",
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
@@ -62,6 +63,7 @@
   "Coming up": "Kommer härnäst",
   "Compare all levels": "Jämför alla nivåer",
   "Complete booking & go to payment": "Fullför bokning & gå till betalning",
+  "Contact information": "Kontaktinformation",
   "Contact us": "Kontakta oss",
   "Continue": "Fortsätt",
   "Copyright all rights reserved": "Scandic AB Alla rättigheter förbehålls",