completed assignment UI

package-lock.json

@@ -24,6 +24,7 @@
         "@types/react-dom": "^16.9.10",
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
+        "date-fns": "^2.28.0",
         "ionicons": "^5.4.0",
         "node": "^17.7.2",
         "node-sass": "^7.0.1",
@@ -6225,6 +6226,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -21168,6 +21181,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
+      "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "^16.9.10",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "date-fns": "^2.28.0",
     "ionicons": "^5.4.0",
     "node": "^17.7.2",
     "node-sass": "^7.0.1",

src/App.tsx

@@ -26,6 +26,12 @@ import Quiz from './pages/Quiz/Quiz';
 import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults';
 import TechnicalInterview from './pages/technicalInterview/TechnicalInterview';
 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';
 
 
 
@@ -53,8 +59,23 @@ const App: React.FC = () => (
         <Route exact path="/technicalInterview">
           <TechnicalInterview />
         </Route>
-        <Route exact path="/timeSlot">
-          <TimeSlot />
+        <Route exact path="/assignment">
+          <Assignment />
+        </Route>
+        <Route exact path="/assignmentDetails">
+          <AssignmentDetails />
+        </Route>
+        <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" />

src/assets/icons/link.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.69" height="19.69" viewBox="0 0 19.69 19.69">
+  <path id="link" d="M17.719,14.824a1.117,1.117,0,0,0-.338-.82l-2.509-2.509a1.117,1.117,0,0,0-.82-.338,1.149,1.149,0,0,0-.869.386l.229.223q.193.187.259.259t.181.229a.958.958,0,0,1,.157.308,1.256,1.256,0,0,1,.042.332,1.154,1.154,0,0,1-1.158,1.158,1.222,1.222,0,0,1-.332-.042.982.982,0,0,1-.308-.157,2.64,2.64,0,0,1-.229-.181q-.072-.067-.259-.259l-.223-.229a1.171,1.171,0,0,0-.4.881,1.117,1.117,0,0,0,.338.82l2.486,2.5a1.112,1.112,0,0,0,.82.326,1.162,1.162,0,0,0,.82-.314l1.773-1.762a1.1,1.1,0,0,0,.338-.809ZM9.238,6.318A1.117,1.117,0,0,0,8.9,5.5L6.415,3a1.117,1.117,0,0,0-.82-.338,1.165,1.165,0,0,0-.82.326L3,4.75a1.1,1.1,0,0,0-.338.809A1.117,1.117,0,0,0,3,6.379L5.51,8.888a1.112,1.112,0,0,0,.82.326A1.166,1.166,0,0,0,7.2,8.84L6.97,8.617q-.193-.187-.26-.259a2.763,2.763,0,0,1-.181-.229.974.974,0,0,1-.157-.308,1.212,1.212,0,0,1-.042-.332A1.154,1.154,0,0,1,7.489,6.33a1.222,1.222,0,0,1,.332.042.981.981,0,0,1,.308.157,2.64,2.64,0,0,1,.229.181q.072.067.259.259L8.84,7.2a1.171,1.171,0,0,0,.4-.881Zm10.8,8.505a3.292,3.292,0,0,1-1.026,2.449l-1.773,1.762a3.48,3.48,0,0,1-4.91-.024l-2.486-2.5a3.331,3.331,0,0,1-1-2.449A3.394,3.394,0,0,1,9.9,11.542L8.84,10.48A3.38,3.38,0,0,1,6.33,11.542a3.35,3.35,0,0,1-2.461-1.013L1.359,8.019A3.35,3.35,0,0,1,.346,5.558,3.292,3.292,0,0,1,1.372,3.109L3.145,1.348a3.331,3.331,0,0,1,2.449-1A3.3,3.3,0,0,1,8.055,1.372l2.486,2.5a3.331,3.331,0,0,1,1,2.449A3.394,3.394,0,0,1,10.48,8.84L11.542,9.9a3.5,3.5,0,0,1,4.97-.049l2.509,2.509a3.35,3.35,0,0,1,1.013,2.461Z" transform="translate(-0.346 -0.346)" fill="#fff"/>
+</svg>

src/components/formInput/Input.module.scss

@@ -17,8 +17,8 @@ $dim-grey: #696969;
 }
 
 ion-icon {
-    width: 1rem;
-    height: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
 }
 
 ion-input {

src/components/stepsHeader/StepHeader.tsx

@@ -2,6 +2,7 @@ import styles from './StepHeader.module.scss';
 
 import { IonHeader, IonIcon } from '@ionic/react';
 import { closeOutline } from 'ionicons/icons'
+import { Link } from 'react-router-dom';
 
 interface Props {
     stepNumber: number;
@@ -15,7 +16,9 @@ const StepHeader: React.FC<Props> = (props) => {
                 <div className={styles.step}>Step {props.stepNumber}</div>
                 <h3 className={styles.roundName}>{props.roundName}</h3>
             </div>
+            {/* <Link to="/interviewRounds"> */}
             <IonIcon icon={closeOutline}></IonIcon>
+            {/* </Link> */}
         </header>
     )
 }

src/components/timeSlot/TimeSlot.module.scss

@@ -78,12 +78,30 @@
     text-decoration: none;
 
     ion-button {
-        margin-top: 28vh;
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 18vh;
         margin-bottom: 0;
+        --background: #DDDDDD;
+       
     }
 }
 
 .active {
-    color: #33CE93;
+    
     box-shadow: 0px 0px 10px #00000039;
-}
+    div {
+        color: #33CE93;
+    }
+}
+
+.activeTime {
+    color: #33CE93 !important;
+    box-shadow: 0px 0px 10px #00000039;
+}
+
+.buttonActive {
+    ion-button {
+        --background: var(--primary-button-color);
+    }
+}   

src/components/timeSlot/TimeSlot.tsx

@@ -1,13 +1,67 @@
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import styles from "./TimeSlot.module.scss";
-import { chevronBack } from 'ionicons/icons'
+import { chevronBack, key } from 'ionicons/icons'
 import { Link } from "react-router-dom";
+import { useState } from "react";
+import { addDays } from "date-fns";
+
+
+interface dates {
+    date: string;
+    day: string;
+}
 
-interface OwnProps {
 
+interface OwnProps {
+    month: string;
+    dates: dates[];
+    timeSlots: string[];
+    getDate: (date: string) => void;
 }
 
-const TimeSlot: React.FC = () => {
+const TimeSlot: React.FC<OwnProps> = (props) => {
+
+    const [highlightedDate, setHighlightedDate] = useState<dates>();
+    const [highlightedTime, setHighlightedTime] = useState<string>("");
+
+    const daysMap = new Map([[0, "Sun"], [1, "Mon"], [2, "Tue"], [3, "Wed"], [4, "Thu"], [5, "Fri"], [6, "Sat"]]);
+
+    const dates = props.dates.map((date, key) => {
+        const currentDate = new Date();
+        let day = addDays(currentDate, key + 1)
+        // if (daysMap.get(day) === "Thu") {  // sat
+        //     day = addDays(currentDate, key + 3).getDay();
+        // } else if (daysMap.get(day) === "Fri") {
+        //     day = addDays(currentDate, key + 3).getDay();
+        // }
+        return (
+            <div
+                className={styles.date + " " + (date === highlightedDate ? styles.active : "")}
+                key={key}
+                onClick={() => setHighlightedDate(date)}>
+
+                <div className={styles.day}>
+                    {daysMap.get(day.getDay())}
+                </div>
+                <div>
+                    {day.getDate()}
+                </div>
+
+            </div>
+        );
+    });
+
+    const timeSlots = props.timeSlots.map((timeSlot, key) => {
+        return (
+            <div
+                className={styles.time + " " + (timeSlot === highlightedTime ? styles.activeTime : "")}
+                key={key}
+                onClick={() => setHighlightedTime(timeSlot)}>
+                {timeSlot}
+            </div>
+        );
+    });
+
     return (
         <IonPage>
             <header className={styles.header}>
@@ -17,37 +71,21 @@ const TimeSlot: React.FC = () => {
 
             <IonContent>
                 <div className={styles.month}>
-                    April-May
+                    {props.month}
                 </div>
 
                 <div className={styles.dateSlotHolder}>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Tue</div>
-                        <div>27</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Sat</div>
-                        <div>29</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Mon</div>
-                        <div>01</div>
-                    </div>
-                    <div className={styles.date}>
-                        <div className={styles.day}>Wed</div>
-                        <div>03</div>
-                    </div>
+                    {dates}
                 </div>
 
                 <div className={styles.timeSlotHolder}>
-                    <div className={styles.time}>11:00 AM - 1:00 pm</div>
-                    <div className={styles.time}>1:00 PM - 3:00 pm</div>
-                    <div className={styles.time}>3:00 PM - 5:00 pm</div>
+                    {timeSlots}
                 </div>
 
-                <Link to="/" className={styles.timeSlotButton}>
-                    <IonButton shape="round" expand='block'>Confirm for Apr 29, 2021, 11:00 AM</IonButton>
-                </Link>
+                <div onClick={(highlightedDate && highlightedTime !== "") ? () => props.getDate("test") : undefined}
+                    className={styles.timeSlotButton + " " + (highlightedDate && highlightedTime !== "" ? styles.buttonActive : "")}>
+                    <IonButton shape="round" expand='block' >Confirm slot</IonButton>
+                </div>
             </IonContent>
 
         </IonPage>

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/Quiz/Quiz.tsx

@@ -1,6 +1,6 @@
 import styles from './Quiz.module.scss';
 
-import { IonButton, IonCheckbox, IonIcon, IonItem, IonLabel, IonPage, IonRadio } from '@ionic/react';
+import { IonButton, IonIcon } from '@ionic/react';
 import Options from './Options';
 import { closeOutline } from 'ionicons/icons'
 import { Link } from 'react-router-dom';

src/pages/assignment/Assignment.module.scss

@@ -0,0 +1,46 @@
+.assignment {
+
+    .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;
+            }
+        }
+    }
+
+    .assignmentButton {
+        text-decoration: none;
+        
+        ion-button {
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 35vh;
+            margin-bottom: 0;
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/assignment/Assignment.tsx

@@ -0,0 +1,36 @@
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import assignmentImage from "../../assets/icons/Assignment.svg";
+import styles from "./Assignment.module.scss";
+import { Link } from "react-router-dom";
+
+const Assignment: React.FC = () => {
+
+    return (
+        <IonPage>
+            <StepHeader stepNumber={4} roundName="Assignment" />
+            <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>
+
+                <Link to="/assignmentDetails"
+                    className={styles.assignmentButton}>
+                    <IonButton shape="round" expand='block'>Show Details</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default Assignment;

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.module.scss

@@ -0,0 +1,90 @@
+.assignmentDetails {
+
+    .assignmentTask {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        justify-content: space-around;
+        height: 44vh;
+        width: 90%;
+        margin: 0 auto;
+
+        .heading {
+            color: #363636;
+            font-weight: 300;
+            font-size: 2.4rem;
+        }
+    
+        .description {
+            color: #868686;
+            font-size: 1.4rem;
+            line-height: 2.8rem;
+    
+        }
+    }
+
+    .taskDescription {
+        height: 44vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        background-color: #151515;
+        background-image: url("../../assets/icons/desktop-particles-2.svg");
+        background-repeat: no-repeat;
+        background-position: 25% 30%;
+        border-top-right-radius: 75%;
+    
+    
+        &::before {
+            position: absolute;
+            content:" ";
+            top: 50%;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            background-color: #151515;
+            height: 30vh; 	
+            transform: skewY(5deg);
+            z-index: -1;
+        }
+    
+        .heading {
+            color: #BCBCBC;
+            font-weight: 300;
+            letter-spacing: 0.024rem;
+            font-size: 2.4rem;
+            margin-left: 2rem;
+        }
+    
+        .description {
+            margin-left: 2rem;
+            .textHolder {
+                display: flex;
+                margin-bottom: 2rem;
+                .text {
+                    color: #E5E5E5;
+                    font-size: 1.4rem;
+                    font-weight: 600;
+                    margin-left: 2rem;
+                }
+            }
+        }
+        a {
+            text-decoration: none;
+        }
+        ion-button {
+            --background: var(--primary-button-color);
+            font-weight: 500;
+            font-family: 'Poppins', sans-serif;
+            width: 90%;
+            margin: 0 auto;
+        }
+    
+        .wish {
+            color: #E5E5E5;
+            font-size: 1.8rem;
+            text-align: center;
+        }
+    }
+}

src/pages/assignment/AssignmentDetails.tsx

@@ -0,0 +1,49 @@
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import questionIcon from '../../assets/icons/question-circle-fill.svg';
+import checkIcon from '../../assets/icons/check-circle-fill.svg';
+import timeIcon from '../../assets/icons/time.svg';
+
+import styles from "./AssignmentDetails.module.scss";
+import { Link } from "react-router-dom";
+
+const AssignmentDetails: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+            <IonContent className={styles.assignmentDetails}>
+                <div className={styles.assignmentTask}>
+                    <h4 className={styles.heading}>Make a text analyser from a text file</h4>
+                    <p className={styles.description}>
+                        Make an api with Node which accepts a text file and I was supposed to return the most repeated words in it. A huge text file (around 7 mb) was given to me as an example. Here is the code if anywants to know how I built it https://github.com/fayazara/text-analyser
+                    </p>
+                </div>
+                <div className={styles.taskDescription}>
+                    <h4 className={styles.heading}>Details</h4>
+                    <div className={styles.description}>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={questionIcon}></IonIcon>
+                            <div className={styles.text}>Weekend Project</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={timeIcon}></IonIcon>
+                            <div className={styles.text}>Before Monday, 01 May 2021</div>
+                        </div>
+                        <div className={styles.textHolder}>
+                            <IonIcon src={checkIcon}></IonIcon>
+                            <div className={styles.text}>Note: 85% of results minimum</div>
+                        </div>
+                    </div>
+
+                    <Link to="/SubmitAssignment">
+                        <IonButton shape="round" expand='block'>Accept</IonButton>
+                    </Link>
+                    <div className={styles.wish}>All the best!</div>
+
+                </div>
+            </IonContent>
+        </IonPage>
+    );
+};
+
+export default AssignmentDetails;

src/pages/assignment/ReviewAssignment.tsx

@@ -0,0 +1,36 @@
+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 (
+        <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>
+
+                <Link to="/assignmentCompleted"
+                    className={styles.assignmentButton}>
+                    <IonButton shape="round" expand='block'>Okay</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default ReviewAssignment;

src/pages/assignment/SubmitAssignment.module.scss

@@ -0,0 +1,45 @@
+.submitAssignment {
+    .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;
+            }
+        }
+    }
+    .inputHolder {
+        margin-top: 5rem;
+    }
+    .submitAssigment {
+        text-decoration: none;
+        ion-button {
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 12rem;
+            --background: var(--primary-button-color);
+        }
+    }
+}

src/pages/assignment/SubmitAssignment.tsx

@@ -0,0 +1,45 @@
+import styles from "./SubmitAssignment.module.scss";
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import assignmentImage from "../../assets/icons/Assignment.svg";
+import StepHeader from "../../components/stepsHeader/StepHeader";
+import Input from "../../components/formInput/Input";
+import linkIcon from "../../assets/icons/link.svg";
+import time from "../../assets/icons/time.svg";
+import { linkOutline } from 'ionicons/icons'
+import { Link } from "react-router-dom";
+
+
+const SubmitAssignment: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader roundName="Assignment" stepNumber={4} />
+
+            <IonContent className={styles.submitAssignment}>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={assignmentImage} />
+
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>Submit 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.inputHolder}>
+                    <Input placeholder="Insert the project Link" icon={linkOutline} />
+                </div>
+                <Link to="/ReviewAssignment"
+                    className={styles.submitAssigment}>
+                    <IonButton shape="round" expand='block'>Submit</IonButton>
+                </Link>
+            </IonContent>
+        </IonPage>
+    );
+}
+
+export default SubmitAssignment;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -19,6 +19,7 @@ interface stepDetail {
     descriptionImage: string;
     buttonText: string;
     isUnlocked: boolean;
+    link: string;
 }
 
 const InterviewRounds: React.FC = () => {
@@ -29,56 +30,64 @@ const InterviewRounds: React.FC = () => {
             stepName: "Skill Information",
             descriptionImage: skillInfo,
             buttonText: "Let's start now",
-            isUnlocked: true
+            isUnlocked: true,
+            link: "/skillInformationStep"
         },
         {
             stepNumber: 2,
             stepName: "Preliminary Round",
             descriptionImage: preliminaryRound,
             buttonText: "Let's do this",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/preliminaryRound"
         },
         {
             stepNumber: 3,
             stepName: "Technical Interview",
             descriptionImage: technicalInterview,
             buttonText: "Schedule meeting",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/technicalInterview"
         },
         {
             stepNumber: 4,
             stepName: "Assignment",
             descriptionImage: assignment,
             buttonText: "Show details",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 5,
             stepName: "Final Interview",
             descriptionImage: finalInterview,
             buttonText: "Schedule meeting",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 6,
             stepName: "Closing Docs",
             descriptionImage: closingDocs,
             buttonText: "Upload docs",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 7,
             stepName: "Joining Letter",
             descriptionImage: joiningLetter,
             buttonText: "Show details",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
         {
             stepNumber: 8,
             stepName: "Celebrations",
             descriptionImage: Celebrations,
             buttonText: "Join Workex",
-            isUnlocked: false
+            isUnlocked: false,
+            link: "/assignment"
         },
     ];
 
@@ -98,7 +107,8 @@ const InterviewRounds: React.FC = () => {
                 descriptionImage={step.descriptionImage}
                 buttonText={step.buttonText}
                 setDescription={setDescription}
-                showDescription={(stepNo === step.stepNumber) ? true : false} />
+                showDescription={(stepNo === step.stepNumber) ? true : false}
+                link={step.link} />
         );
     });
 

src/pages/interviewRounds/StepDescreption.module.scss

@@ -56,6 +56,7 @@
         animation-fill-mode: forwards;
     }
     .button {
+        text-decoration: none;
         animation: fadeInAnimation ease 0.2s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;

src/pages/interviewRounds/StepDescreption.tsx

@@ -1,8 +1,9 @@
 import styles from './StepDescreption.module.scss';
 
 import { IonButton, IonIcon } from '@ionic/react';
-import { lockOpen, lockClosed } from 'ionicons/icons'
+import { lockOpen, lockClosed } from 'ionicons/icons';
 import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 interface Props {
     stepNumber: number;
@@ -10,6 +11,7 @@ interface Props {
     isUnlocked: boolean;
     buttonText: string;
     descriptionImage: string;
+    link: string;
 }
 
 const StepsDescription: React.FC<Props> = (props) => {
@@ -42,9 +44,9 @@ const StepsDescription: React.FC<Props> = (props) => {
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <div className={styles.button}>
+            <Link to={props.link} className={styles.button}>
                 <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
-            </div>
+            </Link>
 
         </div>
     );

src/pages/interviewRounds/Steps.tsx

@@ -10,6 +10,7 @@ interface Props {
     showDescription?: boolean;
     buttonText: string;
     descriptionImage: string;
+    link: string;
     setDescription: (stepNumber: number) => void;
     // rename to select step
 }
@@ -24,7 +25,8 @@ const Steps: React.FC<Props> = (props) => {
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}
                 buttonText={props.buttonText}
-                descriptionImage={props.descriptionImage} /> :
+                descriptionImage={props.descriptionImage}
+                link={props.link} /> :
                 <div className={styles.stepHolder}>
                     <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
 

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -3,8 +3,6 @@ import styles from "./PreliminaryRoundResults.module.scss"
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
 
-import checkIcon from "../../assets/icons/check-circle-fill.svg";
-import closeIcon from "../../assets/icons/close-filled.svg";
 import goodJobIcon from "../../assets/icons/good_job.svg";
 
 import { closeCircle, checkmarkCircle } from "ionicons/icons";

src/pages/skillInformationStep/SkillInformationStep.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.skillInfo {
     .description {
         text-align: center;
         width: 85%;

src/pages/skillInformationStep/SkillInformationStep.tsx

@@ -120,7 +120,7 @@ const SkillInformationStep: React.FC = () => {
             <StepHeader
                 stepNumber={1}
                 roundName="Skill Information" />
-            <IonContent>
+            <IonContent className={styles.skillInfo}>
                 <div className={styles.description}>
                     <h3 className={styles.heading}>What are you good at?</h3>
 

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -1,4 +1,7 @@
 ion-content {
+    display: fixed;
+    height: 100vh;
+    width: 100vw;
     .description {
         ion-icon {
             width: 15rem;
@@ -8,31 +11,127 @@ ion-content {
             margin-top: 4rem;
         }
 
-        h4 {
-            color: #363636;
-            text-align: center;
-            font-size: 2.4rem;
-            font-weight: 300;
-            letter-spacing: 0.024rem;
-            margin-top: 3rem;
+        .meet {
+            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;
+            }
         }
-        p {
-            color: #868686;
-            font-size: 1.4rem;
-            text-align: center;
-            width: 90%;
-            margin: 0 auto;
-            margin-top: 2rem;
-            line-height: 1.8;
+
+        .countdown {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            height: 45vh;
+            justify-content: space-around;
+            h4 {
+                color: #363636;
+                text-align: center;
+                font-size: 2.4rem;
+                font-weight: 300;
+                letter-spacing: 0.024rem;
+            }
+            .timeLeft {
+                .time {
+                    font-size: 3.6rem;
+                    font-weight: 600;
+                    color: #363636;
+                    letter-spacing: 0.036rem;
+                }
+                .days {
+                    font-size: 1.3rem;
+                    color: #9F9F9F;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: 95%;
+                    margin: 0 auto;
+                    text-align: center;
+                }
+            }
+            .icon {
+                width: 6rem;
+                height: 6rem;
+                background-color: #33CE93;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                ion-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    margin: 0;
+                }
+            }
+            
         }
+
     }
 
     .techinicalInterviewBtn {
         text-decoration: none;
         
         ion-button {
+            width: 95%;
+            margin: 0 auto;
             margin-top: 38vh;
             margin-bottom: 0;
+            --background: var(--primary-button-color);
+        }
+    }
+
+    .buttonHolder {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 95%;
+        margin: 0 auto;
+        margin-top: 7rem;
+        a {
+            text-decoration: none;
+        }
+
+        .dashboardButton {
+            width: 18rem;
+            
+            ion-button {
+                margin: 0;
+                --border-style: solid;
+                --border-width: 0.1rem;
+                --border-color: var(--primary-button-color);
+                --background: transparent;
+                --color: var(--primary-button-color);
+                font-size: 1.6rem;
+                font-weight: 600;
+            }
+        }
+
+        .nextStepButton {
+            width: 18rem;
+
+            margin-left: 1rem;
+            ion-button {
+
+                font-size: 1.6rem;
+                font-weight: 600;
+                --background: var(--primary-button-color);
+
+            }
         }
+      
     }
 }

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -3,26 +3,109 @@ import styles from "./TechnicalInterview.module.scss";
 import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
 import techinicalInterview from "../../assets/icons/Technical_Interview.svg";
+import linkIcon from "../../assets/icons/link.svg";
 import { Link } from "react-router-dom";
+import { useState } from "react";
+import TimeSlot from "../../components/timeSlot/TimeSlot";
 
+interface dates {
+    date: string;
+    day: string;
+}
 
 const TechnicalInterview: React.FC = () => {
+
+    const [isDateSet, setDate] = useState<boolean>(false);
+    const [isTimeSlot, setTimeSlot] = useState<boolean>(false);
+
+    const timeSlots = ["11:00 AM - 1:00 pm", "1:00 PM - 3:00 pm", "3:00 PM - 5:00 pm"];
+
+    const dates: dates[] = [
+        {
+            date: "27",
+            day: "Tue"
+        },
+        {
+            date: "29",
+            day: "Sat"
+        },
+        {
+            date: "01",
+            day: "Mon"
+        },
+        {
+            date: "03",
+            day: "Wed"
+        },
+    ];
+
+    const getDate = (date: string) => {
+        console.log(date);
+        setTimeSlot(false);
+        setDate(true);
+    }
+
     return (
         <IonPage>
             <StepHeader stepNumber={3} roundName="Technical Interview" />
             <IonContent>
                 <div className={styles.description}>
                     <IonIcon src={techinicalInterview} />
-                    <h4>You seem interesting! Let's meet.</h4>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
-                    </p>
+                    {
+                        !isDateSet ?
+                            <div className={styles.meet}>
+                                <h4>You seem interesting! Let's meet.</h4>
+                                <p>
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
+                                </p>
+                            </div>
+                            :
+                            <div className={styles.countdown}>
+
+                                <h4>Let's Meet in:</h4>
+                                <div className={styles.timeLeft}>
+                                    <h4 className={styles.time}>02 : 04 : 25 : 53</h4>
+                                    <div className={styles.days}>
+                                        <div>Days</div>
+                                        <div>Hrs</div>
+                                        <div>Mins</div>
+                                        <div>Secs</div>
+                                    </div>
+                                </div>
+                                <h4>Join us on Google Meet</h4>
+                                <div className={styles.icon}>
+                                    <IonIcon src={linkIcon} />
+                                </div>
+                            </div>
+                    }
                 </div>
-                <Link to="/" className={styles.techinicalInterviewBtn}>
-                    <IonButton shape="round" expand='block'>Find a slot</IonButton>
-                </Link>
+                {
+                    !isDateSet ?
+                        <div className={styles.techinicalInterviewBtn} onClick={() => setTimeSlot(true)}>
+                            <IonButton shape="round" expand='block'>Find a slot</IonButton>
+                        </div>
+                        :
+                        <div className={styles.buttonHolder}>
+                            <Link to="/interviewRounds" className={styles.dashboardButton}>
+                                <IonButton shape="round">Goto Dashboard</IonButton>
+                            </Link>
+                            <Link to="/assignment" className={styles.nextStepButton}>
+                                <IonButton shape="round">Goto Next Step</IonButton>
+                            </Link>
+                        </div>
+                }
+
+                {
+                    isTimeSlot &&
+                    <TimeSlot
+                        month="April -May"
+                        dates={dates}
+                        timeSlots={timeSlots}
+                        getDate={getDate} />
+                }
+
             </IonContent>
-        </IonPage>
+        </IonPage >
     );
 }