[Bug]: Update toggles in Security and Privacy Settings to be inline with title #26667
Assignees
Labels
area-design
Design bug (previously known as papercuts - ask Hilary for more detail)
regression-prod-11.16.16
Regression bug that was found in production in release 11.16.16
release-12.11.0
Issue or pull request that will be included in release 12.11.0
Sev3-low
Low severity; minimal to no impact upon users
team-wallet-ux
type-bug
Something isn't working
Comments
amandaye0h
added
type-bug
metamaskbot
added
the
regression-prod-11.16.16
gauthierpetetin
added
team-wallet-ux
Sev3-low
7 tasks
github-merge-queue bot
pushed a commit
that referenced
this issue
Dec 18, 2024
## **Description** This PR improves the layout of the basic security section by aligning the toggle button with the heading text. The changes include: 1. Restructuring the layout using Box components with proper alignment 2. Moving the toggle button to be inline with the heading 3. Improving the visual hierarchy by using proper Typography components 4. Maintaining the description text below with appropriate spacing [](https://codespaces.new/MetaMask/metamask-extension/pull/29258?quickstart=1) ## **Related issues** Fixes: #26667 ## **Manual testing steps** 1. Go to Settings > Security & Privacy 2. Observe the Basic Configuration section at the top 3. Verify the toggle button is properly aligned with the heading 4. Verify the description text appears below with proper spacing ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/bab9a14c-8f10-4865-b159-5343537a2785 ### **After** https://github.com/user-attachments/assets/b9d02fd8-8e35-4dfa-a00d-b4e6952625df ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [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 (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **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.
](https://codespaces.new/MetaMask/metamask-extension/pull/29258?quickstart=1){kind=link}
metamaskbot
added
the
release-12.11.0
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
Describe the bug
The toggles appear at the bottom of the text, which makes the entire page long. This update condenses the view, making this page more usable.
Expected behavior
headingMDtoggle-buttonappearsinlinefor all categoriesScreenshots/Recordings
Figma link
Steps to reproduce
Error messages or log output
No response
Detection stage
In production (default)
Version
11.16.16
Build type
None
Browser
Chrome
Operating system
MacOS
Hardware wallet
No response
Additional context
Ping @amandaye0h for context
Severity
No response
The text was updated successfully, but these errors were encountered: