UI redesign: improve readability and add candidate name display
- Add CandidateName property to VeracityReport and display on report page - Simplify employment verification layout with compact row-based design - Add UK employment history notice to Home and Check pages - Improve hero section text readability with text shadow - Update Login and Register page styling - Remove Companies House references from UI text Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -93,55 +93,55 @@
|
||||
else
|
||||
{
|
||||
<!-- Stats Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="row mb-4 g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-primary bg-opacity-10 rounded-circle p-3 me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-check text-primary" viewBox="0 0 16 16">
|
||||
<div class="stat-icon stat-icon-primary me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
|
||||
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-0">@_checks.Count</h3>
|
||||
<small class="text-muted">Total Checks</small>
|
||||
<div class="stat-value">@_checks.Count</div>
|
||||
<div class="stat-label">Total Checks</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-success bg-opacity-10 rounded-circle p-3 me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check-circle text-success" viewBox="0 0 16 16">
|
||||
<div class="stat-icon stat-icon-success me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
||||
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-0">@_checks.Count(c => c.Status == "Completed")</h3>
|
||||
<small class="text-muted">Completed</small>
|
||||
<div class="stat-value">@_checks.Count(c => c.Status == "Completed")</div>
|
||||
<div class="stat-label">Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle p-3 me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-hourglass-split text-warning" viewBox="0 0 16 16">
|
||||
<div class="stat-icon stat-icon-warning me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-0">@_checks.Count(c => c.Status is "Pending" or "Processing")</h3>
|
||||
<small class="text-muted">In Progress</small>
|
||||
<div class="stat-value">@_checks.Count(c => c.Status is "Pending" or "Processing")</div>
|
||||
<div class="stat-label">In Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,8 +263,14 @@
|
||||
<td class="py-3 text-center">
|
||||
@if (check.VeracityScore.HasValue)
|
||||
{
|
||||
<div class="score-badge @GetScoreBadgeColorClass(check.VeracityScore.Value)">
|
||||
<span class="score-number">@check.VeracityScore</span>
|
||||
<div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
|
||||
<svg class="score-ring" viewBox="0 0 40 40">
|
||||
<circle class="score-ring-bg" cx="20" cy="20" r="15.9"/>
|
||||
<circle class="score-ring-progress @GetScoreRingClass(check.VeracityScore.Value)"
|
||||
cx="20" cy="20" r="15.9"
|
||||
stroke-dasharray="@GetScoreDashArray(check.VeracityScore.Value), 100"/>
|
||||
</svg>
|
||||
<span class="score-ring-value @GetScoreTextClass(check.VeracityScore.Value)">@check.VeracityScore</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
@@ -402,34 +408,48 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.score-badge {
|
||||
.score-ring-container {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.score-ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.score-ring-bg {
|
||||
fill: none;
|
||||
stroke: var(--truecv-gray-200);
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.score-ring-progress {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
transform-origin: center;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.score-ring-progress.high { stroke: var(--truecv-verified); }
|
||||
.score-ring-progress.medium { stroke: var(--truecv-warning); }
|
||||
.score-ring-progress.low { stroke: var(--truecv-danger); }
|
||||
|
||||
.score-ring-value {
|
||||
position: absolute;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.score-badge.score-high {
|
||||
background: linear-gradient(135deg, #dcf5e9 0%, #b8edda 100%);
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.score-badge.score-medium {
|
||||
background: linear-gradient(135deg, #fdf6e3 0%, #faecc5 100%);
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.score-badge.score-low {
|
||||
background: linear-gradient(135deg, #fde8e8 0%, #fcd9d9 100%);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.text-verified { color: var(--truecv-verified); }
|
||||
.text-warning-dark { color: var(--truecv-warning-dark); }
|
||||
.text-danger { color: var(--truecv-danger); }
|
||||
|
||||
@@media (max-width: 768px) {
|
||||
.d-flex.justify-content-between.align-items-center.mb-4 {
|
||||
@@ -600,6 +620,10 @@
|
||||
};
|
||||
}
|
||||
|
||||
private static string GetScoreRingClass(int score) => score > 70 ? "high" : score >= 50 ? "medium" : "low";
|
||||
private static string GetScoreTextClass(int score) => score > 70 ? "text-verified" : score >= 50 ? "text-warning-dark" : "text-danger";
|
||||
private static string GetScoreDashArray(int score) => score.ToString();
|
||||
|
||||
private async Task ExportToPdf()
|
||||
{
|
||||
if (_isExporting) return;
|
||||
|
||||
Reference in New Issue
Block a user