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'
+ }
+}