completed assignment UI

src/App.tsx

@@ -29,6 +29,9 @@ import TimeSlot from './components/timeSlot/TimeSlot';
 import Assignment from './pages/assignment/Assignment';
 import AssignmentDetails from './pages/assignment/AssignmentDetails';
 import SubmitAssignment from './pages/assignment/SubmitAssignment';
+import ReviewAssignment from './pages/assignment/ReviewAssignment';
+import AssignmentCompleted from './pages/assignment/AssignmentCompleted';
+import FinalInterview from './pages/FinalInterview/FinalInterview';
 
 
 
@@ -65,7 +68,15 @@ const App: React.FC = () => (
         <Route exact path="/SubmitAssignment">
           <SubmitAssignment />
         </Route>
-
+        <Route exact path="/ReviewAssignment">
+          <ReviewAssignment />
+        </Route>
+        <Route exact path="/assignmentCompleted">
+          <AssignmentCompleted />
+        </Route>
+        <Route exact path="/finalInterview">
+          <FinalInterview />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/pages/FinalInterview/FinalInterview.tsx

@@ -0,0 +1,14 @@
+import { IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+
+const FinalInterview: React.FC = () => {
+    return (
+        <IonPage>
+            <IonPage>
+                <StepHeader roundName="Final Interview" stepNumber={5} />
+            </IonPage>
+        </IonPage>
+    )
+}
+
+export default FinalInterview;

src/pages/assignment/AssignmentCompleted.module.scss

@@ -0,0 +1,72 @@
+.assignmentCompleted {
+
+    .description {
+        .icon {
+            margin-top: 4rem;
+            display: flex;
+            justify-content: center;
+            ion-icon {
+                width: 10rem;
+                height: 10rem;
+            }
+        }
+
+        .stepDescription {
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+                margin-top: 3rem;
+            }
+            p {
+                color: #868686;
+                font-size: 1.4rem;
+                text-align: center;
+                width: 90%;
+                margin: 0 auto;
+                margin-top: 2rem;
+                line-height: 1.8;
+            }
+        }
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        a{
+        text-decoration: none;
+
+        }
+
+        ion-button {
+            width: 18rem;
+            height: 5rem;
+        }
+
+        .dashboard {
+            ion-button {
+                margin-top: 35vh;
+                margin-bottom: 0;
+                --background: transparent;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --border-style: solid;
+                --color: var(--primary-button-color);
+            }
+        }
+
+        .nextStep {
+            ion-button {
+                margin-top: 35vh;
+                margin-bottom: 0;
+                --background: var(--primary-button-color);
+            }
+        }
+        
+
+    }
+}

src/pages/assignment/AssignmentCompleted.tsx

@@ -0,0 +1,41 @@
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import { Link } from "react-router-dom";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import styles from "./AssignmentCompleted.module.scss";
+import assignmentImage from "../../assets/icons/Assignment.svg";
+
+const AssignmentCompleted: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+            <IonContent className={styles.assignmentCompleted}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={assignmentImage} />
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>We have seen your Assignment</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                </div>
+
+                <div className={styles.buttonHolder}>
+                    <Link to="/interviewRounds"
+                        className={styles.dashboard}>
+                        <IonButton shape="round" expand='block'>Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/finalInterview"
+                        className={styles.nextStep}>
+                        <IonButton shape="round" expand='block'>Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default AssignmentCompleted;

src/pages/assignment/AssignmentDetails.tsx

@@ -35,7 +35,7 @@ const AssignmentDetails: React.FC = () => {
                         </div>
                     </div>
 
-                    <Link to="./SubmitAssignment">
+                    <Link to="/SubmitAssignment">
                         <IonButton shape="round" expand='block'>Accept</IonButton>
                     </Link>
                     <div className={styles.wish}>All the best!</div>

src/pages/assignment/ReviewAssignment.tsx

@@ -1,8 +1,35 @@
+import styles from "./Assignment.module.scss";
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import assignmentImage from "../../assets/icons/Assignment.svg";
+import { Link } from "react-router-dom";
+
+
 const ReviewAssignment: React.FC = () => {
     return (
-        <div>
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+            <IonContent className={styles.assignment}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={assignmentImage} />
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>You are one step ahead to the final round</h4>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                </div>
 
-        </div>
+                <Link to="/assignmentCompleted"
+                    className={styles.assignmentButton}>
+                    <IonButton shape="round" expand='block'>Okay</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
     );
 }
 

src/pages/assignment/SubmitAssignment.tsx

@@ -33,7 +33,7 @@ const SubmitAssignment: React.FC = () => {
                 <div className={styles.inputHolder}>
                     <Input placeholder="Insert the project Link" icon={linkOutline} />
                 </div>
-                <Link to="/assignmentDetails"
+                <Link to="/ReviewAssignment"
                     className={styles.submitAssigment}>
                     <IonButton shape="round" expand='block'>Submit</IonButton>
                 </Link>