danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add icons to home stats cards with accent hover

Browse source 
Add document and clock icons above the stat numbers for better visual
context. Accent border and icon color on hover for consistent
interactive feedback across the app.
This commit is contained in:
Pier-Jean Malandrino 2026-04-02 16:42:04 +02:00
parent 8ed0e33313
commit 598b370e1a
1 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/pages/HomePage.vue
View file

@ -17,10 +17,12 @@
<!-- Stats -->
<div class="home-stats" v-if="docCount > 0 || analysisCount > 0">
<div class="stat-card" @click="$router.push('/documents')">
<svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
<div class="stat-value">{{ docCount }}</div>
<div class="stat-label">{{ t('home.documents') }}</div>
</div>
<div class="stat-card" @click="$router.push('/history')">
<svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
<div class="stat-value">{{ analysisCount }}</div>
<div class="stat-label">{{ t('home.analyses') }}</div>
</div>
@ -171,10 +173,21 @@ onMounted(() => {
}
.stat-card:hover {
border-color: var(--border-light);
border-color: var(--accent);
background: var(--bg-elevated);
}
.stat-icon {
width: 20px;
height: 20px;
color: var(--text-muted);
margin-bottom: 4px;
}
.stat-card:hover .stat-icon {
color: var(--accent);
}
.stat-value {
font-size: 28px;
font-weight: 700;