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

Polish Glance page to match mockup

Browse source 
Fix System Status "Operational" text to green (was gold italic) and
bump size, and switch Shortcuts from a 2x2 grid to a single row of 4
with gold icons to match the blueprint mockup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
This commit is contained in:
Claude 2026-06-18 14:36:54 +00:00
parent dd75acbcd9
commit 87c7b28c70
No known key found for this signature in database
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/BottomRow.tsx
View file

@ -82,19 +82,19 @@ export default function BottomRow() {
<h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '16px' }}> <h3 style={{ fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '16px' }}>
Shortcuts Shortcuts
</h3> </h3>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-4 gap-3">
{shortcuts.map((item) => { {shortcuts.map((item) => {
const Icon = item.icon const Icon = item.icon
return ( return (
<button <button
key={item.label} key={item.label}
className="flex flex-col items-center gap-2 cursor-pointer bg-transparent transition-all duration-200 group/btn" className="flex flex-col items-center gap-2 cursor-pointer bg-transparent transition-all duration-200 group/btn"
style={{ padding: '16px 12px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.08)', boxShadow: '0 0 12px rgba(200,164,52,0.02)' }} style={{ padding: '16px 8px', borderRadius: '10px', border: '1px solid rgba(200,164,52,0.08)', boxShadow: '0 0 12px rgba(200,164,52,0.02)' }}
onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.2)'; e.currentTarget.style.boxShadow = '0 0 16px rgba(200,164,52,0.06)' }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.2)'; e.currentTarget.style.boxShadow = '0 0 16px rgba(200,164,52,0.06)' }}
onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.08)'; e.currentTarget.style.boxShadow = '0 0 12px rgba(200,164,52,0.02)' }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(200,164,52,0.08)'; e.currentTarget.style.boxShadow = '0 0 12px rgba(200,164,52,0.02)' }}
> >
<Icon size={20} style={{ color: '#7A7D85', transition: 'color 0.2s' }} /> <Icon size={20} style={{ color: '#C8A434', transition: 'color 0.2s' }} />
<span style={{ fontSize: '10px', color: '#7A7D85' }}>{item.label}</span> <span style={{ fontSize: '11px', color: '#C9CCD1', whiteSpace: 'nowrap' }}>{item.label}</span>
</button> </button>
) )
})} })}

4
src/components/StatusCards.tsx
View file

@ -22,8 +22,8 @@ export default function StatusCards() {
<h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}> <h3 style={{ fontSize: '10px', textTransform: 'uppercase', letterSpacing: '1.5px', color: '#7A7D85', fontWeight: 500, marginBottom: '8px' }}>
System Status System Status
</h3> </h3>
<p style={{ fontSize: '13px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1.2 }}>All Systems</p> <p style={{ fontSize: '18px', fontWeight: 700, color: '#E8E6E0', lineHeight: 1.3 }}>All Systems</p>
<p style={{ fontSize: '13px', fontWeight: 700, color: '#C8A434', fontStyle: 'italic', lineHeight: 1.2 }}>Operational</p> <p style={{ fontSize: '18px', fontWeight: 700, color: '#2ECC71', lineHeight: 1.3 }}>Operational</p>
</div> </div>
<ProgressRing percentage={100} size={44} strokeWidth={3} /> <ProgressRing percentage={100} size={44} strokeWidth={3} />
</div> </div>