Skip to content

feat: fix incorrect styling of claimable bonus font weight and tooltip color cp-7.70.0#27666

Merged
Matt561 merged 2 commits into
mainfrom
fix/inconsistent-percentage-row-styling
Mar 19, 2026
Merged

feat: fix incorrect styling of claimable bonus font weight and tooltip color cp-7.70.0#27666
Matt561 merged 2 commits into
mainfrom
fix/inconsistent-percentage-row-styling

Conversation

@Matt561

@Matt561 Matt561 commented Mar 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Fixes some incorrect styling for the "Claimable bonus" row.

Changes:

  • "Claimable Bonus" font weight updated to match other rows
  • "Claimable Bonus" tooltip color changed to Alternative
  • Centered Quick Convert bottom sheet error messages
  • "Rate" row text font weight updated to match other rows

Changelog

CHANGELOG entry: fix percentage-row inconsistent styling

Related issues

Fixes:

Manual testing steps

Feature: mUSD conversion confirmation styling

  Scenario: user views claimable bonus row with correct styling
    Given user is on the mUSD conversion confirmation screen

    When user views the "Claimable bonus" info row
    Then the label font weight matches other small-variant info rows
    And the tooltip icon color is Alternative, consistent with the transaction fee row

  Scenario: user views blocking alert message centered
    Given user triggers

Screenshots/Recordings

Before

image image

After

image image

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
Low risk UI-only styling adjustments to confirmation rows and blocking alert text; no business logic or data flow changes.

Overview
Fixes styling inconsistencies in the mUSD conversion confirmation UI by rendering the "Claimable bonus" and conversion rate rows using the InfoRowVariant.Small variant (matching label font weight) and updating the claimable bonus tooltip icon color to IconColor.Alternative.

Also centers blocking alert error text in the quick convert bottom sheet by applying textAlign: 'center' to string-based blocking alert messages.

Written by Cursor Bugbot for commit fe91c3b. This will update automatically on new commits. Configure here.

@Matt561 Matt561 requested a review from a team as a code owner March 19, 2026 01:25
@Matt561 Matt561 added No QA Needed Apply this label when your PR does not need any QA effort. team-earn labels Mar 19, 2026
@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions github-actions Bot added size-S risk-low Low testing needed · Low bug introduction risk labels Mar 19, 2026
@bschorchit

bschorchit commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

From the screenshots, it looks like Rate is still using a heavier font weight

@github-actions github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 19, 2026
@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeConfirmations
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
All 4 changed files are purely UI/styling changes within the confirmations component tree, specifically affecting the mUSD token conversion (Earn/staking) confirmation screen:

  1. blocking-alert-message.styles.ts: Adds textAlign: 'center' style for blocking alert message text.
  2. blocking-alert-message.tsx: Applies the new centered text style to the error Text component.
  3. percentage-row.tsx: Changes InfoRowVariant to Small, updates tooltip icon color from Muted to Alternative, reorders props.
  4. token-conversion-rate-row.tsx: Adds rowVariant={InfoRowVariant.Small} to InfoRow.

These components are all consumed by MusdMaxConversionInfo (the mUSD conversion confirmation screen in the Earn flow). The changes are cosmetic/visual only — no logic, state management, navigation, or API changes. SmokeConfirmations is the appropriate tag as these components live in the confirmations UI layer and affect the transaction confirmation experience for Earn/staking flows. No other tags are warranted since the changes don't touch account management, network selection, swaps, or other feature areas.

Performance Test Selection:
These are purely cosmetic/styling changes (text alignment, row variant sizing, icon color) with no impact on rendering performance, data loading, or critical user flow timing. No performance tests are warranted.

View GitHub Actions results

@Matt561

Matt561 commented Mar 19, 2026

Copy link
Copy Markdown
Contributor Author

From the screenshots, it looks like Rate is still using a heavier font weight

Fixed and updated the screenshots! Thank you for the callout 😄

@sonarqubecloud

sonarqubecloud Bot commented Mar 19, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

✅ E2E Fixture Validation — Schema is up to date
16 value mismatches detected (expected — fixture represents an existing user).
View details

@Matt561 Matt561 enabled auto-merge March 19, 2026 05:01
@Matt561 Matt561 added this pull request to the merge queue Mar 19, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Mar 19, 2026
@Matt561 Matt561 added this pull request to the merge queue Mar 19, 2026
Merged via the queue into main with commit e185571 Mar 19, 2026
172 of 175 checks passed
@Matt561 Matt561 deleted the fix/inconsistent-percentage-row-styling branch March 19, 2026 15:26
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 19, 2026
@metamaskbot metamaskbot added the release-7.71.0 Issue or pull request that will be included in release 7.71.0 label Mar 19, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@matthewwalsh0 matthewwalsh0 matthewwalsh0 approved these changes

Assignees

No one assigned

Labels

No QA Needed Apply this label when your PR does not need any QA effort. release-7.71.0 Issue or pull request that will be included in release 7.71.0 risk-low Low testing needed · Low bug introduction risk size-S team-earn

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@Matt561 @bschorchit @matthewwalsh0 @metamaskbot