fix: adjust action buttons styles and functionality

podkrepi-bg · Jun 18, 2024 · fbe6efb · fbe6efb
1 parent 5c84fcb
commit fbe6efb
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 48 deletions.
diff --git 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: <CampaignApplicationOrganizer />,
+  },
+  {
+    title: 'campaign-application:steps.campaign-application.title',
+    component: <CampaignApplication />,
+  },
+  {
+    title: 'campaign-application:steps.campaign-application-details.title',
+    component: <CampaignApplicationDetails />,
+  },
+]
+
 export default function CampaignApplicationForm() {
   const [activeStep, setActiveStep] = useState<Steps>(Steps.ORGANIZER)
 
-  const steps: StepType[] = [
-    {
-      title: 'campaign-application:steps.organizer.title',
-      component: <CampaignApplicationOrganizer />,
-    },
-    {
-      title: 'campaign-application:steps.campaign-application.title',
-      component: <CampaignApplication />,
-    },
-    {
-      title: 'campaign-application:steps.campaign-application-details.title',
-      component: <CampaignApplicationDetails />,
-    },
-  ]
-
-  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
@@ -13,17 +13,15 @@ import {
   Root,
 } from './helpers/campaignApplicationFormActions.styled'
 
-type ActionsProps = {
-  loading?: boolean
+type CampaignApplicationFormActionsProps = {
   activeStep: number
   onBack?: (event: MouseEvent) => void
 }
 
 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')}
           </ActionLinkButton>
         ) : (
-          <ActionButton
-            fullWidth
-            onClick={onBack}
-            startIcon={<ArrowBackIosIcon fontSize="small" />}>
+          <ActionButton onClick={onBack} startIcon={<ArrowBackIosIcon fontSize="small" />}>
             {t('cta.back')}
           </ActionButton>
         )}
       </Grid>
       <Grid item>
         <ActionSubmitButton
-          fullWidth
           label={t('cta.next')}
-          loading={loading}
           endIcon={<ArrowForwardIosIcon fontSize="small" />}
         />
       </Grid>

diff --git 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 (
-    <Layout maxWidth="sm">
+    <Layout maxWidth="md">
       <CampaignApplicationForm />
     </Layout>
   )

diff --git 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
@@ -3,26 +3,14 @@ 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)(() => ({
   marginTop: theme.spacing(15),
   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
@@ -0,0 +1,30 @@
+import { SetStateAction } from 'react'
+
+import { Steps } from './campaignApplication.types'
+
+interface stepsHandlerProps {
+  activeStep: Steps
+  setActiveStep: (value: SetStateAction<Steps>) => 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'
+  }
+}