From a6c513579bfa1b56e0f92553d56948491184589f Mon Sep 17 00:00:00 2001
From: Urtzi Alfaro <urtzialfaro@MacBook-Pro-de-Urtzi.local>
Date: Thu, 27 Nov 2025 07:42:14 +0100
Subject: [PATCH] style(dashboard): Align visual hierarchy across cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UnifiedActionQueueCard changes:
- Update container: shadow-xl, border-2, hover:shadow-2xl
- Add large hero icon (w-16 h-16 md:w-20 md:h-20) with AlertCircle
- Colored background based on queue urgency (red/blue)
- Upgrade title to text-2xl md:text-3xl font-bold
- Move total actions and SSE status to inline metric badges

ExecutionProgressTracker changes:
- Update container: shadow-xl, border-2, hover:shadow-2xl
- Add large hero icon (w-16 h-16 md:w-20 md:h-20) with TrendingUp
- Primary color background for hero icon
- Upgrade title to text-2xl md:text-3xl font-bold

Both cards now match the visual weight and hero pattern of
GlanceableHealthHero and IntelligentSystemSummaryCard for
consistent dashboard hierarchy and improved scannability.

Fixes: Issue #1 - Style alignment

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../dashboard/ExecutionProgressTracker.tsx    | 22 +++--
 .../dashboard/UnifiedActionQueueCard.tsx      | 82 +++++++++++++------
 2 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/dashboard/ExecutionProgressTracker.tsx b/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
index 5cc486d9..f7449ddd 100644
--- a/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
+++ b/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
@@ -214,20 +214,28 @@ export function ExecutionProgressTracker({
 
   return (
     <div
-      className="rounded-xl shadow-lg p-6 border"
+      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
       style={{
         backgroundColor: 'var(--bg-primary)',
         borderColor: 'var(--border-primary)',
       }}
     >
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
-        <TrendingUp className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
-        <div>
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+      {/* Header with Hero Icon */}
+      <div className="flex items-center gap-4 mb-6">
+        {/* Hero Icon */}
+        <div
+          className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
+          style={{ backgroundColor: 'var(--color-primary-100)' }}
+        >
+          <TrendingUp className="w-8 h-8 md:w-10 md:h-10" strokeWidth={2.5} style={{ color: 'var(--color-primary-600)' }} />
+        </div>
+
+        {/* Title */}
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
             {t('dashboard:execution_progress.title')}
           </h2>
-          <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
             {t('dashboard:execution_progress.subtitle')}
           </p>
         </div>
diff --git a/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx b/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
index 90c07ebe..3116ff96 100644
--- a/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
+++ b/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
@@ -706,42 +706,70 @@ export function UnifiedActionQueueCard({
 
   return (
     <div
-      className="rounded-xl shadow-lg p-6 border"
+      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
       style={{
         backgroundColor: 'var(--bg-primary)',
         borderColor: 'var(--border-primary)',
       }}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+      {/* Header with Hero Icon */}
+      <div className="flex items-center gap-4 mb-6">
+        {/* Hero Icon */}
+        <div
+          className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
+          style={{ backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)' }}
+        >
+          <AlertCircle
+            className="w-8 h-8 md:w-10 md:h-10"
+            strokeWidth={2.5}
+            style={{ color: displayQueue.totalActions > 5 ? 'var(--color-error-600)' : 'var(--color-info-600)' }}
+          />
+        </div>
+
+        {/* Title + Inline Metrics */}
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
             {t('dashboard:action_queue_title')}
           </h2>
-          {/* SSE Connection Indicator */}
-          <div className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--text-secondary)' }}>
-            {isConnected ? (
-              <>
-                <Wifi className="w-3.5 h-3.5" style={{ color: 'var(--color-success)' }} />
-                <span className="hidden sm:inline">Live</span>
-              </>
-            ) : (
-              <>
-                <WifiOff className="w-3.5 h-3.5" style={{ color: 'var(--color-error)' }} />
-                <span className="hidden sm:inline">Offline</span>
-              </>
-            )}
+
+          {/* Inline Metric Badges */}
+          <div className="flex flex-wrap items-center gap-3">
+            {/* Total Actions Badge */}
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-md"
+              style={{
+                backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)',
+                color: displayQueue.totalActions > 5 ? 'var(--color-error-800)' : 'var(--color-info-800)',
+                border: `1px solid ${displayQueue.totalActions > 5 ? 'var(--color-error-300)' : 'var(--color-info-300)'}`,
+              }}
+            >
+              <span className="font-semibold">{displayQueue.totalActions}</span>
+              <span className="text-xs">{t('dashboard:total_actions')}</span>
+            </div>
+
+            {/* SSE Connection Badge */}
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs"
+              style={{
+                backgroundColor: isConnected ? 'var(--color-success-100)' : 'var(--color-error-100)',
+                color: isConnected ? 'var(--color-success-800)' : 'var(--color-error-800)',
+                border: `1px solid ${isConnected ? 'var(--color-success-300)' : 'var(--color-error-300)'}`,
+              }}
+            >
+              {isConnected ? (
+                <>
+                  <Wifi className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Live</span>
+                </>
+              ) : (
+                <>
+                  <WifiOff className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Offline</span>
+                </>
+              )}
+            </div>
           </div>
         </div>
-        <span
-          className="px-3 py-1 rounded-full text-sm font-semibold"
-          style={{
-            backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)',
-            color: displayQueue.totalActions > 5 ? 'var(--color-error-800)' : 'var(--color-info-800)',
-          }}
-        >
-          {displayQueue.totalActions} {t('dashboard:total_actions')}
-        </span>
       </div>
 
       {/* Toast Notification */}