Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: removing opacity from deprecated popover overlay (#23102)
## **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