Refine UI

5 files changed, 126 insertions, 94 deletions

diff --git a/client/src/components/Card/CardAgreement.jsx b/client/src/components/Card/CardAgreement.jsx
index da35c91..77bb1a0 100644
--- a/client/src/components/Card/CardAgreement.jsx
+++ b/client/src/components/Card/CardAgreement.jsx
@@ -10,7 +10,7 @@ const CardAgreement = ({ title, image }) => {
     <>
       <div className={styles.card}>
         <img className={styles.card__image} src={image} alt="" />
-        <Typography>
+        <Typography align='center'>
           {t('I_HEREBY_CONFIRM_THE_IDENTITY_AND_ADDRESS')}
         </Typography>
       </div>
diff --git a/client/src/components/Card/CardAgreement.module.css b/client/src/components/Card/CardAgreement.module.css
index c9bdae8..c6b76cb 100644
--- a/client/src/components/Card/CardAgreement.module.css
+++ b/client/src/components/Card/CardAgreement.module.css
@@ -27,5 +27,5 @@
 }
 
 .card__image {
-  padding-bottom: 32px;
+  height: 80%;
 }
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index cf74d46..d3a5b90 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -68,6 +68,7 @@ const Agreement = ({ unverified, setUnverified }) => {
           type="submit"
           variant="contained"
           disabled={disabled}
+          sx={{ marginTop: '1rem' }}
           onClick={() => {
             mutate()
             setDisabled(true)
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index 20ea7d2..86f53f4 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -3,15 +3,7 @@ import React, { useState } from 'react'
 import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
 import styles from './DocumentScanner.module.css'
-import {
-  Button,
-  Grid,
-  Typography,
-  StepLabel,
-  Step,
-  Stepper,
-  Box
-} from '@mui/material'
+import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
@@ -45,15 +37,15 @@ const DocumentScanner = () => {
       DOB: doccu.DOB
     })
   })
-
+  console.log(activeStep)
   const handleNext = () => {
     if (activeStep === steps.length - 1) {
       setUserData({ ...userData, documents: documents })
     }
     if (
-      !userData.documents.POI ||
-      !userData.documents.POA ||
-      !userData.documents.DOB
+      (!documents.POI && activeStep === 0) ||
+      (!documents.POA && activeStep === 1) ||
+      (!documents.DOB && activeStep === 2)
     ) {
       toast.error(t('SCAN_YOUR_DOCUMENT'))
     } else {
@@ -68,67 +60,85 @@ const DocumentScanner = () => {
   const WebcamComponent = ({ doc }) => {
     return (
       <>
-        <div className={styles.card__container}>
-          {documents[doc] === '' ? (
-            <Webcam
-              audio={false}
-              height={400}
-              ref={webcamRef}
-              screenshotFormat="image/jpeg"
-              width={600}
-              videoConstraints={{
-                height: 400,
-                width: 600,
-                facingMode: 'user'
-              }}
+        <div className={styles.container}>
+          <button
+            className={styles.button}
+            disabled={activeStep === 0}
+            onClick={handleBack}
+          >
+            <img
+              src={`${process.env.PUBLIC_URL}/assets/images/back_inverse.svg`}
+              alt=""
+              className={styles.image}
             />
-          ) : (
-            <img src={documents[doc]} />
-          )}
+          </button>
+          <div className={styles.card__container}>
+            {documents[doc] === '' ? (
+              <Webcam
+                audio={false}
+                height={400}
+                ref={webcamRef}
+                screenshotFormat="image/jpeg"
+                width={600}
+                videoConstraints={{
+                  height: 400,
+                  width: 600,
+                  facingMode: 'user'
+                }}
+              />
+            ) : (
+              <img src={documents[doc]} />
+            )}
+          </div>
+          <button onClick={handleNext} className={styles.button}>
+            <img
+              src={`${process.env.PUBLIC_URL}/assets/images/next_inverse.svg`}
+              alt=""
+              className={styles.image}
+            />
+          </button>
+        </div>
+        <div className={styles.button__container}>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ margin: '0px 20px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              capture(doc)
+            }}
+          >
+            {t('SCAN')}
+          </Button>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ margin: '0px 20px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              doccu[doc] = ''
+              setDocuments({
+                ...documents,
+                POI: doccu.POI,
+                POA: doccu.POA,
+                DOB: doccu.DOB
+              })
+            }}
+          >
+            {t('RESET')}
+          </Button>
         </div>
-        <Grid container columnSpacing={10} justifyContent="center">
-          <Grid item sx={{}}>
-            <Button
-              color="primary"
-              size="large"
-              type="submit"
-              variant="contained"
-              onClick={(e) => {
-                e.preventDefault()
-                capture(doc)
-              }}
-            >
-              {t('SCAN')}
-            </Button>
-          </Grid>
-          <Grid item>
-            <Button
-              color="primary"
-              size="large"
-              type="submit"
-              variant="contained"
-              onClick={(e) => {
-                e.preventDefault()
-                doccu[doc] = ''
-                setDocuments({
-                  ...documents,
-                  POI: doccu.POI,
-                  POA: doccu.POA,
-                  DOB: doccu.DOB
-                })
-              }}
-            >
-              {t('RESET')}
-            </Button>
-          </Grid>
-        </Grid>
         <br></br>
         <div>
-          <Grid container justifyContent="center">
+          <div>
             <Typography align="center">
               {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
             </Typography>
-          </Grid>
+          </div>
         </div>
       </>
     )
@@ -139,8 +149,8 @@ const DocumentScanner = () => {
       <Header subheading={t('ENROLLMENT')} />
       <SubmitButton />
       <div className={styles.stepper__container}>
-        <Box sx={{ width: '60%', fontSize: '100px !important' }}>
-          <Stepper activeStep={activeStep}>
+        <div className={styles.box}>
+          <Stepper activeStep={activeStep} sx={{ width: '60%' }}>
             {steps.map((label, index) => {
               const stepProps = {}
               const labelProps = {}
@@ -157,14 +167,9 @@ const DocumentScanner = () => {
             })}
           </Stepper>
           {activeStep === steps.length ? (
-            <React.Fragment>
-              <Typography sx={{ mt: 2, mb: 1 }}>
-                {t('ALL_STEPS_COMPLETED')}
-              </Typography>
-              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-                <Box sx={{ flex: '1 1 auto' }} />
-              </Box>
-            </React.Fragment>
+            <Typography variant="h3" sx={{ mt: 8, mb: 1 }}>
+              {t('ALL_STEPS_COMPLETED')}
+            </Typography>
           ) : (
             <React.Fragment>
               {activeStep === 0 ? (
@@ -174,23 +179,9 @@ const DocumentScanner = () => {
               ) : (
                 activeStep === 2 && <WebcamComponent doc="DOB" />
               )}
-              <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-                <Button
-                  color="inherit"
-                  disabled={activeStep === 0}
-                  onClick={handleBack}
-                  sx={{ mr: 1 }}
-                >
-                  {t('BACK')}
-                </Button>
-                <Box sx={{ flex: '1 1 auto' }} />
-                <Button onClick={handleNext}>
-                  {activeStep === steps.length - 1 ? t('FINISH') : t('NEXT')}
-                </Button>
-              </Box>
             </React.Fragment>
           )}
-        </Box>
+        </div>
       </div>
     </>
   )
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
index 58baaa8..11cd176 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
@@ -1,6 +1,7 @@
 .card__container {
   display: flex;
   justify-content: center;
+  align-items: center;
   margin: 20px;
 }
 
@@ -8,3 +9,42 @@
   display: flex;
   justify-content: center;
 }
+
+.button__container {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.button {
+  background: transparent;
+  border: none;
+}
+
+.image {
+  height: 50px;
+  width: 50px;
+}
+
+.image:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+}
+
+.image:active {
+  transform: scale(0.98);
+}
+
+.box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file