added classnames for ion components

src/components/formInput/Input.module.scss

@@ -14,36 +14,38 @@ $dim-grey: #696969;
         border-radius: 2.5rem;
     }
 
-}
-
-ion-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-ion-input {
-    font-size: 1.4rem !important;
-    --color: #696969 !important;
-    font-weight: 400 !important;
-    width: 25rem !important;
-
-    input {
-        --padding-start: 1rem;   
+    ion-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+    
+    ion-input {
+        font-size: 1.4rem !important;
+        --color: #696969 !important;
+        font-weight: 400 !important;
+        width: 25rem !important;
+    
+        input {
+            --padding-start: 1rem;   
+        }
+    }
+    
+    .inputHolder {  
+        border-radius: 2.5rem;
+        width: 32rem;
+        height: 4rem;
+        margin: 0.2rem;
+    
+    }
+    
+    ion-label {
+        margin: 0;
+        margin-left: 0.8rem;
+        --color: #696969 !important;
+        font-size: 1.4rem !important;  
     }
-}
-
-ion-item {  
-    border-radius: 2.5rem;
-    width: 32rem;
-    height: 4rem;
-    margin: 0.2rem;
 
 }
 
-ion-label {
-    margin: 0;
-    margin-left: 0.8rem;
-    --color: #696969 !important;
-    font-size: 1.4rem !important;  
-}
+
 

src/components/formInput/Input.tsx

@@ -12,7 +12,7 @@ const Input: React.FC<Props> = (props) => {
     return (
         <div className={styles.inputContainer}>
             <div className={styles.inputHolder}>
-                <IonItem lines='none'>
+                <IonItem lines='none' className={styles.inputHolder}>
                     {props.icon &&
                         <IonIcon src={props.icon}></IonIcon>
                     }

src/components/timeSlot/TimeSlot.module.scss

@@ -20,88 +20,90 @@
     }
 }
 
-.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;
-        }
+.timeSlotContent {
+    .month {
+        color: #959595;
+        font-size: 1.6rem;
+        margin-top: 3.5rem;
+        margin-left: 3rem;
     }
-}
-
-.timeSlotHolder {
-    width: 90%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2rem;
-    margin: 0 auto;
-    margin-top: 4rem;
-
-    .time {
+    
+    .dateSlotHolder {
         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;
+        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;
+            }
+        }
     }
-}
-
-.timeSlotButton {
-    text-decoration: none;
-
-    ion-button {
+    
+    .timeSlotHolder {
         width: 90%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 2rem;
         margin: 0 auto;
-        margin-top: 18vh;
-        margin-bottom: 0;
-        --background: #DDDDDD;
-       
+        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;
+        }
     }
-}
-
-.active {
     
-    box-shadow: 0px 0px 10px #00000039;
-    div {
-        color: #33CE93;
+    .timeSlotButton {
+        text-decoration: none;
+    
+        ion-button {
+            width: 90%;
+            margin: 0 auto;
+            margin-top: 18vh;
+            margin-bottom: 0;
+            --background: #DDDDDD;
+           
+        }
     }
-}
-
-.activeTime {
-    color: #33CE93 !important;
-    box-shadow: 0px 0px 10px #00000039;
-}
-
-.buttonActive {
-    ion-button {
-        --background: var(--primary-button-color);
+    
+    .active {
+        
+        box-shadow: 0px 0px 10px #00000039;
+        div {
+            color: #33CE93;
+        }
     }
-}   
+    
+    .activeTime {
+        color: #33CE93 !important;
+        box-shadow: 0px 0px 10px #00000039;
+    }
+    
+    .buttonActive {
+        ion-button {
+            --background: var(--primary-button-color);
+        }
+    }   
+}

src/components/timeSlot/TimeSlot.tsx

@@ -69,7 +69,7 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
                 <h4>Find a Slot</h4>
             </header>
 
-            <IonContent>
+            <IonContent className={styles.timeSlotContent}>
                 <div className={styles.month}>
                     {props.month}
                 </div>

src/pages/FinalInterview/FInalInterview.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.finalInterviewContent {
     display: fixed;
     height: 100vh;
     width: 100vw;

src/pages/FinalInterview/FinalInterview.tsx

@@ -48,7 +48,7 @@ const FinalInterview: React.FC = () => {
     return (
         <IonPage>
             <StepHeader roundName="Final Interview" stepNumber={5} />
-            <IonContent>
+            <IonContent className={styles.finalInterviewContent}>
                 <div className={styles.description}>
                     <IonIcon src={finalInterview} />
                     {

src/pages/FinalInterview/FinalInterviewResult.module.scss

@@ -1,75 +1,79 @@
 .finalInterviewResults {
 
-    .description {
-        .icon {
-            margin-top: 4rem;
-            display: flex;
-            justify-content: center;
-            ion-icon {
-                width: 10rem;
-                height: 10rem;
-            }
-        }
+    .finalInterviewResultsContent {
 
-        .stepDescription {
-            h4 {
-                color: #363636;
-                text-align: center;
-                font-size: 2.4rem;
-                font-weight: 300;
-                letter-spacing: 0.024rem;
-                margin-top: 3rem;
+        .description {
+            .icon {
+                margin-top: 4rem;
+                display: flex;
+                justify-content: center;
+                ion-icon {
+                    width: 10rem;
+                    height: 10rem;
+                }
             }
-            p {
-                color: #868686;
-                font-size: 1.4rem;
-                text-align: center;
-                width: 90%;
-                margin: 0 auto;
-                margin-top: 2rem;
-                line-height: 1.8;
+    
+            .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;
+    
+        .buttonHolder {
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            width: 95%;
+            margin: 0 auto;
+            margin-top: 22rem;
+            a {
+                text-decoration: none;
             }
-        }
-
-        .nextStepButton {
-            width: 18rem;
-
-            margin-left: 1rem;
-            ion-button {
-
-                font-size: 1.6rem;
-                font-weight: 600;
-                --background: var(--primary-button-color);
-
+    
+            .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);
+    
+                }
             }
+          
         }
-      
     }
+    
 }

src/pages/FinalInterview/FinalInterviewResult.tsx

@@ -11,7 +11,7 @@ const FinalInterviewResult: React.FC = () => {
         <IonPage className={styles.finalInterviewResults}>
             <StepHeader roundName="Final Interview" stepNumber={5} />
 
-            <IonContent>
+            <IonContent className={styles.finalInterviewResultsContent}>
 
                 <div className={styles.description}>
                     <div className={styles.icon}>

src/pages/Quiz/Options.module.scss

@@ -7,7 +7,7 @@
             justify-content: space-around;
             height: 40vh;
 
-            ion-item {
+            .options {
                 width: 99%;
                 margin: 0 auto;
                 --background: white;

src/pages/Quiz/Options.tsx

@@ -15,7 +15,7 @@ const Options: React.FC<OwnProps> = (props) => {
 
     const options = props.options.map((option, key) => {
         return (
-            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
+            <IonItem lines='none' key={key} className={styles.options + " " + (option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
                 <IonRadio mode='md' slot="start" value={option} />
             </IonItem>

src/pages/closingDocs/ClosingDocs.tsx

@@ -16,7 +16,7 @@ const ClosingDocs: React.FC = () => {
     return (
         <IonPage>
             <StepHeader roundName="Closing Docs" stepNumber={6} />
-            <IonContent>
+            <IonContent className={styles.closingDocsContent}>
                 <div className={styles.closingDocs} >
 
                     <IonIcon src={closingDocsImg} className={styles.closingDocsImg} />

src/pages/interviewRounds/StepDescreption.tsx

@@ -44,7 +44,7 @@ const StepsDescription: React.FC<Props> = (props) => {
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             </p>
 
-            <Link to="/" className={styles.button}>
+            <Link to={props.link} className={styles.button}>
                 <IonButton shape="round" expand='block'>{props.buttonText}</IonButton>
             </Link>
 

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -1,90 +1,92 @@
-.roundDescription {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    justify-content: space-around;
-    height: 44.5vh;
-    width: 90%;
-    margin: 0 auto;
-    ion-icon {
-        width: 8rem;
-        height: 8rem;
-        padding-top: 2rem;
-    }
+.preliminaryRoundContent{
+    .roundDescription {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        justify-content: space-around;
+        height: 44.5vh;
+        width: 90%;
+        margin: 0 auto;
+        ion-icon {
+            width: 8rem;
+            height: 8rem;
+            padding-top: 2rem;
+        }
 
-    .heading {
-        color: #363636;
-        font-weight: 300;
-        font-size: 2.4rem;
-    }
+        .heading {
+            color: #363636;
+            font-weight: 300;
+            font-size: 2.4rem;
+        }
 
-    .description {
-        color: #868686;
-        font-size: 1.4rem;
-        line-height: 2.8rem;
+        .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%;
-    border-top-right-radius: 75%;
+    .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%;
+        border-top-right-radius: 75%;
 
 
-    &::before {
-        position: absolute;
-        content:" ";
-        top: 50%;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        background-color: #151515;
-        height: 30vh; 	
-        transform: skewY(5deg);
-        z-index: -1;
-    }
+        &::before {
+            position: absolute;
+            content:" ";
+            top: 50%;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            background-color: #151515;
+            height: 30vh; 	
+            transform: skewY(5deg);
+            z-index: -1;
+        }
 
-    .heading {
-        color: #BCBCBC;
-        font-weight: 300;
-        letter-spacing: 0.024rem;
-        font-size: 2.4rem;
-        margin-left: 2rem;
-    }
+        .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;
+        .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;
-    }
+        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;
+        .wish {
+            color: #E5E5E5;
+            font-size: 1.8rem;
+            text-align: center;
+        }
     }
 }

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -11,7 +11,7 @@ const PreliminaryRound: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />
-            <IonContent>
+            <IonContent className={styles.preliminaryRoundContent}>
                 <div className={styles.roundDescription}>
 
                     <IonIcon src={preliminaryRound}></IonIcon>

src/pages/preliminaryRoundResults/PreliminaryRoundResults.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.preliminaryRoundResultsContent {
     .quizResultsContainer {
         height: 88vh;
             .upfold {

src/pages/preliminaryRoundResults/PreliminaryRoundResults.tsx

@@ -12,7 +12,7 @@ const PreliminaryRoundResults: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={2} roundName="Preliminary Round" />
-            <IonContent>
+            <IonContent className={styles.preliminaryRoundResultsContent}>
                 <div className={styles.quizResultsContainer}>
                     <div className={styles.upfold}>
                         <IonIcon src={goodJobIcon} />

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -1,4 +1,4 @@
-ion-content {
+.techinicalInterviewContent {
     display: fixed;
     height: 100vh;
     width: 100vw;

src/pages/technicalInterview/TechnicalInterview.tsx

@@ -48,7 +48,7 @@ const TechnicalInterview: React.FC = () => {
     return (
         <IonPage>
             <StepHeader stepNumber={3} roundName="Technical Interview" />
-            <IonContent>
+            <IonContent className={styles.techinicalInterviewContent}>
                 <div className={styles.description}>
                     <IonIcon src={techinicalInterview} />
                     {