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

Restructure BookNest hero header: bigger title, taller Favorites card, Add Bookmark button

Browse source
This commit is contained in:
Claude 2026-06-18 18:25:19 +00:00
parent 8882d0af7c
commit bed903914a
No known key found for this signature in database
3 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.tsx
View file

@ -11,7 +11,9 @@ function App() {
const sidebarWidth = sidebarCollapsed ? 64 : 200 const sidebarWidth = sidebarCollapsed ? 64 : 200
const location = useLocation() const location = useLocation()
const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest' const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
const heroPaddingTop = location.pathname === '/booknest' ? '240px' : '72px' const heroPaddingTop = location.pathname === '/booknest' ? '90px' : '72px'
const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
const topBarHeight = location.pathname === '/booknest' ? 72 : 56
return ( return (
<div className="min-h-screen w-screen overflow-hidden bg-page"> <div className="min-h-screen w-screen overflow-hidden bg-page">
@ -32,7 +34,7 @@ function App() {
className="absolute inset-0 h-full w-full" className="absolute inset-0 h-full w-full"
style={{ style={{
objectFit: 'cover', objectFit: 'cover',
objectPosition: 'center 5%', objectPosition: heroObjectPosition,
maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)', maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
}} }}
@ -52,7 +54,7 @@ function App() {
<section <section
className="relative flex w-full flex-col overflow-hidden" className="relative flex w-full flex-col overflow-hidden"
style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }} style={{ height: `calc(100vh - ${topBarHeight}px)`, scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
> >
<Routes> <Routes>
<Route path="/" element={<Glance />} /> <Route path="/" element={<Glance />} />

9
src/components/TopBar.tsx
View file

@ -32,14 +32,17 @@ export default function TopBar() {
}, []) }, [])
return ( return (
<header className="h-14 flex items-center px-6 sticky top-0 z-40"> <header className="flex items-center px-6 sticky top-0 z-40" style={{ height: subtitle ? '72px' : '56px' }}>
{/* Page Title — pushed away from sidebar edge */} {/* Page Title — pushed away from sidebar edge */}
<div style={{ marginLeft: '20px' }}> <div style={{ marginLeft: '20px' }}>
<h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434' }}> <h1
className="font-bold uppercase tracking-wide"
style={{ color: '#C8A434', fontSize: subtitle ? '28px' : '18px' }}
>
{title} {title}
</h1> </h1>
{subtitle && ( {subtitle && (
<p className="text-[11px]" style={{ color: '#7A7D85', marginTop: '-2px' }}> <p className="text-[13px]" style={{ color: '#A8A6A0', marginTop: '2px' }}>
{subtitle} {subtitle}
</p> </p>
)} )}

53
src/pages/BookNest.tsx
View file

@ -4,6 +4,7 @@ import {
Link2, Link2,
FolderOpen, FolderOpen,
Star, Star,
Plus,
Server, Server,
Bot, Bot,
Cloud, Cloud,
@ -269,17 +270,35 @@ export default function BookNest() {
} }
return ( return (
<div className="flex h-full w-full flex-col gap-5 overflow-y-auto" style={{ scrollbarWidth: 'none' }}> <div className="flex h-full w-full flex-col overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
{/* Page stats */} <div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr', gridTemplateRows: 'auto 1fr' }}>
<div className="flex items-center gap-5 shrink-0" style={{ fontSize: '12px', color: '#7A7D85' }}> {/* Page stats + Add Bookmark — main column only, so sidebar can rise above it */}
<span className="flex items-center gap-1.5"><Link2 size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>312</strong> Links</span> <div className="flex items-center justify-between shrink-0" style={{ gridColumn: 1, gridRow: 1, marginTop: '180px' }}>
<span className="flex items-center gap-1.5"><FolderOpen size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>18</strong> Categories</span> <div className="flex items-center gap-5" style={{ fontSize: '12px', color: '#7A7D85' }}>
<span className="flex items-center gap-1.5"><Star size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>12</strong> Favorites</span> <span className="flex items-center gap-1.5"><Link2 size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>312</strong> Links</span>
</div> <span className="flex items-center gap-1.5"><FolderOpen size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>18</strong> Categories</span>
<span className="flex items-center gap-1.5"><Star size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>12</strong> Favorites</span>
</div>
<button
className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
style={{
fontSize: '12px',
fontWeight: 600,
color: '#0A0B0D',
backgroundColor: '#C8A434',
border: 'none',
borderRadius: '8px',
padding: '9px 16px',
boxShadow: '0 0 14px rgba(200,164,52,0.2)',
}}
>
<Plus size={14} />
Add Bookmark
</button>
</div>
<div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr' }}>
{/* Main column */} {/* Main column */}
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '20px' }}>
{/* Quick Access */} {/* Quick Access */}
<div className="grid grid-cols-5 gap-4"> <div className="grid grid-cols-5 gap-4">
{quickAccess.map((qa) => ( {quickAccess.map((qa) => (
@ -317,15 +336,15 @@ export default function BookNest() {
</div> </div>
</div> </div>
{/* Right sidebar */} {/* Right sidebar — spans both rows so Favorites reaches up near the hero */}
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
<div style={cardBase}> <div style={{ ...cardBase, padding: '22px' }}>
<h3 style={sectionTitle}>Favorites</h3> <h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3>
<div className="flex flex-col" style={{ gap: '2px' }}> <div className="flex flex-col" style={{ gap: '4px' }}>
{favorites.map((f) => ( {favorites.map((f) => (
<div key={f.name} className="flex items-center gap-2.5" style={{ padding: '6px 0' }}> <div key={f.name} className="flex items-center gap-3" style={{ padding: '8px 0' }}>
<f.icon size={15} style={{ color: '#C8A434' }} /> <f.icon size={17} style={{ color: '#C8A434' }} />
<span style={{ fontSize: '12px', color: '#E8E6E0' }}>{f.name}</span> <span style={{ fontSize: '13px', color: '#E8E6E0' }}>{f.name}</span>
</div> </div>
))} ))}
</div> </div>