From fe9e2ab62a005355e4ed41a754d931bc157d5edd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:39:47 +0000
Subject: [PATCH] Polish Infrastructure status cards and add network background
 to Resource Trend

Make status cards more transparent with centered, better-spaced content,
and apply the network-traffic background to Resource Trend with a
blue/orange/green/brown line set.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
---
 src/pages/Infrastructure.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 8e5119a..fadaa90 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -33,6 +33,7 @@ const trendData = Array.from({ length: 14 }, (_, i) => ({
   compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
   storage: 35 + i * 0.4 + Math.cos(i / 3) * 2,
   database: 20 + i * 0.2 + Math.sin(i / 4) * 1.5,
+  network: 45 + i * 0.3 + Math.cos(i / 2.5) * 2.5,
 }))
 
 const activities = [
@@ -181,19 +182,23 @@ export default function Infrastructure() {
       </div>
 
       {/* Status Cards */}
-      <div className="grid w-full grid-cols-5 gap-5 shrink-0" style={{ marginTop: '8px' }}>
+      <div className="grid w-full grid-cols-5 gap-5 shrink-0" style={{ marginTop: '8px', height: '110px' }}>
         {statusCards.map((card) => {
           const Icon = card.icon
           return (
-            <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
-              <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
+            <div
+              key={card.label}
+              style={{ ...cardBase, backgroundColor: 'rgba(10, 10, 12, 0.5)', padding: '18px', justifyContent: 'center', alignItems: 'center', gap: '8px' }}
+              className="hover:!border-gold/20"
+            >
+              <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, textAlign: 'center' }}>
                 {card.label}
               </h3>
               <div className="flex items-center gap-2">
-                <Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
-                <span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
+                <Icon size={18} style={{ color: card.color ?? '#C8A434' }} />
+                <span style={{ fontSize: '26px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
               </div>
-              <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
+              <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', textAlign: 'center' }}>{card.sub}</p>
             </div>
           )
         })}
@@ -237,16 +242,19 @@ export default function Infrastructure() {
       <div className="shrink-0">
         <div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6">
           {/* Resource Trend */}
-          <div style={{ ...cardBase, height: 'auto' }} className="hover:!border-gold/15">
+          <div style={{ ...cardBase, height: 'auto', ...framedCard('/archnest-network-traffic-bg.png'), padding: '20px' }} className="hover:!border-gold/15">
+            <div style={cardDim} />
+            <div style={cardVignette} />
             <div className="relative z-10">
               <h3 style={sectionTitle}>Resource Trend</h3>
               <div style={{ height: '100px' }}>
                 <ResponsiveContainer width="100%" height="100%">
                   <LineChart data={trendData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
                     <XAxis dataKey="day" hide />
-                    <Line type="monotone" dataKey="compute" stroke="#C8A434" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
+                    <Line type="monotone" dataKey="compute" stroke="#3B82F6" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                     <Line type="monotone" dataKey="storage" stroke="#E67E22" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                     <Line type="monotone" dataKey="database" stroke="#2ECC71" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
+                    <Line type="monotone" dataKey="network" stroke="#8B5E3C" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
                   </LineChart>
                 </ResponsiveContainer>
               </div>