From e3d89dc953ae505ec0356468e62b865e6e845caa Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 20 Oct 2025 14:31:08 +0700
Subject: [PATCH] Add colors on scores

---
 web/src/lib/components/ScoreCard.svelte | 59 ++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/ScoreCard.svelte b/web/src/lib/components/ScoreCard.svelte
index 65aa706..c520c79 100644
--- a/web/src/lib/components/ScoreCard.svelte
+++ b/web/src/lib/components/ScoreCard.svelte
@@ -36,33 +36,72 @@
         {#if summary}
             <div class="row g-3 text-start">
                 <div class="col-md-6 col-lg">
-                    <div class="p-3 bg-light rounded">
+                    <div class="p-2 bg-light rounded text-center">
+                        <strong
+                            class="fs-2"
+                            class:text-success={summary.authentication_score >= 3}
+                            class:text-warning={summary.authentication_score < 3 &&
+                                summary.authentication_score >= 1.5}
+                            class:text-danger={summary.authentication_score < 1.5}
+                        >
+                            {summary.authentication_score.toFixed(1)}/3
+                        </strong>
                         <small class="text-muted d-block">Authentication</small>
-                        <strong class="fs-5">{summary.authentication_score.toFixed(1)}/3</strong>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-3 bg-light rounded">
+                    <div class="p-2 bg-light rounded text-center">
+                        <strong
+                            class="fs-2"
+                            class:text-success={summary.spam_score >= 2}
+                            class:text-warning={summary.spam_score < 2 && summary.spam_score >= 1}
+                            class:text-danger={summary.spam_score < 1}
+                        >
+                            {summary.spam_score.toFixed(1)}/2
+                        </strong>
                         <small class="text-muted d-block">Spam Score</small>
-                        <strong class="fs-5">{summary.spam_score.toFixed(1)}/2</strong>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-3 bg-light rounded">
+                    <div class="p-2 bg-light rounded text-center">
+                        <strong
+                            class="fs-2"
+                            class:text-success={summary.blacklist_score >= 2}
+                            class:text-warning={summary.blacklist_score < 2 &&
+                                summary.blacklist_score >= 1}
+                            class:text-danger={summary.blacklist_score < 1}
+                        >
+                            {summary.blacklist_score.toFixed(1)}/2
+                        </strong>
                         <small class="text-muted d-block">Blacklists</small>
-                        <strong class="fs-5">{summary.blacklist_score.toFixed(1)}/2</strong>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-3 bg-light rounded">
+                    <div class="p-2 bg-light rounded text-center">
+                        <strong
+                            class="fs-2"
+                            class:text-success={summary.content_score >= 2}
+                            class:text-warning={summary.content_score < 2 &&
+                                summary.content_score >= 1}
+                            class:text-danger={summary.content_score < 1}
+                        >
+                            {summary.content_score.toFixed(1)}/2
+                        </strong>
                         <small class="text-muted d-block">Content</small>
-                        <strong class="fs-5">{summary.content_score.toFixed(1)}/2</strong>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg">
-                    <div class="p-3 bg-light rounded">
+                    <div class="p-2 bg-light rounded text-center">
+                        <strong
+                            class="fs-2"
+                            class:text-success={summary.header_score >= 1}
+                            class:text-warning={summary.header_score < 1 &&
+                                summary.header_score >= 0.5}
+                            class:text-danger={summary.header_score < 0.5}
+                        >
+                            {summary.header_score.toFixed(1)}/1
+                        </strong>
                         <small class="text-muted d-block">Headers</small>
-                        <strong class="fs-5">{summary.header_score.toFixed(1)}/1</strong>
                     </div>
                 </div>
             </div>