diff --git a/src/App.tsx b/src/App.tsx index a161e8a..c72f132 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,11 +19,11 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; import './App.scss'; -import ConnectWithUs from './pages/connectWithUs/ConnectWithUs'; 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 PreliminaryRoundResults from './pages/preliminaryRoundResults/PreliminaryRoundResults'; @@ -45,6 +45,9 @@ const App: React.FC = () => ( + + + diff --git a/src/assets/icons/close-filled.svg b/src/assets/icons/close-filled.svg new file mode 100644 index 0000000..e97c089 --- /dev/null +++ b/src/assets/icons/close-filled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/good_job.svg b/src/assets/icons/good_job.svg new file mode 100644 index 0000000..77e2e8f --- /dev/null +++ b/src/assets/icons/good_job.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/stepsHeader/StepHeader.tsx b/src/components/stepsHeader/StepHeader.tsx index 8d957fa..fbf9b97 100644 --- a/src/components/stepsHeader/StepHeader.tsx +++ b/src/components/stepsHeader/StepHeader.tsx @@ -1,7 +1,7 @@ import styles from './StepHeader.module.scss'; import { IonHeader, IonIcon } from '@ionic/react'; -import { close } from 'ionicons/icons' +import { closeOutline } from 'ionicons/icons' interface Props { stepNumber: number; @@ -15,7 +15,7 @@ const StepHeader: React.FC = (props) => {
Step {props.stepNumber}

{props.roundName}

- + ) } diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss new file mode 100644 index 0000000..304ae8a --- /dev/null +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss @@ -0,0 +1,133 @@ +ion-content { + .quizResultsContainer { + height: 88vh; + .upfold { + height: 50vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + text-align: center; + padding-bottom: 2rem; + ion-icon { + height: 17rem; + width: 12rem; + } + + .score { + h5 { + color: #363636; + font-size: 2.4rem; + font-weight: 300; + letter-spacing: 0.024rem; + + } + .result { + font-size: 4.4rem; + font-weight: 600; + letter-spacing: 0.044rem; + opacity: 0.7; + } + } + .description { + color: #868686; + font-size: 1.4rem; + line-height: 1.2; + width: 90%; + } + } + .quizResults { + height: 38vh; + background-color: #151515; + display: flex; + flex-direction: column; + justify-content: space-around; + 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: 57%; + right: 0; + left: 0; + bottom: 0; + background-color: #151515; + height: 30vh; + transform: skewY(3deg); + z-index: -1; + } + + h5 { + color: #BCBCBC; + font-size: 2.4rem; + font-weight: 300; + letter-spacing: 0.024rem; + margin-left: 2rem; + } + + .resultsHolder { + margin-left: 2rem; + .correct{ + display: flex; + color: #E5E5E5; + font-size: 1.4rem; + font-weight: 600; + + div { + margin-left: 2rem; + } + ion-icon { + color: #209787; + } + } + .wrong { + display: flex; + color: #E5E5E5; + font-size: 1.4rem; + font-weight: 600; + margin: 2rem 0; + + div { + margin-left: 2rem; + } + ion-icon { + color: #D13232; + } + } + } + + + + .buttonHolder { + + display: flex; + align-items: center; + justify-content: space-evenly; + margin: 1rem 0; + + ion-button { + width: 15rem; + --background: transparent; + color: var(--primary-button-color); + --border-color: var(--primary-button-color); + --border-width: 0.1rem; + --border-style: solid; + margin: 0; + font-size: 1.4rem; + font-weight: 600; + + + } + + .goToNextStep { + width: 15rem; + color: white; + --background: var(--primary-button-color); + } + } + } + } + } \ No newline at end of file diff --git a/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx new file mode 100644 index 0000000..350c430 --- /dev/null +++ b/src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx @@ -0,0 +1,57 @@ +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"; +import { Link } from "react-router-dom"; + +const PreliminaryRoundResults: React.FC = () => { + return ( + + + +
+
+ +
+
You have scored
+
85%
+
+

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

+
+
+
Quiz Results
+
+
+ +
17 Questions
+
+
+ +
3 Questions
+
+
+
+ + Goto Dashboard + + + Goto Next Step + +
+
+
+ + + + ) +} + +export default PreliminaryRoundResults; \ No newline at end of file