fix: Update header style for Webview

app/component-library/components/HeaderBase/HeaderBase.styles.ts

@@ -31,7 +31,6 @@ const styleSheet = (params: {
       {
         backgroundColor: theme.colors.background.default,
         flexDirection: 'row',
-        alignItems: 'center',
       } as ViewStyle,
       style,
     ) as ViewStyle,

app/component-library/components/HeaderBase/HeaderBase.tsx

@@ -3,6 +3,7 @@
 // Third party dependencies.
 import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // External dependencies.
 import { useComponentSize, useStyles } from '../../hooks';
@@ -22,19 +23,25 @@ const HeaderBase: React.FC<HeaderBaseProps> = ({
   children,
   startAccessory,
   endAccessory,
+  includesTopInset = false,
 }) => {
   const { size: startAccessorySize, onLayout: startAccessoryOnLayout } =
     useComponentSize();
   const { size: endAccessorySize, onLayout: endAccessoryOnLayout } =
     useComponentSize();
+  const insets = useSafeAreaInsets();
+
   const { styles } = useStyles(styleSheet, {
     style,
     startAccessorySize,
     endAccessorySize,
   });
 
   return (
-    <View style={styles.base} testID={HEADERBASE_TEST_ID}>
+    <View
+      style={[styles.base, includesTopInset && { marginTop: insets.top }]}
+      testID={HEADERBASE_TEST_ID}
+    >
       <View style={styles.accessoryWrapper}>
         <View onLayout={startAccessoryOnLayout}>{startAccessory}</View>
       </View>

app/component-library/components/HeaderBase/HeaderBase.types.ts

@@ -17,6 +17,12 @@ export interface HeaderBaseProps extends ViewProps {
    * Optional prop to include content to be displayed after the title.
    */
   endAccessory?: React.ReactNode;
+  /**
+   * Optional prop to include the top inset to make sure the header is visible
+   * below device's knob
+   * @default: false
+   */
+  includesTopInset?: boolean;
 }
 
 /**

app/components/UI/AccountRightButton/index.tsx

@@ -9,7 +9,6 @@ import {
   EmitterSubscription,
 } from 'react-native';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
-import Device from '../../../util/device';
 import AvatarAccount, {
   AvatarAccountType,
 } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
@@ -32,14 +31,6 @@ import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
 import UrlParser from 'url-parse';
 
 const styles = StyleSheet.create({
-  leftButton: {
-    marginTop: 12,
-    marginRight: Device.isAndroid() ? 7 : 16,
-    marginLeft: Device.isAndroid() ? 7 : 0,
-    marginBottom: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   placeholderInput: {
     height: 0,
     width: 0,

app/components/UI/Navbar/index.js

@@ -53,6 +53,7 @@ import Icon, {
 } from '../../../component-library/components/Icons/Icon';
 import { AddContactViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Contacts/AddContactView.selectors';
 import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportTokenView.selectors';
+import HeaderBase from '../../../component-library/components/HeaderBase';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -134,6 +135,15 @@ const styles = StyleSheet.create({
     top: 2,
     right: 10,
   },
+  headerLeftButton: {
+    marginHorizontal: 16,
+  },
+  headerRightButton: {
+    marginHorizontal: 16,
+  },
+  headerContainer: {
+    paddingVertical: 16,
+  },
 });
 
 const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
@@ -155,33 +165,22 @@ export function getTransactionsNavbarOptions(
   selectedAddress,
   handleRightButtonPress,
 ) {
-  const innerStyles = StyleSheet.create({
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerIcon: {
-      color: themeColors.primary.default,
-    },
-    headerButtonText: {
-      color: themeColors.primary.default,
-      fontSize: 14,
-      ...fontStyles.normal,
-    },
-  });
-
   return {
-    headerTitle: () => <NavbarTitle title={title} />,
-    headerLeft: null,
-    headerRight: () => (
-      <AccountRightButton
-        selectedAddress={selectedAddress}
-        onPress={handleRightButtonPress}
-      />
+    header: () => (
+      <HeaderBase
+        includesTopInset
+        endAccessory={
+          <View style={styles.headerRightButton}>
+            <AccountRightButton
+              selectedAddress={selectedAddress}
+              onPress={handleRightButtonPress}
+            />
+          </View>
+        }
+      >
+        <NavbarTitle title={title} />
+      </HeaderBase>
     ),
-    headerStyle: innerStyles.headerStyle,
-    headerTintColor: themeColors.primary.default,
   };
 }
 
@@ -1270,61 +1269,39 @@ export function getNetworkNavbarOptions(
   disableNetwork = false,
   contentOffset = 0,
 ) {
-  const innerStyles = StyleSheet.create({
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerShadow: {
-      elevation: 2,
-      shadowColor: themeColors.background.primary,
-      shadowOpacity: contentOffset < 20 ? contentOffset / 100 : 0.2,
-      shadowOffset: { height: 4, width: 0 },
-      shadowRadius: 8,
-    },
-    headerIcon: {
-      color: themeColors.primary.default,
-    },
-  });
   return {
-    headerTitle: () => (
-      <NavbarTitle
-        disableNetwork={disableNetwork}
-        title={title}
-        translate={translate}
-      />
-    ),
-    headerLeft: () => (
-      // eslint-disable-next-line react/jsx-no-bind
-      <TouchableOpacity
-        onPress={() => navigation.pop()}
-        style={styles.backButton}
-        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+    header: () => (
+      <HeaderBase
+        includesTopInset
+        startAccessory={
+          <ButtonIcon
+            style={styles.headerLeftButton}
+            onPress={() => navigation.pop()}
+            testID={CommonSelectorsIDs.BACK_ARROW_BUTTON}
+            size={ButtonIconSizes.Lg}
+            iconName={IconName.ArrowLeft}
+            iconColor={IconColor.Default}
+          />
+        }
+        endAccessory={
+          onRightPress && (
+            <ButtonIcon
+              style={styles.headerRightButton}
+              onPress={onRightPress}
+              size={ButtonIconSizes.Lg}
+              iconName={IconName.MoreVertical}
+              iconColor={IconColor.Default}
+            />
+          )
+        }
       >
-        <IonicIcon
-          name={'ios-close'}
-          size={38}
-          style={innerStyles.headerIcon}
+        <NavbarTitle
+          disableNetwork={disableNetwork}
+          title={title}
+          translate={translate}
         />
-      </TouchableOpacity>
+      </HeaderBase>
     ),
-    headerRight: onRightPress
-      ? () => (
-          <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
-            <MaterialCommunityIcon
-              name={'dots-horizontal'}
-              size={28}
-              style={innerStyles.headerIcon}
-            />
-          </TouchableOpacity>
-          // eslint-disable-next-line no-mixed-spaces-and-tabs
-        )
-      : () => <View />,
-    headerStyle: [
-      innerStyles.headerStyle,
-      contentOffset && innerStyles.headerShadow,
-    ],
   };
 }
 
@@ -1355,55 +1332,31 @@ export function getWebviewNavbar(navigation, route, themeColors) {
   const title = route.params?.title ?? '';
   const share = route.params?.dispatch;
   return {
-    headerTitle: () => (
-      <Text style={innerStyles.headerTitleStyle}>{title}</Text>
+    header: () => (
+      <HeaderBase
+        style={styles.headerContainer}
+        includesTopInset
+        startAccessory={
+          <View style={styles.headerLeftButton}>
+            <ButtonIcon
+              iconName={IconName.ArrowLeft}
+              onPress={() => navigation.pop()}
+            />
+          </View>
+        }
+        endAccessory={
+          <View style={styles.headerRightButton}>
+            <ButtonIcon iconName={IconName.Share} onPress={share} />
+          </View>
+        }
+      >
+        <NavbarTitle
+          title={title}
+          translate={false}
+          showSelectedNetwork={false}
+        />
+      </HeaderBase>
     ),
-    headerLeft: () =>
-      Device.isAndroid() ? (
-        // eslint-disable-next-line react/jsx-no-bind
-        <TouchableOpacity
-          onPress={() => navigation.pop()}
-          style={styles.backButton}
-          {...generateTestId(Platform, BACK_BUTTON_SIMPLE_WEBVIEW)}
-        >
-          <IonicIcon
-            name={'md-arrow-back'}
-            size={24}
-            style={innerStyles.headerIcon}
-          />
-        </TouchableOpacity>
-      ) : (
-        // eslint-disable-next-line react/jsx-no-bind
-        <TouchableOpacity
-          onPress={() => navigation.pop()}
-          style={styles.backButton}
-        >
-          <IonicIcon
-            name="ios-close"
-            size={38}
-            style={[innerStyles.headerIcon, styles.backIconIOS]}
-          />
-        </TouchableOpacity>
-      ),
-    headerRight: () =>
-      Device.isAndroid() ? (
-        <TouchableOpacity onPress={share} style={styles.backButton}>
-          <MaterialCommunityIcon
-            name="share-variant"
-            size={24}
-            style={innerStyles.headerIcon}
-          />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity onPress={share} style={styles.backButton}>
-          <EvilIcons
-            name="share-apple"
-            size={32}
-            style={[innerStyles.headerIcon, styles.shareIconIOS]}
-          />
-        </TouchableOpacity>
-      ),
-    headerStyle: innerStyles.headerStyle,
   };
 }