refactor: migrate ChoosePassword to design system components and Tailwind CSS (MetaMask#27616)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR migrates the `ChoosePassword` view and its
`FoxRiveLoaderAnimation` sub-component away from legacy
StyleSheet.create()-based styling toward the `MetaMask design system and
Tailwind CSS`.

Jira Link: https://consensyssoftware.atlassian.net/browse/TO-602

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: migrate ChoosePassword to design system components and
Tailwind CSS

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: ChoosePassword screen — visual and functional parity after style migration

  Scenario: New wallet creation with SRP backup
    Given the app is freshly installed and onboarding is in progress
    When the user reaches the "Create Password" screen
    Then the screen renders with title, password field, confirm field, checkbox, and button
    And the "Create Password" button is disabled

    When the user types a password ≥ 8 characters
    And types the same value in the confirm password field
    And checks the "I understand" checkbox
    Then the "Create Password" button becomes enabled

    When the user taps "Create Password"
    Then the Fox Rive loading animation appears and the form is hidden
    And after completion the user is navigated to the Manual Backup step

  Scenario: Password mismatch validation
    Given the user is on the "Create Password" screen
    When the user types different values in each password field
    Then a mismatch error is displayed and the button stays disabled

  Scenario: Password too short
    Given the user is on the "Create Password" screen
    When the user types fewer than 8 characters
    Then the helper text "Must be at least 8 characters" is always visible

  Scenario: OAuth (social login) flow
    Given the user arrived via a social login
    Then the button is enabled without checking the checkbox
    And on submit the user is navigated to the Onboarding Success screen

  Scenario: Dark-mode theme correctness
    Given the device is in dark mode
    When the user opens the "Create Password" screen
    Then all text, backgrounds, and icons use correct design system colour tokens
    And no hardcoded colours are visible
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/79e2215f-8874-46eb-b332-840ac271a75d



https://github.com/user-attachments/assets/70708f0b-5417-4b65-bbbe-4d765c71a379



## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> UI refactor of the password creation/onboarding flow that changes
component primitives, accessibility identifiers, and loading/form
rendering, which can cause visual or E2E regressions despite largely
preserving business logic.
> 
> **Overview**
> Migrates the `ChoosePassword` screen and `FoxRiveLoaderAnimation` from
legacy `StyleSheet` + internal component-library primitives to
**design-system React Native components** (`Box`, `Text`, `TextField`,
`Button`, `Checkbox`, `Icon`) styled via **Tailwind** (`useTailwind`),
deleting the old `*.styles.ts` files.
> 
> Adjusts a few UI behaviors and identifiers (e.g., confirm-password eye
toggle disabled when empty, adds `accessibilityLabel`s for password
fields, updates icon color tokens) and updates snapshots/unit tests
accordingly, including refactored `ChoosePassword` tests and Detox page
object selectors to use labels on Android.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7ddefaf. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: smgv

app/components/Views/ChoosePassword/ChoosePassword.styles.ts

@@ -1,9 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { View, ActivityIndicator } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import Rive, { Fit, Alignment, RiveRef } from 'rive-react-native';
 import { useTheme } from '../../../../util/theme';
-import createStyles from './index.styles';
-
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import {
+  Box,
+  BoxAlignItems,
+  BoxJustifyContent,
+} from '@metamask/design-system-react-native';
 import onboardingRiveFile from '../../../../animations/fox_loading.riv';
 import { getScreenDimensions } from '../../../../util/onboarding';
 import { isE2E } from '../../../../util/test/utils';
@@ -13,12 +17,26 @@ interface FoxRiveLoaderAnimationProps {}
 const FoxRiveLoaderAnimation: React.FC<FoxRiveLoaderAnimationProps> = () => {
   const riveRef = useRef<RiveRef>(null);
   const { colors } = useTheme();
+  const tw = useTailwind();
+  const { screenWidth, animationHeight } = getScreenDimensions();
+
+  const animationWrapperStyle = useMemo(
+    () => ({ width: screenWidth, height: animationHeight }),
+    [screenWidth, animationHeight],
+  );
 
-  const screenDimensions = getScreenDimensions();
+  const riveAnimationStyle = useMemo(
+    () => ({
+      ...tw.style('self-center bg-background-default'),
+      width: screenWidth * 0.4,
+      height: animationHeight,
+    }),
+    [screenWidth, animationHeight, tw],
+  );
 
-  const styles = useMemo(
-    () => createStyles(colors, screenDimensions),
-    [colors, screenDimensions],
+  const textWrapperStyle = useMemo(
+    () => ({ width: screenWidth }),
+    [screenWidth],
   );
 
   useEffect(() => {
@@ -32,21 +50,35 @@ const FoxRiveLoaderAnimation: React.FC<FoxRiveLoaderAnimationProps> = () => {
   }, [riveRef]);
 
   return (
-    <View testID="fox-rive-loader-animation" style={styles.animationContainer}>
-      <View style={styles.animationWrapper}>
+    <Box
+      testID="fox-rive-loader-animation"
+      alignItems={BoxAlignItems.Center}
+      justifyContent={BoxJustifyContent.Start}
+      twClassName="flex-1 bg-background-default pt-[30px]"
+    >
+      <Box
+        alignItems={BoxAlignItems.Center}
+        justifyContent={BoxJustifyContent.Center}
+        twClassName="bg-background-default"
+        style={animationWrapperStyle}
+      >
         <Rive
           ref={riveRef}
           source={onboardingRiveFile}
-          style={styles.riveAnimation}
+          style={riveAnimationStyle}
           autoplay
           fit={Fit.Contain}
           alignment={Alignment.Center}
         />
-      </View>
-      <View style={styles.textWrapper}>
+      </Box>
+      <Box
+        justifyContent={BoxJustifyContent.End}
+        twClassName="px-5"
+        style={textWrapperStyle}
+      >
         <ActivityIndicator size="large" color={colors.text.default} />
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 };
 

app/components/Views/ChoosePassword/FoxRiveLoaderAnimation/FoxRiveLoaderAnimation.tsx

@@ -3,17 +3,36 @@
 exports[`FoxRiveLoaderAnimation displays Rive animation and ActivityIndicator 1`] = `
 <View
   style={
-    {
-      "testID": "animation-container",
-    }
+    [
+      {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "display": "flex",
+        "flexBasis": "0%",
+        "flexGrow": 1,
+        "flexShrink": 1,
+        "justifyContent": "flex-start",
+        "paddingTop": 30,
+      },
+      undefined,
+    ]
   }
   testID="fox-rive-loader-animation"
 >
   <View
     style={
-      {
-        "testID": "animation-wrapper",
-      }
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "display": "flex",
+          "justifyContent": "center",
+        },
+        {
+          "height": 406,
+          "width": 375,
+        },
+      ]
     }
   >
     <RiveView
@@ -22,16 +41,27 @@ exports[`FoxRiveLoaderAnimation displays Rive animation and ActivityIndicator 1`
       source="mock-rive-file"
       style={
         {
-          "testID": "rive-animation",
+          "alignSelf": "center",
+          "backgroundColor": "#ffffff",
+          "height": 406,
+          "width": 150,
         }
       }
     />
   </View>
   <View
     style={
-      {
-        "testID": "text-wrapper",
-      }
+      [
+        {
+          "display": "flex",
+          "justifyContent": "flex-end",
+          "paddingLeft": 20,
+          "paddingRight": 20,
+        },
+        {
+          "width": 375,
+        },
+      ]
     }
   >
     <ActivityIndicator

app/components/Views/ChoosePassword/FoxRiveLoaderAnimation/__snapshots__/index.test.tsx.snap

@@ -56,16 +56,6 @@ jest.mock('../../../../util/device', () => ({
   default: mockDevice,
 }));
 
-// Mock styles
-jest.mock('./index.styles', () =>
-  jest.fn(() => ({
-    animationContainer: { testID: 'animation-container' },
-    animationWrapper: { testID: 'animation-wrapper' },
-    textWrapper: { testID: 'text-wrapper' },
-    riveAnimation: { testID: 'rive-animation' },
-  })),
-);
-
 import FoxRiveLoaderAnimation from './FoxRiveLoaderAnimation';
 
 describe('FoxRiveLoaderAnimation', () => {