fix: Polish Settings Backup and Sync section for consistency

[amandaye0h]

Description

This PR polishes the typography, button styles and spacing for the Backup and Sync section in Settings so the styling is aligned with the rest of the product. This is part of a wider initiative to refine our pattern sections in the product.

See other Settings PRs for context.

Changelog

CHANGELOG entry: fix: update settings ui for backup and sync

Related issues

Fixes:
#30229
#30171

Manual testing steps

Feature: Backup and sync settings — layout & typography (DQA)

  Scenario: User verifies Backup and sync screen matches DQA
    Given the user is on Settings
    When they open "Backup and sync" and review the main toggle, privacy link, and "Manage what you sync" (Accounts / Contacts)
    Then layout and typography look correct (spacing, no stray top border on the sync block, centered rows, medium-weight labels/copy), the privacy link opens, and toggling the main switch does not clip or break the layout

Screenshots/Recordings

Before

After

Before	After

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.

---

Note

Low Risk
Low risk UI-only changes that adjust layout and Text styling in Settings, with no changes to backup/sync behavior, state, or analytics logic.

Overview
Polishes the Settings Backup & Sync section to better match design-system patterns by adjusting spacing/alignment and standardizing typography.

Updates BackupAndSyncToggle and BackupAndSyncFeaturesToggles to use explicit Text variants with FontWeight.Medium, tweaks margins/vertical rhythm, and aligns feature rows/icons with consistent centering.

^{Reviewed by Cursor Bugbot for commit e8bbc6d. Bugbot is set up for automated code reviews on this repo. Configure here.}

[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]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeIdentity
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The 4 changed files are all UI/styling changes to the Backup & Sync Identity components:

1. BackupAndSyncFeaturesToggles.tsx: Added FontWeight.Medium and explicit TextVariant/TextColor props to Text components — purely cosmetic typography improvements.
2. BackupAndSyncToggle.tsx: Changed TextVariant from BodyMd to BodySm, added FontWeight.Medium — cosmetic typography change.
3. BackupAndSyncFeaturesToggles.styles.ts: Adjusted margins (marginTop: 24 instead of 8+border), increased featureView marginVertical (8→12), added alignItems: 'center', increased gap (8→12).
4. BackupAndSyncToggle.styles.ts: Changed marginVertical: 16 to marginTop: 0.

These components are used in BackupAndSyncSettings (Settings screen) and OnboardingGeneralSettings. The changes are purely visual — no functional logic, state management, or sync behavior is modified. SmokeIdentity is the appropriate tag as it covers backup and sync settings flows (enabling/disabling sync via settings toggle). No other tags are warranted since the changes don't touch account management, confirmations, network, or other feature areas.

Performance Test Selection:
These are minor UI styling changes (typography, spacing, alignment) to the Backup & Sync settings components. No performance-sensitive code paths are affected — no list rendering, data loading, state management, or critical user flows are changed. Performance tests are not warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud