From a082041b845c526812b38db362d51e4f0bf0e33b Mon Sep 17 00:00:00 2001 From: Ajay_S Date: Thu, 21 Apr 2022 17:57:06 +0530 Subject: [PATCH] partially completed PreliminaryRound page and made corrections to skillInfo and interviewRound page --- src/App.tsx | 4 + src/assets/icons/check-circle-fill.svg | 3 + src/assets/icons/desktop-particles-2.svg | 46 ++++++++++++ src/assets/icons/question-circle-fill.svg | 3 + src/assets/icons/time.svg | 3 + src/common/styles/global.scss | 8 +- ...der.module.scss => StepHeader.module.scss} | 0 .../{StepsHeader.tsx => StepHeader.tsx} | 10 +-- src/pages/interviewRounds/InterviewRounds.tsx | 1 + ...odule.scss => StepDescreption.module.scss} | 5 +- ...epsDescreption.tsx => StepDescreption.tsx} | 12 +-- src/pages/interviewRounds/Steps.tsx | 6 +- .../PreliminaryRound.module.scss | 75 +++++++++++++++++++ .../preliminaryRound/PreliminaryRound.tsx | 52 +++++++++++++ .../SkillInformationStep.module.scss | 3 - .../SkillInformationStep.tsx | 71 +++++++----------- src/pages/skillInformationStep/SkillsCard.tsx | 10 +-- 17 files changed, 243 insertions(+), 69 deletions(-) create mode 100644 src/assets/icons/check-circle-fill.svg create mode 100644 src/assets/icons/desktop-particles-2.svg create mode 100644 src/assets/icons/question-circle-fill.svg create mode 100644 src/assets/icons/time.svg rename src/components/stepsHeader/{StepsHeader.module.scss => StepHeader.module.scss} (100%) rename src/components/stepsHeader/{StepsHeader.tsx => StepHeader.tsx} (70%) rename src/pages/interviewRounds/{StepsDescreption.module.scss => StepDescreption.module.scss} (96%) rename src/pages/interviewRounds/{StepsDescreption.tsx => StepDescreption.tsx} (80%) create mode 100644 src/pages/preliminaryRound/PreliminaryRound.module.scss create mode 100644 src/pages/preliminaryRound/PreliminaryRound.tsx diff --git a/src/App.tsx b/src/App.tsx index 2539d13..baa25b6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,6 +22,7 @@ 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'; @@ -37,6 +38,9 @@ const App: React.FC = () => ( + + + diff --git a/src/assets/icons/check-circle-fill.svg b/src/assets/icons/check-circle-fill.svg new file mode 100644 index 0000000..3383e73 --- /dev/null +++ b/src/assets/icons/check-circle-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/desktop-particles-2.svg b/src/assets/icons/desktop-particles-2.svg new file mode 100644 index 0000000..0dd2016 --- /dev/null +++ b/src/assets/icons/desktop-particles-2.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/question-circle-fill.svg b/src/assets/icons/question-circle-fill.svg new file mode 100644 index 0000000..2b8c580 --- /dev/null +++ b/src/assets/icons/question-circle-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/time.svg b/src/assets/icons/time.svg new file mode 100644 index 0000000..b174b0f --- /dev/null +++ b/src/assets/icons/time.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/common/styles/global.scss b/src/common/styles/global.scss index 1420d4c..affe456 100644 --- a/src/common/styles/global.scss +++ b/src/common/styles/global.scss @@ -5,10 +5,14 @@ } body { - font-family: 'Poppins', sans-serif !important; + font-family: 'Poppins', sans-serif; } h1,h2,h3,h4,h5,h6 { - font-family: 'Oswald', sans-serif !important; + font-family: 'Oswald', sans-serif; +} + +ion-button { + font-family: 'Poppins', sans-serif; } diff --git a/src/components/stepsHeader/StepsHeader.module.scss b/src/components/stepsHeader/StepHeader.module.scss similarity index 100% rename from src/components/stepsHeader/StepsHeader.module.scss rename to src/components/stepsHeader/StepHeader.module.scss diff --git a/src/components/stepsHeader/StepsHeader.tsx b/src/components/stepsHeader/StepHeader.tsx similarity index 70% rename from src/components/stepsHeader/StepsHeader.tsx rename to src/components/stepsHeader/StepHeader.tsx index 5346256..8d957fa 100644 --- a/src/components/stepsHeader/StepsHeader.tsx +++ b/src/components/stepsHeader/StepHeader.tsx @@ -1,4 +1,4 @@ -import styles from './StepsHeader.module.scss'; +import styles from './StepHeader.module.scss'; import { IonHeader, IonIcon } from '@ionic/react'; import { close } from 'ionicons/icons' @@ -8,16 +8,16 @@ interface Props { roundName: string; } -const StepsHeader: React.FC = (props) => { +const StepHeader: React.FC = (props) => { return ( -
+
Step {props.stepNumber}

{props.roundName}

-
+ ) } -export default StepsHeader; \ No newline at end of file +export default StepHeader; \ No newline at end of file diff --git a/src/pages/interviewRounds/InterviewRounds.tsx b/src/pages/interviewRounds/InterviewRounds.tsx index daf33d4..99a8a58 100644 --- a/src/pages/interviewRounds/InterviewRounds.tsx +++ b/src/pages/interviewRounds/InterviewRounds.tsx @@ -27,6 +27,7 @@ const InterviewRounds: React.FC = () => {
= (props) => { - const itemRef = useRef(null); + const itemRef = useRef(null); useEffect(() => { if (itemRef && itemRef.current) { @@ -26,7 +26,8 @@ const StepsDescription: React.FC = (props) => { return (
- + + {props.isUnlocked ? : }
step {props.stepNumber}
@@ -36,9 +37,10 @@ const StepsDescription: React.FC = (props) => {
skill info
-
+ +

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 7a95e51..dd03b0c 100644 --- a/src/pages/interviewRounds/Steps.tsx +++ b/src/pages/interviewRounds/Steps.tsx @@ -1,7 +1,7 @@ import styles from './Steps.module.scss'; import { lockOpen, lockClosed } from 'ionicons/icons'; import { IonIcon, IonItem } from '@ionic/react'; -import StepsDescription from './StepsDescreption'; +import StepDescription from './StepDescreption'; interface Props { stepNumber: number; @@ -11,13 +11,15 @@ interface Props { buttonText: string; descriptionImage: string; setDescription: (stepNumber: number) => void; + // rename to select step } const Steps: React.FC = (props) => { return ( props.setDescription(props.stepNumber)}> - {props.showDescription ? { + return ( + + + +
+
+ + +

Let us check your knowledge.

+

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

+
+
+ +

Quiz

+
+
+ +
20 questions
+
+
+ +
20 mins + 10 mins grace
+
+
+ +
Note: 85% of results minimum
+
+
+ + Done! + +
All the best!
+
+
+ + + ) +} + +export default PreliminaryRound; \ No newline at end of file diff --git a/src/pages/skillInformationStep/SkillInformationStep.module.scss b/src/pages/skillInformationStep/SkillInformationStep.module.scss index 4fe6765..a10537e 100644 --- a/src/pages/skillInformationStep/SkillInformationStep.module.scss +++ b/src/pages/skillInformationStep/SkillInformationStep.module.scss @@ -36,8 +36,6 @@ ion-content { margin: 0 auto; } } - - .button{ a { text-decoration: none; } @@ -45,6 +43,5 @@ ion-content { margin: 5rem 2rem; --background: var(--primary-button-color); } - } } \ No newline at end of file diff --git a/src/pages/skillInformationStep/SkillInformationStep.tsx b/src/pages/skillInformationStep/SkillInformationStep.tsx index 36184a5..b844f57 100644 --- a/src/pages/skillInformationStep/SkillInformationStep.tsx +++ b/src/pages/skillInformationStep/SkillInformationStep.tsx @@ -1,6 +1,6 @@ import styles from './SkillInformationStep.module.scss'; import { IonButton, IonContent, IonPage } from "@ionic/react"; -import StepsHeader from "../../components/stepsHeader/StepsHeader"; +import StepHeader from "../../components/stepsHeader/StepHeader"; import SkillsCard from './SkillsCard'; import reactIcon from '../../assets/images/React.png'; @@ -16,43 +16,28 @@ import MongoDBIcon from '../../assets/images/Mongo.png'; import postgreSqlIcon from '../../assets/images/PostgreSQL.png'; import FirebaseIcon from '../../assets/images/Firebase.png'; import DevOpsIcon from '../../assets/images/DevOps.png'; -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { Link } from 'react-router-dom'; -const skills: string[] = []; const SkillInformationStep: React.FC = () => { - const [ischanging, setChange] = useState(0); - - useEffect(() => { - - }, [skills]); - - const isSelected = (skill: string) => { - setChange(Math.random()); + const [skills, setSkills] = useState([]); + const toggleSkill = (skill: string) => { + let newSkills: string[] = []; if (skills.includes(skill)) { - - const index = skills.indexOf(skill); - if (index > -1) { - skills.splice(index, 1); - } - - return; + newSkills = skills.filter(oldSkill => oldSkill !== skill); + } else { + newSkills = skills.concat([skill]); } - skills.push(skill); - + setSkills(newSkills); } - useEffect(() => { - console.log("Render"); - }, [ischanging]); - - return ( - @@ -70,11 +55,11 @@ const SkillInformationStep: React.FC = () => {
Front-end:
- - - - - + + + + +
@@ -84,9 +69,9 @@ const SkillInformationStep: React.FC = () => {
Back-end:
- - - + + +
@@ -96,9 +81,9 @@ const SkillInformationStep: React.FC = () => {
Database:
- - - + + +
@@ -108,17 +93,15 @@ const SkillInformationStep: React.FC = () => {
Beneficial:
- - + +
-
- - Done! - -
+ + Done! + diff --git a/src/pages/skillInformationStep/SkillsCard.tsx b/src/pages/skillInformationStep/SkillsCard.tsx index c5629d9..e7af3b8 100644 --- a/src/pages/skillInformationStep/SkillsCard.tsx +++ b/src/pages/skillInformationStep/SkillsCard.tsx @@ -1,20 +1,20 @@ import { IonIcon } from '@ionic/react'; import styles from './SkillsCard.module.scss'; -interface Props { +interface OwnProps { icon: string; name: string; isHighlighted?: boolean; - isSelected: (skill: string) => void; + toggleSkills: (skill: string) => void; } -const SkillsCard: React.FC = (props) => { +const SkillsCard: React.FC = (props) => { return ( -
props.isSelected(props.name)}> +
props.toggleSkills(props.name)}> {props.name}
{props.name}
-
+ ) }