final interview page styling completed

src/App.tsx

@@ -32,6 +32,7 @@ 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';
 
 
 
@@ -77,6 +78,9 @@ const App: React.FC = () => (
         <Route exact path="/finalInterview">
           <FinalInterview />
         </Route>
+        <Route exact path="/finalInterview/results">
+          <FinalInterviewResult />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/location.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="23.099" viewBox="0 0 16.5 23.099">
+  <g id="location" transform="translate(-6.75 -2.25)">
+    <path id="Path_4397" data-name="Path 4397" d="M20.25,13.5A2.25,2.25,0,1,1,18,11.25,2.25,2.25,0,0,1,20.25,13.5Z" transform="translate(-3 -2.8)" fill="#fff"/>
+    <path id="Path_4398" data-name="Path 4398" d="M15,2.25a8.085,8.085,0,0,0-8.25,7.889c0,2.071.944,4.826,2.806,8.187a60.509,60.509,0,0,0,4.125,6.354,1.637,1.637,0,0,0,2.641,0,60.748,60.748,0,0,0,4.125-6.354c1.86-3.36,2.8-6.115,2.8-8.187A8.085,8.085,0,0,0,15,2.25ZM15,13.8a3.3,3.3,0,1,1,3.3-3.3A3.3,3.3,0,0,1,15,13.8Z" fill="#fff"/>
+  </g>
+</svg>

src/components/stepsHeader/StepHeader.module.scss

@@ -25,7 +25,9 @@
             opacity: 0.8;
         }
     }
-
+    a {
+        text-decoration: none;
+    }
     ion-icon {
         width: 3.5rem;
         height: 4rem;

src/components/stepsHeader/StepHeader.tsx

@@ -16,9 +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> */}
+            <Link to="/interviewRounds">
+                <IonIcon icon={closeOutline}></IonIcon>
+            </Link>
         </header>
     )
 }

src/pages/FinalInterview/FInalInterview.module.scss

@@ -0,0 +1,137 @@
+ion-content {
+    display: fixed;
+    height: 100vh;
+    width: 100vw;
+    .description {
+        ion-icon {
+            width: 15rem;
+            height: 10rem;
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 4rem;
+        }
+
+        .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;
+            }
+        }
+
+        .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/FinalInterview/FinalInterview.tsx

@@ -1,14 +1,112 @@
-import { IonPage } from "@ionic/react";
+import styles from "./FInalInterview.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react";
 import StepHeader from "../../components/stepsHeader/StepHeader";
+import finalInterview from "../../assets/icons/Final_Interview.svg";
+import locationIcon from "../../assets/icons/location.svg";
+import { Link } from "react-router-dom";
+import { useState } from "react";
+import TimeSlot from "../../components/timeSlot/TimeSlot";
+
+interface dates {
+    date: string;
+    day: string;
+}
 
 const FinalInterview: 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>
-            <IonPage>
-                <StepHeader roundName="Final Interview" stepNumber={5} />
-            </IonPage>
+            <StepHeader roundName="Final Interview" stepNumber={5} />
+            <IonContent>
+                <div className={styles.description}>
+                    <IonIcon src={finalInterview} />
+                    {
+                        !isDateSet ?
+                            <div className={styles.meet}>
+                                <h4>We're Impressed! Let's meet once again</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={locationIcon} />
+                                </div>
+                            </div>
+                    }
+                </div>
+                {
+                    !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="/finalInterview/results" 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>
-    )
+    );
 }
 
 export default FinalInterview;

src/pages/FinalInterview/FinalInterviewResult.module.scss

@@ -0,0 +1,75 @@
+.finalInterviewResults {
+
+    .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;
+        width: 95%;
+        margin: 0 auto;
+        margin-top: 22rem;
+        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/FinalInterview/FinalInterviewResult.tsx

@@ -0,0 +1,42 @@
+import styles from "./FinalInterviewResult.module.scss";
+
+import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"
+import StepHeader from "../../components/stepsHeader/StepHeader"
+import { Link } from "react-router-dom";
+import finalInterviewImg from "../../assets/icons/Final_Interview.svg";
+
+
+const FinalInterviewResult: React.FC = () => {
+    return (
+        <IonPage className={styles.finalInterviewResults}>
+            <StepHeader roundName="Final Interview" stepNumber={5} />
+
+            <IonContent>
+
+                <div className={styles.description}>
+                    <div className={styles.icon}>
+                        <IonIcon src={finalInterviewImg} />
+                    </div>
+
+                    <div className={styles.stepDescription}>
+                        <h4>You seem promising Employee!</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.dashboardButton}>
+                        <IonButton shape="round">Goto Dashboard</IonButton>
+                    </Link>
+                    <Link to="/closingDocs" className={styles.nextStepButton}>
+                        <IonButton shape="round">Goto Next Step</IonButton>
+                    </Link>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default FinalInterviewResult;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -108,7 +108,8 @@ const InterviewRounds: React.FC = () => {
                 buttonText={step.buttonText}
                 setDescription={setDescription}
                 showDescription={(stepNo === step.stepNumber) ? true : false}
-                link={step.link} />
+                link={step.link}
+            />
         );
     });
 

src/pages/interviewRounds/StepDescreption.tsx

@@ -44,7 +44,7 @@ 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>
 
-            <Link to={props.link} className={styles.button}>
+            <Link to="/" className={styles.button}>
                 <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
             </Link>
 

src/pages/interviewRounds/Steps.tsx

@@ -19,14 +19,15 @@ const Steps: React.FC<Props> = (props) => {
 
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
-            {/* single step so use singular name */}
+
             {props.showDescription ? <StepDescription
                 stepNumber={props.stepNumber}
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}
                 buttonText={props.buttonText}
                 descriptionImage={props.descriptionImage}
-                link={props.link} /> :
+                link={props.link}
+            /> :
                 <div className={styles.stepHolder}>
                     <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>