made UI adjustments

package-lock.json

@@ -29,6 +29,7 @@
         "node": "^17.7.2",
         "node-sass": "^7.0.1",
         "react": "^17.0.1",
+        "react-countdown-circle-timer": "^3.0.9",
         "react-dom": "^17.0.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -13120,6 +13121,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-countdown-circle-timer": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz",
+      "integrity": "sha512-2rE2NklqgtArbvM9RVR3NctiKQ8+lY8PEjUZ2S1pKowD8CmaXUGqIaCbFBcygYH2aZQs9qPIQA49Z+9Jc2TOiQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -26117,6 +26126,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-countdown-circle-timer": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.0.9.tgz",
+      "integrity": "sha512-2rE2NklqgtArbvM9RVR3NctiKQ8+lY8PEjUZ2S1pKowD8CmaXUGqIaCbFBcygYH2aZQs9qPIQA49Z+9Jc2TOiQ==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "node": "^17.7.2",
     "node-sass": "^7.0.1",
     "react": "^17.0.1",
+    "react-countdown-circle-timer": "^3.0.9",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/components/formInput/Input.module.scss

@@ -5,7 +5,7 @@ $dim-grey: #696969;
     display: flex;
     flex-direction: column;
 
-    .inputHolder {
+    .inputHolderContainer {
         margin-left: 2rem;
         margin-top: 2rem;
         width: max-content;
@@ -17,16 +17,21 @@ $dim-grey: #696969;
     ion-icon {
         width: 1.5rem;
         height: 1.5rem;
+        align-self: center;
+        color: #AFAFAF;
+        margin-left: 1rem;
+        margin-bottom: 0.2rem;
     }
     
     ion-input {
-        font-size: 1.4rem !important;
-        --color: #696969 !important;
-        font-weight: 400 !important;
-        width: 25rem !important;
+        font-size: 1.4rem;
+        --color: #696969;
+        font-weight: 400;
+        width: 25rem;
     
         input {
             --padding-start: 1rem;   
+            --padding-top: 0.5rem;
         }
     }
     
@@ -41,8 +46,8 @@ $dim-grey: #696969;
     ion-label {
         margin: 0;
         margin-left: 0.8rem;
-        --color: #696969 !important;
-        font-size: 1.4rem !important;  
+        --color: #696969;
+        font-size: 1.4rem;  
     }
 
 }

src/components/formInput/Input.tsx

@@ -11,7 +11,8 @@ interface Props {
 const Input: React.FC<Props> = (props) => {
     return (
         <div className={styles.inputContainer}>
-            <div className={styles.inputHolder}>
+            <div className={styles.inputHolderContainer}>
+
                 <IonItem lines='none' className={styles.inputHolder}>
                     {props.icon &&
                         <IonIcon src={props.icon}></IonIcon>
@@ -22,6 +23,7 @@ const Input: React.FC<Props> = (props) => {
                     <IonInput type={props.type ? props.type : "text"}
                         placeholder={props.placeholder ? props.placeholder : ""}></IonInput>
                 </IonItem>
+
             </div>
 
         </div>

src/components/timeSlot/TimeSlot.module.scss

@@ -21,67 +21,71 @@
 }
 
 .timeSlotContent {
-    .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 {
+
+    .dateHolder {
+        height: 60vh;
+        .month {
+            color: #959595;
+            font-size: 1.6rem;
+            margin-top: 3.5rem;
+            margin-left: 3rem;
+        }
+        
+        .dateSlotHolder {
             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;
+            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;
+        
+        .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 {
             width: 90%;
             margin: 0 auto;
-            margin-top: 18vh;
             margin-bottom: 0;
             --background: #DDDDDD;
            

src/components/timeSlot/TimeSlot.tsx

@@ -70,16 +70,18 @@ const TimeSlot: React.FC<OwnProps> = (props) => {
             </header>
 
             <IonContent className={styles.timeSlotContent}>
-                <div className={styles.month}>
-                    {props.month}
-                </div>
-
-                <div className={styles.dateSlotHolder}>
-                    {dates}
-                </div>
-
-                <div className={styles.timeSlotHolder}>
-                    {timeSlots}
+                <div className={styles.dateHolder}>
+                    <div className={styles.month}>
+                        {props.month}
+                    </div>
+
+                    <div className={styles.dateSlotHolder}>
+                        {dates}
+                    </div>
+
+                    <div className={styles.timeSlotHolder}>
+                        {timeSlots}
+                    </div>
                 </div>
 
                 <div onClick={(highlightedDate && highlightedTime !== "") ? () => props.getDate("test") : undefined}

src/pages/FinalInterview/FInalInterview.module.scss

@@ -3,6 +3,7 @@
     height: 100vh;
     width: 100vw;
     .description {
+        height: 80vh;
         ion-icon {
             width: 15rem;
             height: 10rem;
@@ -88,7 +89,6 @@
         ion-button {
             width: 95%;
             margin: 0 auto;
-            margin-top: 38vh;
             margin-bottom: 0;
             --background: var(--primary-button-color);
         }
@@ -100,7 +100,6 @@
         align-items: center;
         width: 95%;
         margin: 0 auto;
-        margin-top: 7rem;
         a {
             text-decoration: none;
         }

src/pages/FinalInterview/FinalInterviewResult.module.scss

@@ -3,13 +3,14 @@
     .finalInterviewResultsContent {
 
         .description {
+            height: 72vh;
             .icon {
                 margin-top: 4rem;
                 display: flex;
                 justify-content: center;
                 ion-icon {
-                    width: 10rem;
-                    height: 10rem;
+                    width: 15rem;
+                    height: 15rem;
                 }
             }
     
@@ -40,7 +41,6 @@
             align-items: center;
             width: 95%;
             margin: 0 auto;
-            margin-top: 22rem;
             a {
                 text-decoration: none;
             }
@@ -63,7 +63,7 @@
             .nextStepButton {
                 width: 18rem;
     
-                margin-left: 1rem;
+                padding-left: 1rem;
                 ion-button {
     
                     font-size: 1.6rem;

src/pages/Quiz/Options.module.scss

@@ -7,7 +7,7 @@
             justify-content: space-around;
             height: 40vh;
 
-            .options {
+            ion-item {
                 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={styles.options + " " + (option === selected) ? styles.highlighted : ""}>
+            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
                 <IonLabel>{option}</IonLabel>
                 <IonRadio mode='md' slot="start" value={option} />
             </IonItem>

src/pages/Quiz/Question.module.scss

@@ -25,15 +25,8 @@ section {
         }
 
         .quizTimer {
-            .border {
-                width: 6rem;
-                height: 6rem;
-                border-radius: 50%;
-                border: 0.2rem solid #6BD534;
-                .time {
-                    margin-top: 1.8rem;
-                    font-size: 1.4rem;
-                }
+            .time {
+                font-size: 1.4rem;
             }
         }
     }

src/pages/Quiz/Question.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./Question.module.scss";
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
 
 
 interface OwnProp {
@@ -8,8 +9,39 @@ interface OwnProp {
     timeLimit: number;
 }
 
+
+let timeout: NodeJS.Timeout;
+
 const Question: React.FC<OwnProp> = (props) => {
 
+    const COUNTDOWN_AMOUNT_TOTAL = props.timeLimit * 60;
+
+    const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);
+
+    const displaySeconds = seconds % 60;
+    const displayMinutes = Math.floor(seconds / 60);
+
+    useEffect(() => {
+
+        if (seconds > 0) {
+            timeout = setTimeout(() => {
+                setSeconds((state) => state - 1);
+            }, 1000);
+        } else {
+            clearTimeout(timeout);
+        }
+
+        return () => clearTimeout(timeout);;
+    }, [seconds]);
+
+    const renderTime = () => {
+        return (
+            <div className={styles.time}>
+                {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`}
+            </div>
+        );
+    }
+
     return (
         <section>
             <div className={styles.questionHolder}>
@@ -21,9 +53,17 @@ const Question: React.FC<OwnProp> = (props) => {
                 </div>
 
                 <div className={styles.quizTimer}>
-                    <div className={styles.border}>
-                        <div className={styles.time}>01:00</div>
-                    </div>
+
+                    <CountdownCircleTimer
+                        isPlaying
+                        duration={COUNTDOWN_AMOUNT_TOTAL}
+                        colors={'#6BD534'}
+                        size={60}
+                        strokeWidth={5} >
+
+                        {renderTime}
+
+                    </CountdownCircleTimer>
                 </div>
             </div>
         </section>

src/pages/Quiz/Quiz.module.scss

@@ -34,6 +34,11 @@
                 align-self: flex-end;
             }
 
+            a {
+                text-decoration: none;
+                align-self: flex-end;
+            }
+
             ion-icon {
                 color: white;
                 margin-right: 3rem;
@@ -43,44 +48,6 @@
 
             }
         }
-
-        // .questionHolder {
-        //     display: flex;
-        //     flex-direction: column;
-        //     align-items: center;
-        //     justify-content: space-between;
-        //     text-align: center;
-        //     color: white;
-        //     width: 90%;
-        //     margin: 0 auto;
-        //     height: 27vh;
-        //     background-image: url("../../assets/icons/desktop-particles.svg");
-        //     background-position: center;
-        //     background-repeat: no-repeat;
-        //     background-size: 150% 150%;
-
-        //     .questionNumber {
-        //         font-size: 1.3rem;
-        //         font-weight: 600;
-        //     }
-        //     .question {
-        //         font-size: 1.8rem;
-        //         font-weight: 300;
-        //     }
-
-        //     .quizTimer {
-        //         .border {
-        //             width: 6rem;
-        //             height: 6rem;
-        //             border-radius: 50%;
-        //             border: 0.2rem solid #6BD534;
-        //             .time {
-        //                 margin-top: 1.8rem;
-        //                 font-size: 1.4rem;
-        //             }
-        //         }
-        //     }
-        // }
     }
 
     .quizOptions {

src/pages/Quiz/Quiz.tsx

@@ -31,7 +31,9 @@ const Quiz: React.FC = () => {
             <div className={styles.upfold}>
                 <header className={styles.header}>
                     <h4 className={styles.heading}>Quiz</h4>
-                    <IonIcon icon={closeOutline} />
+                    <Link to="/interviewRounds" >
+                        <IonIcon icon={closeOutline} />
+                    </Link>
                 </header>
 
                 <Question question='How would you correctly display, “Hello, how are you?”?'

src/pages/assignment/Assignment.module.scss

@@ -1,6 +1,8 @@
 .assignment {
 
     .description {
+        height: 75vh;
+
         .icon {
             margin-top: 4rem;
             display: flex;
@@ -38,7 +40,6 @@
         ion-button {
             width: 95%;
             margin: 0 auto;
-            margin-top: 35vh;
             margin-bottom: 0;
             --background: var(--primary-button-color);
         }

src/pages/assignment/AssignmentCompleted.module.scss

@@ -1,10 +1,11 @@
 .assignmentCompleted {
 
     .description {
+        height: 70vh;
         .icon {
-            margin-top: 4rem;
             display: flex;
             justify-content: center;
+            padding-top: 4rem;
             ion-icon {
                 width: 10rem;
                 height: 10rem;
@@ -36,6 +37,7 @@
         display: flex;
         justify-content: space-around;
         align-items: center;
+        height: 18vh;
 
         a{
         text-decoration: none;
@@ -49,7 +51,6 @@
 
         .dashboard {
             ion-button {
-                margin-top: 35vh;
                 margin-bottom: 0;
                 --background: transparent;
                 --border-width: 0.1rem;
@@ -61,7 +62,6 @@
 
         .nextStep {
             ion-button {
-                margin-top: 35vh;
                 margin-bottom: 0;
                 --background: var(--primary-button-color);
             }

src/pages/assignment/SubmitAssignment.module.scss

@@ -1,5 +1,6 @@
 .submitAssignment {
     .description {
+        height: 50vh;
         .icon {
             margin-top: 4rem;
             display: flex;
@@ -31,7 +32,9 @@
         }
     }
     .inputHolder {
-        margin-top: 5rem;
+        // margin-top: 5rem;
+        width: 95%;
+        margin: 0 auto;
     }
     .submitAssigment {
         text-decoration: none;

src/pages/celebration/Celebration.tsx

@@ -16,7 +16,7 @@ const Celebration: React.FC = () => {
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     </p>
                 </div>
-                <Link to="/" className={styles.workexButton}>
+                <Link to="/interviewRounds" className={styles.workexButton}>
                     <IonButton shape="round" expand="block">Join workex</IonButton>
                 </Link>
 

src/pages/preliminaryRound/PreliminaryRound.module.scss

@@ -75,6 +75,9 @@
             }
         }
 
+        a {
+            text-decoration: none;
+        }
         ion-button {
             --background: var(--primary-button-color);
             font-weight: 500;

src/pages/preliminaryRound/PreliminaryRound.tsx

@@ -6,6 +6,7 @@ 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';
+import { Link } from "react-router-dom";
 
 const PreliminaryRound: React.FC = () => {
     return (
@@ -38,7 +39,9 @@ const PreliminaryRound: React.FC = () => {
                         </div>
                     </div>
 
-                    <IonButton shape="round" expand='block'>Start quiz</IonButton>
+                    <Link to="./quiz">
+                        <IonButton shape="round" expand='block'>Start quiz</IonButton>
+                    </Link>
 
                     <div className={styles.wish}>All the best!</div>
                 </div>

src/pages/technicalInterview/TechnicalInterview.module.scss

@@ -3,6 +3,7 @@
     height: 100vh;
     width: 100vw;
     .description {
+        height: 75vh;
         ion-icon {
             width: 15rem;
             height: 10rem;
@@ -88,7 +89,6 @@
         ion-button {
             width: 95%;
             margin: 0 auto;
-            margin-top: 38vh;
             margin-bottom: 0;
             --background: var(--primary-button-color);
         }
@@ -98,9 +98,8 @@
         display: flex;
         justify-content: space-around;
         align-items: center;
-        width: 95%;
+        width: 100%;
         margin: 0 auto;
-        margin-top: 7rem;
         a {
             text-decoration: none;
         }
@@ -123,7 +122,7 @@
         .nextStepButton {
             width: 18rem;
 
-            margin-left: 1rem;
+            padding-left: 1rem;
             ion-button {
 
                 font-size: 1.6rem;