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>
This commit is contained in:
2026-01-21 00:59:12 +01:00
parent 030ede9e77
commit 4721f6d6f6
8 changed files with 78 additions and 67 deletions

View File

@@ -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;
}