diff --git a/CLAUDE.md b/CLAUDE.md index dd69717..9610f2c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -86,7 +86,7 @@ Pre-commit (husky) runs `yarn test` + `yarn lint`. Lint-staged additionally runs **Default:** build UI with `@obolnetwork/obol-ui` primitives — `Box`, `Text`, `Button`, `Link` — and the project’s Stitches tokens (`$bg01`, `$body`, `$textMiddle`, `var(--theme-brand)`, etc.). Bridge tokens live in `styles/theme-tokens.css` and `styles/obol-bridge.css`. -- Prefer the **`css` prop** on `Box` / `Text` (see `components/layout/Navbar.tsx`, `components/landing/Landing.tsx`) or **reuse styled exports** from `components/assessment/stitches.ts` (`Card`, `Eyebrow`, `BrandLink`, `TopNavLink`, `risk`, …) instead of new page-specific CSS files or BEM class strings. +- Prefer the **`css` prop** on `Box` / `Text` (see `components/layout/SiteHeader.tsx`, `components/landing/Landing.tsx`) or **reuse styled exports** from `components/assessment/stitches.ts` (`Card`, `Eyebrow`, `BrandLink`, `TopNavLink`, `risk`, …) instead of new page-specific CSS files or BEM class strings. - Use **`VbButton`** (`components/ui/VbButton.tsx`) for primary actions in the assessment flow. - **Do not** add separate per-page CSS files (e.g. a dedicated `landing.css`) unless there is a strong reason; the landing page was migrated off that pattern. @@ -96,7 +96,7 @@ Pre-commit (husky) runs `yarn test` + `yarn lint`. Lint-staged additionally runs - **SVG visuals** tied to the product (`Pizza`, brand mark) — not generic UI icons; use `@radix-ui/react-icons` (already in the tree via obol-ui) for arrows, external-link, etc. (`components/landing/icons.tsx`). - **Methodology** — still uses `styles/methodology.css` for now; new work should still prefer obol-ui where practical. -**Site chrome (future):** landing and assessment currently use different headers/footers. Planned UX is a shared slim header + compact assess footer — see **Future UX** in [`README.md`](./README.md). Do not implement unless asked. +**Site chrome:** the landing, assessment, and methodology share one header and footer — `components/layout/SiteHeader.tsx` and `SiteFooter.tsx` (the landing nav, generalized). `SiteHeader` reads the route to adapt: it hides the "Assess your validator" CTA on `/assess` and points "How it works" at `/#how` from inner pages. Both take a `contentWidth` prop to align the inner content with the page's main column (landing/methodology `1140`, assessment `1440`). The assessment renders them as the top/bottom rows of the 100vh `Shell` (`MainGrid` is `flex:1`). ## Deferred work (don't build yet unless asked) diff --git a/README.md b/README.md index 5300a1f..21bbcf9 100644 --- a/README.md +++ b/README.md @@ -34,21 +34,15 @@ Every push to `main` runs CI and, on success, deploys the static `out/` folder t - `NEXT_PUBLIC_SITE_URL=https://obolnetwork.github.io/validator-beat` — share links and OG URLs 3. **Custom domain** (`validatorbeat.com`): point DNS at GitHub Pages, then rebuild with `NEXT_PUBLIC_BASE_PATH=` (empty) and `NEXT_PUBLIC_SITE_URL=https://validatorbeat.com`. -**Theming:** edit [`styles/theme-tokens.css`](styles/theme-tokens.css) to change colors (Lido forum–aligned by default). If you change pizza slice colors, also update [`lib/theme/tokens.ts`](lib/theme/tokens.ts). +**Theming:** edit [`styles/theme-tokens.css`](styles/theme-tokens.css) to change colors (warm cream, ecosystem-neutral by default; an Obol-branded dark palette under `[data-theme="dark"]`). If you change pizza slice colors, also update [`lib/theme/tokens.ts`](lib/theme/tokens.ts). -## Future UX: shared chrome across landing and assessment +## Site chrome: shared header and footer -Today the **landing** (`/`) and **assessment** (`/assess/`) use different shells: the marketing page has a full nav + footer; the assessment uses a slim `TopBar` and a one-line `Footnote` inside a `100vh` focus layout (`AssessmentApp`). That is intentional for the six-question wizard (less distraction, pizza always visible) but can feel like leaving the site when users click “Assess your validator.” +The **landing** (`/`), **assessment** (`/assess/`), and **methodology** (`/methodology/`) share one header and footer — [`components/layout/SiteHeader.tsx`](components/layout/SiteHeader.tsx) and [`SiteFooter.tsx`](components/layout/SiteFooter.tsx) (the landing nav, generalized). -**Recommended direction (not implemented yet):** - -1. **One shared slim header** on `/`, `/assess/`, and `/methodology/` — logo (home), Methodology, valOS (external), theme toggle; primary CTA on marketing pages only. -2. **Compact footer on assess** — keep the trust line (“nothing submitted or stored”) plus links (Methodology · valOS · Home), not the full landing footer. -3. **Keep focus mode during Q1–Q6** — do not wrap the wizard in the full marketing layout; optional richer links on intro/results only if needed later. - -**Avoid:** pasting the full landing nav + footer around the assessment grid — it costs too much vertical space on mobile and fights the locked viewport. - -See `components/assessment/AssessmentApp.tsx` (`TopBar`, `Footnote`, `Shell`) and `components/landing/Landing.tsx` (`LNav`, `LFooter`) for the current split. +- **`SiteHeader`** adapts to the route: it hides the "Assess your validator" CTA on `/assess` (you're already there) and points "How it works" at `/#how` from inner pages. The logo mark reads the `--vb-*` tokens, so it follows the theme. +- Both take a **`contentWidth`** prop so the inner content lines up with the page's main column (landing/methodology `1140`, assessment `1440`). +- The assessment renders them as the top/bottom rows of the `100vh` `Shell`; `MainGrid` is `flex:1` and absorbs the remaining height, so the focus layout still fits one screen. ## v0.1 routes diff --git a/components/assessment/AssessmentApp.tsx b/components/assessment/AssessmentApp.tsx index 4a46633..830b724 100644 --- a/components/assessment/AssessmentApp.tsx +++ b/components/assessment/AssessmentApp.tsx @@ -17,12 +17,10 @@ import { } from "./Blockers"; import { Intro } from "./Intro"; import { Question } from "./Question"; -import { ThemeToggle } from "./ThemeToggle"; import { LevelUp, ResultHero, ShareModal } from "./Results"; +import { SiteHeader } from "@components/layout/SiteHeader"; +import { SiteFooter } from "@components/layout/SiteFooter"; import { - BrandAccent, - BrandLink, - Footnote, LeftCard, MainGrid, PizzaWrap, @@ -31,10 +29,6 @@ import { RightPanel, SectionLabel, Shell, - TagPill, - TopBar, - TopNavLink, - TopSpacer, } from "./stitches"; type AssessmentAppProps = { @@ -111,15 +105,7 @@ export function AssessmentApp({ initialShareCode }: AssessmentAppProps) { return ( - - - Validator Beat - - v0.1 · self-assessment - - Methodology - - + @@ -175,10 +161,8 @@ export function AssessmentApp({ initialShareCode }: AssessmentAppProps) { - - A neutral, public-good resource · nothing is submitted or stored · runs entirely in your - browser - + + {share && a.stage != null && (