From 87c7b28c70c502885eb9da2c9eccb5cf1b613f55 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 14:36:54 +0000
Subject: [PATCH] Polish Glance page to match mockup

Fix System Status "Operational" text to green (was gold italic) and
bump size, and switch Shortcuts from a 2x2 grid to a single row of 4
with gold icons to match the blueprint mockup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
---
 src/components/BottomRow.tsx   | 8 ++++----
 src/components/StatusCards.tsx | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/BottomRow.tsx b/src/components/BottomRow.tsx
index 1010050..cb93897 100644
--- a/src/components/BottomRow.tsx
+++ b/src/components/BottomRow.tsx
@@ -82,19 +82,19 @@ export default function BottomRow() {
           <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '16px' }}>
             Shortcuts
           </h3>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-4 gap-3">
             {shortcuts.map((item) => {
               const Icon = item.icon
               return (
                 <button
                   key={item.label}
                   className="flex flex-col items-center gap-2 cursor-pointer bg-transparent transition-all duration-200 group/btn"
-                  style={{ padding: '16px 12px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.08)', boxShadow: '0 0 12px rgba(200,164,52,0.02)' }}
+                  style={{ padding: '16px 8px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.08)', boxShadow: '0 0 12px rgba(200,164,52,0.02)' }}
                   onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.2)'; e.currentTarget.style.boxShadow = '0 0 16px rgba(200,164,52,0.06)' }}
                   onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.08)'; e.currentTarget.style.boxShadow = '0 0 12px rgba(200,164,52,0.02)' }}
                 >
-                  <Icon size={20} style={{ color: '#7A7D85', transition: 'color 0.2s' }} />
-                  <span style={{ fontSize: '10px', color: '#7A7D85' }}>{item.label}</span>
+                  <Icon size={20} style={{ color: '#C8A434', transition: 'color 0.2s' }} />
+                  <span style={{ fontSize: '11px', color: '#C9CCD1', whiteSpace: 'nowrap' }}>{item.label}</span>
                 </button>
               )
             })}
diff --git a/src/components/StatusCards.tsx b/src/components/StatusCards.tsx
index 27403ec..9b6d32d 100644
--- a/src/components/StatusCards.tsx
+++ b/src/components/StatusCards.tsx
@@ -22,8 +22,8 @@ export default function StatusCards() {
             <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
               System Status
             </h3>
-            <p style={{ fontSize: '13px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1.2 }}>All Systems</p>
-            <p style={{ fontSize: '13px', fontWeight: 700, color: '#C8A434', fontStyle: 'italic', lineHeight: 1.2 }}>Operational</p>
+            <p style={{ fontSize: '18px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1.3 }}>All Systems</p>
+            <p style={{ fontSize: '18px', fontWeight: 700, color: '#2ECC71', lineHeight: 1.3 }}>Operational</p>
           </div>
           <ProgressRing percentage={100} size={44} strokeWidth={3} />
         </div>