style: remove unused styles and simplify some component styles

UniversityOfHelsinkiCS · Apr 12, 2024 · c345f52 · c345f52
1 parent e87f71b
commit c345f52
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 144 deletions.
diff --git a/src/client/components/Admin/Entries/Entry.tsx b/src/client/components/Admin/Entries/Entry.tsx
@@ -9,7 +9,7 @@ import styles from '../../../styles'
 
 import RenderResults from './RenderResults'
 
-const { cardStyles, resultStyles } = styles
+const { cardStyles } = styles
 
 const Entry = () => {
   const { t } = useTranslation()
@@ -20,7 +20,7 @@ const Entry = () => {
   if (!entry || isLoading || !results || !resultsFetched) return null
 
   return (
-    <Box sx={resultStyles.resultWrapper}>
+    <Box sx={{ m: 2 }}>
       <Box sx={{ m: 4 }}>
         <Typography data-cy='result-section-title' variant='h5' component='div'>
           {t('admin:entryInfoTitle')}

diff --git a/src/client/components/Admin/Entries/RenderResults.tsx b/src/client/components/Admin/Entries/RenderResults.tsx
@@ -6,7 +6,6 @@ import { Box, Typography } from '@mui/material'
 import useRecommendations from '../../../hooks/useRecommendations'
 import useResults from '../../../hooks/useResults'
 import useSurvey from '../../../hooks/useSurvey'
-import styles from '../../../styles'
 import { FormValues } from '../../../types'
 import {
   getRecommendationLabels,
@@ -19,8 +18,6 @@ import CommonResult from '../../InteractiveForm/CommonResult'
 import DefaultResultElements from '../../InteractiveForm/DefaultResultElements'
 import IpAssessmentResultElements from '../../InteractiveForm/IpAssessmentResultElements'
 
-const { resultStyles } = styles
-
 interface RenderResultsType {
   surveyName: SurveyName
   resultData: FormValues
@@ -88,7 +85,7 @@ const RenderResults = ({ surveyName, resultData }: RenderResultsType) => {
   if (!ResultComponent) return null
 
   return (
-    <Box sx={resultStyles.resultSection}>
+    <Box sx={{ mx: 4, mt: 4 }}>
       <Typography data-cy='result-section-title' variant='h5' component='div'>
         {t('admin:entryViewTitle')}
       </Typography>

diff --git a/src/client/components/Footer.tsx b/src/client/components/Footer.tsx
@@ -1,34 +1,26 @@
-import React from 'react'
 import { Box, Link } from '@mui/material'
 
 import toskaColor from '../assets/toscalogo_color.svg'
-import styles from '../styles'
 
-const Footer = () => {
-  const { footerStyles } = styles
-
-  return (
-    <Box
-      component='footer'
-      sx={(theme) => ({
-        backgroundColor: theme.palette.toskaDark.main,
-        color: theme.palette.toskaDark.contrastText,
-      })}
+const Footer = () => (
+  <Box
+    component='footer'
+    sx={(theme) => ({
+      backgroundColor: theme.palette.toskaDark.main,
+      color: theme.palette.toskaDark.contrastText,
+      px: '3rem',
+      py: '2rem',
+    })}
+  >
+    <Link
+      href='https://toska.dev'
+      target='_blank'
+      rel='noopener'
+      underline='hover'
     >
-      <Box sx={footerStyles.supportBox}>
-        <Box sx={footerStyles.imageBox}>
-          <Link
-            href='https://toska.dev'
-            target='_blank'
-            rel='noopener'
-            underline='hover'
-          >
-            <img src={toskaColor} alt='Toska' width='70' />
-          </Link>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
+      <img src={toskaColor} alt='Toska' width='100px' />
+    </Link>
+  </Box>
+)
 
 export default Footer
diff --git a/src/client/styles.ts b/src/client/styles.ts
@@ -180,11 +180,6 @@ const navStyles = {
     },
   },
   icon: { mr: 1 },
-  language: { mr: 1 },
-  item: {
-    flexGrow: 1,
-    justifyContent: 'center',
-  },
   link: {
     color: 'black',
     textDecoration: 'none',
@@ -195,115 +190,9 @@ const navStyles = {
   },
 }
 
-const recommendationStyles = {
-  recommendationContainer: {
-    paddingLeft: '1rem',
-    marginLeft: '0.5rem',
-    borderColor: 'grey.300',
-    mt: 28,
-    px: 2,
-    top: '2rem',
-    textAlign: 'left',
-    position: 'sticky',
-  },
-  recommendationBox: {
-    mt: '1.8rem',
-  },
-  recommendationChipWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  subtoolWrapper: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    maxWidth: 300,
-  },
-  subtoolItem: {
-    ml: 1,
-  },
-  recommendationChipsContainer: {
-    mx: '0.6rem',
-  },
-  notSelected: {
-    fontWeight: 'light',
-    color: '#9e9e9e',
-  },
-  subtoolText: {
-    textTransform: 'capitalize',
-    paddingLeft: '1rem',
-    fontWeight: 'light',
-    color: '#757575',
-  },
-}
-
-const resultStyles = {
-  card: {
-    m: 2,
-    transition: '0.3s',
-    textAlign: 'left',
-  },
-  resultElementWrapper: {
-    my: 4,
-    borderLeft: 1,
-    borderColor: 'grey.400',
-  },
-  resultElementContent: {
-    mt: 2,
-    mb: 1,
-    pl: 2,
-    textAlign: 'left',
-  },
-  resultWrapper: {
-    m: 2,
-  },
-  resultSection: {
-    mx: 4,
-    mt: 4,
-  },
-  heading: {
-    fontWeight: '200',
-    textAlign: 'left',
-    mt: 4,
-    mx: 4,
-  },
-  resultBox: {
-    minWidth: 350,
-    m: 2,
-    border: 1,
-    borderColor: 'grey',
-  },
-}
-
-const footerStyles = {
-  supportBox: {
-    py: '2rem',
-    px: '3rem',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  imageBox: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    rowGap: '1rem',
-  },
-}
-
-const common = {
-  alertStyle: {
-    width: 'auto',
-  },
-}
-
 export default {
   productStyles,
   cardStyles,
   formStyles,
-  common,
   navStyles,
-  recommendationStyles,
-  footerStyles,
-  resultStyles,
 }