feat: create campaign application organizer form (Epic #1842)

[teodorazhelyazkova]

Create campaign application organizer form connected to Epic #1842
I have used for reference the src/components/client/support-form/SupportForm.tsx

Screenshots:

Testing

Steps to test

1. Login as normal user
2. Visit http://localhost:3040/campaigns/application

[github-actions]

✅ Tests will run for this PR. Once they succeed it can be merged.

[gparlakov]

Looks good to me

[sashko9807]

On the style repetitiveness topic, there is no rule saying that each component we want to style should be a styled component. You can have single single styled wrapper, and define the styles of all child components through CSS selectors(elements, classes etc..).

For example you could have something like

export const OrganizerDataStepStyled = styled(Grid)(() => ({
 '& .header': {
     fontSize: theme.typography.pxToRem(18)
     ....
  },
 'input': {
     fontSize: theme.typography.pxToRem(18)
     borderRadius: 10
    .....
  },
 'button': {
  padding: theme.spacing(1, 5),
  border: `1px solid ${theme.palette.common.black}`,
  borderRadius: theme.borders.round,
  color: theme.palette.common.black,
  fontSize: theme.typography.pxToRem(15),
  fontWeight: 800,
  }
})

Then you use it like this

//OrganizerDataStepStyled inherits all properties of the Grid component
<OrganizerDataStepStyled container>
<Header className={'header'}>Something nice</Header>
<Button variant='outline'>Go back</Button>
<Button variant='contained'>Save and continue</Button>
</OrganizerDataStepStyled>

You can find this pattern used in the codebase to get the idea. Quick example I found is CampaignNewsList.tsx

P.S. This comment was just to give you an idea of alternative solution on how to work with MUI's styled components. We don't have a strict policy(at least for now), when it comes to building patterns for react component, thus feel free to use the pattern which comes more natural/logical to you.