diff --git a/src/components/client/campaign-application/CampaignApplicationForm.tsx b/src/components/client/campaign-application/CampaignApplicationForm.tsx index c906a4c54..3a61b9859 100644 --- a/src/components/client/campaign-application/CampaignApplicationForm.tsx +++ b/src/components/client/campaign-application/CampaignApplicationForm.tsx @@ -1,17 +1,21 @@ -import { Grid, StepLabel } from '@mui/material' import { useCallback, useState } from 'react' + +import { Grid, StepLabel } from '@mui/material' + import { Step as StepType, CampaignApplicationFormData, Steps, } from './helpers/campaignApplication.types' +import GenericForm from 'components/common/form/GenericForm' import CampaignApplicationStepperIcon from './CampaignApplicationStepperIcon' -import CampaignApplicationFormActions from './CampaignApplicationFormActions' +import CampaignApplicationOrganizer from './steps/CampaignApplicationOrganizer' import CampaignApplicationDetails from './steps/CampaignApplicationDetails' import CampaignApplication from './steps/CampaignApplication' -import CampaignApplicationOrganizer from './steps/CampaignApplicationOrganizer' -import GenericForm from 'components/common/form/GenericForm' +import CampaignApplicationFormActions from './CampaignApplicationFormActions' +import stepsHandler from './helpers/stepsHandler' + import { ActionsContainer, StyledCampaignApplicationStep, @@ -21,25 +25,27 @@ import { const initialValues: CampaignApplicationFormData = {} +const steps: StepType[] = [ + { + title: 'campaign-application:steps.organizer.title', + component: , + }, + { + title: 'campaign-application:steps.campaign-application.title', + component: , + }, + { + title: 'campaign-application:steps.campaign-application-details.title', + component: , + }, +] + export default function CampaignApplicationForm() { const [activeStep, setActiveStep] = useState(Steps.ORGANIZER) - const steps: StepType[] = [ - { - title: 'campaign-application:steps.organizer.title', - component: , - }, - { - title: 'campaign-application:steps.campaign-application.title', - component: , - }, - { - title: 'campaign-application:steps.campaign-application-details.title', - component: , - }, - ] - - const handleSubmit = () => {} + const handleSubmit = () => { + stepsHandler({ activeStep, setActiveStep }) + } const handleBack = useCallback(() => { setActiveStep((prevActiveStep) => prevActiveStep - 1) diff --git a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx index 1f5556e8f..acab02d31 100644 --- a/src/components/client/campaign-application/CampaignApplicationFormActions.tsx +++ b/src/components/client/campaign-application/CampaignApplicationFormActions.tsx @@ -13,8 +13,7 @@ import { Root, } from './helpers/campaignApplicationFormActions.styled' -type ActionsProps = { - loading?: boolean +type CampaignApplicationFormActionsProps = { activeStep: number onBack?: (event: MouseEvent) => void } @@ -22,8 +21,7 @@ type ActionsProps = { export default function CampaignApplicationFormActions({ onBack, activeStep, - loading = false, -}: ActionsProps) { +}: CampaignApplicationFormActionsProps) { const { t } = useTranslation('campaign-application') return ( @@ -37,19 +35,14 @@ export default function CampaignApplicationFormActions({ {t('cta.back')} ) : ( - }> + }> {t('cta.back')} )} } /> diff --git a/src/components/client/campaign-application/CampaignApplicationPage.tsx b/src/components/client/campaign-application/CampaignApplicationPage.tsx index 81a5e60e2..c9b7cacd3 100644 --- a/src/components/client/campaign-application/CampaignApplicationPage.tsx +++ b/src/components/client/campaign-application/CampaignApplicationPage.tsx @@ -3,7 +3,7 @@ import CampaignApplicationForm from './CampaignApplicationForm' export default function CampaignApplicationPage() { return ( - + ) diff --git a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx index 6a8032267..c4f5d7b16 100644 --- a/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplication.styled.tsx @@ -28,8 +28,8 @@ export const StyledCampaignApplicationStep = styled(Step)(() => ({ export const StyledCampaignApplicationStepper = styled(Stepper)(() => ({ backgroundColor: 'transparent', - margin: theme.spacing(10, 0, 8, 0), - alignItems: 'center', + margin: '20px auto', + maxWidth: '530px', })) export const StyledStepConnector = styled(StepConnector)(() => ({ diff --git a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx index cf91524b7..4fea44c25 100644 --- a/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx +++ b/src/components/client/campaign-application/helpers/campaignApplicationFormActions.styled.tsx @@ -3,6 +3,7 @@ import { Button, Grid } from '@mui/material' import LinkButton from 'components/common/LinkButton' import SubmitButton from 'components/common/form/SubmitButton' + import theme from 'common/theme' export const Root = styled(Grid)(() => ({ @@ -10,19 +11,6 @@ export const Root = styled(Grid)(() => ({ textAlign: 'center', })) -export const Icon = styled(Grid)(() => ({ - justifyContent: 'center', - marginBottom: theme.spacing(4), - - '& svg': { - fontSize: theme.typography.pxToRem(120), - }, -})) - -export const ButtonsWrapper = styled(Grid)(() => ({ - justifyContent: 'space-evenly', -})) - export const ActionLinkButton = styled(LinkButton)(() => ({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.common.black}`, @@ -31,6 +19,7 @@ export const ActionLinkButton = styled(LinkButton)(() => ({ color: theme.palette.common.black, fontSize: theme.typography.pxToRem(20), width: theme.spacing(50), + fontWeight: 800, })) export const ActionButton = styled(Button)(() => ({ @@ -41,14 +30,16 @@ export const ActionButton = styled(Button)(() => ({ color: theme.palette.common.black, fontSize: theme.typography.pxToRem(20), width: theme.spacing(50), + fontWeight: 800, })) export const ActionSubmitButton = styled(SubmitButton)(() => ({ - backgroundColor: '#0098E3', - border: `1px solid ${theme.palette.secondary.light}`, + backgroundColor: '#62C4FB', + border: `1px solid ${theme.palette.common.black}`, padding: theme.spacing(1, 5), borderRadius: theme.borders.round, color: theme.palette.common.black, fontSize: theme.typography.pxToRem(20), width: theme.spacing(50), + fontWeight: 800, })) diff --git a/src/components/client/campaign-application/helpers/stepsHandler.ts b/src/components/client/campaign-application/helpers/stepsHandler.ts new file mode 100644 index 000000000..f7c2cbedb --- /dev/null +++ b/src/components/client/campaign-application/helpers/stepsHandler.ts @@ -0,0 +1,30 @@ +import { SetStateAction } from 'react' + +import { Steps } from './campaignApplication.types' + +interface stepsHandlerProps { + activeStep: Steps + setActiveStep: (value: SetStateAction) => void +} + +export default function stepsHandler({ activeStep, setActiveStep }: stepsHandlerProps) { + switch (activeStep) { + case Steps.ORGANIZER: + { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + break + case Steps.CAMPAIGN: + { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + break + case Steps.CAMPAIGN_DETAILS: + { + setActiveStep((prevActiveStep) => prevActiveStep + 1) + } + break + default: + return 'Unknown step' + } +}