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

Revert status row to plain cards and dim middle-row KPI backgrounds

Browse source 
The blank KPI background didn't read well on the top status row, so
revert those to the plain card style. Add a dimming overlay to the
Resource Distribution and Infrastructure Map backgrounds to reduce
visual clutter in the middle row.

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:28:52 +00:00
parent 9876798a5c
commit c2aeaa1202
No known key found for this signature in database
1 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/pages/Infrastructure.tsx
View file

@ -87,6 +87,13 @@ const cardVignette: React.CSSProperties = {
background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)', background: 'radial-gradient(ellipse closest-side at center, transparent 70%, var(--color-page) 100%)',
} }
const cardDim: React.CSSProperties = {
position: 'absolute',
inset: 0,
pointerEvents: 'none',
backgroundColor: 'rgba(8, 8, 10, 0.45)',
}
const distributionData = [ const distributionData = [
{ name: 'Compute', value: 42, color: '#C8A434' }, { name: 'Compute', value: 42, color: '#C8A434' },
{ name: 'Storage', value: 28, color: '#E67E22' }, { name: 'Storage', value: 28, color: '#E67E22' },
@ -178,9 +185,7 @@ export default function Infrastructure() {
{statusCards.map((card) => { {statusCards.map((card) => {
const Icon = card.icon const Icon = card.icon
return ( return (
<div key={card.label} style={{ ...framedCard('/blank-kpi-bg.png'), padding: '16px' }}> <div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
<div style={cardVignette} />
<div className="relative z-10">
<h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}> <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
{card.label} {card.label}
</h3> </h3>
@ -190,7 +195,6 @@ export default function Infrastructure() {
</div> </div>
<p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p> <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p>
</div> </div>
</div>
) )
})} })}
</div> </div>
@ -200,6 +204,7 @@ export default function Infrastructure() {
<div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6"> <div className="grid h-full w-full grid-cols-[1fr_1.6fr] gap-6">
{/* Resource Distribution */} {/* Resource Distribution */}
<div style={framedCard('/resource-distrabution-bg.png')}> <div style={framedCard('/resource-distrabution-bg.png')}>
<div style={cardDim} />
<div style={cardVignette} /> <div style={cardVignette} />
<div className="relative z-10 flex flex-1 flex-col items-center justify-center"> <div className="relative z-10 flex flex-1 flex-col items-center justify-center">
<Donut data={distributionData} /> <Donut data={distributionData} />
@ -208,6 +213,7 @@ export default function Infrastructure() {
{/* Infrastructure Map — expanded */} {/* Infrastructure Map — expanded */}
<div style={framedCard('/infra-map-kpi.png')}> <div style={framedCard('/infra-map-kpi.png')}>
<div style={cardDim} />
<div style={cardVignette} /> <div style={cardVignette} />
<div className="relative z-10 flex flex-1 flex-col"> <div className="relative z-10 flex flex-1 flex-col">
<div className="relative flex-1" style={{ minHeight: '140px' }}> <div className="relative flex-1" style={{ minHeight: '140px' }}>