From 0e71097bbcac0f5eadf6e5c3ba4a7352a2eed408 Mon Sep 17 00:00:00 2001
From: peter <peter@foster.net>
Date: Tue, 20 Jan 2026 23:45:30 +0100
Subject: [PATCH] Replace coloured score header with neutral blue and score
 roundel

- Change header background to neutral blue gradient
- Add score roundel with coloured ring based on score
- Ring colour indicates score level (green/amber/red)
- Keeps header consistent regardless of score

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/TrueCV.Web/Components/Pages/Report.razor | 80 ++++++++++++++------
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/TrueCV.Web/Components/Pages/Report.razor b/src/TrueCV.Web/Components/Pages/Report.razor
index 06c176c..4ee67a2 100644
--- a/src/TrueCV.Web/Components/Pages/Report.razor
+++ b/src/TrueCV.Web/Components/Pages/Report.razor
@@ -126,10 +126,10 @@
         <div class="row mb-4">
             <div class="col-12">
                 <div class="card border-0 shadow-sm overflow-hidden">
-                    <div class="score-header @GetScoreHeaderClass(_report!.OverallScore)">
+                    <div class="score-header">
                         <div class="row align-items-center py-4 px-3">
                             <div class="col-md-4 text-center">
-                                <div class="score-ring-container">
+                                <div class="score-roundel @GetScoreColorClass(_report!.OverallScore)">
                                     <svg class="score-ring" viewBox="0 0 120 120">
                                         <circle class="score-ring-bg" cx="60" cy="60" r="54" />
                                         <circle class="score-ring-progress" cx="60" cy="60" r="54"
@@ -140,7 +140,7 @@
                                         <span class="score-max">/100</span>
                                     </div>
                                 </div>
-                                <small class="text-white-50 mt-2">TrueCV Score</small>
+                                <div class="mt-2 fw-semibold text-white">TrueCV Score</div>
                             </div>
                             <div class="col-md-8">
                                 <div class="row g-4 text-center text-md-start">
@@ -492,25 +492,71 @@
 </div>
 
 <style>
-    /* Score Header with Gradient */
+    /* Score Header - Neutral Blue */
     .score-header {
+        background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
         color: white;
-        transition: background-color 0.3s ease;
     }
 
-    .score-header.score-high {
-        background: linear-gradient(135deg, #059669 0%, #047857 100%);
+    /* Score Roundel */
+    .score-roundel {
+        position: relative;
+        width: 140px;
+        height: 140px;
+        margin: 0 auto;
+        background: rgba(255, 255, 255, 0.15);
+        border-radius: 50%;
+        padding: 8px;
     }
 
-    .score-header.score-medium {
-        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
+    .score-roundel .score-ring-bg {
+        fill: none;
+        stroke: rgba(255, 255, 255, 0.2);
+        stroke-width: 8;
     }
 
-    .score-header.score-low {
-        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    .score-roundel .score-ring-progress {
+        fill: none;
+        stroke-width: 8;
+        stroke-linecap: round;
+        transition: stroke-dasharray 0.6s ease;
     }
 
-    /* SVG Score Ring */
+    /* Score color variants */
+    .score-roundel.score-high .score-ring-progress {
+        stroke: #10b981;
+    }
+
+    .score-roundel.score-medium .score-ring-progress {
+        stroke: #f59e0b;
+    }
+
+    .score-roundel.score-low .score-ring-progress {
+        stroke: #ef4444;
+    }
+
+    .score-roundel .score-value-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+    }
+
+    .score-roundel .score-value {
+        font-size: 2.5rem;
+        font-weight: 700;
+        line-height: 1;
+        color: white;
+    }
+
+    .score-roundel .score-max {
+        font-size: 1rem;
+        opacity: 0.7;
+        color: white;
+    }
+
+    /* Legacy score-ring-container for backwards compat */
     .score-ring-container {
         position: relative;
         width: 140px;
@@ -800,16 +846,6 @@
         };
     }
 
-    private static string GetScoreHeaderClass(int score)
-    {
-        return score switch
-        {
-            > 70 => "score-high",
-            >= 50 => "score-medium",
-            _ => "score-low"
-        };
-    }
-
     private static string GetMatchScoreBadgeClass(int score)
     {
         return score switch