chore: update OTA modal UI

[vinnyhoward]

Description

Update OTA modal to newest design here

• Also fixed an issue where the MetaMask logo wouldn't alternate based on light/dark mode

Changelog

CHANGELOG entry: Updated OTA modal user interface

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-393

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

Simulator.Screen.Recording.-.iPhone.17.-.2026-02-09.at.16.52.38.mov

After

after.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.

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
Primarily UI/copy changes with a small behavioral addition (explicit close) and minimal impact on the existing reload/metrics flow.

Overview
Updates OTAUpdatesModal to the latest design-system layout: replaces the old header/scroll/button components with HeaderCompactStandard + design-system Button/Text, tweaks spacing/sizing, and adds a close affordance that dismisses the bottom sheet.

Fixes branding to switch the MetaMask wordmark based on light/dark theme via useAssetFromTheme, and updates the English modal copy (title + iOS/Android descriptions). Tests are refactored to render with providers, mock new UI/theme dependencies, and add coverage for the new close button behavior.

^{Written by Cursor Bugbot for commit e14a256. This will update automatically on new commits. 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.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are limited to the OTAUpdatesModal component, which is a self-contained UI modal that appears only when OTA updates are available. The modifications include:

1. Design system migration: Moving from internal component library to @metamask/design-system-react-native for Button and Text components
2. Dark mode support: Adding a white version of the MetaMask name logo for dark mode
3. Header component swap: Replacing HeaderBase with HeaderCompactStandard (an existing component used elsewhere)
4. Text content updates: Minor copy changes in localization file

These are purely visual/styling changes with no impact on:

• Core wallet functionality
• Transaction flows
• Account management
• Network operations
• Any critical user paths

No E2E tests exist specifically for the OTAUpdatesModal component, and the changes don't affect any shared components that other E2E tests depend on. The unit tests have been properly updated to cover the new functionality (close button). Since this modal only appears conditionally when OTA updates are available (not during normal app usage), it doesn't intersect with any E2E test scenarios.

Performance Test Selection:
The changes are limited to a modal component (OTAUpdatesModal) that only appears when OTA updates are available. The modifications are purely visual/styling changes (design system migration, dark mode support, layout adjustments) with no impact on app startup, rendering performance, data loading, or any critical user flows. The modal is not part of the main app flow and doesn't affect account lists, login, swaps, or asset loading performance.

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

[MarioAslau]

LGTM