Added components and some refactoring

2 files changed, 49 insertions, 13 deletions

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;
 }