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

Polish Infrastructure status cards and add network background to Resource Trend

Browse source 
Make status cards more transparent with centered, better-spaced content,
and apply the network-traffic background to Resource Trend with a
blue/orange/green/brown line set.

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:39:47 +00:00
parent 1481b9e39c
commit fe9e2ab62a
No known key found for this signature in database
1 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/Infrastructure.tsx
View file

@ -33,6 +33,7 @@ const trendData = Array.from({ length: 14 }, (_, i) => ({
compute: 60 + i * 0.6 + Math.sin(i / 2) * 3, compute: 60 + i * 0.6 + Math.sin(i / 2) * 3,
storage: 35 + i * 0.4 + Math.cos(i / 3) * 2, storage: 35 + i * 0.4 + Math.cos(i / 3) * 2,
database: 20 + i * 0.2 + Math.sin(i / 4) * 1.5, database: 20 + i * 0.2 + Math.sin(i / 4) * 1.5,
network: 45 + i * 0.3 + Math.cos(i / 2.5) * 2.5,
})) }))
const activities = [ const activities = [
@ -181,19 +182,23 @@ export default function Infrastructure() {
</div> </div>
{/* Status Cards */} {/* Status Cards */}
<div className="grid w-full grid-cols-5 gap-5 shrink-0" style={{ marginTop: '8px' }}> <div className="grid w-full grid-cols-5 gap-5 shrink-0" style={{ marginTop: '8px', height: '110px' }}>
{statusCards.map((card) => { {statusCards.map((card) => {
const Icon = card.icon const Icon = card.icon
return ( return (
<div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20"> <div
<h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}> key={card.label}
style={{ ...cardBase, backgroundColor: 'rgba(10, 10, 12, 0.5)', padding: '18px', justifyContent: 'center', alignItems: 'center', gap: '8px' }}
className="hover:!border-gold/20"
>
<h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, textAlign: 'center' }}>
{card.label} {card.label}
</h3> </h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Icon size={16} style={{ color: card.color ?? '#C8A434' }} /> <Icon size={18} style={{ color: card.color ?? '#C8A434' }} />
<span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span> <span style={{ fontSize: '26px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
</div> </div>
<p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', marginTop: '6px' }}>{card.sub}</p> <p style={{ fontSize: '10px', color: card.color ?? '#7A7D85', textAlign: 'center' }}>{card.sub}</p>
</div> </div>
) )
})} })}
@ -237,16 +242,19 @@ export default function Infrastructure() {
<div className="shrink-0"> <div className="shrink-0">
<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' }} 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' }}>
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart data={trendData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}> <LineChart data={trendData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
<XAxis dataKey="day" hide /> <XAxis dataKey="day" hide />
<Line type="monotone" dataKey="compute" stroke="#C8A434" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} /> <Line type="monotone" dataKey="compute" stroke="#3B82F6" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
<Line type="monotone" dataKey="storage" stroke="#E67E22" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} /> <Line type="monotone" dataKey="storage" stroke="#E67E22" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
<Line type="monotone" dataKey="database" stroke="#2ECC71" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} /> <Line type="monotone" dataKey="database" stroke="#2ECC71" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
<Line type="monotone" dataKey="network" stroke="#8B5E3C" strokeWidth={1.5} dot={false} isAnimationActive animationDuration={1000} />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>