fix: Polish Settings Buy/Sell section for consistency

[amandaye0h]

Description

This PR polishes the typography, button styles and spacing for the Buy / Sell 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: N/A

Related issues

Fixes:
#30228
#30171
#30230

Manual testing steps

Feature: Buy & sell crypto settings
  Scenario: Developer views Ramp settings with region and activation keys
    Given the app is an internal build with Ramp buy/sell settings available
    When user opens Settings and navigates to Buy & sell crypto
    Then the Current region section shows consistent typography and the Change region action is visible
    And the SDK activation keys section shows title, description, and list styling consistent with the design system
    When keys are loading
    Then a loading indicator appears beside the SDK activation keys title without breaking 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
UI-only polish to Ramp settings (typography, button variant, spacing, loader layout) with no changes to business logic or data handling; low risk aside from minor layout regressions.

Overview
Polishes the Buy/Sell (Ramp) Settings screen to better match the design system by switching text usage to @metamask/design-system-react-native with updated TextVariant/FontWeight/TextColor.

Adjusts the Current region section styling (including changing the action button to Secondary) and adds spacing for the internal-only Activation Keys section. The Activation Keys header now uses a styled row with an inline loading indicator to avoid layout issues while keys are loading.

^{Reviewed by Cursor Bugbot for commit 468238d. 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: SmokeMoney
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are confined to the Ramp/Aggregator Settings UI components:

1. ActivationKeys.tsx: Migrates Text component from internal component library to @metamask/design-system-react-native. Updates text variants, color tokens, and restructures the title row layout. This is a visual/styling change only, affecting the internal-build-only activation keys section.

2. Settings.tsx: Same design system migration for Text components. Notable functional change: the "Change Region" button variant changes from ButtonVariants.Primary to ButtonVariants.Secondary (visual change - button color/style). Also applies the new activationKeysRow style.

3. Settings.styles.tsx: Adds activationKeysRow style with spacing adjustments.

These changes are scoped entirely to the Ramp/Aggregator Settings screen, which is part of the fiat on/off-ramp (ramps) feature. The SmokeMoney tag covers ramps flows including buy, sell, region-aware flows, and related settings. No other feature areas are impacted - no controllers, no navigation changes, no shared components, no Engine changes. The changes are low-risk UI refactoring with a minor button variant change that should be validated through the ramps smoke tests.

Performance Test Selection:
These are purely UI/styling changes (design system component migration, text variant updates, button variant change, spacing adjustments) within the Ramp Settings screen. No performance-sensitive code paths are affected - no list rendering changes, no state management changes, no data loading changes, no app startup changes. Performance tests are not warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud