feat(3800): settings drawer redesign

[vinnyhoward]

Description

This PR is part of a series of updates in preparation for the settings redesign. It updates the SettingsDrawer component to reflect the new UI design system, currently hidden behind the feature flag MM_SETTINGS_REDESIGN_ENABLE. This is the Figma Design for reference

Key Changes

• Updated SettingsDrawer component with new design tokens
• Added feature flag MM_SETTINGS_REDESIGN_ENABLE to toggle between old and new designs
• Implemented new text variants for titles and descriptions
• Added support for icons in the redesigned version
• Updated styling to match new design specifications
• Added comprehensive test coverage for both versions
• Added Storybook stories to showcase component variations

Related issues

Fixes: #3800

Manual testing steps

1. Goto settings with the feature flag off, observe there are no changes
2. To view the settings component update, run MM_SETTINGS_REDESIGN_ENABLE=true yarn start, observe the new designs

Screenshots/Recordings

Feature Flag Off	Feature Flag on

Example of the new component in use (NOT THE REAL DESIGNS. Just showcasing what the component can do now)

Story (Feature Flag Off)

Before

NA

After

NA

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

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.

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: d1ccd51
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4e59ec3b-cf96-473b-8f76-01e322be340d

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: f7d909e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c93c5178-8e86-4758-bc9f-94b4f37ac978

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 9ce9408
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c10ad961-f0c3-4ad8-aa98-79cb3bf9f8ef

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: de9d2dd
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4b49af2d-4e5b-4443-8ab6-2ad7e24097b1

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 5c99484
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3913b047-1dc9-4fc3-9b1e-739aaf70e32f

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: e3ea4e9
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/9e9fad72-4b19-4464-98b6-1da5268a820c

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 81cf5a6
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/1c92abbf-42ca-49bc-92cb-3905fbebdb46

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 54cf116
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5f96963c-429d-488c-b9d3-2a82e40c942e

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 91215f7
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/8e78aed7-01f8-4a1b-8c68-d80d30225499

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
82.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud