From afd30e3897a1b63753a99298ca459c1643220223 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 12:19:21 +0100
Subject: [PATCH] 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.
---
 frontend/src/pages/DashboardPage.jsx | 14 +++--
 frontend/src/styles.css              | 85 +++++++++++++++++++++++++---
 2 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index c88f2ac..03cbc03 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -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>
             );
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 77f4395..558626d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -253,8 +253,32 @@ button {
   color: #bfd0ea;
 }
 
+.dashboard-page h2 {
+  margin-bottom: 4px;
+}
+
+.dashboard-subtitle {
+  margin: 0 0 14px 0;
+  color: #a8c2df;
+  font-size: 14px;
+}
+
 .dashboard-kpis .kpi-card {
   border-left: 4px solid #2f7eca;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 12px 30px #0416344d;
+}
+
+.dashboard-kpis .kpi-card::after {
+  content: "";
+  position: absolute;
+  right: -30px;
+  top: -30px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #5bc2ff33, transparent 70%);
 }
 
 .dashboard-kpis .kpi-card.ok {
@@ -281,9 +305,40 @@ button {
   font-size: 13px;
 }
 
+.kpi-orb {
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 5px #ffffff0c;
+}
+
+.kpi-orb.blue {
+  background: #33b5ff;
+}
+
+.kpi-orb.green {
+  background: #33d986;
+}
+
+.kpi-orb.amber {
+  background: #f2a43a;
+}
+
+.kpi-label {
+  color: #b9d2ed;
+  font-weight: 500;
+}
+
 .dashboard-target-list {
   display: grid;
-  gap: 12px;
+  gap: 14px;
+}
+
+.dashboard-targets-card {
+  box-shadow: 0 14px 34px #04163444;
 }
 
 .dashboard-target-card {
@@ -293,19 +348,29 @@ button {
   align-items: center;
   border: 1px solid #2b5b8f;
   border-radius: 12px;
-  padding: 14px;
-  background: linear-gradient(180deg, #132c58, #102549);
+  padding: 16px;
+  background: linear-gradient(180deg, #143462, #102a4f);
+  box-shadow: inset 0 1px 0 #6fc5ff1a;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dashboard-target-card:hover {
+  transform: translateY(-1px);
+  border-color: #3d84c8;
+  box-shadow: 0 10px 22px #071a3960;
 }
 
 .target-main h4 {
   margin: 0;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 800;
+  letter-spacing: 0.01em;
 }
 
 .target-main p {
-  margin: 5px 0 0 0;
+  margin: 6px 0 0 0;
   color: #d5e7ff;
+  font-size: 17px;
 }
 
 .target-title-row {
@@ -337,16 +402,18 @@ button {
 
 .details-btn {
   display: inline-block;
-  padding: 8px 14px;
+  padding: 10px 14px;
   border-radius: 10px;
   font-weight: 700;
-  border: 1px solid #2d9adb;
-  background: linear-gradient(180deg, #1c6aab, #17568c);
+  border: 1px solid #4db8f1;
+  background: linear-gradient(180deg, #2284c8, #1a67a1);
   color: #eaf5ff;
+  box-shadow: 0 8px 16px #081d3d66;
 }
 
 .details-btn:hover {
-  border-color: #6ed2ff;
+  border-color: #85e4ff;
+  filter: brightness(1.05);
 }
 
 .query-insights-page .query-toolbar {