Submit button add and radio select addd

10 files changed, 142 insertions, 2 deletions

diff --git a/public/assets/images/white-check.svg b/public/assets/images/white-check.svg
new file mode 100644
index 0000000..5b67374
--- /dev/null
+++ b/public/assets/images/white-check.svg
@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="100" height="100" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1_42" transform="scale(0.00390625)"/>
+</pattern>
+<image id="image0_1_42" width="256" height="256" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index ff09072..e351fd5 100644
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -18,7 +18,7 @@
 
 .card:active {
   transform: scale(0.98);
-  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
 }
 
 .card__title {
diff --git a/src/components/RadioSelect/RadioSelect.jsx b/src/components/RadioSelect/RadioSelect.jsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/RadioSelect/RadioSelect.jsx
diff --git a/src/components/RadioSelect/RadioSelect.module.css b/src/components/RadioSelect/RadioSelect.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/RadioSelect/RadioSelect.module.css
diff --git a/src/components/SubmitButton/SubmitButton.jsx b/src/components/SubmitButton/SubmitButton.jsx
new file mode 100644
index 0000000..567d923
--- /dev/null
+++ b/src/components/SubmitButton/SubmitButton.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './SubmitButton.module.css'
+
+const SubmitButton = ({ onClick }) => {
+  return (
+    <>
+      <button onClick={onClick} className={styles.submit}>
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
+          alt=""
+        />
+      </button>
+    </>
+  )
+}
+
+export default SubmitButton
diff --git a/src/components/SubmitButton/SubmitButton.module.css b/src/components/SubmitButton/SubmitButton.module.css
new file mode 100644
index 0000000..bb1b015
--- /dev/null
+++ b/src/components/SubmitButton/SubmitButton.module.css
@@ -0,0 +1,20 @@
+.submit {
+  position: absolute;
+  bottom: 100px;
+  right: 150px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submit:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.submit__image {
+  height: 75px;
+  width: 75px;
+}
diff --git a/src/pages/Enrollment/Enrollment.jsx b/src/pages/Enrollment/Enrollment.jsx
index 2aad1de..b8bbc81 100644
--- a/src/pages/Enrollment/Enrollment.jsx
+++ b/src/pages/Enrollment/Enrollment.jsx
@@ -1,7 +1,16 @@
 import React from 'react'
+import Header from '../../components/Header/Header'
+import SubmitButton from '../../components/SubmitButton/SubmitButton'
+import FormOne from './FormOne/FormOne'
 
 const Enrollment = () => {
-  return <div>Enrollment</div>
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <FormOne />
+      <SubmitButton />
+    </>
+  )
 }
 
 export default Enrollment
diff --git a/src/pages/Enrollment/FormOne/FormOne.jsx b/src/pages/Enrollment/FormOne/FormOne.jsx
new file mode 100644
index 0000000..7233581
--- /dev/null
+++ b/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import styles from './FormOne.module.css'
+
+const FormOne = () => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.formone__radio}>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Indian Resident</label>
+        </span>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Non-Residential Indian</label>
+        </span>
+      </div>
+
+      <div className={styles.formone__fullname}>
+        <label htmlFor="fullName">Full Name</label>
+        <input
+          type="text"
+          id="fullName"
+          name="fullName"
+          value="Full Name"
+          required
+        />
+      </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 />
+      </div>
+    </div>
+  )
+}
+
+export default FormOne
diff --git a/src/pages/Enrollment/FormOne/FormOne.module.css b/src/pages/Enrollment/FormOne/FormOne.module.css
new file mode 100644
index 0000000..6fbe371
--- /dev/null
+++ b/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -0,0 +1,33 @@
+.formone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.formone__radio {
+  display: flex;
+  align-items: center;
+}
+
+.formone__resident {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+}
+
+.formone__resident input[type='radio'] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.formone__fullname {
+  display: flex;
+  flex-direction: column;
+}
+
+#fullName {
+  margin: 10px;
+  padding: 20px 10px;
+}
diff --git a/src/styles/GlobalVariables.css b/src/styles/GlobalVariables.css
index fd76120..a1e3384 100644
--- a/src/styles/GlobalVariables.css
+++ b/src/styles/GlobalVariables.css
@@ -1,6 +1,8 @@
 :root {
   --color-black: #000;
+  --color-shadow: rgba(0, 0, 0, 0.24);
 
   --font-large: 4rem;
   --font-medium: 2rem;
+  --font-medium-s: 1.25rem;
 }