more UI enhancments are added to TestResult component

alivarastepour · Nov 1, 2023 · 54349e8 · 54349e8
1 parent 40060c7
commit 54349e8
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 12 deletions.
diff --git a/components/RiskAssessmentPageWrapper/Test/TestPresenter.tsx b/components/RiskAssessmentPageWrapper/Test/TestPresenter.tsx
@@ -7,7 +7,7 @@ import TestResult from "../TestResult/TestResult";
 
 const montserrat = Montserrat({
   subsets: ["latin"],
-  weight: ["400", "300", "500"],
+  weight: ["400", "300", "500", "600"],
 });
 const tiltNeon1 = Tilt_Neon({
   subsets: ["latin"],

diff --git a/components/RiskAssessmentPageWrapper/TestResult/TestResult.tsx b/components/RiskAssessmentPageWrapper/TestResult/TestResult.tsx
@@ -2,6 +2,7 @@ import styles from "@/styles/testResult.module.scss";
 import { getRiskState } from "../Test/lib/util";
 import { useMemo } from "react";
 import { TEST_RESULT_CONTENT } from "../Test/lib/data";
+import Image from "next/image";
 
 const TestResult = ({ risk }: { risk: number | null }) => {
   const riskPercent = useMemo(
@@ -22,11 +23,29 @@ const TestResult = ({ risk }: { risk: number | null }) => {
         <div className={styles["test-result-number"]}>
           <span className={styles[riskState]}>{riskPercent}%</span>
         </div>
-        <div className={styles["test-result-subject"]}>
-          {riskState.replaceAll("-", " ")}
-        </div>
-        <div className={styles["test-result-content"]}>
-          {TEST_RESULT_CONTENT[riskState]}
+        <div
+          className={`${styles[riskState]} ${styles["result-content-wrapper"]}`}
+        >
+          <div className={styles["icon-wrapper"]}>
+            <Image
+              src={
+                riskState === "low" || riskState === "very-low"
+                  ? "/confirm.svg"
+                  : "/alert.svg"
+              }
+              width={50}
+              height={50}
+              alt="s"
+            />
+          </div>
+          <div className={`${styles["text-wrapper"]}`}>
+            <div className={styles["test-result-subject"]}>
+              {riskState.replaceAll("-", " ")}
+            </div>
+            <div className={`${styles["test-result-content"]}`}>
+              {TEST_RESULT_CONTENT[riskState]}
+            </div>
+          </div>
         </div>
       </div>
     </>

diff --git a/styles/testResult.module.scss b/styles/testResult.module.scss
@@ -4,13 +4,47 @@
     text-transform: capitalize;
     font-size: 1rem;
   }
+  .result-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 2rem;
 
-  .test-result-subject {
-    text-transform: capitalize;
-    font-size: 2rem;
-  }
-  .test-result-content {
-    font-size: 1.3rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    &.very-low {
+      background-color: rgb(14, 155, 14);
+    }
+    &.low {
+      background-color: rgb(38, 247, 38);
+    }
+    &.moderate {
+      background-color: rgba(186, 186, 0, 0.792);
+    }
+    &.at-risk {
+      background-color: #cc3433;
+    }
+    .icon-wrapper {
+    }
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+
+      .test-result-subject {
+        text-transform: capitalize;
+        font-size: 2rem;
+        color: #fff;
+        font-weight: 600;
+      }
+      .test-result-content {
+        font-size: 1.3rem;
+        font-weight: 500;
+
+        color: #fff;
+      }
+    }
   }
 
   .test-result-number {
@@ -30,3 +64,39 @@
     }
   }
 }
+
+@media only screen and (min-width: 1200px) {
+  .test-result-wrapper {
+    .test-result-header {
+      font-size: 2.2rem;
+    }
+    .test-result-subject {
+      font-size: 2.9rem;
+    }
+    .test-result-content {
+      font-size: 1.9rem;
+      max-width: 50vw;
+    }
+    .test-result-number {
+      font-size: 10rem;
+    }
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1200px) {
+  .test-result-wrapper {
+    .test-result-header {
+      font-size: 1.5rem;
+    }
+    .test-result-subject {
+      font-size: 2.5rem;
+    }
+    .test-result-content {
+      font-size: 1.5rem;
+      max-width: 50vw;
+    }
+    .test-result-number {
+      font-size: 7rem;
+    }
+  }
+}