chore: update input field text sizes (#7107)

Make sure that the main input fields have enough space between them and
that their size is correct in both light and dark modes.

frontend/src/component/common/Input/Input.tsx

@@ -29,13 +29,14 @@ const Input = ({
     className,
     value,
     onChange,
+    size = 'small',
     ...rest
 }: IInputProps) => {
     const { classes: styles } = useStyles();
     return (
         <StyledDiv data-loading>
             <TextField
-                size='small'
+                size={size}
                 variant='outlined'
                 label={label}
                 placeholder={placeholder}

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

@@ -15,6 +15,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { useStickinessOptions } from 'hooks/useStickinessOptions';
 import { ReactComponent as ChangeRequestIcon } from 'assets/icons/merge.svg';
+import theme from 'themes/theme';
 
 const StyledForm = styled('form')(({ theme }) => ({
     background: theme.palette.background.default,
@@ -33,7 +34,7 @@ const TopGrid = styled(StyledFormSection)(({ theme }) => ({
     gridTemplateAreas:
         '"icon header" "icon project-name" "icon project-description"',
     gridTemplateColumns: 'auto 1fr',
-    gap: theme.spacing(2),
+    gap: theme.spacing(4),
 }));
 
 const StyledIcon = styled(ProjectIcon)(({ theme }) => ({
@@ -59,14 +60,6 @@ const StyledInput = styled(Input)(({ theme }) => ({
     fieldset: { border: 'none' },
 }));
 
-const StyledProjectName = styled(StyledInput)(({ theme }) => ({
-    '*': { fontSize: theme.typography.h2.fontSize },
-}));
-
-const StyledProjectDescription = styled(StyledInput)(({ theme }) => ({
-    '*': { fontSize: theme.typography.h3.fontSize },
-}));
-
 const OptionButtons = styled(StyledFormSection)(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
@@ -169,7 +162,7 @@ export const NewProjectForm: React.FC<FormProps> = ({
                 <StyledIcon aria-hidden='true' />
                 <StyledHeader variant='h2'>New project</StyledHeader>
                 <ProjectNameContainer>
-                    <StyledProjectName
+                    <StyledInput
                         label='Project name'
                         aria-required
                         value={projectName}
@@ -181,10 +174,18 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         }}
                         data-testid={PROJECT_NAME_INPUT}
                         autoFocus
+                        InputProps={{
+                            style: { fontSize: theme.typography.h1.fontSize },
+                        }}
+                        InputLabelProps={{
+                            style: { fontSize: theme.typography.h1.fontSize },
+                        }}
+                        size='medium'
                     />
                 </ProjectNameContainer>
                 <ProjectDescriptionContainer>
-                    <StyledProjectDescription
+                    <StyledInput
+                        size='medium'
                         className='description'
                         label='Description (optional)'
                         multiline
@@ -192,6 +193,12 @@ export const NewProjectForm: React.FC<FormProps> = ({
                         value={projectDesc}
                         onChange={(e) => setProjectDesc(e.target.value)}
                         data-testid={PROJECT_DESCRIPTION_INPUT}
+                        InputProps={{
+                            style: { fontSize: theme.typography.h2.fontSize },
+                        }}
+                        InputLabelProps={{
+                            style: { fontSize: theme.typography.h2.fontSize },
+                        }}
                     />
                 </ProjectDescriptionContainer>
             </TopGrid>