Fix header buttons

src/components/Header/Left.tsx

@@ -8,6 +8,7 @@ export interface Props {
   type?: 'icon' | 'text'
   content?: string
   native?: boolean
+  background?: boolean
 
   onPress: () => void
 }
@@ -16,6 +17,7 @@ const HeaderLeft: React.FC<Props> = ({
   type = 'icon',
   content,
   native = true,
+  background = false,
   onPress
 }) => {
   const { theme } = useTheme()
@@ -47,11 +49,19 @@ const HeaderLeft: React.FC<Props> = ({
       style={[
         styles.base,
         {
-          backgroundColor: theme.backgroundOverlayDefault,
+          backgroundColor: background
+            ? theme.backgroundOverlayDefault
+            : undefined,
+          minHeight: 44,
+          minWidth: 44,
+          marginLeft: native
+            ? -StyleConstants.Spacing.S
+            : StyleConstants.Spacing.S,
           ...(type === 'icon' && {
-            height: 44,
+            borderRadius: 100
-            width: 44,
+          }),
-            marginLeft: native ? -9 : 9
+          ...(type === 'text' && {
+            paddingHorizontal: StyleConstants.Spacing.S
           })
         }
       ]}
@@ -63,8 +73,7 @@ const styles = StyleSheet.create({
   base: {
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
-    borderRadius: 100
   },
   text: {
     ...StyleConstants.FontStyle.M

src/components/Header/Right.tsx

@@ -9,6 +9,7 @@ export interface Props {
   type?: 'icon' | 'text'
   content: string
   native?: boolean
+  background?: boolean
 
   loading?: boolean
   disabled?: boolean
@@ -20,6 +21,7 @@ const HeaderRight: React.FC<Props> = ({
   type = 'icon',
   content,
   native = true,
+  background = false,
   loading,
   disabled,
   onPress
@@ -79,11 +81,19 @@ const HeaderRight: React.FC<Props> = ({
       style={[
         styles.base,
         {
-          backgroundColor: theme.backgroundOverlayDefault,
+          backgroundColor: background
+            ? theme.backgroundOverlayDefault
+            : undefined,
+          minHeight: 44,
+          minWidth: 44,
+          marginLeft: native
+            ? -StyleConstants.Spacing.S
+            : StyleConstants.Spacing.S,
           ...(type === 'icon' && {
-            height: 44,
+            borderRadius: 100
-            width: 44,
+          }),
-            marginRight: native ? -9 : 9
+          ...(type === 'text' && {
+            paddingHorizontal: StyleConstants.Spacing.S
           })
         }
       ]}
@@ -95,8 +105,7 @@ const styles = StyleSheet.create({
   base: {
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
-    borderRadius: 100
   },
   text: {
     ...StyleConstants.FontStyle.M

src/screens/Tabs/Shared/Account.tsx

@@ -49,6 +49,7 @@ const TabSharedAccount: React.FC<SharedAccountProp> = ({
                 account
               })
             }}
+            background
           />
         )
       })

src/screens/Tabs/Shared/sharedScreens.tsx

@@ -74,7 +74,9 @@ const sharedScreens = (
             backgroundColor: `rgba(255, 255, 255, 0)`
           },
           headerCenter: () => null,
-          headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+          headerLeft: () => (
+            <HeaderLeft onPress={() => navigation.goBack()} background />
+          )
         }
       }}
     />,