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 }) => ({
color: theme.greg.h2TextColor,
fontSize: '3rem',
fontWeight: 'bold',
margin: '0 6.5rem 0 6.5rem',
margin: '1rem 0 1rem 0',
}))
interface IPage {
......@@ -28,7 +28,10 @@ export default function Page(props: IPage) {
<html lang={i18n.language} />
<title>{header}</title>
</Helmet>
<Container maxWidth="md">
<Container
maxWidth="md"
sx={{ paddingBottom: '2rem', paddingTop: '2rem' }}
>
<StyledPageHeader>{header}</StyledPageHeader>
{children}
</Container>
......
frontend/src/routes/register/index.tsx
+ 32
− 20
View file @ 5ae22484
......@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
import { Box, Button, Step, StepLabel, Stepper } from '@mui/material'
import Page from 'components/page'
import { useHistory } from 'react-router-dom'
import { RegisterFormData } from './formData'
import StepSummary from './stepSummary'
......@@ -13,10 +12,8 @@ import { PersonFormMethods } from './personFormMethods'
import { SummaryFormMethods } from './summaryFormMethods'
import SubmitState from './submitState'
const steps = ['Register', 'Summary']
export default function StepRegistration() {
const { t } = useTranslation(['common'])
const [formData, setFormData] = useState<RegisterFormData>({
......@@ -58,7 +55,9 @@ export default function StepRegistration() {
setActiveStep((prevActiveStep) => prevActiveStep - 1)
}
const handleForwardFromRegister = (updateFormData: RegisterFormData): void => {
const handleForwardFromRegister = (
updateFormData: RegisterFormData
): void => {
setFormData(updateFormData)
setActiveStep((prevActiveStep) => prevActiveStep + 1)
}
......@@ -76,8 +75,7 @@ export default function StepRegistration() {
}
return (
<Page header='Register as a guest'>
<Page header="Register as a guest">
{/* Stepper at top of wizard */}
<Stepper activeStep={activeStep}>
{/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
......@@ -95,19 +93,32 @@ export default function StepRegistration() {
{/* Current page in wizard */}
<Box sx={{ width: '100%' }}>
{activeStep === REGISTER_STEP && (
<StepPersonForm nextHandler={handleForwardFromRegister} formData={formData}
ref={personFormRef} />
)
}
<StepPersonForm
nextHandler={handleForwardFromRegister}
formData={formData}
ref={personFormRef}
/>
)}
{activeStep === SUMMARY_STEP && (
<StepSummary formData={formData} onSubmitSuccess={handleSubmitSuccess} onSubmitFailure={handleSubmitFailure}
ref={summaryStepRef} />
<StepSummary
formData={formData}
onSubmitSuccess={handleSubmitSuccess}
onSubmitFailure={handleSubmitFailure}
ref={summaryStepRef}
/>
)}
</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 && (
<Button data-testid='button-next' onClick={handleNext}>
<Button data-testid="button-next" onClick={handleNext}>
{t('button.next')}
</Button>
)}
......@@ -122,22 +133,23 @@ export default function StepRegistration() {
{t('button.back')}
</Button>
<Button onClick={registerGuest}
disabled={submitState === SubmitState.SubmitSuccess}
sx={{ mr: 1 }}
<Button
onClick={registerGuest}
disabled={submitState === SubmitState.SubmitSuccess}
sx={{ mr: 1 }}
>
{t('button.save')}
</Button>
</>
)}
<Button onClick={handleCancel}
disabled={submitState === SubmitState.SubmitSuccess}
<Button
onClick={handleCancel}
disabled={submitState === SubmitState.SubmitSuccess}
>
{t('button.cancel')}
</Button>
</Box>
</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