New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: checkbox background color #24262
Conversation
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. |
f00c19c
to
affbb24
Compare
@@ -66,7 +66,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = ` | |||
class="mm-checkbox__input-wrapper" | |||
> | |||
<input | |||
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-transparent mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid" | |||
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid" | |||
id="eth-sign-checkbox" | |||
title="I understand that I can lose all of my funds and NFTs if I enable eth_sign requests. " | |||
type="checkbox" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updating snapshots
@@ -9,7 +9,7 @@ exports[`Checkbox should render the Checkbox without crashing 1`] = ` | |||
class="mm-checkbox__input-wrapper" | |||
> | |||
<input | |||
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-0 mm-box--display-flex mm-box--background-color-transparent mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid" | |||
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-0 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid" | |||
type="checkbox" | |||
/> | |||
</span> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updating snapshots
Builds ready [c0acf58]
Page Load Metrics (297 ± 336 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Description
This PR updates the background color of the checkbox component from transparent to white across the MetaMask extension. The motivation behind this change is to enhance the visibility and contrast of the checkbox against various backgrounds, and align it with the Figma component
Component in Figma showing background default
Related issues
Fixes: N/A
Manual testing steps
To ensure the checkbox component's background color update is correctly implemented:
Screenshots/Recordings
Before
before720.mov
After
after720.mov
Pre-merge author checklist
Pre-merge reviewer checklist
This PR represents a significant improvement in the usability and accessibility of the MetaMask extension, ensuring that all users can easily interact with and visually distinguish the checkbox component, regardless of the background.