chore: revert 15669 from 7.49.0 (#16305)

<!--
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**
Revert [15669](#15669)
from 7.49.0
<!--
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?
-->

## **Related issues**

Fixes: #16214

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] 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**

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

Author: tommasini

app/component-library/components/Form/TextField/TextField.styles.ts

@@ -30,18 +30,20 @@ const styleSheet = (params: {
   }
 
   return StyleSheet.create({
-    base: Object.assign({
-      flexDirection: 'row',
-      alignItems: 'center',
-      borderRadius: 8,
-      height: Number(size),
-      borderWidth: 1,
-      borderColor,
-      opacity: isDisabled ? 0.5 : 1,
-      paddingHorizontal: 16,
-      backgroundColor: theme.colors.background.default,
-      ...StyleSheet.flatten(style),
-    } as ViewStyle) as ViewStyle,
+    base: Object.assign(
+      {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 8,
+        height: Number(size),
+        borderWidth: 1,
+        borderColor,
+        opacity: isDisabled ? 0.5 : 1,
+        paddingHorizontal: 16,
+        backgroundColor: theme.colors.background.default,
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
     startAccessory: {
       marginRight: 8,
     },

app/components/Nav/App/App.tsx

@@ -229,11 +229,7 @@ const OnboardingNav = () => (
       name={Routes.ONBOARDING.IMPORT_FROM_SECRET_RECOVERY_PHRASE}
       component={ImportFromSecretRecoveryPhrase}
     />
-    <Stack.Screen
-      name="OptinMetrics"
-      component={OptinMetrics}
-      options={{ headerShown: false }}
-    />
+    <Stack.Screen name="OptinMetrics" component={OptinMetrics} />
   </Stack.Navigator>
 );
 

app/components/UI/LoginOptionsSwitch/LoginOptionsSwitch.tsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useState } from 'react';
+import { Switch, Text, View } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { AUTHENTICATION_TYPE, BIOMETRY_TYPE } from 'react-native-keychain';
+import { createStyles } from './styles';
 import { LoginViewSelectors } from '../../../../e2e/selectors/wallet/LoginView.selectors';
 import { useSelector } from 'react-redux';
-import SecurityOptionToggle from '../SecurityOptionToggle/SecurityOptionToggle';
+import { useTheme } from '../../../util/theme';
 
 interface Props {
   shouldRenderBiometricOption:
@@ -28,6 +30,9 @@ const LoginOptionsSwitch = ({
   onUpdateBiometryChoice,
   onUpdateRememberMe,
 }: Props) => {
+  const theme = useTheme();
+  const { colors } = theme;
+  const styles = createStyles(colors);
   const allowLoginWithRememberMe = useSelector(
     // TODO: Replace "any" with type
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -51,22 +56,44 @@ const LoginOptionsSwitch = ({
   // if both are disabled then this component returns null
   if (shouldRenderBiometricOption !== null) {
     return (
-      <SecurityOptionToggle
-        title={strings(
-          `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
-        )}
-        value={biometryChoiceState}
-        onOptionUpdated={onBiometryValueChanged}
-      />
+      <View style={styles.container}>
+        <Text style={styles.label}>
+          {strings(
+            `biometrics.enable_${shouldRenderBiometricOption.toLowerCase()}`,
+          )}
+        </Text>
+        <Switch
+          onValueChange={onBiometryValueChanged}
+          value={biometryChoiceState}
+          style={styles.switch}
+          trackColor={{
+            true: colors.primary.default,
+            false: colors.border.muted,
+          }}
+          thumbColor={theme.brandColors.white}
+          ios_backgroundColor={colors.border.muted}
+        />
+      </View>
     );
   } else if (shouldRenderBiometricOption === null && allowLoginWithRememberMe) {
     return (
-      <SecurityOptionToggle
-        title={strings('choose_password.remember_me')}
-        value={rememberMeEnabled}
-        onOptionUpdated={onRememberMeValueChanged}
-        testId={LoginViewSelectors.REMEMBER_ME_SWITCH}
-      />
+      <View style={styles.container}>
+        <Text style={styles.label}>
+          {strings(`choose_password.remember_me`)}
+        </Text>
+        <Switch
+          onValueChange={onRememberMeValueChanged}
+          value={rememberMeEnabled}
+          style={styles.switch}
+          trackColor={{
+            true: colors.primary.default,
+            false: colors.border.muted,
+          }}
+          thumbColor={theme.brandColors.white}
+          ios_backgroundColor={colors.border.muted}
+          testID={LoginViewSelectors.REMEMBER_ME_SWITCH}
+        />
+      </View>
     );
   }
   return null;

app/components/UI/Navbar/index.js

@@ -645,14 +645,10 @@ export function getModalNavbarOptions(title) {
  */
 export function getOnboardingNavbarOptions(
   route,
-  { headerLeft, headerRight },
+  { headerLeft } = {},
   themeColors,
-  showLogo = true,
 ) {
-  const headerLeftHide =
-    headerLeft || route.params?.headerLeft || (() => <View />);
-  const headerRightHide =
-    headerRight || route.params?.headerRight || (() => <View />);
+  const headerLeftHide = headerLeft || route.params?.headerLeft;
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -668,18 +664,17 @@ export function getOnboardingNavbarOptions(
 
   return {
     headerStyle: innerStyles.headerStyle,
-    headerTitle: showLogo
-      ? () => (
-          <View style={styles.metamaskNameTransparentWrapper}>
-            <Image
-              source={metamask_name}
-              style={innerStyles.metamaskName}
-              resizeMethod={'auto'}
-            />
-          </View>
-        )
-      : null,
-    headerRight: headerRightHide,
+    headerTitle: () => (
+      <View style={styles.metamaskNameTransparentWrapper}>
+        <Image
+          source={metamask_name}
+          style={innerStyles.metamaskName}
+          resizeMethod={'auto'}
+        />
+      </View>
+    ),
+    headerBackTitle: strings('navigation.back'),
+    headerRight: () => <View />,
     headerLeft: headerLeftHide,
     headerTintColor: themeColors.primary.default,
   };
@@ -805,7 +800,7 @@ export function getTransparentBackOnboardingNavbarOptions(themeColors) {
  *
  * @returns {Object} - Corresponding navbar options containing headerLeft
  */
-export function getOptinMetricsNavbarOptions(themeColors, showLogo = true) {
+export function getOptinMetricsNavbarOptions(themeColors) {
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor: themeColors.background.default,
@@ -819,19 +814,17 @@ export function getOptinMetricsNavbarOptions(themeColors, showLogo = true) {
     },
   });
   return {
-    headerTitle: () =>
-      showLogo ? (
-        <View style={styles.metamaskNameTransparentWrapper}>
-          <Image
-            source={metamask_name}
-            style={innerStyles.metamaskName}
-            resizeMethod={'auto'}
-          />
-        </View>
-      ) : null,
+    headerTitle: () => (
+      <View style={styles.metamaskNameTransparentWrapper}>
+        <Image
+          source={metamask_name}
+          style={innerStyles.metamaskName}
+          resizeMethod={'auto'}
+        />
+      </View>
+    ),
     headerBackTitle: strings('navigation.back'),
     headerRight: () => <View />,
-    headerLeft: () => <View />,
     headerStyle: innerStyles.headerStyle,
     headerTintColor: themeColors.primary.default,
   };