Skip to content

Commit

Permalink
fix: removing opacity from deprecated popover overlay (#23102)
Browse files Browse the repository at this point in the history
## **Description**

This PR updates the deprecated popover(modal) overlay by removing the
CSS opacity property and relying solely on the CSS design token variable
to handle the overlay opacity. This change aims to enhance the visual
hierarchy of modals across both light and dark modes by making the
overlay darker, thus improving focus on the modal content.
- Removed the CSS opacity property from the modal overlay styling.
- Adjusted the modal overlay to utilize the opacity defined in the CSS
design token variable, ensuring consistency and improved visual
hierarchy.

## **Related issues**

Fixes: N/A
https://consensys.slack.com/archives/C0354T27M5M/p1708550530267829?thread_ts=1708546286.489159&cid=C0354T27M5M

## **Manual testing steps**

1. Open the application and trigger a modal to appear.
2. Observe the modal overlay in both light and dark modes.
3. Verify that the overlay is appropriately darker, enhancing the focus
on the modal content.

## **Screenshots/Recordings**

### **Before**

<img width="1512" alt="Screenshot 2024-02-22 at 10 00 00 AM"
src="https://github.com/MetaMask/metamask-extension/assets/8112138/9ceeb5a3-86a8-4dc2-9709-f8f1ee010115">

<img width="1512" alt="Screenshot 2024-02-22 at 10 00 36 AM"
src="https://github.com/MetaMask/metamask-extension/assets/8112138/21361874-7a89-4fca-90cb-7439ab2d95b0">

### **After**

<img width="1512" alt="Screenshot 2024-02-22 at 9 59 19 AM"
src="https://github.com/MetaMask/metamask-extension/assets/8112138/ef925b52-8326-41ad-abf4-d7da7f7e92b6">

<img width="1512" alt="Screenshot 2024-02-22 at 10 01 06 AM"
src="https://github.com/MetaMask/metamask-extension/assets/8112138/a943fcfc-2b1b-41cd-9701-8677c98fb0a2">

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues.
- [x] I've included manual testing steps.
- [x] I've included screenshots/recordings if applicable.
- [x] I’ve included tests if applicable.
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable.
- [x] I’ve applied the right labels on the PR.
- [x] I’ve properly set the pull request status to "ready for review".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g., pull and build branch, run the
app, test code being changed).
- [x] 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.
  • Loading branch information
georgewrmarshall committed Feb 22, 2024
1 parent b0660c0 commit b46ff03
Showing 1 changed file with 1 addition and 2 deletions.
3 changes: 1 addition & 2 deletions ui/components/ui/popover/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@
&-bg {
width: 100%;
height: 100%;
background: var(--color-overlay-alternative);
opacity: 0.2;
background: var(--color-overlay-default);
}

&-content {
Expand Down

0 comments on commit b46ff03

Please sign in to comment.