Improve UI styling and add visual enhancements to Dashboard

Added a subtitle and enhanced KPI card features with orbs and labels for better visual distinction. Updated card shadows, hover effects, fonts, and spacing across Dashboard elements to improve readability and user experience. Styles were streamlined for cleaner and modern aesthetics.
This commit is contained in:
2026-02-12 12:19:21 +01:00
parent c191a67fa7
commit afd30e3897
2 changed files with 85 additions and 14 deletions

View File

@@ -35,22 +35,26 @@ export function DashboardPage() {
return (
<div className="dashboard-page">
<h2>Dashboard Overview</h2>
<p className="dashboard-subtitle">Real-time snapshot of monitored PostgreSQL targets.</p>
<div className="grid three dashboard-kpis">
<div className="card stat kpi-card">
<div className="kpi-orb blue" />
<strong>{targets.length}</strong>
<span>Total Targets</span>
<span className="kpi-label">Total Targets</span>
</div>
<div className="card stat kpi-card ok">
<div className="kpi-orb green" />
<strong>{okCount}</strong>
<span>Status OK</span>
<span className="kpi-label">Status OK</span>
</div>
<div className="card stat kpi-card alert">
<div className="kpi-orb amber" />
<strong>{alerts}</strong>
<span>Alerts</span>
<span className="kpi-label">Alerts</span>
</div>
</div>
<div className="card">
<div className="card dashboard-targets-card">
<div className="dashboard-targets-head">
<h3>Targets</h3>
<span>{targets.length} registered</span>
@@ -72,7 +76,7 @@ export function DashboardPage() {
<p><strong>DB:</strong> {t.dbname}</p>
</div>
<div className="target-actions">
<Link className="details-btn" to={`/targets/${t.id}`}>Details</Link>
<Link className="details-btn" to={`/targets/${t.id}`}>Details <span aria-hidden="true"></span></Link>
</div>
</article>
);