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,
storage: 35 + i * 0.4 + Math.cos(i / 3) * 2,
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 = [
@ -181,19 +182,23 @@ export default function Infrastructure() {
</div>
{/* 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) => {
const Icon = card.icon
return (
<div key={card.label} style={{ ...cardBase, padding: '16px' }} className="hover:!border-gold/20">
<h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
<div
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}
</h3>
<div className="flex items-center gap-2">
<Icon size={16} style={{ color: card.color ?? '#C8A434' }} />
<span style={{ fontSize: '22px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
<Icon size={18} style={{ color: card.color ?? '#C8A434' }} />
<span style={{ fontSize: '26px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1 }}>{card.value}</span>
</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>
)
})}
@ -237,16 +242,19 @@ export default function Infrastructure() {
<div className="shrink-0">
<div className="grid w-full grid-cols-[1.4fr_1fr_1fr] gap-6">
{/* 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">
<h3 style={sectionTitle}>Resource Trend</h3>
<div style={{ height: '100px' }}>
<ResponsiveContainer width="100%" height="100%">
<LineChart data={trendData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
<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="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>
</ResponsiveContainer>
</div>