chore: UI improvements (#13463)

## **Description**


## **Related issues**

Fixes:

## **Manual testing steps**

1. Freshly install the app and go through both flows of creating a
wallet and importing a wallet. Make sure word marks and logo marks have
changed
2. FOR IOS ONLY - Tap and hold onto the home screen until the app icons
jiggle, click on the edit button on the top left or right depending on
device, switch to dark mode to confirm that the app icon changes to dark
mode.
3. Make sure the onboarding is updated with new assets 
4. Go through the entire app to make sure there are no remnants of the
old branding

## **Screenshots/Recordings**

NA

### **Before**

NA

### **After**

NA

## **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.

.gitignore

@@ -125,8 +125,6 @@ html-report/
 app/util/termsOfUse/termsOfUseContent.ts
 docs/assets/termsOfUse.html
 
-/app/images/branding
-
 # build metadata
 android/app/src/main/assets/modules.json
 

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.constants.ts

@@ -27,7 +27,7 @@ export const SAMPLE_AVATARFAVICON_SVGIMAGESOURCE_REMOTE: ImageSourcePropType = {
   uri: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
 };
 /* eslint-disable-next-line */
-export const SAMPLE_AVATARFAVICON_IMAGESOURCE_LOCAL: ImageSourcePropType = require('../../../../../../images/fox.png');
+export const SAMPLE_AVATARFAVICON_IMAGESOURCE_LOCAL: ImageSourcePropType = require('../../../../../../images/branding/fox.png');
 
 export const SAMPLE_AVATARFAVICON_PROPS: AvatarFaviconProps = {
   imageSource: SAMPLE_AVATARFAVICON_IMAGESOURCE_REMOTE,

app/components/Nav/Main/MainNavigator.js

@@ -829,7 +829,7 @@ const MainNavigator = () => (
       headerTitle={() => (
         <Image
           style={styles.headerLogo}
-          source={require('../../../images/metamask-name.png')}
+          source={require('../../../images/branding/metamask-name.png')}
           resizeMode={'contain'}
         />
       )}

app/components/UI/DrawerView/index.js

@@ -318,8 +318,8 @@ const createStyles = (colors) =>
     protectWalletButtonWrapper: { marginVertical: 8 },
   });
 
-const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
-const metamask_fox = require('../../../images/fox.png'); // eslint-disable-line
+const metamask_name = require('../../../images/branding/metamask-name.png'); // eslint-disable-line
+const metamask_fox = require('../../../images/branding/fox.png'); // eslint-disable-line
 const ICON_IMAGES = {
   wallet: require('../../../images/wallet-icon.png'), // eslint-disable-line
   'selected-wallet': require('../../../images/selected-wallet-icon.png'), // eslint-disable-line

app/components/UI/FoxLoader/FoxLoader.tsx

@@ -10,7 +10,7 @@ const FoxLoader = () => {
       <Image
         style={styles.image}
         // eslint-disable-next-line @typescript-eslint/no-require-imports
-        source={require('../../../images/fox.png')}
+        source={require('../../../images/branding/fox.png')}
         resizeMode="contain"
       />
       <View style={styles.spacer} />

app/components/UI/FoxScreen/index.js

@@ -22,7 +22,7 @@ const createStyles = (colors) =>
     },
   });
 
-const foxImage = require('../../../images/fox.png'); // eslint-disable-line import/no-commonjs
+const foxImage = require('../../../images/branding/fox.png'); // eslint-disable-line import/no-commonjs
 
 /**
  * View component that displays the MetaMask fox

app/components/UI/Navbar/index.js

@@ -74,8 +74,8 @@ const trackEvent = (event, params = {}) => {
 
 const styles = StyleSheet.create({
   metamaskName: {
-    width: 122,
-    height: 15,
+    width: 70,
+    height: 35,
   },
   metamaskFox: {
     width: 40,
@@ -148,8 +148,8 @@ const styles = StyleSheet.create({
   },
 });
 
-const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
-const metamask_fox = require('../../../images/fox.png'); // eslint-disable-line
+const metamask_name = require('../../../images/branding/metamask-name.png'); // eslint-disable-line
+const metamask_fox = require('../../../images/branding/fox.png'); // eslint-disable-line
 /**
  * Function that returns the navigation options
  * This is used by views that will show our custom navbar
@@ -651,8 +651,8 @@ export function getOnboardingNavbarOptions(
       elevation: 0,
     },
     metamaskName: {
-      width: 122,
-      height: 15,
+      width: 70,
+      height: 35,
       tintColor: themeColors.text.default,
     },
   });
@@ -688,8 +688,8 @@ export function getTransparentOnboardingNavbarOptions(themeColors) {
       elevation: 0,
     },
     metamaskName: {
-      width: 122,
-      height: 15,
+      width: 70,
+      height: 35,
       tintColor: themeColors.text.default,
     },
   });
@@ -722,8 +722,8 @@ export function getTransparentBackOnboardingNavbarOptions(themeColors) {
       elevation: 0,
     },
     metamaskName: {
-      width: 122,
-      height: 15,
+      width: 70,
+      height: 35,
       tintColor: themeColors.text.default,
     },
   });
@@ -756,36 +756,26 @@ export function getOptinMetricsNavbarOptions(themeColors) {
       backgroundColor: themeColors.background.default,
       shadowColor: importedColors.transparent,
       elevation: 0,
-      height: 100,
     },
     metamaskName: {
-      width: 122,
-      height: 15,
+      width: 70,
+      height: 35,
       tintColor: themeColors.text.default,
     },
   });
-
   return {
-    headerStyle: innerStyles.headerStyle,
-    title: null,
-    headerLeft: () => (
-      <View style={styles.optinHeaderLeft}>
-        <View style={styles.metamaskNameWrapper}>
-          <Image
-            source={metamask_fox}
-            style={styles.metamaskFox}
-            resizeMethod={'auto'}
-          />
-        </View>
-        <View style={styles.metamaskNameWrapper}>
-          <Image
-            source={metamask_name}
-            style={innerStyles.metamaskName}
-            resizeMethod={'auto'}
-          />
-        </View>
+    headerTitle: () => (
+      <View style={styles.metamaskNameTransparentWrapper}>
+        <Image
+          source={metamask_name}
+          style={innerStyles.metamaskName}
+          resizeMethod={'auto'}
+        />
       </View>
     ),
+    headerBackTitle: strings('navigation.back'),
+    headerRight: () => <View />,
+    headerStyle: innerStyles.headerStyle,
     headerTintColor: themeColors.primary.default,
   };
 }

app/components/UI/Notification/NotificationMenuItem/Icon.tsx

@@ -7,7 +7,7 @@ import Badge, {
 } from '../../../../component-library/components/Badges/Badge';
 import { BOTTOM_BADGEWRAPPER_BADGEPOSITION } from '../../../../component-library/components/Badges/BadgeWrapper/BadgeWrapper.constants';
 import RemoteImage from '../../../../components/Base/RemoteImage';
-import METAMASK_FOX from '../../../../images/fox.png';
+import METAMASK_FOX from '../../../../images/branding/fox.png';
 import { View } from 'react-native';
 
 type NotificationIconProps = Pick<

app/components/UI/OptinMetrics/__snapshots__/index.test.tsx.snap

@@ -74,7 +74,7 @@ exports[`OptinMetrics render matches snapshot 1`] = `
           pointerEvents="box-none"
           style={
             {
-              "height": 100,
+              "height": 64,
               "maxHeight": undefined,
               "minHeight": undefined,
               "opacity": undefined,
@@ -106,89 +106,49 @@ exports[`OptinMetrics render matches snapshot 1`] = `
               pointerEvents="box-none"
               style={
                 {
-                  "alignItems": "flex-start",
-                  "bottom": 0,
-                  "justifyContent": "center",
-                  "left": 0,
+                  "marginHorizontal": 16,
                   "opacity": 1,
-                  "position": "absolute",
-                  "top": 0,
                 }
               }
             >
               <View
                 style={
                   {
                     "alignItems": "center",
-                    "flexDirection": "row",
-                    "marginHorizontal": 20,
+                    "flex": 1,
+                    "justifyContent": "center",
                   }
                 }
               >
-                <View
-                  style={
-                    {
-                      "marginLeft": 0,
-                    }
-                  }
-                >
-                  <Image
-                    resizeMethod="auto"
-                    source={1}
-                    style={
-                      {
-                        "height": 40,
-                        "marginRight": 10,
-                        "width": 40,
-                      }
-                    }
-                  />
-                </View>
-                <View
+                <Image
+                  resizeMethod="auto"
+                  source={1}
                   style={
                     {
-                      "marginLeft": 0,
+                      "height": 35,
+                      "tintColor": "#141618",
+                      "width": 70,
                     }
                   }
-                >
-                  <Image
-                    resizeMethod="auto"
-                    source={1}
-                    style={
-                      {
-                        "height": 15,
-                        "tintColor": "#141618",
-                        "width": 122,
-                      }
-                    }
-                  />
-                </View>
+                />
               </View>
             </View>
             <View
               collapsable={false}
               pointerEvents="box-none"
               style={
                 {
-                  "marginHorizontal": 72,
+                  "alignItems": "flex-end",
+                  "bottom": 0,
+                  "justifyContent": "center",
                   "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  {
-                    "color": "#0376c9",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              />
+              <View />
             </View>
           </View>
         </View>
@@ -391,6 +351,7 @@ exports[`OptinMetrics render matches snapshot 1`] = `
                             style={
                               {
                                 "marginHorizontal": 20,
+                                "marginTop": 10,
                               }
                             }
                           >

app/components/UI/OptinMetrics/index.js

@@ -8,7 +8,6 @@ import {
   BackHandler,
   Alert,
   Linking,
-  InteractionManager,
   TouchableOpacity,
 } from 'react-native';
 import PropTypes from 'prop-types';
@@ -98,6 +97,7 @@ const createStyles = ({ colors }) =>
       paddingVertical: 10,
     },
     wrapper: {
+      marginTop: 10,
       marginHorizontal: 20,
     },
     privacyPolicy: {

app/components/UI/PhishingModal/index.js

@@ -86,7 +86,7 @@ const createStyles = (colors) =>
     },
   });
 
-const foxImage = require('../../../images/fox.png'); // eslint-disable-line import/no-commonjs
+const foxImage = require('../../../images/branding/fox.png'); // eslint-disable-line import/no-commonjs
 
 export default class PhishingModal extends PureComponent {
   static propTypes = {