From ffefbc1c2a382597c6d9f90977f8c907e26fbe2e Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Thu, 28 Jul 2022 17:51:44 +0530
Subject: Added components and some refactoring

---
 src/pages/Enrollment/Address/Address.jsx           | 47 ++++++++++++++++++
 src/pages/Enrollment/Address/Address.module.css    |  8 ++++
 .../Enrollment/DocumentScanner/DocumentScanner.jsx | 56 ++++++++++++++++++++++
 .../DocumentScanner/DocumentScanner.module.css     |  5 ++
 src/pages/Enrollment/FormOne/FormOne.jsx           | 41 ++++++++++++----
 src/pages/Enrollment/FormOne/FormOne.module.css    | 21 ++++++--
 src/pages/Enrollment/FormTwo/FormTwo.jsx           | 17 +++++++
 src/pages/Enrollment/FormTwo/FormTwo.module.css    |  1 +
 src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 52 ++++++++++++++++++++
 .../PhotoCapture/PhotoCapture.module.css           |  5 ++
 10 files changed, 240 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/Enrollment/Address/Address.jsx
 create mode 100644 src/pages/Enrollment/Address/Address.module.css
 create mode 100644 src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
 create mode 100644 src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
 create mode 100644 src/pages/Enrollment/FormTwo/FormTwo.jsx
 create mode 100644 src/pages/Enrollment/FormTwo/FormTwo.module.css
 create mode 100644 src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
 create mode 100644 src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css

(limited to 'src/pages/Enrollment')

diff --git a/src/pages/Enrollment/Address/Address.jsx b/src/pages/Enrollment/Address/Address.jsx
new file mode 100644
index 0000000..6a32bcf
--- /dev/null
+++ b/src/pages/Enrollment/Address/Address.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import Input from '../../../components/Input/Input'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+import styles from './Address.module.css'
+
+const Address = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.address}>
+        <div className={styles.address__container}>
+          <Input
+            id="houseNo"
+            label="House Number/ Apartment"
+            value="house"
+            type="text"
+          />
+          <Input
+            id="locality"
+            label="Area / Locality"
+            value="locality"
+            type="text"
+          />
+          <Input id="town" label="Village / Town" value="town" type="text" />
+          <Input
+            id="postOffice"
+            label="Post Office"
+            value="postOffice"
+            type="text"
+          />
+        </div>
+        <div className={styles.address__container}>
+          <Input id="street" label="Street / Road" value="street" type="text" />
+          <Input id="landmark" label="Landmark" value="landmark" type="text" />
+          <Input id="district" label="District" value="district" type="text" />
+          <Input id="pincode" label="Pincode" value="pincode" type="text" />
+        </div>
+      </div>
+      <Input id="state" label="State" value="state" type="text" />
+      <SubmitButton />
+    </>
+  )
+}
+
+export default Address
diff --git a/src/pages/Enrollment/Address/Address.module.css b/src/pages/Enrollment/Address/Address.module.css
new file mode 100644
index 0000000..60958ba
--- /dev/null
+++ b/src/pages/Enrollment/Address/Address.module.css
@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  justify-content: center;
+}
+
+.address__container {
+  margin: 0px 20px;
+}
diff --git a/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
new file mode 100644
index 0000000..1ca2558
--- /dev/null
+++ b/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './DocumentScanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const DocumentScanner = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Scan
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please place your document on the scanner.
+            <br />
+            Close the lid.
+            <br />
+            Wait for prompt to remove your document
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton />
+    </>
+  )
+}
+
+export default DocumentScanner
diff --git a/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/Enrollment/FormOne/FormOne.jsx b/src/pages/Enrollment/FormOne/FormOne.jsx
index 7233581..4ba274c 100644
--- a/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import Input from '../../../components/Input/Input'
+import LabelCard from '../../../components/LabelCard/LabelCard'
 import styles from './FormOne.module.css'
 
 const FormOne = () => {
@@ -27,20 +29,41 @@ const FormOne = () => {
         </span>
       </div>
 
-      <div className={styles.formone__fullname}>
-        <label htmlFor="fullName">Full Name</label>
-        <input
-          type="text"
-          id="fullName"
-          name="fullName"
-          value="Full Name"
-          required
+      <Input type="text" id="fullName" label="Full Name" value="Full Name" />
+
+      <div className={styles.formone__gender}>
+        <LabelCard
+          id="male"
+          name="gender"
+          title="Male"
+          image={`${process.env.PUBLIC_URL}/assets/images/male.svg`}
+        />
+        <LabelCard
+          id="female"
+          name="gender"
+          value="female"
+          title="Female"
+          image={`${process.env.PUBLIC_URL}/assets/images/female.svg`}
+        />
+        <LabelCard
+          id="trans"
+          name="gender"
+          value="trans"
+          title="Transgender"
+          image={`${process.env.PUBLIC_URL}/assets/images/trans.svg`}
         />
       </div>
 
       <div className={styles.formone__dob}>
         <label htmlFor="dob">Date of Birth</label>
-        <input type="date" id="dob" name="dob" value="Date of Birth" required />
+        <input
+          className={styles.formone__dob_input}
+          type="date"
+          id="dob"
+          name="dob"
+          value="Date of Birth"
+          required
+        />
       </div>
     </div>
   )
diff --git a/src/pages/Enrollment/FormOne/FormOne.module.css b/src/pages/Enrollment/FormOne/FormOne.module.css
index 6fbe371..35d1e49 100644
--- a/src/pages/Enrollment/FormOne/FormOne.module.css
+++ b/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -22,12 +22,25 @@
   height: 1.5rem;
 }
 
-.formone__fullname {
+.formone__gender {
+  display: flex;
+}
+
+.formone__dob {
   display: flex;
   flex-direction: column;
 }
 
-#fullName {
-  margin: 10px;
-  padding: 20px 10px;
+.formone__dob input[type='date']::-webkit-calendar-picker-indicator {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+
+.formone__dob_input {
+  width: 300px;
+  margin: 10px 0px;
+  padding: 11px 10px;
+  border: 3px solid;
+  border-radius: 10px;
 }
diff --git a/src/pages/Enrollment/FormTwo/FormTwo.jsx b/src/pages/Enrollment/FormTwo/FormTwo.jsx
new file mode 100644
index 0000000..56bcd70
--- /dev/null
+++ b/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import Input from '../../../components/Input/Input'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const FormTwo = () => {
+  return (
+    <div className="formtwo">
+      <Header subheading="Enrollment" />
+      <Input id="mobile" value="Mobile" label="Mobile" type="text" />
+      <Input id="email" value="Email" label="Email" type="email" />
+      <SubmitButton />
+    </div>
+  )
+}
+
+export default FormTwo
diff --git a/src/pages/Enrollment/FormTwo/FormTwo.module.css b/src/pages/Enrollment/FormTwo/FormTwo.module.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/pages/Enrollment/FormTwo/FormTwo.module.css
@@ -0,0 +1 @@
+
diff --git a/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
new file mode 100644
index 0000000..0b30848
--- /dev/null
+++ b/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import Header from '../../../components/Header/Header'
+import CardScanner from '../../../components/Card/CardScanner'
+import styles from './PhotoCapture.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+
+const PhotoCapture = () => {
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <div className={styles.card__container}>
+        <CardScanner
+          image={`${process.env.PUBLIC_URL}/assets/images/capture.svg`}
+        />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Capture
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+          >
+            Reset
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center">
+            Please look into the camera<br></br>
+            Click Capture to Capture the photo<br></br>
+            Click Reset the remove the captured photo
+          </Typography>
+        </Grid>
+      </div>
+    </>
+  )
+}
+
+export default PhotoCapture
diff --git a/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
new file mode 100644
index 0000000..ec59f61
--- /dev/null
+++ b/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css
@@ -0,0 +1,5 @@
+.card__container {
+    display: flex;
+    justify-content: center;
+  }
+  
\ No newline at end of file
-- 
cgit