peter/RealCV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update UI with eye-friendly colour scheme

Browse Source 
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:
peter
2026-01-21 00:59:12 +01:00
parent 030ede9e77
commit 4721f6d6f6
8 changed files with 78 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/TrueCV.Web/Components/Layout/MainLayout.razor
View File

@@ -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;" />

30
src/TrueCV.Web/Components/Pages/Check.razor
View File

@@ -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) {

18
src/TrueCV.Web/Components/Pages/Dashboard.razor
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;
}

2
src/TrueCV.Web/Components/Pages/Home.razor
View File

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

20
src/TrueCV.Web/Components/Pages/Report.razor
View File

@@ -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 {

10
src/TrueCV.Web/Components/Shared/FlagsList.razor
View File

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

6
src/TrueCV.Web/Components/Shared/VeracityScoreCard.razor
View File

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

57
src/TrueCV.Web/wwwroot/app.css
View File

@@ -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 */