created countDown timer in Question Component

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

@@ -17,6 +17,7 @@ $dim-grey: #696969;
     ion-icon {
         width: 1.5rem;
         height: 1.5rem;
+        align-self: center;
     }
     
     ion-input {

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 { createRef, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import styles from "./Question.module.scss";
+import { CountdownCircleTimer } from 'react-countdown-circle-timer';
 
 
 interface OwnProp {
@@ -33,6 +34,14 @@ const Question: React.FC<OwnProp> = (props) => {
         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}>
@@ -44,11 +53,16 @@ const Question: React.FC<OwnProp> = (props) => {
                 </div>
 
                 <div className={styles.quizTimer}>
-                    <div className={styles.border}>
-                        <div className={styles.time}>
-                            {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`}
-                        </div>
-                    </div>
+
+                    <CountdownCircleTimer
+                        isPlaying
+                        duration={COUNTDOWN_AMOUNT_TOTAL}
+                        colors={'#6BD534'}
+                        size={60}
+                        strokeWidth={5}
+                    >
+                        {renderTime}
+                    </CountdownCircleTimer>
                 </div>
             </div>
         </section>

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: 85%;
+        margin: 0 auto;
     }
     .submitAssigment {
         text-decoration: none;