From 54349e82e2e2416bf913f6dfd4d8d812c155d5c0 Mon Sep 17 00:00:00 2001
From: alivarastepour <alivaraste@outlook.com>
Date: Wed, 1 Nov 2023 20:59:53 +0330
Subject: [PATCH] more UI enhancments are added to TestResult component

---
 .../Test/TestPresenter.tsx                    |  2 +-
 .../TestResult/TestResult.tsx                 | 29 +++++--
 styles/testResult.module.scss                 | 82 +++++++++++++++++--
 3 files changed, 101 insertions(+), 12 deletions(-)

diff --git a/components/RiskAssessmentPageWrapper/Test/TestPresenter.tsx b/components/RiskAssessmentPageWrapper/Test/TestPresenter.tsx
index c2bc195..5aac168 100644
--- 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
index 3a2c539..eecf975 100644
--- 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
index bf35445..910613b 100644
--- 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;
+    }
+  }
+}