From 9c3332fe3622747a44ab7fa2d0cad04da74d5092 Mon Sep 17 00:00:00 2001
From: Denis Shatskiy <admin@shts.su>
Date: Sun, 10 Aug 2025 16:14:56 +0700
Subject: [PATCH] refactor: Update MetricCard component in Dashboard for
 improved layout and styling, enhancing visual hierarchy and responsiveness

---
 frontend/src/Dashboard.jsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Dashboard.jsx b/frontend/src/Dashboard.jsx
index a02bc73..b89871f 100644
--- a/frontend/src/Dashboard.jsx
+++ b/frontend/src/Dashboard.jsx
@@ -37,20 +37,19 @@ function StatCard({ icon: Icon, color, value, title, subtitle, to }) {
 
 function MetricCard({ title, value, icon: Icon, color, description }) {
   return (
-    <div className="card">
-      <div className="card-body">
-        <div className="d-flex align-items-center">
-          <span className={`avatar avatar-sm me-3 bg-${color}-lt text-${color}`}>
-            <Icon size={20} />
-          </span>
-          <div>
-            <div className="h4 mb-1">{value}</div>
-            <div className="text-muted small">{title}</div>
+    <div className="card h-100 position-relative">
+      <div className="card-body d-flex align-items-center">
+        <span className={`avatar avatar-lg me-3 bg-${color}-lt text-${color} border-0`}>
+          <Icon size={32} />
+        </span>
+        <div className="flex-grow-1">
+          <div className="h3 mb-0 fw-bold">
+            {value} <span className="fs-5 fw-normal">{title}</span>
           </div>
+          {description && (
+            <div className="text-muted lh-1">{description}</div>
+          )}
         </div>
-        {description && (
-          <div className="mt-2 text-muted small">{description}</div>
-        )}
       </div>
     </div>
   );