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

Blend KPI card borders into background and remove Resource Distribution card

Browse source 
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
This commit is contained in:
Claude 2026-06-18 17:20:38 +00:00
parent 7af31c0202
commit 8689e0982b
No known key found for this signature in database
1 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/pages/Infrastructure.tsx
View file

@ -12,13 +12,6 @@ const statusCards = [
{ label: 'Monthly Cost', value: '$24,560.75', icon: DollarSign, sub: '↑ 3.2% MTD' }, { 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 = [ const costData = [
{ name: 'Compute', value: 38, color: '#C8A434' }, { name: 'Compute', value: 38, color: '#C8A434' },
{ name: 'Storage', value: 22, color: '#E67E22' }, { name: 'Storage', value: 22, color: '#E67E22' },
@ -86,7 +79,6 @@ function framedCard(bgUrl: string): React.CSSProperties {
backgroundSize: '100% 100%', backgroundSize: '100% 100%',
backgroundPosition: 'center', backgroundPosition: 'center',
backgroundRepeat: 'no-repeat', backgroundRepeat: 'no-repeat',
borderRadius: '12px',
position: 'relative', position: 'relative',
overflow: 'hidden', overflow: 'hidden',
height: '100%', 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 }) { function Donut({ data, centerLabel }: { data: { name: string; value: number; color: string }[]; centerLabel?: string }) {
return ( return (
<div className="flex flex-1 items-center gap-4"> <div className="flex flex-1 items-center gap-4">
@ -196,19 +195,13 @@ export default function Infrastructure() {
{/* Middle Row */} {/* Middle Row */}
<div className="min-h-0 flex-1"> <div className="min-h-0 flex-1">
<div className="grid h-full w-full grid-cols-[1fr_1.4fr_1fr] gap-6"> <div className="grid h-full w-full grid-cols-[1.6fr_1fr] gap-6">
{/* Resource Distribution */} {/* Infrastructure Map — expanded */}
<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 style={framedCard('/infra-map-kpi.png')}> <div style={framedCard('/infra-map-kpi.png')}>
<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' }}>
<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) => ( {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 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)' }} /> <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 */} {/* Top Resources by Utilization */}
<div style={framedCard('/resource-utilization.png')}> <div style={framedCard('/resource-utilization.png')}>
<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="flex flex-1 flex-col justify-around gap-4"> <div className="flex flex-1 flex-col justify-around gap-4">
{topResources.map((res) => { {topResources.map((res) => {