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

Remove hero-style vignette/dim from middle row and Resource Trend cards

Browse source 
Leave the card backgrounds plain/regular instead of blending them like
the hero banner.

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

20
src/pages/Infrastructure.tsx
View file

@ -81,20 +81,6 @@ 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' },
@ -209,8 +195,6 @@ 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">
@ -221,8 +205,6 @@ 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' }}>
@ -243,8 +225,6 @@ export default function Infrastructure() {
<div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6"> <div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6">
{/* Resource Trend */} {/* Resource Trend */}
<div style={{ ...cardBase, height: 'auto', ...framedCard('/archnest-network-traffic-bg.png'), padding: '20px' }} 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"> <div className="relative z-10">
<h3 style={sectionTitle}>Resource Trend</h3> <h3 style={sectionTitle}>Resource Trend</h3>
<div style={{ height: '100px' }}> <div style={{ height: '100px' }}>