Skip to content

Rebrand legacy BubbleChoice#74000

Merged
bethanyaconnor merged 8 commits into
stagingfrom
bethany/update-bubblechoice
Jul 22, 2026
Merged

Rebrand legacy BubbleChoice#74000
bethanyaconnor merged 8 commits into
stagingfrom
bethany/update-bubblechoice

Conversation

@bethanyaconnor

@bethanyaconnor bethanyaconnor commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

This PR was largely generated by Claude but I made it commit frequently. To start, I instructed it to:

  • move inline styles from BubbleChoice.jsx into a SCSS file (0ac7430)
  • replace the buttons in BubbleChoice.jsx with MUI buttons (baf226a)
  • use Typography components in BubbleChoice.jsx (8ca9b65)
  • clean up any remaining hardcoded colors, of which there ended up just being one (3eaedd8)

From there, I tested and instructed to do some updates, including adding padding, margins, and changing the look of the H2 header. This came in commit b80b5f9

Then I told it to update just the colors of SublevelCard.jsx (the inline styles use a lot of constants and I worried that would blow up this PR). That update is in 9b8999e

This is what it looks like locally:

image

This is the current view:

image

Links

  • Jira:

Testing story

Deployment notes

Privacy and security

bethanyaconnor and others added 6 commits July 21, 2026 08:25
Extract the inline `styles` object into BubbleChoice.module.scss and
apply via className. Pure refactor; colors preserved verbatim.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Back and Finish now use the design-system MUI Button: Finish is
filled purple (variant="contained" color="primary"), Back is purple
text (variant="text"). Drops the old gray/orange .btn styles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Convert the display-name and choose-activity headings to MUI
Typography (h1/h2 variants). SafeMarkdown left as-is.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Remove the non-semantic charcoal (#5b6770) override on .h2; the
Typography default (var(--text-neutral-primary)) now provides a
theme-aware color.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Back button is now an outlined secondary button
- Add spacing under the display-name heading and around the
  choose-activity heading (specificity-scoped so it wins over MUI's
  Typography margin reset)
- Choose-activity heading renders as h3 while staying semantically h2
- Space the back/finish buttons with a 10px flex gap

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace color-util and hardcoded rgb() values with design-system
semantic tokens (background/border/text neutral, brand teal). Cards
are now theme-aware. Drops the now-unused color util import.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@bethanyaconnor bethanyaconnor changed the title Bethany/update bubblechoice Rebrand legacy BubbleChoice Jul 21, 2026
@bethanyaconnor
bethanyaconnor marked this pull request as ready for review July 21, 2026 15:36
@bethanyaconnor
bethanyaconnor requested review from a team, levadadenys and lfryemason and removed request for a team July 21, 2026 15:36
@markabarrett

Copy link
Copy Markdown

LGTM! We can fix/update to the new component to address the overflow in the future.

@bethanyaconnor
bethanyaconnor merged commit a24a189 into staging Jul 22, 2026
8 checks passed
@bethanyaconnor
bethanyaconnor deleted the bethany/update-bubblechoice branch July 22, 2026 16:56
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.

4 participants