From 5ae224847114d91147092a67b1ad9dce6edcc483 Mon Sep 17 00:00:00 2001
From: Sivert Hatteberg <sivert.hatteberg@usit.uio.no>
Date: Thu, 7 Oct 2021 23:53:14 +0200
Subject: [PATCH] Nice padding on the page component, and autoformating
Issue: GREG-72
---
frontend/src/components/page/page.tsx | 7 +++-
frontend/src/routes/register/index.tsx | 52 ++++++++++++++++----------
2 files changed, 37 insertions(+), 22 deletions(-)
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index dc03acd7..d07eb9f4 100644
--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -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>
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 4a92ee1b..1efa3145 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -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>
)
}
--
GitLab