modified: files to ios26 ui/ux

components/ui/StackHeader.tsx

@@ -1,4 +1,5 @@
 import Feather from "@expo/vector-icons/Feather";
+import { BlurView } from "expo-blur";
 import { router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import {
@@ -15,48 +16,51 @@ export default function StackHeader() {
   const logoUriString = Array.isArray(logoUri) ? logoUri[0] : logoUri;
 
   return (
-    <View style={styles.header}>
+    <BlurView intensity={60} tint="dark" style={styles.header}>
       <TouchableOpacity onPress={() => router.back()}>
-        <Feather name="arrow-left" size={26} color="white" />
+        <BlurView intensity={40} tint="light" style={styles.backButton}>
+          <Feather
+            name="chevron-left"
+            size={22}
+            color="rgba(255,255,255,0.95)"
+          />
+        </BlurView>
       </TouchableOpacity>
       <Image style={styles.logo} source={{ uri: logoUriString }} />
-      {/* <TouchableOpacity>
-        <Feather name="share" size={26} color="white" />
-      </TouchableOpacity> */}
-    </View>
+      <View style={{ width: 40 }} />
+    </BlurView>
   );
 }
 
 const styles = StyleSheet.create({
   header: {
-    height: 150,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    height: 140,
     alignItems: "center",
     justifyContent: "space-between",
     flexDirection: "row",
-    borderBottomWidth: 1,
-    paddingTop: Dimensions.get("window").height * 0.065,
-    paddingHorizontal: 20,
-
-    borderBottomColor: "hsl(221, 39%, 15%)",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 3,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
+    paddingTop: Dimensions.get("window").height * 0.06,
+    paddingHorizontal: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(255,255,255,0.08)",
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    overflow: "hidden",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255,255,255,0.18)",
   },
   logo: {
     width: 100,
     height: 100,
     resizeMode: "contain",
-    marginLeft: 10,
   },
   title: {
     color: "white",
     fontSize: 14,
-    fontWeight: "bold",
+    fontWeight: "600",
   },
 });