Skip to content

fix(ramp): default icon color on Build Quote payment pill#28398

Merged
amitabh94 merged 12 commits into
mainfrom
fix/build-quote-payment-pill-icon-default
Apr 4, 2026
Merged

fix(ramp): default icon color on Build Quote payment pill#28398
amitabh94 merged 12 commits into
mainfrom
fix/build-quote-payment-pill-icon-default

Conversation

@amitabh94

@amitabh94 amitabh94 commented Apr 4, 2026

Copy link
Copy Markdown
Contributor

Description

PaymentMethodPill on the unified Buy Build Quote screen was passing colors.primary.default into PaymentMethodIcon, so the payment control used the same blue as a selected row in PaymentSelectionModal. Product intent is for that selector to use the default icon color (colors.icon.default), matching unselected list rows; the modal still uses primary only for the selected method.

Also merged latest origin/main into this branch and resolved conflicts (kept default icon color and snapshot expectations).

Changelog

CHANGELOG entry: Fixed the Build Quote payment method pill icon using the default icon tint instead of primary blue.

Related issues

Fixes:

Refs: #28392

Manual testing steps

Feature: Build Quote payment method pill

  Scenario: Payment pill icon uses default tint
    Given the user is on the unified Buy Build Quote amount screen with a payment method selected
    When they view the payment method pill next to the amount
    Then the leading payment method icon uses the default icon color (not primary blue)
    And opening the payment method modal still shows primary blue only on the selected row

Screenshots/Recordings

Before

Screenshot 2026-04-04 at 7 54 16 AM

After

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 change that updates an icon tint and corresponding Jest snapshots; no business logic or data handling is modified.

Overview
Updates the Build Quote PaymentMethodPill to render PaymentMethodIcon with the theme’s default icon color (colors.icon.default) instead of the primary tint.

Adjusts Build Quote Jest snapshots to reflect the new icon color in the payment method pill.

Reviewed by Cursor Bugbot for commit bc4f2ec. Bugbot is set up for automated code reviews on this repo. Configure here.

amitabh94 added 11 commits April 3, 2026 14:55
- Build Quote: pass selected payment method into PaymentMethodPill and render PaymentMethodIcon so the leading icon matches the method (generic card when unset).\n- Apple Pay: use branded mark assets; swap useAssetFromTheme order for PaymentMethodIcon so the mark contrasts on muted/section backgrounds (checkout button keeps original mapping).\n- Tests: PaymentMethodPill coverage; BuildQuote snapshots updated.\n- Docs: PR screenshot helper and after screenshot under docs/ramps/.

Made-with: Cursor
- Add parseRampPaymentType so API strings only match SDK PaymentType values.\n- PaymentMethodIcon: switch on normalized type, handle RevPay, unknown types fall back to card (not wallet).\n- PaymentMethodPill: render PaymentMethodIcon only when type is known or API icons exist; type PaymentMethodForPill for icons.\n- Tests for parser and pill edge cases.

Made-with: Cursor
- before: captured with paymentMethod prop temporarily omitted (generic card in pill).\n- after: current Build Quote with fix.\n- Update pull-request-screenshots.md; PR body references raw GitHub URLs.

Made-with: Cursor
- Remove docs/ramps PNGs and pull-request-screenshots.md (keep images in PR description only).\n- Ignore docs/ramps/*.png so local captures are not re-committed.

Made-with: Cursor
- Use FontAwesome apple for Apple Pay; ignore API apple-pay mark glyphs
- Remove Apple Pay PNG from PaymentMethodIcon (restore main-style vectors)
- PaymentMethodPill: type-only icons via parseRampPaymentType
- Match main default icon fallback in PaymentMethodIcon switch

Made-with: Cursor
Use the same PaymentMethodIcon + paymentType pattern as PaymentMethodListItem
(primary icon color). Drop parseRampPaymentType from the pill path.

Made-with: Cursor
- Revert PaymentMethodIcon and Aggregator snapshots to match origin/main
- Remove parseRampPaymentType util + test (never on main)

Unified Buy v2 pill parity remains in Views/BuildQuote + PaymentMethodPill only.

Made-with: Cursor
PaymentMethodIcon on the pill used primary blue; keep parity with
unselected rows in PaymentSelectionModal (icon.default). Selected row
in the modal still uses primary.

Made-with: Cursor
@amitabh94 amitabh94 self-assigned this Apr 4, 2026
@github-actions

github-actions Bot commented Apr 4, 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.

Resolve conflicts: keep default icon color on PaymentMethodPill and
matching BuildQuote snapshots (#131416 vs main primary).

Made-with: Cursor
@github-actions

github-actions Bot commented Apr 4, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - draft PR

All E2E tests pre-selected.

View GitHub Actions results

@amitabh94 amitabh94 marked this pull request as ready for review April 4, 2026 13:03
@amitabh94 amitabh94 requested a review from a team as a code owner April 4, 2026 13:03
@amitabh94 amitabh94 enabled auto-merge April 4, 2026 13:03
@github-actions

github-actions Bot commented Apr 4, 2026

Copy link
Copy Markdown
Contributor

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

@sonarqubecloud

sonarqubecloud Bot commented Apr 4, 2026

Copy link
Copy Markdown

@imyugioh imyugioh added the team-money-movement issues related to Money Movement features label Apr 4, 2026
@amitabh94 amitabh94 added this pull request to the merge queue Apr 4, 2026
Merged via the queue into main with commit f4d21a3 Apr 4, 2026
192 of 194 checks passed
@amitabh94 amitabh94 deleted the fix/build-quote-payment-pill-icon-default branch April 4, 2026 17:01
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 4, 2026
@metamaskbot metamaskbot added the release-7.74.0 Issue or pull request that will be included in release 7.74.0 label Apr 4, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.74.0 Issue or pull request that will be included in release 7.74.0 size-XS team-money-movement issues related to Money Movement features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants