rough layout of the new form (#6960)

This PR adds a very rough first implementation of the look of the new
project form. *It is not final and does not work yet*.

The important part here is that the layout is roughly right (we'll
adjust spacing etc later) and that we've got all the basic elements
present.

I'll hook it up to actually work in an upcoming PR. 


![image](https://github.com/Unleash/unleash/assets/17786332/b941702f-ec1b-4d16-9628-ba560b0919f2)

The missing icon, text alignment, etc, will also be solved later.

frontend/src/component/project/Project/CreateProject/CreateProject.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import ProjectForm from '../ProjectForm/ProjectForm';
+import { NewProjectForm } from './NewProjectForm';
 import useProjectForm, {
     DEFAULT_PROJECT_STICKINESS,
 } from '../hooks/useProjectForm';
@@ -14,6 +15,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import { GO_BACK } from 'constants/navigate';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Button, styled } from '@mui/material';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
 
@@ -45,6 +47,8 @@ const CreateProject = () => {
         errors,
     } = useProjectForm();
 
+    const useNewProjectForm = useUiFlag('newCreateProjectUI');
+
     const { createProject, loading } = useProjectApi();
 
     const handleSubmit = async (e: Event) => {
@@ -89,6 +93,21 @@ const CreateProject = () => {
         navigate(GO_BACK);
     };
 
+    if (useNewProjectForm) {
+        return (
+            <FormTemplate
+                disablePadding
+                loading={loading}
+                description='Projects allows you to group feature toggles together in the management UI.'
+                documentationLink='https://docs.getunleash.io/reference/projects'
+                documentationLinkLabel='Projects documentation'
+                formatApiCode={formatApiCode}
+            >
+                <NewProjectForm />
+            </FormTemplate>
+        );
+    }
+
     return (
         <FormTemplate
             loading={loading}

frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx

@@ -0,0 +1,121 @@
+import {
+    Button,
+    MenuItem,
+    Select,
+    TextField,
+    Typography,
+    styled,
+} from '@mui/material';
+import { GO_BACK } from 'constants/navigate';
+import { CreateButton } from 'component/common/CreateButton/CreateButton';
+import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions';
+import { useNavigate } from 'react-router-dom';
+
+const StyledForm = styled('form')(({ theme }) => ({
+    background: theme.palette.background.default,
+}));
+
+const StyledFormSection = styled('div')(({ theme }) => ({
+    '& + *': {
+        borderBlockStart: `1px solid ${theme.palette.divider}`,
+    },
+
+    padding: theme.spacing(7),
+}));
+
+const TopGrid = styled(StyledFormSection)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateAreas:
+        '"icon header template" "icon project-name project-name" "icon description description"',
+    gridTemplateColumns: 'minmax(auto, 50px) 1fr auto',
+    gap: theme.spacing(2),
+}));
+
+const StyledIcon = styled('span')(({ theme }) => ({
+    border: `1px solid ${theme.palette.primary.main}`,
+    width: `100%`,
+    aspectRatio: '1',
+    borderRadius: theme.shape.borderRadius,
+}));
+
+const StyledHeader = styled(Typography)(({ theme }) => ({
+    gridArea: 'header',
+}));
+
+const StyledTemplateSelector = styled(Select)(({ theme }) => ({
+    gridArea: 'template',
+}));
+
+const StyledInput = styled(TextField)(({ theme }) => ({
+    width: '100%',
+    margin: 0,
+    fieldset: { border: 'none' },
+}));
+
+const StyledProjectName = styled(StyledInput)(({ theme }) => ({
+    gridArea: 'project-name',
+    '*': { fontSize: theme.typography.h1.fontSize },
+}));
+
+const StyledProjectDescription = styled(StyledInput)(({ theme }) => ({
+    gridArea: 'description',
+    '*': { fontSize: theme.typography.h2.fontSize },
+}));
+
+const OptionButtons = styled(StyledFormSection)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(2),
+}));
+
+const FormActions = styled(StyledFormSection)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(5),
+    justifyContent: 'flex-end',
+}));
+
+const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN';
+
+export const NewProjectForm = () => {
+    const navigate = useNavigate();
+
+    const handleCancel = () => {
+        navigate(GO_BACK);
+    };
+
+    return (
+        <StyledForm>
+            <TopGrid>
+                <StyledIcon>icon</StyledIcon>
+                <StyledHeader variant='h2'>New project</StyledHeader>
+                <StyledTemplateSelector
+                    id='template-selector'
+                    value={'none'}
+                    label='Project creation template'
+                    name='Project creation template'
+                >
+                    <MenuItem value={'none'}>No template</MenuItem>
+                </StyledTemplateSelector>
+                <StyledProjectName label='Project name' required />
+                <StyledProjectDescription
+                    label='Description (optional)'
+                    multiline
+                />
+            </TopGrid>
+            <OptionButtons>
+                <Button variant='outlined'>4 selected</Button>
+                <Button variant='outlined'>clientId</Button>
+                <Button variant='outlined'>Open</Button>
+                <Button variant='outlined'>1 environment configured</Button>
+            </OptionButtons>
+            <FormActions>
+                <Button onClick={handleCancel}>Cancel</Button>
+
+                <CreateButton
+                    name='project'
+                    permission={CREATE_PROJECT}
+                    data-testid={CREATE_PROJECT_BTN}
+                />
+            </FormActions>
+        </StyledForm>
+    );
+};