partially completed PreliminaryRound page and made corrections to skillInfo and interviewRound page

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 = () => (
         <Route exact path="/skillInformationStep">
           <SkillInformationStep />
         </Route>
+        <Route exact path="/PreliminaryRound">
+          <PreliminaryRound />
+        </Route>
         <Route exact path="/">
           <Redirect to="/interviewRounds" />
         </Route>

src/assets/icons/check-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg id="check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="Path_4392" data-name="Path 4392" d="M18,9A9,9,0,1,1,9,0a9,9,0,0,1,9,9ZM13.534,5.592a.844.844,0,0,0-1.215.024L8.412,10.594,6.057,8.239A.844.844,0,0,0,4.865,9.431l2.977,2.977a.844.844,0,0,0,1.214-.023l4.491-5.614a.844.844,0,0,0-.011-1.181Z" fill="#209787" fill-rule="evenodd"/>
+</svg>

src/assets/icons/desktop-particles-2.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1326.628" height="233.732" viewBox="0 0 1326.628 233.732">
+  <g id="Group_3279" data-name="Group 3279" transform="translate(938.662 560.103) rotate(180)">
+    <g id="Ellipse_14" data-name="Ellipse 14" transform="translate(865.662 518)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
+      <circle cx="13.5" cy="13.5" r="11" fill="none"/>
+    </g>
+    <g id="Ellipse_197" data-name="Ellipse 197" transform="matrix(-0.966, 0.259, -0.259, -0.966, -280.067, 553.115)" fill="none" stroke="#626262" stroke-width="5" opacity="0.15">
+      <ellipse cx="13.5" cy="13.5" rx="13.5" ry="13.5" stroke="none"/>
+      <ellipse cx="13.5" cy="13.5" rx="11" ry="11" fill="none"/>
+    </g>
+    <g id="Ellipse_17" data-name="Ellipse 17" transform="translate(614.115 408.256)" fill="none" stroke="#313131" stroke-width="5">
+      <circle cx="8.5" cy="8.5" r="8.5" stroke="none"/>
+      <circle cx="8.5" cy="8.5" r="6" fill="none"/>
+    </g>
+    <g id="Ellipse_194" data-name="Ellipse 194" transform="matrix(-0.966, 0.259, -0.259, -0.966, 77.151, 410.589)" fill="none" stroke="#313131" stroke-width="5">
+      <ellipse cx="8.5" cy="8.5" rx="8.5" ry="8.5" stroke="none"/>
+      <ellipse cx="8.5" cy="8.5" rx="6" ry="6" fill="none"/>
+    </g>
+    <path id="Polygon_1" data-name="Polygon 1" d="M10.5,0,21,19H0Z" transform="translate(384.251 450.5) rotate(43)" fill="#626262"/>
+    <path id="Polygon_36" data-name="Polygon 36" d="M10.5,0,21,19H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 161.613, 415.187)" fill="#626262"/>
+    <path id="Polygon_3" data-name="Polygon 3" d="M5.362,0l5.362,9.7H0Z" transform="translate(487.911 369.832) rotate(43)" fill="#626262"/>
+    <path id="Polygon_34" data-name="Polygon 34" d="M5.362,0l5.362,9.7H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 553.158, 466.585)" fill="#626262"/>
+    <path id="Polygon_10" data-name="Polygon 10" d="M5.362,0l5.362,9.7H0Z" transform="translate(836.412 418.051) rotate(43)" fill="#626262"/>
+    <path id="Polygon_35" data-name="Polygon 35" d="M5.362,0l5.362,9.7H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, -355.13, 405.232)" fill="#626262"/>
+    <path id="Polygon_2" data-name="Polygon 2" d="M10.855,0,21.71,19.642H0Z" transform="translate(310.451 398.543) rotate(43)" fill="#2e2e2e"/>
+    <path id="Polygon_37" data-name="Polygon 37" d="M10.855,0,21.71,19.642H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, 208.941, 354.728)" fill="#2e2e2e"/>
+    <path id="Polygon_9" data-name="Polygon 9" d="M10.855,0,21.71,19.642H0Z" transform="translate(835.784 364.829) rotate(43)" fill="#2e2e2e"/>
+    <path id="Polygon_33" data-name="Polygon 33" d="M10.855,0,21.71,19.642H0Z" transform="matrix(0.53, -0.848, 0.848, 0.53, -309.344, 389.762)" fill="#2e2e2e"/>
+    <rect id="Rectangle_40" data-name="Rectangle 40" width="15" height="15" transform="matrix(0.883, -0.469, 0.469, 0.883, 724.662, 441.191)" fill="#383838"/>
+    <rect id="Rectangle_535" data-name="Rectangle 535" width="15" height="15" transform="translate(-115.055 442.11) rotate(-167)" fill="#383838"/>
+    <rect id="Rectangle_41" data-name="Rectangle 41" width="14.685" height="14.685" transform="translate(411.69 542.946) rotate(-65)" fill="#383838"/>
+    <rect id="Rectangle_537" data-name="Rectangle 537" width="14.685" height="14.685" transform="translate(173.245 499.309) rotate(-130)" fill="#383838"/>
+    <rect id="Rectangle_43" data-name="Rectangle 43" width="9.685" height="9.685" transform="translate(397.462 395.488) rotate(-65)" fill="#383838"/>
+    <rect id="Rectangle_536" data-name="Rectangle 536" width="9.685" height="9.685" transform="translate(459.413 492.265) rotate(-130)" fill="#383838"/>
+    <rect id="Rectangle_42" data-name="Rectangle 42" width="14.685" height="14.685" transform="translate(915.904 395.552) rotate(-65)" fill="#383838" opacity="0.368"/>
+    <rect id="Rectangle_534" data-name="Rectangle 534" width="14.685" height="14.685" transform="translate(-378.527 431.202) rotate(-130)" fill="#383838" opacity="0.368"/>
+    <circle id="Ellipse_15" data-name="Ellipse 15" cx="5" cy="5" r="5" transform="translate(841.662 493)" fill="#383838"/>
+    <ellipse id="Ellipse_195" data-name="Ellipse 195" cx="5" cy="5" rx="5" ry="5" transform="matrix(-0.966, 0.259, -0.259, -0.966, -267.755, 506.334)" fill="#383838"/>
+    <circle id="Ellipse_16" data-name="Ellipse 16" cx="8" cy="8" r="8" transform="translate(922.662 503)" fill="#383838"/>
+    <ellipse id="Ellipse_196" data-name="Ellipse 196" cx="8" cy="8" rx="8" ry="8" transform="matrix(-0.966, 0.259, -0.259, -0.966, -341.854, 542.754)" fill="#383838"/>
+    <circle id="Ellipse_18" data-name="Ellipse 18" cx="6.5" cy="6.5" r="6.5" transform="translate(922.419 406.629)" fill="#383838"/>
+    <ellipse id="Ellipse_193" data-name="Ellipse 193" cx="6.5" cy="6.5" rx="6.5" ry="6.5" transform="matrix(-0.966, 0.259, -0.259, -0.966, -367.339, 446.706)" fill="#383838"/>
+    <circle id="Ellipse_77" data-name="Ellipse 77" cx="6.5" cy="6.5" r="6.5" transform="translate(585.539 519)" fill="#383838"/>
+    <ellipse id="Ellipse_198" data-name="Ellipse 198" cx="6.5" cy="6.5" rx="6.5" ry="6.5" transform="matrix(-0.966, 0.259, -0.259, -0.966, 10.536, 505.561)" fill="#383838"/>
+  </g>
+</svg>

src/assets/icons/question-circle-fill.svg

@@ -0,0 +1,3 @@
+<svg id="question-circle-fill" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="Path_4391" data-name="Path 4391" d="M18,9A9,9,0,1,1,9,0a9,9,0,0,1,9,9ZM7.392,6.787H5.906c-.034-2.122,1.608-2.85,3.1-2.85,1.572,0,3.007.821,3.007,2.52a2.745,2.745,0,0,1-1.4,2.314c-.829.629-1.136.864-1.136,1.672v.4H8.007L8,10.322A2.563,2.563,0,0,1,9.313,8.086c.664-.5,1.085-.828,1.085-1.542A1.307,1.307,0,0,0,8.919,5.23,1.435,1.435,0,0,0,7.392,6.787ZM8.8,14.035a1.053,1.053,0,1,1,0-2.1,1.055,1.055,0,1,1,0,2.1Z" transform="translate(0 0)" fill="#eb3e19" fill-rule="evenodd"/>
+</svg>

src/assets/icons/time.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path id="time" d="M12.375,3.375a9,9,0,1,0,9,9A9,9,0,0,0,12.375,3.375ZM16.529,13.76H12.375a.692.692,0,0,1-.692-.692V6.837a.692.692,0,0,1,1.385,0v5.538h3.462a.692.692,0,1,1,0,1.385Z" transform="translate(-3.375 -3.375)" fill="#fc9524"/>
+</svg>

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;
 }
 

src/components/stepsHeader/StepsHeader.tsx → 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> = (props) => {
+const StepHeader: React.FC<Props> = (props) => {
     return (
-        <div className={styles.header}>
+        <header className={styles.header}>
             <div className={styles.heading}>
                 <div className={styles.step}>Step {props.stepNumber}</div>
                 <h3 className={styles.roundName}>{props.roundName}</h3>
             </div>
             <IonIcon icon={close}></IonIcon>
-        </div>
+        </header>
     )
 }
 
-export default StepsHeader;
+export default StepHeader;

src/pages/interviewRounds/InterviewRounds.tsx

@@ -27,6 +27,7 @@ const InterviewRounds: React.FC = () => {
             <Header />
             <IonContent>
                 <Steps
+                    // descriptionimage stepnumber round name and button text and isUnlocked store in an array of obj use map and render it
                     stepNumber={1}
                     roundName="Skill Information"
                     isUnlocked={true}

src/pages/interviewRounds/StepsDescreption.module.scss → src/pages/interviewRounds/StepDescreption.module.scss

@@ -45,12 +45,12 @@
         animation-fill-mode: forwards;
     }
 
-    .descreption {
+    .description {
         color: #868686;
         font-size: 1.4rem;
         width: 80%;
         line-height: 2.8rem;
-
+        text-align: center;
         animation: fadeInAnimation ease 0.2s;
         animation-iteration-count: 1;
         animation-fill-mode: forwards;
@@ -65,7 +65,6 @@
             height: 4rem;
             font-weight: 500;
             font-size: 1.6rem;
-            font-family: 'Poppins', sans-serif !important;
             --background: var(--primary-button-color);
         }
 

src/pages/interviewRounds/StepsDescreption.tsx → src/pages/interviewRounds/StepDescreption.tsx

@@ -1,4 +1,4 @@
-import styles from './StepsDescreption.module.scss';
+import styles from './StepDescreption.module.scss';
 
 import { IonButton, IonIcon } from '@ionic/react';
 import { lockOpen, lockClosed } from 'ionicons/icons'
@@ -14,7 +14,7 @@ interface Props {
 
 const StepsDescription: React.FC<Props> = (props) => {
 
-    const itemRef = useRef<null | HTMLDivElement>(null);
+    const itemRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (itemRef && itemRef.current) {
@@ -26,7 +26,8 @@ const StepsDescription: React.FC<Props> = (props) => {
     return (
         <div className={styles.stepDescription} ref={itemRef}>
             <div className={styles.header}>
-                <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon>
+
+                {props.isUnlocked ? <IonIcon icon={lockOpen} /> : <IonIcon icon={lockClosed} color="dark" />}
 
                 <div className={styles.stepName}>
                     <div className={styles.step}>step {props.stepNumber}</div>
@@ -36,9 +37,10 @@ const StepsDescription: React.FC<Props> = (props) => {
             <div className={styles.image}>
                 <img src={props.descriptionImage} alt="skill info" />
             </div>
-            <div className={styles.descreption}>
+
+            <p className={styles.description}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            </div>
+            </p>
 
             <div className={styles.button}>
                 <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>

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> = (props) => {
 
     return (
         <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>
-            {props.showDescription ? <StepsDescription
+            {/* single step so use singular name */}
+            {props.showDescription ? <StepDescription
                 stepNumber={props.stepNumber}
                 roundName={props.roundName}
                 isUnlocked={props.isUnlocked}

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -0,0 +1,75 @@
+.roundDescription {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: space-around;
+    height: 44vh;
+    width: 90%;
+    margin: 0 auto;
+    ion-icon {
+        width: 8rem;
+        height: 8rem;
+        padding-top: 2rem;
+    }
+
+    .heading {
+        color: #363636;
+        font-weight: 300;
+        font-size: 2.4rem;
+    }
+
+    .description {
+        color: #868686;
+        font-size: 1.4rem;
+        line-height: 2.8rem;
+
+    }
+}
+
+.quizDescription {
+    height: 44vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: #151515;
+    background-image: url("../../assets/icons/desktop-particles-2.svg");
+    background-repeat: no-repeat;
+    background-position: 25% 30%;
+
+    .heading {
+        color: #BCBCBC;
+        font-weight: 300;
+        letter-spacing: 0.024rem;
+        font-size: 2.4rem;
+        margin-left: 2rem;
+    }
+
+    .description {
+        margin-left: 2rem;
+        .textHolder {
+            display: flex;
+            margin-bottom: 2rem;
+            .text {
+                color: #E5E5E5;
+                font-size: 1.4rem;
+                font-weight: 600;
+                margin-left: 2rem;
+            }
+        }
+    }
+
+    ion-button {
+        --background: var(--primary-button-color);
+        font-weight: 500;
+        font-family: 'Poppins', sans-serif;
+        width: 90%;
+        margin: 0 auto;
+    }
+
+    .wish {
+        color: #E5E5E5;
+        font-size: 1.8rem;
+        text-align: center;
+    }
+}

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -0,0 +1,52 @@
+import styles from './PreliminaryRound.module.scss';
+
+import preliminaryRound from '../../assets/icons/Preliminary_Round.svg';
+import { IonButton, IonContent, IonIcon, IonPage } from '@ionic/react';
+import StepHeader from '../../components/stepsHeader/StepHeader';
+import questionIcon from '../../assets/icons/question-circle-fill.svg';
+import checkIcon from '../../assets/icons/check-circle-fill.svg';
+import timeIcon from '../../assets/icons/time.svg';
+
+const PreliminaryRound: React.FC = () => {
+    return (
+        <IonPage>
+            <StepHeader stepNumber={2} roundName="Preliminary Round" />
+            <IonContent>
+                <div>
+                    <div className={styles.roundDescription}>
+
+                        <IonIcon src={preliminaryRound}></IonIcon>
+                        <h4 className={styles.heading}>Let us check your knowledge.</h4>
+                        <p className={styles.description}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        </p>
+                    </div>
+                    <div className={styles.quizDescription}>
+
+                        <h4 className={styles.heading}>Quiz</h4>
+                        <div className={styles.description}>
+                            <div className={styles.textHolder}>
+                                <IonIcon src={questionIcon}></IonIcon>
+                                <div className={styles.text}>20 questions</div>
+                            </div>
+                            <div className={styles.textHolder}>
+                                <IonIcon src={timeIcon}></IonIcon>
+                                <div className={styles.text}>20 mins + 10 mins grace</div>
+                            </div>
+                            <div className={styles.textHolder}>
+                                <IonIcon src={checkIcon}></IonIcon>
+                                <div className={styles.text}>Note: 85% of results minimum</div>
+                            </div>
+                        </div>
+
+                        <IonButton shape="round" expand='block'>Done!</IonButton>
+
+                        <div className={styles.wish}>All the best!</div>
+                    </div>
+                </div>
+            </IonContent>
+        </IonPage>
+    )
+}
+
+export default PreliminaryRound;

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);
         }
-    }
    
 }

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<string[]>([]);
 
+    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 (
         <IonPage>
-            <StepsHeader
+
+            <StepHeader
                 stepNumber={1}
                 roundName="Skill Information" />
             <IonContent>
@@ -70,11 +55,11 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Front-end:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} isSelected={isSelected} />
-                        <SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} isSelected={isSelected} />
-                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} isSelected={isSelected} />
-                        <SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} isSelected={isSelected} />
-                        <SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} isSelected={isSelected} />
+                        <SkillsCard name='React JS/TS' icon={reactIcon} isHighlighted={skills.includes("React JS/TS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Angular8+' icon={angularIcon} isHighlighted={skills.includes("Angular8+")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Ionic FrameWork' icon={ionicIcon} isHighlighted={skills.includes("Ionic FrameWork")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='React Native' icon={reactNative} isHighlighted={skills.includes("React Native")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='VueJS' icon={vueIcon} isHighlighted={skills.includes("VueJS")} toggleSkills={toggleSkill} />
                     </div>
 
                 </div>
@@ -84,9 +69,9 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Back-end:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} isSelected={isSelected} />
-                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} isSelected={isSelected} />
-                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} isSelected={isSelected} />
+                        <SkillsCard name='NodeJS' icon={nodeJSIcon} isHighlighted={skills.includes("NodeJS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='ExpressJS' icon={ExpressJSICon} isHighlighted={skills.includes("ExpressJS")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='Django FrameWork' icon={DjangoIcon} isHighlighted={skills.includes("Django FrameWork")} toggleSkills={toggleSkill} />
                     </div>
 
                 </div>
@@ -96,9 +81,9 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Database:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} isSelected={isSelected} />
-                        <SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} isSelected={isSelected} />
-                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} isSelected={isSelected} />
+                        <SkillsCard name='MySql' icon={MySqlIcon} isHighlighted={skills.includes("MySql")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='MongoDB' icon={MongoDBIcon} isHighlighted={skills.includes("MongoDB")} toggleSkills={toggleSkill} />
+                        <SkillsCard name='PostgreSQL' icon={postgreSqlIcon} isHighlighted={skills.includes("PostgreSQL")} toggleSkills={toggleSkill} />
                     </div>
 
                 </div>
@@ -108,17 +93,15 @@ const SkillInformationStep: React.FC = () => {
                     <h5 className={styles.heading}>Beneficial:</h5>
 
                     <div className={styles.skills}>
-                        <SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} isSelected={isSelected} />
-                        <SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} isSelected={isSelected} />
+                        <SkillsCard name='Firebase' isHighlighted={skills.includes("Firebase")} icon={FirebaseIcon} toggleSkills={toggleSkill} />
+                        <SkillsCard name='DevOps (Docker / Kubernetes)' isHighlighted={skills.includes("DevOps (Docker / Kubernetes)")} icon={DevOpsIcon} toggleSkills={toggleSkill} />
                     </div>
 
                 </div>
 
-                <div className={styles.button}>
-                    <Link to="/">
-                        <IonButton shape="round" expand='block'>Done!</IonButton>
-                    </Link>
-                </div>
+                <Link to="/">
+                    <IonButton shape="round" expand='block'>Done!</IonButton>
+                </Link>
 
             </IonContent>
         </IonPage>

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> = (props) => {
+const SkillsCard: React.FC<OwnProps> = (props) => {
     return (
-        <div className={styles.skill + ' ' + (props.isHighlighted ? styles.isHighlighted : "")} onClick={() => props.isSelected(props.name)}>
+        <section className={styles.skill + ' ' + (props.isHighlighted ? styles.isHighlighted : "")} onClick={() => props.toggleSkills(props.name)}>
             <img src={props.icon} alt={props.name} />
             <div className={styles.name}>{props.name}</div>
-        </div>
+        </section>
     )
 }