UI changes and betterments

UniversityOfHelsinkiCS · Mar 24, 2023 · d95cf6e · d95cf6e
1 parent 7090634
commit d95cf6e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/src/client/components/InteractiveForm/InteractiveForm.tsx b/src/client/components/InteractiveForm/InteractiveForm.tsx
@@ -91,13 +91,18 @@ const InteractiveForm = () => {
               }
             />
           </Routes>
+          {resultData && (
+            <Grid item sm={12}>
+              <Openai watch={watch} />
+            </Grid>
+          )}
         </Grid>
         <Grid item sm={12} md={5} xl={4}>
           <Recommendations watch={watch} />
         </Grid>
+
         {resultData && (
           <Grid item sm={12}>
-            <Openai watch={watch} />
             <ProceedToContact />
           </Grid>
         )}

diff --git a/src/client/components/ResultPage/Openai/Openai.tsx b/src/client/components/ResultPage/Openai/Openai.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Box, Typography } from '@mui/material'
+import { Box, Container, Typography } from '@mui/material'
 import { UseFormWatch, FieldValues } from 'react-hook-form'
 
 import styles from '../../../styles'
@@ -14,12 +14,14 @@ const Openai = ({ watch }: { watch: UseFormWatch<FieldValues> }) => {
   const { t } = useTranslation()
 
   return (
-    <Box sx={resultStyles.resultWrapper}>
-      <Box sx={{ p: 2 }}>
-        <Typography variant="h5" sx={cardStyles.heading} component="div">
-          {t('openai:title')}
-        </Typography>
-        <InfoBox />
+    <Box sx={cardStyles.outerBox}>
+      <Box sx={resultStyles.resultWrapper}>
+        <Container sx={{ mt: 4 }}>
+          <Typography variant="h5" sx={resultStyles.heading} component="div">
+            {t('openai:title')}
+          </Typography>
+          <InfoBox />
+        </Container>
         <Box>
           <CourseCompletion />
           <DimensionCompletion watch={watch} />

diff --git a/src/client/components/ResultPage/Results.tsx b/src/client/components/ResultPage/Results.tsx
@@ -90,17 +90,20 @@ const Results = ({ formResultData, watch }: InputProps) => {
     .map((result: string | Array<string>) =>
       typeof result === 'string' ? [result] : result
     )
-    .filter((x) =>
-      (modifiedResultObject[2] as any) !== 'courseSizeUnlimited'
-        ? x[0] !== 'courseIsMooc' && x[0] !== 'courseIsNotMooc'
-        : x[0]
+    .filter(
+      (
+        x // This is a temporary fix for the #90 unmount issue
+      ) =>
+        (modifiedResultObject[2] as any) !== 'courseSizeUnlimited'
+          ? x[0] !== 'courseIsMooc' && x[0] !== 'courseIsNotMooc'
+          : x[0]
     )
 
   return (
     <Box sx={cardStyles.outerBox}>
       <Box sx={resultStyles.resultWrapper}>
         <Box id="result-component">
-          <Container sx={{ mt: 2 }}>
+          <Container sx={{ mt: 4 }}>
             <Typography variant="h5" sx={resultStyles.heading} component="div">
               {t('results:title')}
             </Typography>
@@ -131,11 +134,7 @@ const Results = ({ formResultData, watch }: InputProps) => {
 
         <Box sx={formStyles.stackBoxWrapper}>
           <Stack sx={formStyles.stack} direction="row">
-            <Button
-              variant="contained"
-              sx={{ m: 4 }}
-              onClick={() => navigate('/')}
-            >
+            <Button sx={{ m: 4 }} onClick={() => navigate('/')}>
               {'<'} {t('results:backToMessage')}
             </Button>