From 1397254dfda8a4e3f736e18f54ec3ea99be57bad Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 3 Mar 2026 08:12:36 -0500
Subject: [PATCH] feat: update QuickStats and SessionsPanel with glass-card
 styling

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/dashboard/QuickStats.tsx    | 6 +++---
 frontend/src/components/dashboard/SessionsPanel.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/dashboard/QuickStats.tsx b/frontend/src/components/dashboard/QuickStats.tsx
index 4cc2412e..385d1b25 100644
--- a/frontend/src/components/dashboard/QuickStats.tsx
+++ b/frontend/src/components/dashboard/QuickStats.tsx
@@ -18,15 +18,15 @@ export function QuickStats({ stats }: QuickStatsProps) {
       {stats.map((stat, i) => (
         <div
           key={stat.label}
-          className="fade-in rounded-xl border border-border bg-card p-4 transition-colors hover:border-border/80"
+          className={cn('glass-card p-4 fade-in', i === 0 && 'active-glow')}
           style={{ animationDelay: `${50 + i * 30}ms` }}
         >
-          <p className="font-label text-[0.6875rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground">
+          <p className="font-label text-[0.625rem] font-medium uppercase tracking-[0.1em] text-muted-foreground">
             {stat.label}
           </p>
           <p
             className={cn(
-              'mt-1 font-heading text-2xl font-bold tracking-tight',
+              'mt-1 font-heading text-2xl font-extrabold tracking-tight',
               stat.gradient && 'text-gradient-brand',
               stat.color
             )}
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index a2c2bade..52df7dea 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -21,8 +21,8 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
   if (sessions.length === 0) return null
 
   return (
-    <div className="fade-in rounded-xl border border-border bg-card" style={{ animationDelay: `${delay}ms` }}>
-      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+    <div className="glass-card-static fade-in" style={{ animationDelay: `${delay}ms` }}>
+      <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
         <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
         <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
           View All