styles closing docs page

src/App.tsx

@@ -33,6 +33,7 @@ import ReviewAssignment from './pages/assignment/ReviewAssignment';
 import AssignmentCompleted from './pages/assignment/AssignmentCompleted';
 import FinalInterview from './pages/FinalInterview/FinalInterview';
 import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult';
+import ClosingDocs from './pages/closingDocs/ClosingDocs';
 
 
 
@@ -81,6 +82,10 @@ const App: React.FC = () => (
         <Route exact path="/finalInterview/results">
           <FinalInterviewResult />
         </Route>
+        <Route exact path="/closingDocs">
+          <ClosingDocs />
+        </Route>
+
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/check.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.262" viewBox="0 0 16 12.262">
+  <path id="check" d="M16.562,4.15a.956.956,0,0,1-.289.7L8.8,12.325l-1.4,1.4a1,1,0,0,1-1.4,0l-1.4-1.4L.851,8.589a1,1,0,0,1,0-1.4l1.4-1.4a.956.956,0,0,1,.7-.289.956.956,0,0,1,.7.289L6.693,8.826l6.771-6.781a1,1,0,0,1,1.4,0l1.4,1.4a.956.956,0,0,1,.289.7Z" transform="translate(-0.562 -1.756)" fill="#33ce93"/>
+</svg>

src/assets/icons/upload.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path id="uploadalt" d="M13.125,15H1.875a1.807,1.807,0,0,1-1.326-.549A1.8,1.8,0,0,1,0,13.125V11.719a.9.9,0,0,1,.278-.659.9.9,0,0,1,.659-.278.9.9,0,0,1,.659.278.9.9,0,0,1,.278.659v.469a.925.925,0,0,0,.938.938h9.375a.925.925,0,0,0,.938-.937v-.469a.938.938,0,0,1,1.875,0v1.406A1.875,1.875,0,0,1,13.125,15Zm-.308-9.375H9.375v4.688a.925.925,0,0,1-.937.938H6.563a.925.925,0,0,1-.938-.937V5.625H2.168q-.22,0-.271-.088t.125-.278l5-5.054a.672.672,0,0,1,.967,0l4.995,5.054q.176.19.117.278t-.278.088Z" transform="translate(0)" fill="#33ce93"/>
+</svg>

src/pages/closingDocs/ClosingDocs.module.scss

@@ -0,0 +1,74 @@
+.closingDocs {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    height: 88vh;
+
+    .closingDocsImg {
+        width: 12rem;
+        height: 12rem;
+    }
+
+    .docsHeader {
+        color: #363636;
+        font-size: 2.4rem;
+        font-weight: 300;
+        text-align: center;
+    }
+
+    .docsSubHeader {
+        color: #868686;
+        font-size: 1.6rem;
+        font-weight: 600;
+    }
+
+    .uploadDocsHolder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        height: 30vh;
+        width: 95%;
+
+        .docs {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 95%;
+            margin: 0 auto;
+            
+            .docsName {
+                font-size: 1.2rem;
+            }
+
+            .iconBorder {
+                border: 0.1rem solid var(--primary-button-color);
+                border-radius: 50%;
+                width: 3rem;
+                height: 3rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+    }
+
+    .closingDocsButton {
+        width: 95%;
+        margin: 0 auto;
+        text-decoration: none;
+        
+        ion-button {
+            width: 100%;
+            --background: #DDDDDD;
+        }
+    }
+
+    .active {
+        ion-button {
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/closingDocs/ClosingDocs.tsx

@@ -0,0 +1,76 @@
+import styles from "./ClosingDocs.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import StepHeader from "../../components/stepsHeader/StepHeader"
+import closingDocsImg from '../../assets/icons/Closing_Docs.svg';
+import uploadIcon from "../../assets/icons/upload.svg";
+import checkIcon from "../../assets/icons/check.svg";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+
+const ClosingDocs: React.FC = () => {
+
+    const [isUploaded, setUploaded] = useState<boolean>(false);
+
+    return (
+        <IonPage>
+            <StepHeader roundName="Closing Docs" stepNumber={6} />
+            <IonContent>
+                <div className={styles.closingDocs} >
+
+                    <IonIcon src={closingDocsImg} className={styles.closingDocsImg} />
+                    <h4 className={styles.docsHeader}>Upload your docs to join our team</h4>
+                    {/* <div> */}
+                    <div className={styles.docsSubHeader}>Gather all documents as mentioned below:</div>
+                    <div className={styles.uploadDocsHolder}>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>ID proof(Aadhar)</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>convocation certificate</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>Experience Letter</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                        <div className={styles.docs}>
+                            <div className={styles.docsName}>Last 3 months Payslips</div>
+                            {!isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={uploadIcon} onClick={() => setUploaded(true)} />
+                            </div>}
+                            {isUploaded && <div className={styles.iconBorder}>
+                                <IonIcon src={checkIcon} />
+                            </div>}
+                        </div>
+                    </div>
+                    {/* </div> */}
+
+                    <Link to="/"
+                        className={styles.closingDocsButton + " " + (isUploaded && styles.active)}>
+                        <IonButton shape="round" expand='block'>Proceed</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default ClosingDocs;