Skip to content

Restyle lobbying beta banner as a slim one-line bar - #2304

Merged
Mephistic merged 1 commit into
codeforboston:mainfrom
mvictor55:lobbying-banner
Oct 22, 2026
Merged

Mephistic merged 1 commit into
codeforboston:mainfrom
mvictor55:lobbying-banner

Conversation

@mvictor55

Copy link
Copy Markdown
Collaborator

Summary

Restyles the Lobbying Explorer's beta banner. It was three lines of large text that pushed the page down; it is now a slim, single-line orange bar with a small "BETA" tag and a shorter message: "The lobbying explorer is in beta. Send feedback to info@mapletestimony.org".

  • Only the lobbying pages change (components/lobbying/LobbyingSubnav.tsx). The shared Banner component used on bill, profile and conference committee pages is untouched.
  • The banner text keys in public/locales/en/lobbying.json are replaced (betaLine1/betaLine2 → beta/feedback); nothing else used the old keys.

Checklist

  • On the frontend, I've made my strings translate-able.
  • If I've added shared components, I've added a storybook story. (N/A: no new shared components)
  • I've made pages responsive and look good on mobile.
  • If I've added new Firestore queries, I've added any new required indexes to firestore.indexes.json. (N/A: no queries)

Screenshots

lobbying-before-desktop.png
lobbying-after-desktop.png
lobbying-before-phone.png
lobbying-after-phone.png

Known issues

  • White text on the brand orange (#ff8600) is below WCAG AA contrast. This was already true of the old banner; the text is now bold, which helps but doesn't fully fix it. A darker orange could be a follow-up if wanted.
  • The email address is still a literal string in the component (existing i18next/no-literal-string lint warning, unchanged).

Steps to test/reproduce

  1. Go to /lobbying on the preview deployment.
  2. See the slim orange bar with a "BETA" tag above the Lobbying Explorer sub-navigation.
  3. Click the email link and confirm it opens a new email to info@mapletestimony.org.
  4. Narrow the window to phone width and confirm the bar wraps cleanly.
  5. Visit /lobbying/bills, /lobbying/clients and /lobbying/firms and confirm the same bar appears.

@vercel

vercel Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
maple-dev Ready Ready Preview Oct 21, 2026 7:03pm UTC

Request Review

@Mephistic Mephistic left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM - the new banner is much less intrusive.

We should probably prefer to either use styled-components (or switch back to CSS Modules) rather than dropping these styles in pure objects... but the trade-offs for that don't really matter for this component, so I'm fine merging this now and filing that under "problem for the React 19 upgrade" so we can get this out now.

Heads up - it looks like the screenshots in the PR description didn't quite make it in - only the filenames are there.

@Mephistic
Mephistic merged commit f542985 into codeforboston:main Oct 22, 2026
8 of 9 checks passed

This branch was successfully deployed

1 active deployment
Preview – maple-dev — 685b29ba Deployed Oct 21, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants