sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use blank KPI background with overlaid titles for middle-row cards

Browse source 
The baked-in labels on the Resource Distribution and Infrastructure Map
background art were getting covered by the dim/shadow overlay, so switch
both cards to the blank KPI background and render the title as our own
text element on top instead.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude 2026-06-18 17:32:11 +00:00
parent c2aeaa1202
commit 1481b9e39c
No known key found for this signature in database
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/pages/Infrastructure.tsx
View file

@ -203,19 +203,23 @@ export default function Infrastructure() {
<div className="min-h-0 flex-1">
<div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
{/* Resource Distribution */}
<div style={framedCard('/resource-distrabution-bg.png')}>
<div style={framedCard('/blank-kpi-bg.png')}>
<div style={cardDim} />
<div style={cardVignette} />
<div className="relative z-10 flex flex-1 flex-col items-center justify-center">
<Donut data={distributionData} />
<div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Resource Distribution</h3>
<div className="flex flex-1 flex-col items-center justify-center">
<Donut data={distributionData} />
</div>
</div>
</div>
{/* Infrastructure Map — expanded */}
<div style={framedCard('/infra-map-kpi.png')}>
<div style={framedCard('/blank-kpi-bg.png')}>
<div style={cardDim} />
<div style={cardVignette} />
<div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Infrastructure Map</h3>
<div className="relative flex-1" style={{ minHeight: '140px' }}>
<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) => (