5 files changed, 26 insertions, 18 deletions
diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index ac1a7e2b..fe40215e 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,8 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Tabs } from "expo-router";
 import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
+import { Platform } from "react-native";
+import * as NavigationBar from 'expo-navigation-bar';
 
 export default function TabLayout() {
+  useEffect(() => {
+    if (Platform.OS == "android") {
+      NavigationBar.setBackgroundColorAsync("white");
+    }
+  }, []);
   return (
     <Tabs
       screenOptions={{
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 18fb804d..804eb0b5 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import { Platform, SafeAreaView, View } from "react-native";
+import { Platform, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
 import { useRouter } from "expo-router";
@@ -9,6 +9,7 @@ import { useUploadAsset } from "@/lib/upload";
 import { MenuView } from "@react-native-menu/menu";
 import { SquarePen } from "lucide-react-native";
 import { useToast } from "@/components/ui/Toast";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 function HeaderRight() {
   const {toast} = useToast();
@@ -48,7 +49,6 @@ function HeaderRight() {
           title: "New Link",
           image: Platform.select({
             ios: "link",
-            android: "ic_menu_link",
           }),
         },
         {
@@ -56,7 +56,6 @@ function HeaderRight() {
           title: "New Note",
           image: Platform.select({
             ios: "note.text",
-            android: "ic_menu_note",
           }),
         },
         {
@@ -64,14 +63,13 @@ function HeaderRight() {
           title: "Photo Library",
           image: Platform.select({
             ios: "photo",
-            android: "ic_menu_photo",
           }),
         },
       ]}
       shouldOpenOnLongPress={false}
     >
       <View className="my-auto px-4">
-        <SquarePen onPress={() => Haptics.selectionAsync()} />
+        <SquarePen color="rgb(0, 122, 255)" onPress={() => Haptics.selectionAsync()} />
       </View>
     </MenuView>
   );
@@ -79,7 +77,7 @@ function HeaderRight() {
 
 export default function Home() {
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <UpdatingBookmarkList
         query={{ archived: false }}
         header={
@@ -89,6 +87,6 @@ export default function Home() {
           </View>
         }
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index e0ed8489..0350ebd2 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { FlatList, Pressable, SafeAreaView, Text, View } from "react-native";
+import { FlatList, Pressable, Text, View } from "react-native";
 import { Link } from "expo-router";
 import { api } from "@/lib/trpc";
 import { ChevronRight } from "lucide-react-native";
 import PageTitle from "@/components/ui/PageTitle";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Lists() {
   const [refreshing, setRefreshing] = useState(false);
@@ -48,7 +49,7 @@ export default function Lists() {
   );
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <FlatList
         ListHeaderComponent={
           <PageTitle title="Lists" />
@@ -62,7 +63,7 @@ export default function Lists() {
               <Text className="text-lg">
                 {l.item.logo} {l.item.name}
               </Text>
-              <ChevronRight />
+              <ChevronRight color="rgb(0, 122, 255)" />
             </Pressable>
           </Link>
         )}
@@ -70,6 +71,6 @@ export default function Lists() {
         refreshing={refreshing}
         onRefresh={onRefresh}
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index c1bb178b..bcaee5af 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
@@ -7,6 +7,7 @@ import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Search() {
   const [search, setSearch] = useState("");
@@ -25,7 +26,7 @@ export default function Search() {
   }
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <BookmarkList
         bookmarks={data.bookmarks}
         header={
@@ -44,6 +45,6 @@ export default function Search() {
         onRefresh={onRefresh}
         isRefreshing={isPending}
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index f60c2495..0dbf7da6 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,8 +1,9 @@
-import { SafeAreaView, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { Button } from "@/components/ui/Button";
 import PageTitle from "@/components/ui/PageTitle";
 import { useSession } from "@/lib/session";
 import { api } from "@/lib/trpc";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Dashboard() {
   const { logout } = useSession();
@@ -14,7 +15,7 @@ export default function Dashboard() {
   }
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <PageTitle title="Settings" />
       <View className="flex h-full w-full items-center gap-4 px-4 py-2">
         <View className="w-full rounded-lg bg-white px-4 py-2">
@@ -25,6 +26,6 @@ export default function Dashboard() {
 
         <Button className="w-full" label="Log Out" onPress={logout} />
       </View>
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }