Skip to content
Snippets Groups Projects
Commit 5ae22484 authored by Sivert Kronen Hatteberg's avatar Sivert Kronen Hatteberg
Browse files

Nice padding on the page component, and autoformating 

Issue: GREG-72
parent 6712a686
No related branches found
No related tags found
1 merge request!97Greg 72 nicer footer and header
Hide whitespace changes
Inline Side-by-side
frontend/src/components/page/page.tsx
+ 5
− 2
View file @ 5ae22484
...@@ -9,7 +9,7 @@ const StyledPageHeader = styled('h2')(({ theme }) => ({ ...@@ -9,7 +9,7 @@ const StyledPageHeader = styled('h2')(({ theme }) => ({
color: theme.greg.h2TextColor, color: theme.greg.h2TextColor,
fontSize: '3rem', fontSize: '3rem',
fontWeight: 'bold', fontWeight: 'bold',
margin: '0 6.5rem 0 6.5rem', margin: '1rem 0 1rem 0',
})) }))
interface IPage { interface IPage {
...@@ -28,7 +28,10 @@ export default function Page(props: IPage) { ...@@ -28,7 +28,10 @@ export default function Page(props: IPage) {
<html lang={i18n.language} /> <html lang={i18n.language} />
<title>{header}</title> <title>{header}</title>
</Helmet> </Helmet>
<Container maxWidth="md"> <Container
maxWidth="md"
sx={{ paddingBottom: '2rem', paddingTop: '2rem' }}
>
<StyledPageHeader>{header}</StyledPageHeader> <StyledPageHeader>{header}</StyledPageHeader>
{children} {children}
</Container> </Container>
......
frontend/src/routes/register/index.tsx
+ 32
− 20
View file @ 5ae22484
...@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next' ...@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
import { Box, Button, Step, StepLabel, Stepper } from '@mui/material' import { Box, Button, Step, StepLabel, Stepper } from '@mui/material'
import Page from 'components/page' import Page from 'components/page'
import { useHistory } from 'react-router-dom' import { useHistory } from 'react-router-dom'
import { RegisterFormData } from './formData' import { RegisterFormData } from './formData'
import StepSummary from './stepSummary' import StepSummary from './stepSummary'
...@@ -13,10 +12,8 @@ import { PersonFormMethods } from './personFormMethods' ...@@ -13,10 +12,8 @@ import { PersonFormMethods } from './personFormMethods'
import { SummaryFormMethods } from './summaryFormMethods' import { SummaryFormMethods } from './summaryFormMethods'
import SubmitState from './submitState' import SubmitState from './submitState'
const steps = ['Register', 'Summary'] const steps = ['Register', 'Summary']
export default function StepRegistration() { export default function StepRegistration() {
const { t } = useTranslation(['common']) const { t } = useTranslation(['common'])
const [formData, setFormData] = useState<RegisterFormData>({ const [formData, setFormData] = useState<RegisterFormData>({
...@@ -58,7 +55,9 @@ export default function StepRegistration() { ...@@ -58,7 +55,9 @@ export default function StepRegistration() {
setActiveStep((prevActiveStep) => prevActiveStep - 1) setActiveStep((prevActiveStep) => prevActiveStep - 1)
} }
const handleForwardFromRegister = (updateFormData: RegisterFormData): void => { const handleForwardFromRegister = (
updateFormData: RegisterFormData
): void => {
setFormData(updateFormData) setFormData(updateFormData)
setActiveStep((prevActiveStep) => prevActiveStep + 1) setActiveStep((prevActiveStep) => prevActiveStep + 1)
} }
...@@ -76,8 +75,7 @@ export default function StepRegistration() { ...@@ -76,8 +75,7 @@ export default function StepRegistration() {
} }
return ( return (
<Page header='Register as a guest'> <Page header="Register as a guest">
{/* Stepper at top of wizard */} {/* Stepper at top of wizard */}
<Stepper activeStep={activeStep}> <Stepper activeStep={activeStep}>
{/* eslint-disable-next-line @typescript-eslint/no-unused-vars */} {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
...@@ -95,19 +93,32 @@ export default function StepRegistration() { ...@@ -95,19 +93,32 @@ export default function StepRegistration() {
{/* Current page in wizard */} {/* Current page in wizard */}
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
{activeStep === REGISTER_STEP && ( {activeStep === REGISTER_STEP && (
<StepPersonForm nextHandler={handleForwardFromRegister} formData={formData} <StepPersonForm
ref={personFormRef} /> nextHandler={handleForwardFromRegister}
) formData={formData}
} ref={personFormRef}
/>
)}
{activeStep === SUMMARY_STEP && ( {activeStep === SUMMARY_STEP && (
<StepSummary formData={formData} onSubmitSuccess={handleSubmitSuccess} onSubmitFailure={handleSubmitFailure} <StepSummary
ref={summaryStepRef} /> formData={formData}
onSubmitSuccess={handleSubmitSuccess}
onSubmitFailure={handleSubmitFailure}
ref={summaryStepRef}
/>
)} )}
</Box> </Box>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main' }}> <Box
sx={{
display: 'flex',
flexDirection: 'row',
pt: 2,
color: 'primary.main',
}}
>
{activeStep === REGISTER_STEP && ( {activeStep === REGISTER_STEP && (
<Button data-testid='button-next' onClick={handleNext}> <Button data-testid="button-next" onClick={handleNext}>
{t('button.next')} {t('button.next')}
</Button> </Button>
)} )}
...@@ -122,22 +133,23 @@ export default function StepRegistration() { ...@@ -122,22 +133,23 @@ export default function StepRegistration() {
{t('button.back')} {t('button.back')}
</Button> </Button>
<Button onClick={registerGuest} <Button
disabled={submitState === SubmitState.SubmitSuccess} onClick={registerGuest}
sx={{ mr: 1 }} disabled={submitState === SubmitState.SubmitSuccess}
sx={{ mr: 1 }}
> >
{t('button.save')} {t('button.save')}
</Button> </Button>
</> </>
)} )}
<Button onClick={handleCancel} <Button
disabled={submitState === SubmitState.SubmitSuccess} onClick={handleCancel}
disabled={submitState === SubmitState.SubmitSuccess}
> >
{t('button.cancel')} {t('button.cancel')}
</Button> </Button>
</Box> </Box>
</Page> </Page>
) )
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment