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

Restore dim/vignette blend on middle row cards only

Browse source 
Resource Trend stays plain per clarification; only Resource Distribution
and Infrastructure Map get the hero-style blend.

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:47:09 +00:00
parent 107bf2e1ba
commit ef6ffb2426
No known key found for this signature in database
1 changed files with 18 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/pages/Infrastructure.tsx
View file

@ -81,6 +81,20 @@ 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 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' },
@ -195,6 +209,8 @@ 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('/blank-kpi-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"> <div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Resource Distribution</h3> <h3 style={sectionTitle}>Resource Distribution</h3>
<div className="flex flex-1 flex-col items-center justify-center"> <div className="flex flex-1 flex-col items-center justify-center">
@ -205,6 +221,8 @@ export default function Infrastructure() {
{/* Infrastructure Map — expanded */} {/* Infrastructure Map — expanded */}
<div style={framedCard('/blank-kpi-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"> <div className="relative z-10 flex flex-1 flex-col">
<h3 style={sectionTitle}>Infrastructure Map</h3> <h3 style={sectionTitle}>Infrastructure Map</h3>
<div className="relative flex-1" style={{ minHeight: '140px' }}> <div className="relative flex-1" style={{ minHeight: '140px' }}>