fix: Remove black backgrounds on fees and migrate edit-gas-fee-popover to Modal#39690
Merged
georgewrmarshall merged 4 commits intomainfrom Feb 3, 2026
Merged
Conversation
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. |
Contributor
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (2 files, +101 -75)
|
ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js
Outdated
Show resolved
Hide resolved
Contributor
Builds ready [e5fc033]
UI Startup Metrics (1283 ± 114 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
cbea872 to
095da2a
Compare
ui/pages/confirmations/components/edit-gas-fee-popover/edit-gas-fee-popover.js
Outdated
Show resolved
Hide resolved
Contributor
Builds ready [43de4d5]
UI Startup Metrics (1303 ± 117 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Builds ready [cba3fb5]
UI Startup Metrics (1383 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…ee-popover to Modal This PR fixes the black background issue on fee rows in the Edit Gas Fee modal and migrates the modal to use the component library Modal instead of the deprecated Popover. Changes: - Fixed black background on selected fee rows by changing LoadingHeartBeat backgroundColor from 'var(--color-background-alternative)' to 'var(--color-primary-muted)' - Migrated edit-gas-fee-popover from deprecated Popover to component library Modal - Replaced deprecated ModalHeader and ModalContent with current versions - Migrated from SASS to Tailwind CSS and design system components - Updated imports to use @metamask/design-system-react (Box, Text, TextButton) - Replaced raw div/span elements with design system Text components - Replaced ButtonLink with TextButton for "Learn more" link - Used Box component props and Tailwind classes instead of SASS styles The modal now follows the UI development guidelines by using: - Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody from component library - Box with flexDirection and other typed props - Text with variant, color, and fontWeight props - TextButton with asChild pattern for links - Tailwind utility classes instead of custom SCSS All tests pass successfully. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…as-fee-popover
Replaced Tailwind CSS classes with typed Box component props from design-system-react:
- BannerAlert: className="mb-1" → marginBottom={1}
- Box header row: className="flex gap-0 mx-3 mb-0" → flexDirection={BoxFlexDirection.Row} + marginHorizontal={3}
- Box separator: className="border-t border-default my-2 mx-3" → borderColor={BoxBorderColor.BorderDefault} + marginVertical={2} + marginHorizontal={3}
- Box footer: className="mt-9" → marginTop={9}
- Text: className="text-center" → textAlign={TextAlign.Center}
Kept Tailwind classes where Box doesn't provide equivalent props (width percentages, border-t utility).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
georgewrmarshall
commented
Feb 3, 2026
| TextColor, | ||
| BoxBorderColor, | ||
| TextAlign, | ||
| } from '@metamask/design-system-react'; |
Contributor
Author
There was a problem hiding this comment.
Replacing legacy component imports with design system components from @metamask/design-system-react. This aligns with the ongoing effort to standardize components across the extension.
georgewrmarshall
commented
Feb 3, 2026
| </Box> | ||
| <Box> | ||
| <NetworkStatistics /> | ||
| <ModalBody className="flex flex-col justify-between"> |
Contributor
Author
There was a problem hiding this comment.
Using Tailwind flex utilities combined with Box flexDirection prop to create a responsive two-column layout. The top section contains the gas options list and the bottom section has network stats with margin-top spacing.
georgewrmarshall
commented
Feb 3, 2026
| variant={TextVariant.BodyXs} | ||
| fontWeight={FontWeight.Bold} | ||
| color={TextColor.TextAlternative} | ||
| className="inline-block w-[36%]" |
Contributor
Author
There was a problem hiding this comment.
Replaced CSS classes with Tailwind width utilities to control column proportions. This provides more explicit control over the table-like header layout compared to the previous CSS approach.
georgewrmarshall
commented
Feb 3, 2026
| )} | ||
| <EditGasItem priorityLevel={PriorityLevels.medium} /> | ||
| <EditGasItem priorityLevel={PriorityLevels.high} /> | ||
| <Box |
Contributor
Author
There was a problem hiding this comment.
Migrating from CSS class separator to Box component with Tailwind border utility and borderColor prop. This maintains the visual separation while using design system tokens.
georgewrmarshall
commented
Feb 3, 2026
| textAlign={TextAlign.Center} | ||
| > | ||
| {t('learnMoreAboutGas', [ | ||
| <TextButton asChild key="learnMoreLink" className="inline"> |
Contributor
Author
There was a problem hiding this comment.
Using TextButton with asChild pattern to render as an anchor tag. This provides button styling while maintaining proper semantic HTML for external links.
georgewrmarshall
commented
Feb 3, 2026
| backgroundColor={ | ||
| priorityLevel === estimateUsed | ||
| ? 'var(--color-background-alternative)' | ||
| ? 'var(--color-primary-muted)' |
Contributor
Author
There was a problem hiding this comment.
Changed from background-alternative to primary-muted for the selected gas option. This fixes the black background issue reported in MDP-496 and provides better visual contrast for the selected state.
Contributor
Builds ready [bbaedac]
UI Startup Metrics (1384 ± 92 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
bbaedac to
a0987ae
Compare
a0987ae to
1543d38
Compare
Contributor
Builds ready [1543d38]
UI Startup Metrics (1417 ± 88 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
OGPoyraz
approved these changes
Feb 3, 2026
brianacnguyen
approved these changes
Feb 3, 2026
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
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.
Description
This PR fixes a UI issue in the edit gas fee popover where black backgrounds appeared behind the fee options, causing the highlighted row to appear broken and awkward.
The edit-gas-fee-popover component had visual issues identified in MDP-496 where black backgrounds were showing behind fee options, breaking up the highlighted row selection and creating an awkward appearance. Additionally, the component was using the deprecated Popover component and needed migration to the current Modal component.
Changes included:
Popovercomponent toModalwithModalOverlay,ModalContent,ModalHeader, andModalBodyLoadingHeartBeatbackground color fromvar(--color-background-alternative)tovar(--color-primary-muted)Box,Text, and design-system constants to@metamask/design-system-reactcomponentsButtonLinkwithTextButtonusing the asChild pattern for proper link semanticsflexDirection,marginHorizontal, andmarginVerticalpropsChangelog
CHANGELOG entry: Fixed edit gas fee popover UI by removing black backgrounds and migrating to Modal component
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/MDP-496
Manual testing steps
Screenshots/Recordings
Before
After
720after.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
UI refactor in the transaction confirmation flow that changes the container component and layout for the gas fee editor; risk is mainly regressions in modal/back/close behavior and styling across modes.
Overview
Replaces the deprecated
Popover-based edit gas fee UI with the component-libraryModal(ModalHeader/ModalBody), including updated close/back wiring via the transaction modal context.Migrates layout primitives to
@metamask/design-system-react(Box/Text/TextButton) and adjusts header/separator styling and the “Learn more” link rendering.Fixes the selected fee row’s visual highlight by updating
LoadingHeartBeat’s selectedbackgroundColorfrom--color-background-alternativeto--color-primary-muted.Written by Cursor Bugbot for commit 1543d38. This will update automatically on new commits. Configure here.