#32 added response layout

KrisTheCanadian · Mar 16, 2022 · 3aa2dc1 · 3aa2dc1
1 parent 1d35c1a
commit 3aa2dc1
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/src/components/UpdateFormLayout/SymptomsIntensity.tsx b/src/components/UpdateFormLayout/SymptomsIntensity.tsx
@@ -81,13 +81,14 @@ export default function SymptomsIntensity({ changeStatus, selection }: any) {
         minHeight="95vh"
         width="100%"
         flexDirection="column"
-        sx={{ flexGrow: 1 }}
+        sx={{ flexGrow: 1, margin: 'auto' }}
         style={styles.centered}
       >
         <Paper
           sx={{
-            width: midSize ? '100%' : '70%',
+            width: midSize ? '100%' : 'auto',
             padding: 4,
+            margin: 'auto',
           }}
         >
           <Container
@@ -104,7 +105,7 @@ export default function SymptomsIntensity({ changeStatus, selection }: any) {
               <Container
                 sx={{
                   justifyContent: 'center',
-                  width: midSize ? '100%' : '70%',
+                  // width: midSize ? '100%' : '70%',
                   margin: 0,
                   paddingBottom: 2,
                   paddingTop: 2,
@@ -181,7 +182,7 @@ export default function SymptomsIntensity({ changeStatus, selection }: any) {
           </Container>
           <Container
             sx={{
-              marginLeft: '1rem',
+              // marginLeft: '1rem',
               marginTop: '2rem',
               flexDirection: 'column',
             }}

diff --git a/src/components/UpdateFormLayout/SymptomsUpdateResponse.tsx b/src/components/UpdateFormLayout/SymptomsUpdateResponse.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import {
+  Typography,
+  Link,
+  Paper,
+  useTheme,
+  useMediaQuery,
+  Grid,
+} from '@mui/material';
+
+export default function SymptomsUpdateResponse() {
+  const theme = useTheme();
+  const midSize = useMediaQuery(theme.breakpoints.down('md'));
+
+  return (
+    <Paper
+      sx={{
+        display: 'flex',
+        padding: 4,
+        justifyContent: 'center',
+        width: midSize ? '100%' : '50%',
+        margin: 'auto',
+      }}
+    >
+      <Grid
+        container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Grid item>
+          <Typography variant="h5" align="center">Your symptoms have been updated.</Typography>
+        </Grid>
+        <Grid item>
+          <Link href="/dashboard" variant="h6" align="center">Go back to dashboard</Link>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+}
diff --git a/src/components/UpdateFormLayout/SymptomsUpdating.tsx b/src/components/UpdateFormLayout/SymptomsUpdating.tsx
@@ -110,7 +110,7 @@ export default function SymptomsUpdating({ changeStatus, changeSymptoms }: any)
             <Container
               sx={{ display: 'flex',
                 justifyContent: 'center',
-                width: midSize ? '70%' : '50%',
+                width: midSize ? '100%' : '70%',
               }}
             >
               <FormControl component="fieldset">

diff --git a/src/components/UpdateFormLayout/UpdateSymptomsLayout.tsx b/src/components/UpdateFormLayout/UpdateSymptomsLayout.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import SymptomsQuestion from './SymptomsUpdating';
 import SymptomsIntensity from './SymptomsIntensity';
+import SymptomsUpdateResponse from './SymptomsUpdateResponse';
 
 export default function FormLayout({ changeState }: any) {
   const [status, setStatus] = useState('1');
@@ -14,6 +15,9 @@ export default function FormLayout({ changeState }: any) {
     case '2':
       layout = <SymptomsIntensity changeStatus={setStatus} selection={symptomsArray} />;
       break;
+    case 'response':
+      layout = <SymptomsUpdateResponse />;
+      break;
     default:
       layout = '';
   }