chore: UI improvements

.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 = {