diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 3af3fd40e65906d604c1f2de4781a3f673368c7a..641876a0e7f2a74f8d294dadd9cfbfd4cbce6613 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -75,5 +75,7 @@
"guestRole": "Guest role",
"guestPeriod":"Period",
"guestDepartment": "Department"
- }
+ },
+ "yourGuests": "Your guests",
+ "registerNewGuest": "Register new guest"
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 01ca7043a75d2992dd81cd3acc3aceea4bb2c16d..1f07363abcb71fc35dd700c8d18ef608ecae23ce 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -75,5 +75,7 @@
"guestRole": "Gjesterolle",
"guestPeriod": "Periode",
"guestDepartment": "Avdeling"
- }
+ },
+ "yourGuests": "Dine gjester",
+ "registerNewGuest": "Registrer ny gjest"
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index c9a6efec2216e8e14cc80909990e65e7e92bbc6f..e923e8e4baaaecca381a188330e2b9d352ebf1b5 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -76,5 +76,7 @@
"guestRole": "Gjesterolle",
"guestPeriod": "Periode",
"guestDepartment": "Avdeling"
- }
+ },
+ "yourGuests": "Dine gjestar",
+ "registerNewGuest": "Registrer ny gjest"
}
diff --git a/frontend/src/routes/components/sponsorGuestButtons.tsx b/frontend/src/routes/components/sponsorGuestButtons.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad9ad0195947a5c9263a958413295aed14d8e4e4
--- /dev/null
+++ b/frontend/src/routes/components/sponsorGuestButtons.tsx
@@ -0,0 +1,72 @@
+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,
+}
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index d0833f039a6e354e993ebbe64ce752abf7825e91..73b356be9ef2f8324e8ffef9a019d5a525c04d25 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,7 +1,7 @@
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 }}
diff --git a/frontend/src/themes/index.ts b/frontend/src/themes/index.ts
index a01197e633def86da817eb40c8ea9442a0beb399..d1cdfcd3867f886fcd06999949d8294dd3ffdef3 100644
--- a/frontend/src/themes/index.ts
+++ b/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
}
}
}
diff --git a/frontend/src/themes/main.ts b/frontend/src/themes/main.ts
index e07e4ce55617aa862c5b99274a6288bb084bad9c..44bd354d1d06c71c16f9b82c628b40c93381a518 100644
--- a/frontend/src/themes/main.ts
+++ b/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: {