From 7149ec6130389832878b6bc43cd630b6c12ebef4 Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Tue, 26 Apr 2022 11:06:02 +0530 Subject: [PATCH] final interview page styling completed --- src/App.tsx | 4 + src/assets/icons/location.svg | 6 + .../stepsHeader/StepHeader.module.scss | 4 +- src/components/stepsHeader/StepHeader.tsx | 6 +- .../FinalInterview/FInalInterview.module.scss | 137 ++++++++++++++++++ src/pages/FinalInterview/FinalInterview.tsx | 108 +++++++++++++- .../FinalInterviewResult.module.scss | 75 ++++++++++ .../FinalInterview/FinalInterviewResult.tsx | 42 ++++++ src/pages/interviewRounds/InterviewRounds.tsx | 3 +- src/pages/interviewRounds/StepDescreption.tsx | 2 +- src/pages/interviewRounds/Steps.tsx | 5 +- 11 files changed, 379 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/location.svg create mode 100644 src/pages/FinalInterview/FinalInterviewResult.module.scss create mode 100644 src/pages/FinalInterview/FinalInterviewResult.tsx diff --git a/src/App.tsx b/src/App.tsx index a4ab31a..44aa46f 100644 --- a/src/App.tsx +++ b/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 = () => ( + + + diff --git a/src/assets/icons/location.svg b/src/assets/icons/location.svg new file mode 100644 index 0000000..1f644d9 --- /dev/null +++ b/src/assets/icons/location.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/stepsHeader/StepHeader.module.scss b/src/components/stepsHeader/StepHeader.module.scss index 22f9e8b..863fbb2 100644 --- a/src/components/stepsHeader/StepHeader.module.scss +++ b/src/components/stepsHeader/StepHeader.module.scss @@ -25,7 +25,9 @@ opacity: 0.8; } } - + a { + text-decoration: none; + } ion-icon { width: 3.5rem; height: 4rem; diff --git a/src/components/stepsHeader/StepHeader.tsx b/src/components/stepsHeader/StepHeader.tsx index 8b2cb09..fd83ce9 100644 --- a/src/components/stepsHeader/StepHeader.tsx +++ b/src/components/stepsHeader/StepHeader.tsx @@ -16,9 +16,9 @@ const StepHeader: React.FC = (props) => {
Step {props.stepNumber}

{props.roundName}

- {/* */} - - {/* */} + + + ) } diff --git a/src/pages/FinalInterview/FInalInterview.module.scss b/src/pages/FinalInterview/FInalInterview.module.scss index e69de29..5c88ccd 100644 --- a/src/pages/FinalInterview/FInalInterview.module.scss +++ b/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); + + } + } + + } +} \ No newline at end of file diff --git a/src/pages/FinalInterview/FinalInterview.tsx b/src/pages/FinalInterview/FinalInterview.tsx index fed4c73..44d8b4d 100644 --- a/src/pages/FinalInterview/FinalInterview.tsx +++ b/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(false); + const [isTimeSlot, setTimeSlot] = useState(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 ( - - - + + +
+ + { + !isDateSet ? +
+

We're Impressed! Let's meet once again

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. +

+
+ : +
+ +

Let's Meet in:

+
+

02 : 04 : 25 : 53

+
+
Days
+
Hrs
+
Mins
+
Secs
+
+
+

Join us on Google Meet

+
+ +
+
+ } +
+ { + !isDateSet ? +
setTimeSlot(true)}> + Find a slot +
+ : +
+ + Goto Dashboard + + + Goto Next Step + +
+ } + + { + isTimeSlot && + + } + + - ) + ); } export default FinalInterview; \ No newline at end of file diff --git a/src/pages/FinalInterview/FinalInterviewResult.module.scss b/src/pages/FinalInterview/FinalInterviewResult.module.scss new file mode 100644 index 0000000..a50855f --- /dev/null +++ b/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); + + } + } + + } +} \ No newline at end of file diff --git a/src/pages/FinalInterview/FinalInterviewResult.tsx b/src/pages/FinalInterview/FinalInterviewResult.tsx new file mode 100644 index 0000000..a717c43 --- /dev/null +++ b/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 ( + + + + + +
+
+ +
+ +
+

You seem promising Employee!

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

+
+
+ +
+ + Goto Dashboard + + + Goto Next Step + +
+ + + ) +} + +export default FinalInterviewResult; \ No newline at end of file diff --git a/src/pages/interviewRounds/InterviewRounds.tsx b/src/pages/interviewRounds/InterviewRounds.tsx index af38d97..429bcef 100644 --- a/src/pages/interviewRounds/InterviewRounds.tsx +++ b/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} + /> ); }); diff --git a/src/pages/interviewRounds/StepDescreption.tsx b/src/pages/interviewRounds/StepDescreption.tsx index 796e77e..6039403 100644 --- a/src/pages/interviewRounds/StepDescreption.tsx +++ b/src/pages/interviewRounds/StepDescreption.tsx @@ -44,7 +44,7 @@ const StepsDescription: React.FC = (props) => { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- + {props.buttonText} diff --git a/src/pages/interviewRounds/Steps.tsx b/src/pages/interviewRounds/Steps.tsx index 5fc7c8f..4460dd5 100644 --- a/src/pages/interviewRounds/Steps.tsx +++ b/src/pages/interviewRounds/Steps.tsx @@ -19,14 +19,15 @@ const Steps: React.FC = (props) => { return ( props.setDescription(props.stepNumber)}> - {/* single step so use singular name */} + {props.showDescription ? : + link={props.link} + /> :