styled closing Docs verified component

src/App.tsx

@@ -34,6 +34,7 @@ import AssignmentCompleted from './pages/assignment/AssignmentCompleted';
 import FinalInterview from './pages/FinalInterview/FinalInterview';
 import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult';
 import ClosingDocs from './pages/closingDocs/ClosingDocs';
+import VerifiedDocs from './pages/closingDocs/VerifiedDocs';
 
 
 
@@ -85,6 +86,9 @@ const App: React.FC = () => (
         <Route exact path="/closingDocs">
           <ClosingDocs />
         </Route>
+        <Route exact path="/verifiedDocs">
+          <VerifiedDocs />
+        </Route>
 
         <Route exact path="/">
           <Redirect to="/interviewRounds" />

src/pages/closingDocs/ClosingDocs.module.scss

@@ -40,7 +40,8 @@
             margin: 0 auto;
             
             .docsName {
-                font-size: 1.2rem;
+                font-size: 1.4rem;
+                color: #868686;
             }
 
             .iconBorder {

src/pages/closingDocs/ClosingDocs.tsx

@@ -21,7 +21,6 @@ const ClosingDocs: React.FC = () => {
 
                     <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}>
@@ -61,9 +60,7 @@ const ClosingDocs: React.FC = () => {
                             </div>}
                         </div>
                     </div>
-                    {/* </div> */}
-
-                    <Link to="/"
+                    <Link to="/verifiedDocs"
                         className={styles.closingDocsButton + " " + (isUploaded && styles.active)}>
                         <IonButton shape="round" expand='block'>Proceed</IonButton>
                     </Link>

src/pages/closingDocs/VerifiedDocs.module.scss

@@ -0,0 +1,71 @@
+.verifiedDocsContent {
+
+    .closingDocsDescription {
+        height: 75vh;
+        ion-icon {
+            width: 12.8rem;
+            height: 12.8rem;
+            width: 100%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .heading {
+            color: lighten($color: #363636, $amount: 10%);
+            font-size: 2.4rem;
+            font-weight: 300;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh;
+        }
+    
+        .description {
+            font-size: 1.4rem;
+            color: #868686;
+            text-align: center;
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 4vh
+        }
+    }
+   
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+        // margin-top: 20vh;
+
+        a{
+          text-decoration: none;
+        }
+
+        ion-button {
+            width: 18rem;
+            height: 5rem;
+        }
+
+        .dashboardButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .nextStepButton {
+            ion-button {
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/closingDocs/VerifiedDocs.tsx

@@ -0,0 +1,34 @@
+import styles from "./VerifiedDocs.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 { Link } from "react-router-dom";
+
+
+const VerifiedDocs: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Closing Docs" stepNumber={6} />
+            <IonContent className={styles.verifiedDocsContent}>
+                <div className={styles.closingDocsDescription}>
+                    <IonIcon src={closingDocsImg} />
+                    <h4 className={styles.heading}>We have verified your Docs</h4>
+                    <p className={styles.description}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
+                </div>
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds" className={styles.dashboardButton}>
+                        <IonButton shape="round">Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/joiningLetter" className={styles.nextStepButton}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default VerifiedDocs;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -63,7 +63,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: finalInterview,
             buttonText: "Schedule meeting",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/finalInterview"
         },
         {
             stepNumber: 6,
@@ -71,7 +71,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: closingDocs,
             buttonText: "Upload docs",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/closingDocs"
         },
         {
             stepNumber: 7,
@@ -79,7 +79,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: joiningLetter,
             buttonText: "Show details",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/joiningLetter"
         },
         {
             stepNumber: 8,
@@ -87,7 +87,7 @@ const InterviewRounds: React.FC = () => {
             descriptionImage: Celebrations,
             buttonText: "Join Workex",
             isUnlocked: false,
-            link: "/assignment"
+            link: "/celebration"
         },
     ];