From 32adb5c43a0f6eafd74fda97c259f8103d556880 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Tue, 16 Jun 2026 21:50:00 +0200
Subject: [PATCH] fix(ui): unify the header back icon and fix its Android
 alignment

Use the Settings chevron-left for HeaderBackButton everywhere (was
Ionicons arrow-back) so every back button matches. On Android, replace
the `rounded-full p-2` (which pushed both the arrow and the title too far
right) with a 16px right margin, like the Settings back button.
---
 components/common/HeaderBackButton.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/common/HeaderBackButton.tsx b/components/common/HeaderBackButton.tsx
index 8818a9a0..ba06411e 100644
--- a/components/common/HeaderBackButton.tsx
+++ b/components/common/HeaderBackButton.tsx
@@ -1,4 +1,4 @@
-import { Ionicons } from "@expo/vector-icons";
+import { Feather } from "@expo/vector-icons";
 import { BlurView, type BlurViewProps } from "expo-blur";
 import { Platform } from "react-native";
 import { Pressable, type PressableProps } from "react-native-gesture-handler";
@@ -23,7 +23,7 @@ export const HeaderBackButton: React.FC<Props> = ({
         className='flex items-center justify-center w-9 h-9'
         {...pressableProps}
       >
-        <Ionicons name='arrow-back' size={24} color='white' />
+        <Feather name='chevron-left' size={28} color='white' />
       </Pressable>
     );
   }
@@ -36,10 +36,10 @@ export const HeaderBackButton: React.FC<Props> = ({
           intensity={100}
           className='overflow-hidden rounded-full p-2'
         >
-          <Ionicons
+          <Feather
             className='drop-shadow-2xl'
-            name='arrow-back'
-            size={24}
+            name='chevron-left'
+            size={28}
             color='white'
           />
         </BlurView>
@@ -49,13 +49,16 @@ export const HeaderBackButton: React.FC<Props> = ({
   return (
     <Pressable
       onPress={() => router.back()}
-      className=' rounded-full p-2'
+      // Match the Settings page back button: chevron flush to the edge with a
+      // 16px gap before the title (the old `p-2` pushed both arrow and title
+      // too far right). drop-shadow keeps it readable over images.
+      style={{ marginRight: 16 }}
       {...pressableProps}
     >
-      <Ionicons
+      <Feather
         className='drop-shadow-2xl'
-        name='arrow-back'
-        size={24}
+        name='chevron-left'
+        size={28}
         color='white'
       />
     </Pressable>