chore(frontend/ui): page-hero rollout + date-picker icon polish (#344 follow-up) - #367
Merged
Merged
Conversation
… History (#344 follow-up) Issue #344 deferred extending the .page-hero typographic treatment to the remaining section titles. Two natural drop-ins: - `#planned-purchases-header` (Plans tab → "Planned Purchases") now carries `page-hero` so its <h2> reads at hero size like the sibling "Purchase Plans" header. The help-text paragraph picks up `page-hero-description` so it inherits the muted body styling used on the other hero sections. - `#savings-history-section` (Purchases tab → "Savings History") now carries `page-hero`. The inner section-header's <h2> gets hero treatment; the deeper h3/h4 stay unchanged (.page-hero CSS only targets h1/h2 + .page-hero-description). Skipped here intentionally: - `#apikeys-section` (Admin → API Keys) uses <fieldset>/<legend> instead of an h2, so applying page-hero meaningfully would require restructuring. Bigger change — left for a follow-up if/when the layout there is otherwise revisited. - Home + Opportunities don't have a section title (they render KPI tiles / list directly). Page-hero doesn't apply. Regression tests added in html.test.ts: assert the page-hero class (and page-hero-description) are present on both newly-promoted sections. Verification: 1662/1663 pass / 1 skipped. Build 528 KiB (within ±10% of the 512 baseline).
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughApply page-hero styling to Planned Purchases and Savings History (add description paragraph for Planned Purchases), adjust WebKit date-picker indicator opacity for date inputs, and add tests asserting the new DOM structure. ChangesPage-Hero Styling Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
Member
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
…l date inputs The deferral from issue #344 noted Chrome's default calendar-picker indicator (the small calendar glyph at the right edge of every <input type="date">) doesn't match the chip-pill design — it renders as a hard black square that fights the rounded silhouette of the inputs in #history-controls and .date-range-picker. The full custom date-picker rebuild that #344's deferral envisioned would replace the native widget entirely (meaningful effort, re-implementing keyboard / screenreader / locale-aware calendar grid support). This commit covers the visible mismatch in the meantime with a 2-rule CSS tweak: dim the indicator to 55 % opacity by default, return to 100 % on input hover / focus so it still reads as interactive. Platform accessibility wiring is preserved. Scope: 2 rules in forms.css. No tests (CSS-only visual). Build 529 KiB (within ±10 % of the 512 baseline).
Member
Author
|
@coderabbitai review |
Contributor
✅ Actions performedReview triggered.
|
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
1 participant
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
Two small frontend-polish items from the issue #344 deferral list. Independent visual changes; bundled because both are tiny and trivially reviewable.
1 — Page-hero rollout
Extends the
.page-herotypographic treatment to two natural-fit section titles that were missed in PR #343:#planned-purchases-header(Plans → Planned Purchases) —<h2>now reads at hero size like the sibling "Purchase Plans" header; help-text paragraph picks uppage-hero-descriptionfor matching muted-body styling.#savings-history-section(Purchases → Savings History) — outer<h2>gets hero treatment. The .page-hero CSS only targets h1/h2 + .page-hero-description so inner h3/h4 are unaffected.Skipped intentionally:
#apikeys-section(Admin → API Keys) uses<fieldset>/<legend>instead of an<h2>, so applying page-hero meaningfully needs restructuring. Out of scope here. Home + Opportunities have no section title.2 new regression tests in
html.test.tsassert the class is present on both sections.2 — Date-picker icon polish
The deferral note in #344 called out Chrome's default
::-webkit-calendar-picker-indicator— a hard black square that fights the rounded chip-pill silhouette of.date-range-pickerand#history-controlsdate inputs. The full custom-date-picker rebuild would replace the native widget entirely (meaningful effort: keyboard / screenreader / locale-aware calendar grid). This PR ships the visible-mismatch fix as a 2-rule CSS tweak:Platform accessibility wiring (keyboard nav, AT, calendar grid) is preserved.
Verification
Summary by CodeRabbit
Style
Tests