style: improve results ui slightly

Author: Veikkosuhonen

src/client/components/ResultPage/RenderResults.tsx

@@ -6,6 +6,7 @@ import useResultRefCallback from '../../hooks/useResultRefCallback'
 import RiskTableDOM from './RiskTableDOM'
 import MuiComponentProvider from '../Common/MuiComponentProvider'
 import RenderAnswersDOM from './RenderAnswersDOM'
+import { Box } from '@mui/material'
 
 const RenderResults = ({ riskData }: { riskData: RiskData }) => {
   const { survey } = useSurvey()
@@ -17,6 +18,7 @@ const RenderResults = ({ riskData }: { riskData: RiskData }) => {
     <div ref={refCallback}>
       <MuiComponentProvider>
         <RiskTableDOM riskData={riskData} countryData={riskData.country[0]} />
+        <Box sx={{ mt: 4 }} />
         <RenderAnswersDOM survey={survey} resultData={riskData.answers} />
       </MuiComponentProvider>
     </div>

src/resultRenderer/RenderAnswers.tsx

@@ -6,11 +6,8 @@ import type { Survey } from '@client/types'
 
 import { extraOrganisations } from '@common/organisations'
 
-import styles from './styles'
 import { useComponents } from './context'
 
-const { resultStyles } = styles
-
 const RenderAnswers = ({
   survey,
   resultData,
@@ -62,12 +59,12 @@ const RenderAnswers = ({
       <Typography variant="h6" style={{ fontSize: '24px', marginBottom: '20px' }}>
         {t('results:answerBoxTitle')}
       </Typography>
-      <Div style={resultStyles.resultElementWrapper}>
+      <Div style={{ borderLeft: '1px solid lightgray' }}>
         {survey?.Questions.map(currentQuestion => (
           <Div key={currentQuestion.id}>
             {!currentQuestion.parentId && (
               <>
-                <Div style={resultStyles.card}>
+                <Div style={{ margin: '16px' }}>
                   <Typography style={{ fontWeight: '800' }}>
                     {currentQuestion.id === 8 && resultData[4] === 'multilateral'
                       ? t('questions:additionalPartnerOrganisationCountryQuestion')
@@ -79,10 +76,10 @@ const RenderAnswers = ({
                 </Div>
                 {survey?.Questions.filter(childQuestion => childQuestion.parentId === currentQuestion.id)?.map(
                   childQuestion => (
-                    <Div key={childQuestion.id}>
-                      <Div>
+                    <Div key={childQuestion.id} style={{ margin: '16px' }}>
+                      <Div style={{ borderLeft: '1px solid lightgray' }}>
                         {answers[childQuestion.id] && (
-                          <Div style={resultStyles.answerBox}>
+                          <Div style={{ margin: '16px' }}>
                             <Typography style={{ fontWeight: '800' }}>
                               {childQuestion.title[language as keyof Locales]}
                             </Typography>
@@ -100,14 +97,14 @@ const RenderAnswers = ({
               </>
             )}
             {currentQuestion.id === 6 && answers[21] && (
-              <Div style={resultStyles.answerBox}>
+              <Div style={{ margin: '16px' }}>
                 <Typography style={{ fontWeight: '800' }}>
                   {survey.Questions.find(childQuestion => childQuestion.id === 21)?.title[language as keyof Locales]}
                 </Typography>
               </Div>
             )}
             {currentQuestion.id === 1 && (
-              <Div style={resultStyles.card}>
+              <Div style={{ margin: '16px' }}>
                 <Typography style={{ fontWeight: '800' }}>{t('facultySelect:title')}</Typography>
                 <Typography>
                   {organisations.find(faculty => faculty.code === answers.faculty)?.name[language as keyof Locales]}

src/resultRenderer/RiskTable.tsx

@@ -62,14 +62,7 @@ const RiskTable = ({
       </Typography>
       <Div style={resultStyles.resultElementWrapper}>
         <TableContainer>
-          <Table
-            sx={{
-              width: '80%',
-              '& .MuiTableCell-sizeMedium': {
-                padding: '10px',
-              },
-            }}
-          >
+          <Table>
             <TableBody>
               <RiskElement infoText={totalRiskText} title={totalRisk.title} level={totalRisk.level} />
               <TableRow>