feat: add new close button (#5141)

### Description

- Adds a new `CloseButton.tsx` to match hitSlop and ripple used in the
Tab Navigator buttons. The ripple seen in the Android screenshots is the
touchable area.
- Adjusts the existing `headerWithCloseButton` to use the new
`CloseButton.tsx`.


| Android Before w/ ripple | Android After w/ripple | iOS Before | iOS
After |
| ---- | ---- | ---- | ---- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/b3938275-6c81-43e0-b82e-5e2f9d44e55a)
|
![](https://github.com/valora-inc/wallet/assets/26950305/db0a0f9c-cfaa-4436-b3ee-979856af6fb8)
|
![](https://github.com/valora-inc/wallet/assets/26950305/d933eb18-4bd1-4044-8cd8-5d77dc3951ef)
|
![](https://github.com/valora-inc/wallet/assets/26950305/3ea6b906-04d7-4fde-9ec1-08c921a09602)
|

### Test plan

- Tested locally on iOS
- Tested locally on Android

### Related issues

N/A

### Backwards compatibility

Yes

### Network scalability

N/A

src/components/CloseButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import Times from 'src/icons/Times'
+import { navigateBack } from 'src/navigator/NavigationService'
+import { Spacing } from 'src/styles/styles'
+
+interface Props {
+  style?: StyleProp<ViewStyle>
+  size?: number
+  testID?: string
+}
+
+export default function CloseButton({ style, size, testID }: Props) {
+  const onPress = () => {
+    navigateBack()
+  }
+
+  return (
+    <View style={styles.container}>
+      <Touchable
+        testID={testID}
+        onPress={onPress}
+        style={[style, styles.button]}
+        borderRadius={Spacing.Thick24}
+      >
+        <Times height={size} />
+      </Touchable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    padding: Spacing.Small12,
+  },
+})

src/navigator/Headers.tsx

@@ -5,14 +5,14 @@ import { Dimensions, PixelRatio, Platform, Pressable, StyleSheet, Text, View } f
 import AccountCircleButton from 'src/components/AccountCircleButton'
 import BackButton from 'src/components/BackButton'
 import CancelButton from 'src/components/CancelButton'
+import CloseButton from 'src/components/CloseButton'
 import CurrencyDisplay from 'src/components/CurrencyDisplay'
 import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay'
 import QrScanButton from 'src/components/QrScanButton'
 import TokenDisplay from 'src/components/TokenDisplay'
 import NotificationBell from 'src/home/NotificationBell'
 import i18n from 'src/i18n'
 import BackChevronCentered from 'src/icons/BackChevronCentered'
-import Times from 'src/icons/Times'
 import { navigateBack } from 'src/navigator/NavigationService'
 import { TopBarIconButton } from 'src/navigator/TopBarButton'
 import DisconnectBanner from 'src/shared/DisconnectBanner'
@@ -170,11 +170,6 @@ export const headerWithBackEditButtons: NativeStackNavigationOptions = {
   headerRight: () => <BackButton />,
 }
 
-export const headerWithCloseButton: NativeStackNavigationOptions = {
-  ...emptyHeader,
-  headerLeft: () => <TopBarIconButton icon={<Times />} onPress={navigateBack} />,
-}
-
 interface Props {
   title: string | React.ReactNode
   token: Currency
@@ -300,6 +295,17 @@ export const tabHeader: NativeStackNavigationOptions = {
   ),
 }
 
+export const headerWithCloseButton: NativeStackNavigationOptions = {
+  ...emptyHeader,
+  headerLeft: () => (
+    // The negative margin is to fix an issue with margin added via the stack navigator
+    // https://github.com/react-navigation/react-navigation/issues/11295
+    <View style={[styles.topElementsContainer, { marginLeft: -Spacing.Small12 }]}>
+      <CloseButton testID="CloseButton" />
+    </View>
+  ),
+}
+
 HeaderTitleWithBalance.defaultProps = {
   token: Currency.Dollar,
 }