refactor: Compact UI and fix RealCV branding
- Fix logo to show RealCV instead of TrueCV - Remove duplicate auth-logo from Login/Register pages - Dashboard: reduce padding, smaller icons, tighter table rows - Report: compact score header (140px → 100px roundel) - Reduce stat card sizes and spacing throughout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -14,12 +14,6 @@
|
||||
<!-- Left side - Form -->
|
||||
<div class="auth-form-side">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="text-center mb-4">
|
||||
<a href="/">
|
||||
<img src="images/RealCV_Logo.png" alt="RealCV" class="auth-logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1 class="auth-title">Welcome back</h1>
|
||||
<p class="auth-subtitle">Sign in to continue verifying CVs</p>
|
||||
|
||||
|
||||
@@ -16,12 +16,6 @@
|
||||
<!-- Left side - Form -->
|
||||
<div class="auth-form-side">
|
||||
<div class="auth-form-wrapper">
|
||||
<div class="text-center mb-4">
|
||||
<a href="/">
|
||||
<img src="images/RealCV_Logo.png" alt="RealCV" class="auth-logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1 class="auth-title">Create account</h1>
|
||||
<p class="auth-subtitle">Start verifying UK-based CVs in minutes</p>
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
|
||||
<PageTitle>Dashboard - RealCV</PageTitle>
|
||||
|
||||
<div class="container py-5">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="container py-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div>
|
||||
<h1 class="fw-bold mb-1">Dashboard</h1>
|
||||
<p class="text-muted mb-0">View and manage your CV verification checks</p>
|
||||
@@ -93,13 +93,13 @@
|
||||
else
|
||||
{
|
||||
<!-- Stats Cards -->
|
||||
<div class="row mb-4 g-4">
|
||||
<div class="row mb-3 g-3">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
|
||||
@@ -114,10 +114,10 @@
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
|
||||
@@ -132,10 +132,10 @@
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm stat-card h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
|
||||
@@ -151,7 +151,7 @@
|
||||
|
||||
<!-- Checks List -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header py-3 border-bottom" style="background-color: var(--realcv-bg-surface);">
|
||||
<div class="card-header py-2 border-bottom" style="background-color: var(--realcv-bg-surface);">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<h5 class="mb-0 fw-bold">Recent CV Checks</h5>
|
||||
@@ -178,17 +178,17 @@
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead>
|
||||
<tr style="background-color: var(--realcv-bg-muted);">
|
||||
<th class="border-0 ps-3 py-3" style="width: 40px;">
|
||||
<th class="border-0 ps-3 py-2" style="width: 40px;">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
checked="@IsAllSelected()"
|
||||
@onchange="ToggleSelectAll"
|
||||
title="Select all" />
|
||||
</th>
|
||||
<th class="border-0 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>
|
||||
<th class="border-0 py-3 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
|
||||
<th class="border-0 py-3 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
|
||||
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Candidate</th>
|
||||
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted" style="letter-spacing: 0.05em;">Uploaded</th>
|
||||
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Status</th>
|
||||
<th class="border-0 py-2 text-uppercase small fw-semibold text-muted text-center" style="letter-spacing: 0.05em;">Score</th>
|
||||
<th class="border-0 py-2 pe-4 text-uppercase small fw-semibold text-muted text-end" style="letter-spacing: 0.05em;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -196,15 +196,15 @@
|
||||
{
|
||||
<tr class="@(check.Status == "Completed" ? "cursor-pointer" : "") @(_selectedIds.Contains(check.Id) ? "table-active" : "")"
|
||||
@onclick="() => ViewReport(check)">
|
||||
<td class="ps-3 py-3" @onclick:stopPropagation="true">
|
||||
<td class="ps-3 py-2" @onclick:stopPropagation="true">
|
||||
<input type="checkbox" class="form-check-input"
|
||||
checked="@_selectedIds.Contains(check.Id)"
|
||||
@onchange="() => ToggleSelection(check.Id)" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<td class="py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="file-icon-wrapper me-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-file-earmark-person text-primary" viewBox="0 0 16 16">
|
||||
<path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<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.5h2v9.255S12 12 8 12s-5 1.755-5 1.755V2a1 1 0 0 1 1-1h5.5v2z"/>
|
||||
</svg>
|
||||
@@ -215,17 +215,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<td class="py-2">
|
||||
<div>
|
||||
<p class="mb-0 small">@check.CreatedAt.ToString("dd MMM yyyy")</p>
|
||||
<small class="text-muted">@check.CreatedAt.ToString("HH:mm")</small>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-center">
|
||||
<td class="py-2 text-center">
|
||||
@switch (check.Status)
|
||||
{
|
||||
case "Completed":
|
||||
<span class="badge rounded-pill bg-success-subtle text-success px-3 py-2">
|
||||
<span class="badge rounded-pill bg-success-subtle text-success px-2 py-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-check-circle-fill me-1" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.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-.01-1.05z"/>
|
||||
</svg>
|
||||
@@ -233,13 +233,13 @@
|
||||
</span>
|
||||
break;
|
||||
case "Processing":
|
||||
<span class="badge rounded-pill bg-primary-subtle text-primary px-3 py-2">
|
||||
<span class="badge rounded-pill bg-primary-subtle text-primary px-2 py-1">
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" style="width: 0.75rem; height: 0.75rem;"></span>
|
||||
@(check.ProcessingStage ?? "Processing")
|
||||
</span>
|
||||
break;
|
||||
case "Pending":
|
||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">
|
||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock me-1" viewBox="0 0 16 16">
|
||||
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
||||
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
|
||||
@@ -248,7 +248,7 @@
|
||||
</span>
|
||||
break;
|
||||
case "Failed":
|
||||
<span class="badge rounded-pill bg-danger-subtle text-danger px-3 py-2">
|
||||
<span class="badge rounded-pill bg-danger-subtle text-danger px-2 py-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-x-circle-fill me-1" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
||||
</svg>
|
||||
@@ -256,11 +256,11 @@
|
||||
</span>
|
||||
break;
|
||||
default:
|
||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-3 py-2">@check.Status</span>
|
||||
<span class="badge rounded-pill bg-secondary-subtle text-secondary px-2 py-1">@check.Status</span>
|
||||
break;
|
||||
}
|
||||
</td>
|
||||
<td class="py-3 text-center">
|
||||
<td class="py-2 text-center">
|
||||
@if (check.VeracityScore.HasValue)
|
||||
{
|
||||
<div class="score-ring-container" title="Veracity Score: @check.VeracityScore%">
|
||||
@@ -278,7 +278,7 @@
|
||||
<span class="text-muted">--</span>
|
||||
}
|
||||
</td>
|
||||
<td class="py-3 pe-4 text-end">
|
||||
<td class="py-2 pe-4 text-end">
|
||||
<div class="d-flex justify-content-end align-items-center gap-2">
|
||||
@if (check.Status == "Completed")
|
||||
{
|
||||
@@ -399,8 +399,8 @@
|
||||
}
|
||||
|
||||
.file-icon-wrapper {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #e8f1fa 0%, #d4e4f4 100%);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
@@ -410,8 +410,8 @@
|
||||
|
||||
.score-ring-container {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm overflow-hidden">
|
||||
<div class="score-header">
|
||||
<div class="row align-items-center py-4 px-3">
|
||||
<div class="row align-items-center py-2 px-3">
|
||||
<div class="col-md-4 text-center">
|
||||
<div class="score-roundel @GetScoreColorClass(_report!.OverallScore)">
|
||||
<svg class="score-ring" viewBox="0 0 120 120">
|
||||
@@ -153,10 +153,10 @@
|
||||
<span class="score-max">/100</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-white truecv-score-label">RealCV Score</div>
|
||||
<div class="mt-1 text-white truecv-score-label">RealCV Score</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="row g-4 text-center text-md-start">
|
||||
<div class="row g-2 text-center text-md-start">
|
||||
<div class="col-4">
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon">
|
||||
@@ -165,7 +165,7 @@
|
||||
<path d="M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V1Zm11 0H3v14h3v-2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V15h3V1Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-0 fw-bold text-white">@_report.EmploymentVerifications.Count</h3>
|
||||
<h5 class="mb-0 fw-bold text-white">@_report.EmploymentVerifications.Count</h5>
|
||||
<small class="stat-label">Employers Checked</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,7 +177,7 @@
|
||||
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-0 fw-bold text-white">@_report.TimelineAnalysis.TotalGapMonths</h3>
|
||||
<h5 class="mb-0 fw-bold text-white">@_report.TimelineAnalysis.TotalGapMonths</h5>
|
||||
<small class="stat-label">Gap Months</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,7 +188,7 @@
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mb-0 fw-bold text-white">@_report.Flags.Count</h3>
|
||||
<h5 class="mb-0 fw-bold text-white">@_report.Flags.Count</h5>
|
||||
<small class="stat-label">Flags Raised</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -496,12 +496,12 @@
|
||||
/* Score Roundel */
|
||||
.score-roundel {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.score-roundel .score-ring {
|
||||
@@ -555,14 +555,14 @@
|
||||
}
|
||||
|
||||
.score-roundel .score-value {
|
||||
font-size: 2.5rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.score-roundel .score-max {
|
||||
font-size: 1rem;
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.85;
|
||||
color: white;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 26 KiB |
Reference in New Issue
Block a user