created mock data for interview rounds add checkicon for completed rounds and hidden round discreption for locked rounds

src/App.tsx

@@ -22,7 +22,7 @@ import './App.scss';
 import InterviewRounds from './pages/interviewRounds/InterviewRounds';
 import SkillInformationStep from './pages/skillInformationStep/SkillInformationStep';
 import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound';
-import Quiz from './pages/Quiz/Quiz';
+import Quiz from './pages/quiz/Quiz';
 import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults';
 import TechnicalInterview from './pages/technicalInterview/TechnicalInterview';
 import Assignment from './pages/assignment/Assignment';
@@ -30,8 +30,8 @@ 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';
-import FinalInterviewResult from './pages/FinalInterview/FinalInterviewResult';
+import FinalInterview from './pages/finalInterview/FinalInterview';
+import FinalInterviewResult from './pages/finalInterview/FinalInterviewResult';
 import ClosingDocs from './pages/closingDocs/ClosingDocs';
 import VerifiedDocs from './pages/closingDocs/VerifiedDocs';
 import JoiningLetter from './pages/joiningLetter/JoiningLetter';

src/components/timeSlot/TimeSlot.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { useState } from "react";
 import { addDays } from "date-fns";
 
-
+// singular
 interface dates {
     date: string;
     day: string;
@@ -24,16 +24,18 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
     const [highlightedDate, setHighlightedDate] = useState<dates>();
     const [highlightedTime, setHighlightedTime] = useState<string>("");
 
+    // use object insted of map
     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)
+        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();
         // }
+        console.log(highlightedDate);
         return (
             <div
                 className={styles.date + " " + (date === highlightedDate ? styles.active : "")}

src/mockData/StepDetails.tsx

@@ -0,0 +1,96 @@
+import skillInfo from '../assets/icons/skill_Information.svg';
+import preliminaryRound from '../assets/icons/Preliminary_Round.svg';
+import technicalInterview from '../assets/icons/Technical_Interview.svg';
+import assignment from '../assets/icons/Assignment.svg';
+import finalInterview from '../assets/icons/Final_Interview.svg';
+import closingDocs from '../assets/icons/Closing_Docs.svg';
+import joiningLetter from '../assets/icons/Joining_Letter.svg';
+import Celebrations from '../assets/icons/Celebrations.svg';
+
+interface stepDetail {
+    stepNumber: number;
+    stepName: string;
+    descriptionImage: string;
+    buttonText: string;
+    isUnlocked: boolean;
+    link: string;
+    isRoundCompleted: boolean;
+}
+
+
+let steps: stepDetail[] = [
+    {
+        stepNumber: 1,
+        stepName: "Skill Information",
+        descriptionImage: skillInfo,
+        buttonText: "Let's start now",
+        isUnlocked: true,
+        link: "/skillInformationStep",
+        isRoundCompleted: true
+    },
+    {
+        stepNumber: 2,
+        stepName: "Preliminary Round",
+        descriptionImage: preliminaryRound,
+        buttonText: "Let's do this",
+        isUnlocked: true,
+        link: "/preliminaryRound",
+        isRoundCompleted: true
+    },
+    {
+        stepNumber: 3,
+        stepName: "Technical Interview",
+        descriptionImage: technicalInterview,
+        buttonText: "Schedule meeting",
+        isUnlocked: true,
+        link: "/technicalInterview",
+        isRoundCompleted: false
+    },
+    {
+        stepNumber: 4,
+        stepName: "Assignment",
+        descriptionImage: assignment,
+        buttonText: "Show details",
+        isUnlocked: false,
+        link: "/assignment",
+        isRoundCompleted: false
+    },
+    {
+        stepNumber: 5,
+        stepName: "Final Interview",
+        descriptionImage: finalInterview,
+        buttonText: "Schedule meeting",
+        isUnlocked: false,
+        link: "/finalInterview",
+        isRoundCompleted: false
+    },
+    {
+        stepNumber: 6,
+        stepName: "Closing Docs",
+        descriptionImage: closingDocs,
+        buttonText: "Upload docs",
+        isUnlocked: false,
+        link: "/closingDocs",
+        isRoundCompleted: false
+    },
+    {
+        stepNumber: 7,
+        stepName: "Joining Letter",
+        descriptionImage: joiningLetter,
+        buttonText: "Show details",
+        isUnlocked: false,
+        link: "/joiningLetter",
+        isRoundCompleted: false
+    },
+    {
+        stepNumber: 8,
+        stepName: "Celebrations",
+        descriptionImage: Celebrations,
+        buttonText: "Join Workex",
+        isUnlocked: false,
+        link: "/celebration",
+        isRoundCompleted: false
+    },
+];
+
+export default steps;

src/pages/assignment/AssignmentDetails.module.scss

@@ -1,3 +1,5 @@
+$matt-black: #151515;
+
 .assignmentDetails {
 
     .assignmentTask {
@@ -29,7 +31,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-around;
-        background-color: #151515;
+        background-color: $matt-black;
         background-image: url("../../assets/icons/desktop-particles-2.svg");
         background-repeat: no-repeat;
         background-position: 25% 30%;
@@ -43,7 +45,7 @@
             right: 0;
             left: 0;
             bottom: 0;
-            background-color: #151515;
+            background-color: $matt-black;
             height: 30vh; 	
             transform: skewY(5deg);
             z-index: -1;

src/pages/assignment/SubmitAssignment.module.scss

@@ -32,7 +32,6 @@
         }
     }
     .inputHolder {
-        // margin-top: 5rem;
         width: 95%;
         margin: 0 auto;
     }

src/pages/interviewRounds/InterviewRounds.tsx

@@ -4,92 +4,11 @@ import { useState } from 'react';
 import Header from "./Header";
 import { IonContent, IonPage } from '@ionic/react';
 import Steps from './Steps';
-import skillInfo from '../../assets/icons/skill_Information.svg';
-import preliminaryRound from '../../assets/icons/Preliminary_Round.svg';
-import technicalInterview from '../../assets/icons/Technical_Interview.svg';
-import assignment from '../../assets/icons/Assignment.svg';
-import finalInterview from '../../assets/icons/Final_Interview.svg';
-import closingDocs from '../../assets/icons/Closing_Docs.svg';
-import joiningLetter from '../../assets/icons/Joining_Letter.svg';
-import Celebrations from '../../assets/icons/Celebrations.svg';
 
-interface stepDetail {
-    stepNumber: number;
-    stepName: string;
-    descriptionImage: string;
-    buttonText: string;
-    isUnlocked: boolean;
-    link: string;
-}
+import steps from "../../mockData/StepDetails";
 
-const InterviewRounds: React.FC = () => {
 
-    let steps: stepDetail[] = [
-        {
-            stepNumber: 1,
-            stepName: "Skill Information",
-            descriptionImage: skillInfo,
-            buttonText: "Let's start now",
-            isUnlocked: true,
-            link: "/skillInformationStep"
-        },
-        {
-            stepNumber: 2,
-            stepName: "Preliminary Round",
-            descriptionImage: preliminaryRound,
-            buttonText: "Let's do this",
-            isUnlocked: false,
-            link: "/preliminaryRound"
-        },
-        {
-            stepNumber: 3,
-            stepName: "Technical Interview",
-            descriptionImage: technicalInterview,
-            buttonText: "Schedule meeting",
-            isUnlocked: false,
-            link: "/technicalInterview"
-        },
-        {
-            stepNumber: 4,
-            stepName: "Assignment",
-            descriptionImage: assignment,
-            buttonText: "Show details",
-            isUnlocked: false,
-            link: "/assignment"
-        },
-        {
-            stepNumber: 5,
-            stepName: "Final Interview",
-            descriptionImage: finalInterview,
-            buttonText: "Schedule meeting",
-            isUnlocked: false,
-            link: "/finalInterview"
-        },
-        {
-            stepNumber: 6,
-            stepName: "Closing Docs",
-            descriptionImage: closingDocs,
-            buttonText: "Upload docs",
-            isUnlocked: false,
-            link: "/closingDocs"
-        },
-        {
-            stepNumber: 7,
-            stepName: "Joining Letter",
-            descriptionImage: joiningLetter,
-            buttonText: "Show details",
-            isUnlocked: false,
-            link: "/joiningLetter"
-        },
-        {
-            stepNumber: 8,
-            stepName: "Celebrations",
-            descriptionImage: Celebrations,
-            buttonText: "Join Workex",
-            isUnlocked: false,
-            link: "/celebration"
-        },
-    ];
+const InterviewRounds: React.FC = () => {
 
     const [stepNo, setStep] = useState(1);
 
@@ -107,8 +26,9 @@ const InterviewRounds: React.FC = () => {
                 descriptionImage={step.descriptionImage}
                 buttonText={step.buttonText}
                 setDescription={setDescription}
-                showDescription={(stepNo === step.stepNumber) ? true : false}
+                showDescription={(stepNo === step.stepNumber && step.isUnlocked === true) ? true : false}
                 link={step.link}
+                isRoundCompleted={step.isRoundCompleted}
             />
         );
     });

src/pages/interviewRounds/StepDescreption.module.scss

@@ -17,6 +17,17 @@
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
 
+        ion-icon {
+            color: var(--primary-button-color);
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        .checkIcon {
+            width: 2rem;
+            height: 2rem;
+        }
+
         .stepName {
             display: flex;
             justify-content: center;
@@ -72,14 +83,6 @@
     }
 }
 
-ion-icon {
-    color: var(--primary-button-color);
-    width: 1.5rem;
-    height: 1.5rem;
-
-}
-
-
 
 @keyframes fadeInAnimation {
     0% {

src/pages/interviewRounds/StepDescreption.tsx

@@ -1,7 +1,7 @@
 import styles from './StepDescreption.module.scss';
 
 import { IonButton, IonIcon } from '@ionic/react';
-import { lockOpen, lockClosed } from 'ionicons/icons';
+import { lockOpen, lockClosed, checkmarkCircle } from 'ionicons/icons';
 import { useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -12,6 +12,7 @@ interface Props {
     buttonText: string;
     descriptionImage: string;
     link: string;
+    isRoundCompleted: boolean;
 }
 
 const StepsDescription: React.FC<Props> = (props) => {
@@ -29,7 +30,11 @@ const StepsDescription: React.FC<Props> = (props) => {
         <div className={styles.stepDescription} ref={itemRef}>
             <div className={styles.header}>
 
-                {props.isUnlocked ? <IonIcon icon={lockOpen} /> : <IonIcon icon={lockClosed} color="dark" />}
+                {
+                    props.isRoundCompleted ?
+                        <IonIcon icon={checkmarkCircle} className={styles.checkIcon} />
+                        :
+                        <IonIcon icon={lockOpen} />}
 
                 <div className={styles.stepName}>
                     <div className={styles.step}>step {props.stepNumber}</div>

src/pages/interviewRounds/Steps.module.scss

@@ -19,6 +19,12 @@ ion-item {
             width: 1.5rem;
             height: 1.5rem;
         }
+
+        .checkIcon {
+            width: 1.8rem;
+            height: 1.8rem;
+            color: var(--primary-button-color);
+        }
         
         .stepName {
             display: flex;

src/pages/interviewRounds/Steps.tsx

@@ -1,9 +1,9 @@
 import styles from './Steps.module.scss';
-import { lockOpen, lockClosed } from 'ionicons/icons';
+import { lockOpen, lockClosed, checkmarkCircle } from 'ionicons/icons';
 import { IonIcon, IonItem } from '@ionic/react';
 import StepDescription from './StepDescreption';
 
-interface Props {
+interface OwnProps {
     stepNumber: number;
     roundName: string;
     isUnlocked: boolean;
@@ -11,11 +11,12 @@ interface Props {
     buttonText: string;
     descriptionImage: string;
     link: string;
+    isRoundCompleted: boolean;
     setDescription: (stepNumber: number) => void;
     // rename to select step
 }
 
-const Steps: React.FC<Props> = (props) => {
+const Steps: React.FC<OwnProps> = (props) => {
 
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
@@ -27,9 +28,13 @@ const Steps: React.FC<Props> = (props) => {
                 buttonText={props.buttonText}
                 descriptionImage={props.descriptionImage}
                 link={props.link}
+                isRoundCompleted={props.isRoundCompleted}
             /> :
                 <div className={styles.stepHolder}>
-                    <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
+                    {/* <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon> */}
+                    {props.isUnlocked && !props.isRoundCompleted && <IonIcon icon={lockOpen}></IonIcon>}
+                    {!props.isUnlocked && <IonIcon icon={lockClosed} color='dark'></IonIcon>}
+                    {props.isRoundCompleted && <IonIcon icon={checkmarkCircle} className={styles.checkIcon}></IonIcon>}
 
                     <div className={styles.stepName}>
                         <div className={styles.step}>step {props.stepNumber}</div>

src/pages/Quiz/Quiz.tsx → src/pages/quiz/Quiz.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { useState } from 'react';
 import Question from './Question';
 
-
+// move to mock data
 const options: string[] = [
     "System.out.println(“Hello, how are you?”);",
     "println('Hello, how are you?');",
@@ -38,7 +38,7 @@ const Quiz: React.FC = () => {
 
                 <Question question='How would you correctly display, “Hello, how are you?”?'
                     questionNumber={1}
-                    timeLimit={1} />
+                    timeLimit={2.5} />
 
             </div>