feat: align resource and contact pages with the rest of the TPR - #958
Merged
Merged
Conversation
The five resource pages and the contact page used a visual vocabulary that existed nowhere else in the app: a dark rmiblue hero card with blurred decorative blobs, every section wrapped in a rounded-[2rem] tinted card, and most of the substance hidden behind collapsible disclosures. - Replace the hero cards with a full-bleed white PageHeader band closed by a rule, so the header reads as a page header rather than a section that failed to line up with the body. - Flatten every accordion. Methodology's 20 classification subsections and How to Choose's five steps are now always-visible h3 headings; the FAQ's ten questions are h2 sections. - Extend OnPageIndex to two levels: h3 sub-entries appear under the section currently in view and collapse when another takes over. Its IntersectionObserver now picks the topmost heading in document order — the previous last-reported-wins logic gave the wrong answer once sub-headings were observed too. - Add an on-page index to Contact, FAQ and Updates. - Give reference cards a blue frame and notes a tinted InfoCallout with an icon, so a caution reads differently from reference data. - Separate long runs of subsections with a hairline, section rules darkened to neutral-300 to keep the two levels distinct. - Cap prose at 79 characters per line, down from 98. Also fixes two silent styling bugs found along the way: text-rmiblue-700 was never emitted (only 100/200/400/800 are defined), leaving the eyebrow labels and the index hover state dead; and grid-cols-[1.2fr,0.8fr] is invalid CSS, so three two-column layouts had been rendering as a single column. Closes #955 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Expected version change and release notes:1.17.0-dev.1 (v1.16.1-dev.5...update-resource-page-design ) (2026-09-23T14:50 UTC)Features |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://proud-glacier-0f640931e-958.westus2.2.azurestaticapps.net |
Contributor
There was a problem hiding this comment.
Copilot review overview
🔵 Needs a closer look
Two moderate findings remain: distinct Methodology reference-card styling and an Updates anchor/index-order test are needed.
Review effort: Lite
Findings: None
What changed in this PR
This PR standardizes resource and contact pages with shared headers, visible content sections, hierarchical on-page navigation, and refreshed styling.
Changes:
- Replaces hero cards and accordions with consistent page layouts.
- Adds nested
OnPageIndexnavigation and indexes to Contact, FAQ, and Updates. - Adds shared callouts, reference styling, layout fixes, and updated tests.
Two moderate findings remain, each with one vote: Methodology reference definitions need distinct blue-framed cards, and Updates needs a focused test for post anchors and index ordering.
| File | Summary |
|---|---|
src/pages/resources/ResourcesUseCasesPage.tsx |
Updates layout and card styling. |
src/pages/resources/ResourcesUpdatesPage.tsx |
Adds indexed update headings and stable IDs. |
src/pages/resources/ResourcesMethodologyPage.tsx |
Flattens classification sections and updates styling. |
src/pages/resources/ResourcesMethodologyPage.test.tsx |
Tests expanded content and nested indexing. |
src/pages/resources/ResourcesHowToChooseAPathwayPage.tsx |
Flattens steps and guides. |
src/pages/resources/ResourcesHowToChooseAPathwayPage.test.tsx |
Tests visible steps and index nesting. |
src/pages/resources/ResourcesFaqPage.tsx |
Converts FAQ items to indexed headings. |
src/pages/resources/ResourcesFaqPage.test.tsx |
Tests expanded FAQ content and indexing. |
src/pages/ContactPage.tsx |
Applies the new layout and on-page index. |
src/pages/ContactPage.test.tsx |
Tests contact navigation and links. |
src/components/PageHeader.tsx |
Adds shared full-width page header styling. |
src/components/OnPageIndex.tsx |
Supports nested headings and active-section tracking. |
src/components/OnPageIndex.test.tsx |
Tests nested index behavior and deep links. |
src/components/InfoCallout.tsx |
Adds reusable informational callout styling. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The five resource pages and the contact page used a visual vocabulary that existed nowhere else in the app: a dark rmiblue hero card with blurred decorative blobs, every section wrapped in a rounded-[2rem] tinted card, and most of the substance hidden behind collapsible disclosures.
Also fixes two silent styling bugs found along the way: text-rmiblue-700 was never emitted (only 100/200/400/800 are defined), leaving the eyebrow labels and the index hover state dead; and grid-cols-[1.2fr,0.8fr] is invalid CSS, so three two-column layouts had been rendering as a single column.
Related issues
Closes: #955
Testing
5 test files updated to capture the new behavior, tests and linter pass
Checklist