diff --git a/design-decisions.md b/design-decisions.md index b556650..3ec17a9 100644 --- a/design-decisions.md +++ b/design-decisions.md @@ -81,6 +81,37 @@ - Network Traffic card has its own background image at low opacity - User avatar dropdown has: Profile, Appearance, Security, Help & Support, Sign Out +### Infrastructure Page +- Hero banner rendered at the **App.tsx layout level** (not per-page), so it can extend + behind the sticky TopBar — conditional via `showHero = location.pathname === '/infrastructure'`. + TopBar and the search input are transparent on hero routes so the banner shows through. +- Hero image: `object-position: center 5%` to reveal the full arch + sky; faded out via + `linear-gradient` mask (vertical) + a `radial-gradient(ellipse 70% 100% at center, ...)` + overlay (sides/corners) — borderless, blends into page background. +- Sub-tabs trimmed to **Overview only** (Compute → Tags are future work, not built yet). +- Status cards: `rgba(10,10,12,0.5)` background (more transparent than other pages), + content centered (`justify-content/alignItems: center`) with a fixed row height (110px) + so there's breathing room instead of empty space below left-aligned content. +- Middle row (`grid-cols-[1fr_1.6fr]`): **Resource Distribution** (donut) and **Node Status** + (server tile grid). Both use the `/blank-kpi-bg.png` background art with a `cardDim` + (semi-transparent dark overlay) + `cardVignette` (radial-gradient `closest-side` blend) + combo — keeps the background pattern visible but subdued, with borders blended rather + than hard-edged. Card titles are rendered as our own text, NOT baked into the image + (baked-in labels got covered by the dim overlay). +- **Node Status** card: originally a world-map-style region dot plot, replaced with a + 4-column tile grid (one tile per server, colored status dot + name) — a world map + didn't make sense for a small/single-site infra. Reuse this "small-scale" reasoning + for any future map-like cards. +- Bottom row (`grid-cols-[1.4fr_1fr_1fr]`): Resource Trend / Cost Breakdown / Recent + Activity — **left plain/regular**, no dim/vignette blending (explicit user preference, + only the middle row gets the hero-style blend). Resource Trend uses the + `/archnest-network-traffic-bg.png` background (plain, no dim/vignette) with 4 trend + lines: blue `#3B82F6` (compute), orange `#E67E22` (storage), green `#2ECC71` (database), + brown `#8B5E3C` (network). +- `cardVignette` radial-gradient must use the `closest-side` keyword (not a fixed `%`) + — otherwise straight edges of the card don't reach full opacity and a hard border line + remains visible (only corners fade correctly with a fixed percentage). + --- ## Future Integration Notes