From 267f72f84c6a5979eae696dae8fddee25188c1bb Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 15 Mar 2024 21:06:13 +0000
Subject: ui(mobile): New header style in the app

---
 apps/mobile/app/dashboard/lists/[slug].tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'apps/mobile/app/dashboard/lists')

diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index f85aeeaf..0d1c01dc 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -1,7 +1,8 @@
-import { View } from "react-native";
+import { SafeAreaView, View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 
 export default function ListView() {
@@ -12,19 +13,25 @@ export default function ListView() {
   const { data: list } = api.lists.get.useQuery({ listId: slug });
 
   return (
-    <>
+    <SafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: list ? `${list.icon} ${list.name}` : "Loading ...",
+          headerTitle: "",
+          headerBackTitle: "Back",
+          headerTransparent: true,
         }}
       />
       {list ? (
         <View>
-          <BookmarkList archived={false} ids={list.bookmarks} />
+          <BookmarkList
+            archived={false}
+            ids={list.bookmarks}
+            header={<PageTitle title={`${list.icon} ${list.name}`} />}
+          />
         </View>
       ) : (
         <FullPageSpinner />
       )}
-    </>
+    </SafeAreaView>
   );
 }
-- 
cgit v1.2.3-70-g09d2