GREG-82: Adding icons to top of wizard

frontend/public/locales/en/common.json

@@ -75,5 +75,7 @@
     "guestRole": "Guest role",
     "guestPeriod":"Period",
     "guestDepartment": "Department"
-  }
+  },
+  "yourGuests": "Your guests",
+  "registerNewGuest": "Register new guest"
 }

frontend/public/locales/nb/common.json

@@ -75,5 +75,7 @@
     "guestRole": "Gjesterolle",
     "guestPeriod": "Periode",
     "guestDepartment": "Avdeling"
-  }
+  },
+  "yourGuests": "Dine gjester",
+  "registerNewGuest": "Registrer ny gjest"
 }

frontend/public/locales/nn/common.json

@@ -76,5 +76,7 @@
     "guestRole": "Gjesterolle",
     "guestPeriod": "Periode",
     "guestDepartment": "Avdeling"
-  }
+  },
+  "yourGuests": "Dine gjestar",
+  "registerNewGuest": "Registrer ny gjest"
 }

frontend/src/routes/components/sponsorGuestButtons.tsx

+import PersonIcon from '@mui/icons-material/Person'
+import { Box, IconButton, Theme } from '@mui/material'
+import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router-dom'
+
+interface SponsorGuestButtonsProps {
+  yourGuestsActive?: boolean,
+  registerNewGuestActive?: boolean
+}
+
+export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
+  const { yourGuestsActive, registerNewGuestActive } = props
+  const { t } = useTranslation(['common'])
+  const history = useHistory()
+
+  const goToOverview = () => {
+    history.push('/')
+  }
+
+  const goToRegister = () => {
+    history.push('/register')
+  }
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <IconButton onClick={goToOverview}>
+          <PersonIcon
+            fontSize='large'
+            sx={{
+              borderRadius: '2rem',
+              borderStyle: 'solid',
+              borderColor: (theme: Theme) => yourGuestsActive ? theme.palette.primary.main : theme.greg.deactivatedColor,
+              fill: 'white',
+              backgroundColor: (theme: Theme) => yourGuestsActive ? theme.palette.primary.main : theme.greg.deactivatedColor,
+            }} />
+        </IconButton>
+        <Box sx={{
+          typography: 'caption',
+        }}>
+          {t('yourGuests')}
+        </Box>
+      </Box>
+
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+        <IconButton onClick={goToRegister}>
+          <PersonAddIcon
+            fontSize='large'
+            sx={{
+              borderRadius: '2rem',
+              borderStyle: 'solid',
+              borderColor: (theme: Theme) => registerNewGuestActive ? theme.palette.primary.main : theme.greg.deactivatedColor,
+              fill: 'white',
+              backgroundColor: (theme: Theme) => registerNewGuestActive ? theme.palette.primary.main : theme.greg.deactivatedColor,
+            }} />
+        </IconButton>
+        <Box sx={{
+          typography: 'caption',
+        }}>
+          {t('registerNewGuest')}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+SponsorGuestButtons.defaultProps = {
+  yourGuestsActive: false,
+  registerNewGuestActive: false,
+}

frontend/src/routes/register/index.tsx

 import React, { useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Box, Button, Step, StepLabel, Stepper } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import Page from 'components/page'
 
 import { useHistory } from 'react-router-dom'
@@ -11,8 +11,8 @@ import StepPersonForm from './stepPersonForm'
 import { PersonFormMethods } from './personFormMethods'
 import { SummaryFormMethods } from './summaryFormMethods'
 import SubmitState from './submitState'
+import SponsorGuestButtons from '../components/sponsorGuestButtons'
 
-const steps = ['Register', 'Summary']
 
 export default function StepRegistration() {
   const { t } = useTranslation(['common'])
@@ -56,7 +56,7 @@ export default function StepRegistration() {
   }
 
   const handleForwardFromRegister = (
-    updateFormData: RegisterFormData
+    updateFormData: RegisterFormData,
   ): void => {
     setFormData(updateFormData)
     setActiveStep((prevActiveStep) => prevActiveStep + 1)
@@ -76,23 +76,10 @@ export default function StepRegistration() {
 
   return (
     <Page>
-      {/* Stepper at top of wizard */}
-      <Stepper sx={{ paddingTop: '2rem' }}
-               activeStep={activeStep}>
-        {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
-        {steps.map((label, index) => {
-          const stepProps = {}
-          const labelProps = {}
-          return (
-            <Step key={label} {...stepProps}>
-              <StepLabel {...labelProps}>{label}</StepLabel>
-            </Step>
-          )
-        })}
-      </Stepper>
+      <SponsorGuestButtons registerNewGuestActive />
 
       {/* Current page in wizard */}
-      <Box sx={{ width: '100%' }}>
+      <Box sx={{ width: '100%', marginTop: '2rem' }}>
         {activeStep === REGISTER_STEP && (
           <StepPersonForm
             nextHandler={handleForwardFromRegister}
@@ -110,7 +97,7 @@ export default function StepRegistration() {
         )}
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem'}}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem' }}>
         {activeStep === REGISTER_STEP && (
           <Button data-testid='button-next'
                   sx={{ color: 'theme.palette.secondary', mr: 1 }}

frontend/src/themes/index.ts

@@ -17,6 +17,7 @@ declare module '@mui/material/styles' {
       h2TextColor: string
       footerBackgroundColor: string
       footerTextColor: string
+      deactivatedColor: string
     }
   }
   // allow configuration using `createTheme`
@@ -28,7 +29,8 @@ declare module '@mui/material/styles' {
       h1TextColor?: string
       h2TextColor?: string
       footerBackgroundColor?: string
-      footerTextColor?: string
+      footerTextColor?: string,
+      deactivatedColor?: string
     }
   }
 }

frontend/src/themes/main.ts

@@ -11,11 +11,13 @@ const mainTheme: ThemeOptions = {
     h2TextColor: '#373F41',
     footerBackgroundColor: 'black',
     footerTextColor: 'white',
+    deactivatedColor: '#C9C9C9'
   },
   palette: {
     primary: {
-      main: '#3293ED',
-      dark: '#1565c0'
+      main: '#01579B',
+      dark: '#1565c0',
+      light: '#A4C8E4',
     },
   },
   components: {