fix: Polish Settings sections and dropdown for consistency

[amandaye0h]

Description

What is the reason for the change?

Settings flows mixed old and new UI patterns: different text scales and weights for titles vs body, uneven spacing between blocks, and primary/secondary buttons that didn’t match the rest of the app. That made screens harder to scan and harder to maintain.

What is the improvement / solution?

• Typography: Section titles and supporting copy use the MetaMask design system (Text / TextVariant, FontWeight, TextColor) so titles, descriptions, and inline actions read at the intended sizes and weights.
• Vertical rhythm: Shared spacing (e.g. section marginTop, scroll padding, Backup & sync alignment with General/Advanced) so blocks breathe consistently from Security & privacy through General, Advanced, Backup & sync, Experimental, and Buy & sell crypto.
• Controls & actions: Pickers and toggles follow the same layout patterns (e.g. switches on the title row where appropriate); link-style actions use matching body scale; primary actions were demoted to secondary where design calls for it (e.g. Change region).
• Readability: Less visual noise (e.g. double borders around pickers), clearer hierarchy, and more predictable hit areas for settings and ramp tooling.

Changelog

CHANGELOG entry: fix: polish settings UI

Related issues

Fixes:
#30228
#30229

Manual testing steps

Feature: Settings sections — design QA

  Scenario: User checks Security & privacy
    Given the user opens Settings → "Security & privacy"
    Then headings, body copy, and inline links look consistent and readable
    And "Estimate balance changes" "Learn more" matches nearby body text

  Scenario: User checks General and Advanced
    Given the user opens Settings → "General" or "Advanced"
    Then spacing between setting blocks looks even

  Scenario: User checks Backup & sync
    Given the user opens Settings → "Backup & sync"
    Then the main block and "Manage what you sync" are spaced like other settings lists

  Scenario: User checks Experimental
    Given the user opens Settings → "Experimental"
    Then section titles match the updated body style
    And the DaimoPay demo switch sits on the right of its title row

  Scenario: User checks Buy & sell crypto
    Given the user opens Settings → "Buy & sell crypto"
    Then region and SDK section titles match the updated style
    And "Change region" is a secondary-style button

Screenshots/Recordings

Before

After

Screen.Recording.2026-05-15.at.12.43.28.PM.mov

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.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

[amandaye0h]

@metamaskbot update-mobile-fixture

[github-actions]

🔄 Fixture update started. Running workflow from branch settings/sections-dqa. View workflow runs

[github-actions]

❌ E2E fixture update failed.\n\nCommon causes:\n- CI workflow is still running — wait for 'Build iOS Apps' to complete\n- CI workflow was skipped — ensure your PR has iOS-impacting changes or use skip-smart-e2e-selection label\n- iOS build failed — check the CI workflow for errors\n\nView logs and retry

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeSwap, SmokeStake, SmokeWalletPlatform, SmokeMoney, SmokePerps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, SmokeBrowser, SmokeSnaps
• Selected Performance tags: @PerformanceAccountList, @PerformanceOnboarding, @PerformanceLogin, @PerformanceSwaps, @PerformanceLaunch, @PerformanceAssetLoading, @PerformancePredict, @PerformancePreps
• Risk Level: high
• AI Confidence: %

click to see 🤖 AI reasoning details

E2E Test Selection:
Fallback: AI analysis did not complete successfully. Running all tests.

Performance Test Selection:
Fallback: AI analysis did not complete successfully. Running all performance tests.

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
71.4% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud