From 695c7d5678c1fad212bcea4faaa114c04fc29c5f Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Fri, 22 Apr 2022 20:55:12 +0530 Subject: [PATCH] completed techinical interview page and time slot page --- src/App.tsx | 8 ++ src/components/timeSlot/TimeSlot.module.scss | 89 +++++++++++++++++++ src/components/timeSlot/TimeSlot.tsx | 57 ++++++++++++ .../TechnicalInterview.module.scss | 38 ++++++++ .../technicalInterview/TechnicalInterview.tsx | 29 ++++++ 5 files changed, 221 insertions(+) create mode 100644 src/components/timeSlot/TimeSlot.module.scss create mode 100644 src/components/timeSlot/TimeSlot.tsx create mode 100644 src/pages/technicalInterview/TechnicalInterview.module.scss create mode 100644 src/pages/technicalInterview/TechnicalInterview.tsx diff --git a/src/App.tsx b/src/App.tsx index c72f132..0fa68bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,8 @@ import SkillInformationStep from './pages/skillInformationStep/SkillInformationS import PreliminaryRound from './pages/preliminaryRound/PreliminaryRound'; import Quiz from './pages/Quiz/Quiz'; import PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults'; +import TechnicalInterview from './pages/technicalInterview/TechnicalInterview'; +import TimeSlot from './components/timeSlot/TimeSlot'; @@ -48,6 +50,12 @@ const App: React.FC = () => ( + + + + + + diff --git a/src/components/timeSlot/TimeSlot.module.scss b/src/components/timeSlot/TimeSlot.module.scss new file mode 100644 index 0000000..76237ea --- /dev/null +++ b/src/components/timeSlot/TimeSlot.module.scss @@ -0,0 +1,89 @@ +.header { + background-color: #FCFCFC; + display: flex; + align-items: center; + height: 12vh; + + ion-icon { + color: black; + width: 2.8rem; + height: 2.8rem; + margin-left: 2rem; + } + + h4 { + color: #4A4A4A; + font-size: 2.4rem; + font-weight: 300; + letter-spacing: 0.024rem; + margin-left: 4rem; + } +} + +.month { + color: #959595; + font-size: 1.6rem; + margin-top: 3.5rem; + margin-left: 3rem; +} + +.dateSlotHolder { + display: flex; + align-items: center; + justify-content: space-evenly; + margin-top: 4rem; + + .date { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 7rem; + height: 7rem; + border: 1px solid #EFEFEF; + border-radius: 25px; + color: lighten($color: #959595, $amount: 15%); + font-size: 1.8rem; + font-weight: 600; + + .day { + font-size: 1.4rem; + font-weight: 200; + } + } +} + +.timeSlotHolder { + width: 90%; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-gap: 2rem; + margin: 0 auto; + margin-top: 4rem; + + .time { + display: flex; + align-items: center; + justify-content: center; + width: 15.5rem; + height: 5rem; + border: 1px solid #EFEFEF; + border-radius: 25px; + color: lighten($color: #959595, $amount: 10%); + font-size: 1.6rem; + } +} + +.timeSlotButton { + text-decoration: none; + + ion-button { + margin-top: 28vh; + margin-bottom: 0; + } +} + +.active { + color: #33CE93; + box-shadow: 0px 0px 10px #00000039; +} \ No newline at end of file diff --git a/src/components/timeSlot/TimeSlot.tsx b/src/components/timeSlot/TimeSlot.tsx new file mode 100644 index 0000000..a4b5612 --- /dev/null +++ b/src/components/timeSlot/TimeSlot.tsx @@ -0,0 +1,57 @@ +import { IonButton, IonContent, IonIcon, IonPage } from "@ionic/react"; +import styles from "./TimeSlot.module.scss"; +import { chevronBack } from 'ionicons/icons' +import { Link } from "react-router-dom"; + +interface OwnProps { + +} + +const TimeSlot: React.FC = () => { + return ( + +
+ +

Find a Slot

+
+ + +
+ April-May +
+ +
+
+
Tue
+
27
+
+
+
Sat
+
29
+
+
+
Mon
+
01
+
+
+
Wed
+
03
+
+
+ +
+
11:00 AM - 1:00 pm
+
1:00 PM - 3:00 pm
+
3:00 PM - 5:00 pm
+
+ + + Confirm for Apr 29, 2021, 11:00 AM + + + + + ) +} + +export default TimeSlot; \ No newline at end of file diff --git a/src/pages/technicalInterview/TechnicalInterview.module.scss b/src/pages/technicalInterview/TechnicalInterview.module.scss new file mode 100644 index 0000000..c4f6c63 --- /dev/null +++ b/src/pages/technicalInterview/TechnicalInterview.module.scss @@ -0,0 +1,38 @@ +ion-content { + .description { + ion-icon { + width: 15rem; + height: 10rem; + width: 95%; + margin: 0 auto; + margin-top: 4rem; + } + + 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; + } + } + + .techinicalInterviewBtn { + text-decoration: none; + + ion-button { + margin-top: 38vh; + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/pages/technicalInterview/TechnicalInterview.tsx b/src/pages/technicalInterview/TechnicalInterview.tsx new file mode 100644 index 0000000..f2d60d2 --- /dev/null +++ b/src/pages/technicalInterview/TechnicalInterview.tsx @@ -0,0 +1,29 @@ +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 { Link } from "react-router-dom"; + + +const TechnicalInterview: React.FC = () => { + return ( + + + +
+ +

You seem interesting! Let's meet.

+

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

+
+ + Find a slot + + + + ); +} + +export default TechnicalInterview; \ No newline at end of file