GREG-60: Making the registration page look more like the design

frontend/public/locales/en/common.json

@@ -44,7 +44,8 @@
   "details": "Details",
   "nationalIdNumber": "National ID number",
   "validation": {
-    "lastNameRequired": "Last name required",
+    "firstNameRequired": "First name is required",
+    "lastNameRequired": "Last name is required",
     "dateOfBirthRequired": "Date of birth is required",
     "invalidIdNumber": "Invalid national ID number",
     "nationalIdNumberRequired": "National ID number required",
@@ -62,6 +63,9 @@
   },
   "registerWizardText": {
     "registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
-    "summaryPage": "Check that the values are correct before saving."
+    "summaryPage": "Check that the values are correct before saving.",
+    "registerContactInfo": "Register contact info",
+    "registerPeriod": "Register period",
+    "registerPeriodText": "Enter role and duration."
   }
 }

frontend/public/locales/nb/common.json

@@ -44,12 +44,13 @@
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {
-    "lastNameRequired": "Etternavn er påkrevd",
-    "dateOfBirthRequired": "Fødselsdato er påkrevd",
+    "firstNameRequired": "Fornavn er obligatorisk",
+    "lastNameRequired": "Etternavn er obligatorisk",
+    "dateOfBirthRequired": "Fødselsdato er obligatorisk",
     "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
-    "roleTypeRequired": "Rolletype er påkrevd",
-    "roleEndRequired": "Sluttdato for rolle er påkrevd",
+    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "roleTypeRequired": "Rolletype er obligatorisk",
+    "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",
     "invalidEmail": "Ugyldig e-postadresse"
@@ -62,6 +63,9 @@
   },
   "registerWizardText": {
     "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
-    "summaryPage": "Sjekk at alt stemmer før lagring."
+    "summaryPage": "Sjekk at alt stemmer før lagring.",
+    "registerContactInfo": "Registrere kontaktinfo",
+    "registerPeriod": "Registrere periode",
+    "registerPeriodText": "Fyll inn rolle og periode."
   }
 }

frontend/public/locales/nn/common.json

@@ -45,12 +45,13 @@
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {
-    "lastNameRequired": "Etternamn er påkrevd",
-    "dateOfBirthRequired": "Fødselsdato er påkrevd",
+    "firstNameRequired": "Fornamn er obligatorisk",
+    "lastNameRequired": "Etternamn er obligatorisk",
+    "dateOfBirthRequired": "Fødselsdato er obligatorisk",
     "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
-    "roleTypeRequired": "Rolletype er påkrevd",
-    "roleEndRequired": "Sluttdato for rolle er påkrevd",
+    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "roleTypeRequired": "Rolletype er obligatorisk",
+    "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",
     "invalidEmail": "Ugyldig e-postadresse"
@@ -63,6 +64,9 @@
   },
   "registerWizardText": {
     "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
-    "summaryPage": "Sjekk at alt stemmer før lagring."
+    "summaryPage": "Sjekk at alt stemmer før lagring.",
+    "registerContactInfo": "Registrere kontaktinfo",
+    "registerPeriod": "Registrere periode",
+    "registerPeriodText": "Fyll inn rolle og periode."
   }
 }

frontend/src/routes/register/index.tsx

@@ -76,10 +76,10 @@ export default function StepRegistration() {
   }
 
   return (
-    <Page header='Register as a guest'>
-
+    <Page>
       {/* Stepper at top of wizard */}
-      <Stepper activeStep={activeStep}>
+      <Stepper sx={{ paddingTop: '2rem' }}
+               activeStep={activeStep}>
         {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
         {steps.map((label, index) => {
           const stepProps = {}
@@ -105,9 +105,11 @@ export default function StepRegistration() {
         )}
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem'}}>
         {activeStep === REGISTER_STEP && (
-          <Button data-testid='button-next' onClick={handleNext}>
+          <Button data-testid='button-next'
+                  sx={{ color: 'theme.palette.secondary', mr: 1 }}
+                  onClick={handleNext}>
             {t('button.next')}
           </Button>
         )}

frontend/src/routes/register/stepPersonForm.tsx

-import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@mui/material'
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { DatePicker } from '@mui/lab'
 import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
@@ -81,7 +91,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
   }
 
   register('role_type', {
-    required: t('validation.roleTypeRequired').toString(),
+    required: t<string>('validation.roleTypeRequired'),
   })
 
   const handleRoleTypeChange = (event: any) => {
@@ -97,16 +107,22 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
 
   return (
     <>
-      <Box sx={{ typography: 'subtitle2' }}>
-        {t('registerWizardText.registerPage')}
-      </Box>
+      <Typography variant='h5' sx={{
+        paddingTop: '1rem',
+        paddingBottom: '1rem',
+      }}>{t('registerWizardText.registerContactInfo')}</Typography>
+      <Typography sx={{ paddingBottom: '2rem' }}>{t('registerWizardText.registerPage')}</Typography>
       <Box sx={{ maxWidth: '30rem' }}>
         <form onSubmit={onSubmit}>
           <Stack spacing={2}>
             <TextField
               id='firstName'
               label={t('input.firstName')}
-              {...register(`first_name`)}
+              error={!!errors.first_name}
+              helperText={errors.first_name && errors.first_name.message}
+              {...register(`first_name`, {
+                required: t<string>('validation.firstNameRequired'),
+              })}
             />
             <TextField
               id='lastName'
@@ -114,7 +130,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
               error={!!errors.last_name}
               helperText={errors.last_name && errors.last_name.message}
               {...register(`last_name`, {
-                required: t('validation.lastNameRequired').toString(),
+                required: t<string>('validation.lastNameRequired'),
               })}
             />
             <TextField
@@ -126,6 +142,9 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
                 validate: isValidEmail,
               })}
             />
+
+            <Typography variant='h5' sx={{ paddingTop: '1rem' }}>{t('registerWizardText.registerPeriod')}</Typography>
+            <Typography sx={{ paddingBottom: '1rem' }}>{t('registerWizardText.registerPeriodText')}</Typography>
             <FormControl fullWidth>
               <InputLabel id='ou-select-label'>{t('common:ou')}</InputLabel>
               <Select