From 8689e0982b6844dc5c66cd1f5aec88f4471468bf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 17:20:38 +0000
Subject: [PATCH] Blend KPI card borders into background and remove Resource
 Distribution card

Fix radial-gradient vignette to use closest-side sizing so card border
art fades fully at edge midpoints, not just corners. Remove the Resource
Distribution donut card and expand Infrastructure Map to fill the space.

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

diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index cab94f4..8b8f047 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -12,13 +12,6 @@ const statusCards = [
   { label: 'Monthly Cost', value: '$24,560.75', icon: DollarSign, sub: '↑ 3.2% MTD' },
 ]
 
-const distributionData = [
-  { name: 'Compute', value: 42, color: '#C8A434' },
-  { name: 'Storage', value: 28, color: '#E67E22' },
-  { name: 'Database', value: 18, color: '#2ECC71' },
-  { name: 'Network', value: 12, color: '#7A7D85' },
-]
-
 const costData = [
   { name: 'Compute', value: 38, color: '#C8A434' },
   { name: 'Storage', value: 22, color: '#E67E22' },
@@ -86,7 +79,6 @@ function framedCard(bgUrl: string): React.CSSProperties {
     backgroundSize: '100% 100%',
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
-    borderRadius: '12px',
     position: 'relative',
     overflow: 'hidden',
     height: '100%',
@@ -96,6 +88,13 @@ function framedCard(bgUrl: string): React.CSSProperties {
   }
 }
 
+const cardVignette: React.CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  background: 'radial-gradient(ellipse closest-side at center, transparent 45%, var(--color-page) 100%)',
+}
+
 function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
   return (
     <div className="flex flex-1 items-center gap-4">
@@ -196,19 +195,13 @@ export default function Infrastructure() {
 
       {/* Middle Row */}
       <div className="min-h-0 flex-1">
-        <div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6">
-          {/* Resource Distribution */}
-          <div style={framedCard('/resource-distrabution-bg.png')}>
-            <div className="relative z-10 flex flex-1 flex-col">
-              <Donut data={distributionData} centerLabel="128" />
-            </div>
-          </div>
-
-          {/* Infrastructure Map */}
+        <div className="grid h-full w-full grid-cols-[1.6fr_1fr] gap-6">
+          {/* Infrastructure Map — expanded */}
           <div style={framedCard('/infra-map-kpi.png')}>
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <div className="relative flex-1" style={{ minHeight: '140px' }}>
-                <Globe2 size={120} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
+                <Globe2 size={160} strokeWidth={0.6} style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: 'rgba(200,164,52,0.08)' }} />
                 {regions.map((r) => (
                   <div key={r.name} className="absolute" style={{ left: r.x, top: r.y, transform: 'translate(-50%, -50%)' }} title={`${r.name}: ${r.resources} resources`}>
                     <div style={{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#C8A434', boxShadow: '0 0 10px rgba(200,164,52,0.7)' }} />
@@ -220,6 +213,7 @@ export default function Infrastructure() {
 
           {/* Top Resources by Utilization */}
           <div style={framedCard('/resource-utilization.png')}>
+            <div style={cardVignette} />
             <div className="relative z-10 flex flex-1 flex-col">
               <div className="flex flex-1 flex-col justify-around gap-4">
                 {topResources.map((res) => {