Updated header in buysell

MetaMask · Dec 18, 2024 · f1e6ed5 · f1e6ed5
1 parent 97047cc
commit f1e6ed5
Showing 1 changed file with 36 additions and 75 deletions.
diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
@@ -35,6 +35,9 @@ import Routes from '../../../constants/navigation/Routes';
 import ButtonIcon, {
   ButtonIconSizes,
 } from '../../../component-library/components/Buttons/ButtonIcon';
+import Button, {
+  ButtonVariants,
+} from '../../../component-library/components/Buttons/Button';
 
 import {
   default as MorphText,
@@ -1672,83 +1675,41 @@ export function getFiatOnRampAggNavbar(
   themeColors,
   onCancel,
 ) {
-  const innerStyles = StyleSheet.create({
-    headerButtonText: {
-      color: themeColors.primary.default,
-      fontSize: scale(11),
-      ...fontStyles.normal,
-    },
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerTitleStyle: {
-      fontSize: 18,
-      ...fontStyles.normal,
-      color: themeColors.text.default,
-      ...(!showBack && { textAlign: 'center' }),
-    },
-  });
-  const headerTitle = title ?? 'Buy';
-
-  const leftActionText = strings('navigation.back');
-
-  const leftAction = () => navigation.pop();
-
-  const navigationCancelText = strings('navigation.cancel');
-
   return {
-    headerTitle: () => (
-      <NavbarTitle title={headerTitle} disableNetwork translate={false} />
+    header: () => (
+      <HeaderBase
+        includesTopInset
+        startAccessory={
+          showBack && (
+            <Button
+              variant={ButtonVariants.Link}
+              style={styles.headerLeftButton}
+              label={strings('navigation.back')}
+              onPress={() => navigation.pop()}
+              accessibilityRole="button"
+              accessible
+            />
+          )
+        }
+        endAccessory={
+          showCancel && (
+            <Button
+              variant={ButtonVariants.Link}
+              style={styles.headerRightButton}
+              label={strings('navigation.cancel')}
+              onPress={() => {
+                navigation.dangerouslyGetParent()?.pop();
+                onCancel?.();
+              }}
+              accessibilityRole="button"
+              accessible
+            />
+          )
+        }
+      >
+        <NavbarTitle title={title ?? 'Buy'} disableNetwork translate={false} />
+      </HeaderBase>
     ),
-    headerLeft: () => {
-      if (!showBack) return <View />;
-
-      return Device.isAndroid() ? (
-        <TouchableOpacity
-          onPress={leftAction}
-          style={styles.backButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <IonicIcon
-            name={'md-arrow-back'}
-            size={24}
-            style={innerStyles.headerIcon}
-          />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          onPress={leftAction}
-          style={styles.closeButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <Text style={innerStyles.headerButtonText}>{leftActionText}</Text>
-        </TouchableOpacity>
-      );
-    },
-    headerRight: () => {
-      if (!showCancel) return <View />;
-      return (
-        <TouchableOpacity
-          onPress={() => {
-            navigation.dangerouslyGetParent()?.pop();
-            onCancel?.();
-          }}
-          style={styles.closeButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <Text style={innerStyles.headerButtonText}>
-            {navigationCancelText}
-          </Text>
-        </TouchableOpacity>
-      );
-    },
-    headerStyle: innerStyles.headerStyle,
-    headerTitleStyle: innerStyles.headerTitleStyle,
   };
 }