Style tweaks

UniversityOfHelsinkiCS · Mar 6, 2023 · 50af488 · 50af488
1 parent 1b94025
commit 50af488
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 42 deletions.
diff --git a/src/client/components/InteractiveForm/SelectFaculty.tsx b/src/client/components/InteractiveForm/SelectFaculty.tsx
@@ -3,7 +3,7 @@ import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
 import FormControl from '@mui/material/FormControl'
 import Select, { SelectChangeEvent } from '@mui/material/Select'
-import { Box, Card, CardContent, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { Controller } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import styles from './styles'
@@ -61,46 +61,42 @@ const SelectFaculty: React.FC<InputProps> = ({ control }) => {
 
   return (
     <Box sx={classes.card}>
-      <Card>
-        <CardContent>
-          <Typography variant="h5" sx={classes.heading} component="div">
-            {t('facultySelect:welcomeMessage')}
-          </Typography>
-          <Box sx={classes.content}>
-            <Typography variant="body2">
-              {t('facultySelect:introMessage')}
-            </Typography>
-          </Box>
-        </CardContent>
+      <Typography variant="h5" sx={classes.heading} component="div">
+        {t('facultySelect:welcomeMessage')}
+      </Typography>
+      <Box sx={classes.content}>
+        <Typography variant="body2">
+          {t('facultySelect:introMessage')}
+        </Typography>
+      </Box>
 
-        <Controller
-          control={control}
-          name="faculty"
-          defaultValue={userFaculties[0]?.code || ''}
-          render={({ field }) => (
-            <FormControl sx={{ width: '100%' }}>
-              <InputLabel>{t('facultySelect:inputLabel')}</InputLabel>
-              <Select
-                data-cy="faculty-select"
-                value={faculty}
-                label={t('facultySelect:inputLabel')}
-                onChange={handleChange}
-                {...field}
-              >
-                {organisations.map((f: Faculty) => (
-                  <MenuItem
-                    data-cy={`faculty-option-${f.code}`}
-                    key={f.code}
-                    value={f.code}
-                  >
-                    {f.name[language as keyof Locales]}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          )}
-        />
-      </Card>
+      <Controller
+        control={control}
+        name="faculty"
+        defaultValue={userFaculties[0]?.code || ''}
+        render={({ field }) => (
+          <FormControl sx={{ width: '100%' }}>
+            <InputLabel>{t('facultySelect:inputLabel')}</InputLabel>
+            <Select
+              data-cy="faculty-select"
+              value={faculty}
+              label={t('facultySelect:inputLabel')}
+              onChange={handleChange}
+              {...field}
+            >
+              {organisations.map((f: Faculty) => (
+                <MenuItem
+                  data-cy={`faculty-option-${f.code}`}
+                  key={f.code}
+                  value={f.code}
+                >
+                  {f.name[language as keyof Locales]}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
     </Box>
   )
 }

diff --git a/src/client/components/InteractiveForm/styles.ts b/src/client/components/InteractiveForm/styles.ts
@@ -7,11 +7,11 @@ const cardStyles = {
   questionsContainer: {
     my: 8,
     borderLeft: 1,
-    borderColor: 'grey.400',
+    borderColor: 'grey.300',
   },
   content: {
     mt: 2,
-    mb: 1,
+    mb: 2,
     pl: 2,
     textAlign: 'left',
   },
@@ -21,6 +21,7 @@ const cardStyles = {
   },
   heading: {
     fontWeight: '200',
+    pb: 1,
   },
 }