From 4721f6d6f649c67d8b1f5d63bbb68727b1a31dbe Mon Sep 17 00:00:00 2001
From: peter <peter@foster.net>
Date: Wed, 21 Jan 2026 00:59:12 +0100
Subject: [PATCH] Update UI with eye-friendly colour scheme

Replace bright white backgrounds with warmer off-white tones to reduce
eye strain while maintaining good contrast and professional appearance.

Changes:
- Update CSS variables with warmer neutral palette (#f5f3f0 page bg,
  #faf9f7 surfaces, #f0ede8 muted sections)
- Soften primary blue from #2563eb to #3b6fd4
- Update navbar, cards, tables to use new surface colours
- Update upload area, file lists, and icon backgrounds
- Update flag item backgrounds with softer tints
- Update shared components (VeracityScoreCard, FlagsList)

The new colour scheme uses warm off-white/cream tones that are easier
on the eyes than pure white while maintaining professionalism.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../Components/Layout/MainLayout.razor        |  2 +-
 src/TrueCV.Web/Components/Pages/Check.razor   | 30 +++++-----
 .../Components/Pages/Dashboard.razor          | 18 +++---
 src/TrueCV.Web/Components/Pages/Home.razor    |  2 +-
 src/TrueCV.Web/Components/Pages/Report.razor  | 20 +++----
 .../Components/Shared/FlagsList.razor         | 10 ++--
 .../Components/Shared/VeracityScoreCard.razor |  6 +-
 src/TrueCV.Web/wwwroot/app.css                | 57 +++++++++++--------
 8 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/src/TrueCV.Web/Components/Layout/MainLayout.razor b/src/TrueCV.Web/Components/Layout/MainLayout.razor
index 6e71631..5f6b75c 100644
--- a/src/TrueCV.Web/Components/Layout/MainLayout.razor
+++ b/src/TrueCV.Web/Components/Layout/MainLayout.razor
@@ -1,7 +1,7 @@
 @inherits LayoutComponentBase
 
 <div class="d-flex flex-column min-vh-100">
-    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
+    <nav class="navbar navbar-expand-lg navbar-light shadow-sm" style="background-color: var(--truecv-bg-surface);">
         <div class="container">
             <a class="navbar-brand fw-bold" href="/">
                 <img src="images/TrueCV_Logo.png" alt="TrueCV" style="height: 50px;" />
diff --git a/src/TrueCV.Web/Components/Pages/Check.razor b/src/TrueCV.Web/Components/Pages/Check.razor
index 70bbd9f..1a3a291 100644
--- a/src/TrueCV.Web/Components/Pages/Check.razor
+++ b/src/TrueCV.Web/Components/Pages/Check.razor
@@ -176,22 +176,22 @@
 
 <style>
     .upload-area {
-        border: 2px dashed #d1d5db;
+        border: 2px dashed var(--truecv-gray-300);
         border-radius: 16px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
+        background: linear-gradient(180deg, var(--truecv-bg-surface) 0%, var(--truecv-bg-muted) 100%);
     }
 
     .upload-area:hover {
-        border-color: #2563eb;
-        background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
+        border-color: var(--truecv-primary);
+        background: linear-gradient(180deg, #e8f1fa 0%, #d4e4f4 100%);
         transform: translateY(-2px);
-        box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.1);
+        box-shadow: 0 10px 25px -5px rgba(59, 111, 212, 0.1);
     }
 
     .upload-area.dragging {
-        border-color: #2563eb;
-        background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
+        border-color: var(--truecv-primary);
+        background: linear-gradient(180deg, #d4e4f4 0%, #c5d9ef 100%);
         border-style: solid;
         transform: scale(1.02);
     }
@@ -199,7 +199,7 @@
     .upload-icon {
         width: 80px;
         height: 80px;
-        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
+        background: linear-gradient(135deg, var(--truecv-primary) 0%, var(--truecv-primary-dark) 100%);
         border-radius: 20px;
         display: flex;
         align-items: center;
@@ -222,17 +222,17 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        border: 1px solid #e5e7eb;
+        border: 1px solid var(--truecv-gray-200);
         border-radius: 12px;
         padding: 1rem;
         margin-bottom: 0.75rem;
-        background: white;
+        background: var(--truecv-bg-surface);
         transition: all 0.2s ease;
     }
 
     .file-list-item:hover {
-        border-color: #2563eb;
-        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
+        border-color: var(--truecv-primary);
+        box-shadow: 0 4px 12px rgba(59, 111, 212, 0.08);
     }
 
     .file-type-icon {
@@ -245,13 +245,13 @@
     }
 
     .file-type-icon.pdf {
-        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+        background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
         color: #dc2626;
     }
 
     .file-type-icon.docx {
-        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
-        color: #2563eb;
+        background: linear-gradient(135deg, #e3ecf7 0%, #d4e4f4 100%);
+        color: var(--truecv-primary);
     }
 
     @@media (max-width: 576px) {
diff --git a/src/TrueCV.Web/Components/Pages/Dashboard.razor b/src/TrueCV.Web/Components/Pages/Dashboard.razor
index d4e4d99..f493f6e 100644
--- a/src/TrueCV.Web/Components/Pages/Dashboard.razor
+++ b/src/TrueCV.Web/Components/Pages/Dashboard.razor
@@ -151,7 +151,7 @@
 
         <!-- Checks List -->
         <div class="card border-0 shadow-sm">
-            <div class="card-header bg-white py-3 border-bottom">
+            <div class="card-header py-3 border-bottom" style="background-color: var(--truecv-bg-surface);">
                 <div class="d-flex justify-content-between align-items-center">
                     <h5 class="mb-0 fw-bold">Recent CV Checks</h5>
                     <span class="badge bg-light text-muted">@_checks.Count total</span>
@@ -160,7 +160,7 @@
             <div class="table-responsive">
                 <table class="table table-hover align-middle mb-0">
                     <thead>
-                        <tr class="bg-light">
+                        <tr style="background-color: var(--truecv-bg-muted);">
                             <th class="border-0 ps-4 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
                             <th class="border-0 py-3 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
                             <th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
@@ -287,25 +287,25 @@
     }
 
     .cursor-pointer:hover {
-        background-color: rgba(37, 99, 235, 0.04);
+        background-color: rgba(59, 111, 212, 0.04);
     }
 
     .empty-state-icon {
         width: 100px;
         height: 100px;
-        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+        background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
         border-radius: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
-        color: #2563eb;
+        color: var(--truecv-primary);
     }
 
     .file-icon-wrapper {
         width: 44px;
         height: 44px;
-        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+        background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
         border-radius: 10px;
         display: flex;
         align-items: center;
@@ -323,17 +323,17 @@
     }
 
     .score-badge.score-high {
-        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        background: linear-gradient(135deg, #dcf5e9 0%, #b8edda 100%);
         color: #047857;
     }
 
     .score-badge.score-medium {
-        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        background: linear-gradient(135deg, #fdf6e3 0%, #faecc5 100%);
         color: #b45309;
     }
 
     .score-badge.score-low {
-        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+        background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
         color: #b91c1c;
     }
 
diff --git a/src/TrueCV.Web/Components/Pages/Home.razor b/src/TrueCV.Web/Components/Pages/Home.razor
index d8c160c..8a7bf8e 100644
--- a/src/TrueCV.Web/Components/Pages/Home.razor
+++ b/src/TrueCV.Web/Components/Pages/Home.razor
@@ -29,7 +29,7 @@
 </section>
 
 <!-- Features Section -->
-<section id="features" class="py-5 bg-light">
+<section id="features" class="py-5" style="background-color: var(--truecv-bg-muted);">
     <div class="container">
         <div class="text-center mb-5">
             <h2 class="fw-bold">How TrueCV Works</h2>
diff --git a/src/TrueCV.Web/Components/Pages/Report.razor b/src/TrueCV.Web/Components/Pages/Report.razor
index 437bdf5..daae012 100644
--- a/src/TrueCV.Web/Components/Pages/Report.razor
+++ b/src/TrueCV.Web/Components/Pages/Report.razor
@@ -198,7 +198,7 @@
 
         <!-- Employment Verification -->
         <div class="card border-0 shadow-sm mb-4">
-            <div class="card-header bg-white py-3">
+            <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
                 <h5 class="mb-0 fw-bold">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-building me-2" viewBox="0 0 16 16">
                         <path d="M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1ZM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM10.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1Z"/>
@@ -210,7 +210,7 @@
             <div class="card-body p-0">
                 <div class="table-responsive">
                     <table class="table table-hover mb-0">
-                        <thead class="table-light">
+                        <thead style="background-color: var(--truecv-bg-muted);">
                             <tr>
                                 <th>Claimed Employer</th>
                                 <th>Period</th>
@@ -313,7 +313,7 @@
             <!-- Gaps -->
             <div class="col-md-6">
                 <div class="card border-0 shadow-sm h-100">
-                    <div class="card-header bg-white py-3">
+                    <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
                         <h5 class="mb-0 fw-bold">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-clock-history me-2 text-warning" viewBox="0 0 16 16">
                                 <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
@@ -358,7 +358,7 @@
             <!-- Overlaps -->
             <div class="col-md-6">
                 <div class="card border-0 shadow-sm h-100">
-                    <div class="card-header bg-white py-3">
+                    <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
                         <h5 class="mb-0 fw-bold">
                             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-intersect me-2 text-danger" viewBox="0 0 16 16">
                                 <path d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm5 10v2a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v5a2 2 0 0 1-2 2H5zm6-8V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2V6a2 2 0 0 1 2-2h5z"/>
@@ -409,7 +409,7 @@
         @if (_report.Flags.Count > 0)
         {
             <div class="card border-0 shadow-sm mb-4">
-                <div class="card-header bg-white py-3">
+                <div class="card-header py-3" style="background-color: var(--truecv-bg-surface);">
                     <h5 class="mb-0 fw-bold">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-flag me-2 text-danger" viewBox="0 0 16 16">
                             <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001"/>
@@ -607,24 +607,24 @@
     }
 
     .flag-item.flag-critical {
-        background-color: #fef2f2;
+        background-color: #fdf2f2;
         border-left-color: #dc2626;
     }
 
     .flag-item.flag-warning {
-        background-color: #fffbeb;
+        background-color: #fdfbf0;
         border-left-color: #d97706;
     }
 
     .flag-item.flag-info {
-        background-color: #eff6ff;
-        border-left-color: #2563eb;
+        background-color: #f0f5fa;
+        border-left-color: var(--truecv-primary);
     }
 
     .flag-title {
         font-weight: 600;
         margin-bottom: 0.25rem;
-        color: #374151;
+        color: var(--truecv-gray-700);
     }
 
     .flag-description {
diff --git a/src/TrueCV.Web/Components/Shared/FlagsList.razor b/src/TrueCV.Web/Components/Shared/FlagsList.razor
index 6f4bf86..50afc56 100644
--- a/src/TrueCV.Web/Components/Shared/FlagsList.razor
+++ b/src/TrueCV.Web/Components/Shared/FlagsList.razor
@@ -61,8 +61,8 @@
 
 <style>
     .flags-list {
-        background-color: #fff;
-        border: 1px solid #dee2e6;
+        background-color: var(--truecv-bg-surface);
+        border: 1px solid var(--truecv-gray-200);
         border-radius: 0.5rem;
         padding: 1.5rem;
     }
@@ -90,17 +90,17 @@
     }
 
     .flag-item.critical {
-        background-color: #f8d7da;
+        background-color: #fdf2f2;
         border-left-color: #dc3545;
     }
 
     .flag-item.warning {
-        background-color: #fff3cd;
+        background-color: #fdfbf0;
         border-left-color: #ffc107;
     }
 
     .flag-item.info {
-        background-color: #cff4fc;
+        background-color: #f0f5fa;
         border-left-color: #0dcaf0;
     }
 
diff --git a/src/TrueCV.Web/Components/Shared/VeracityScoreCard.razor b/src/TrueCV.Web/Components/Shared/VeracityScoreCard.razor
index 7f6c2f4..e8b097b 100644
--- a/src/TrueCV.Web/Components/Shared/VeracityScoreCard.razor
+++ b/src/TrueCV.Web/Components/Shared/VeracityScoreCard.razor
@@ -32,8 +32,8 @@
         flex-direction: column;
         align-items: center;
         padding: 1.5rem;
-        background-color: #fff;
-        border: 1px solid #dee2e6;
+        background-color: var(--truecv-bg-surface);
+        border: 1px solid var(--truecv-gray-200);
         border-radius: 0.5rem;
     }
 
@@ -52,7 +52,7 @@
 
     .score-background {
         fill: none;
-        stroke: #e9ecef;
+        stroke: var(--truecv-gray-200);
         stroke-width: 3;
     }
 
diff --git a/src/TrueCV.Web/wwwroot/app.css b/src/TrueCV.Web/wwwroot/app.css
index c213568..3cddbcf 100644
--- a/src/TrueCV.Web/wwwroot/app.css
+++ b/src/TrueCV.Web/wwwroot/app.css
@@ -1,33 +1,38 @@
 /* TrueCV Custom Design System */
 
 :root {
-    /* Primary brand colors */
-    --truecv-primary: #2563eb;
-    --truecv-primary-dark: #1d4ed8;
-    --truecv-primary-light: #3b82f6;
+    /* Primary brand colors - slightly softer */
+    --truecv-primary: #3b6fd4;
+    --truecv-primary-dark: #2c5bb5;
+    --truecv-primary-light: #5889e0;
 
     /* Semantic colors for verification states */
     --truecv-verified: #059669;
-    --truecv-verified-light: #d1fae5;
+    --truecv-verified-light: #dcf5e9;
     --truecv-warning: #d97706;
-    --truecv-warning-light: #fef3c7;
+    --truecv-warning-light: #fdf6e3;
     --truecv-danger: #dc2626;
-    --truecv-danger-light: #fee2e2;
+    --truecv-danger-light: #fde8e8;
 
-    /* Neutral palette */
-    --truecv-gray-50: #f9fafb;
-    --truecv-gray-100: #f3f4f6;
-    --truecv-gray-200: #e5e7eb;
-    --truecv-gray-300: #d1d5db;
+    /* Eye-friendly neutral palette - warmer tones */
+    --truecv-gray-50: #faf9f7;
+    --truecv-gray-100: #f0ede8;
+    --truecv-gray-200: #e5e2dc;
+    --truecv-gray-300: #d6d2cb;
     --truecv-gray-500: #6b7280;
-    --truecv-gray-700: #374151;
-    --truecv-gray-900: #111827;
+    --truecv-gray-700: #3a3833;
+    --truecv-gray-900: #1a1917;
+
+    /* Surface colours for eye comfort */
+    --truecv-bg-page: #f5f3f0;
+    --truecv-bg-surface: #faf9f7;
+    --truecv-bg-muted: #f0ede8;
 }
 
 html, body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     color: var(--truecv-gray-700);
-    background-color: var(--truecv-gray-50);
+    background-color: var(--truecv-bg-page);
 }
 
 /* Typography scale */
@@ -92,11 +97,12 @@ a:hover {
 .card {
     border-radius: 16px;
     border: none;
+    background-color: var(--truecv-bg-surface);
 }
 
 .card-header {
     border-radius: 16px 16px 0 0 !important;
-    background-color: white;
+    background-color: var(--truecv-bg-surface);
     border-bottom: 1px solid var(--truecv-gray-200);
 }
 
@@ -124,29 +130,34 @@ a:hover {
     letter-spacing: 0.01em;
 }
 
-/* Bootstrap 5.3 subtle color fallbacks */
+/* Bootstrap 5.3 subtle color fallbacks - warmer tones */
 .bg-success-subtle {
-    background-color: #d1fae5 !important;
+    background-color: #dcf5e9 !important;
 }
 
 .bg-primary-subtle {
-    background-color: #dbeafe !important;
+    background-color: #e3ecf7 !important;
 }
 
 .bg-secondary-subtle {
-    background-color: #f3f4f6 !important;
+    background-color: var(--truecv-bg-muted) !important;
 }
 
 .bg-danger-subtle {
-    background-color: #fee2e2 !important;
+    background-color: #fde8e8 !important;
 }
 
 .bg-warning-subtle {
-    background-color: #fef3c7 !important;
+    background-color: #fdf6e3 !important;
 }
 
 .bg-info-subtle {
-    background-color: #eff6ff !important;
+    background-color: #e8f4f8 !important;
+}
+
+/* Table header backgrounds */
+.table-light, .bg-light {
+    background-color: var(--truecv-bg-muted) !important;
 }
 
 /* Content area */