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 }) => {
{riskPercent}%
-
- {riskState.replaceAll("-", " ")}
-
-
- {TEST_RESULT_CONTENT[riskState]}
+
+
+
+
+
+
+ {riskState.replaceAll("-", " ")}
+
+
+ {TEST_RESULT_CONTENT[riskState]}
+
+
>
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;
+ }
+ }
+}