Waseel: driver app, dispatch, POI suggestions, map fixes

components/ride-layout.tsx

@@ -5,6 +5,8 @@ import { Image, Text, TouchableOpacity, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 
 import { icons } from "@/constants";
+import { tr } from "@/lib/i18n";
+import { useTheme } from "@/lib/theme";
 
 import { Map } from "./map";
 
@@ -14,29 +16,32 @@ type RideLayoutProps = {
 };
 
 export const RideLayout = ({
-  title = "Go Back",
+  title,
   snapPoints,
   children,
 }: PropsWithChildren<RideLayoutProps>) => {
   const bottomSheetRef = useRef<BottomSheet>(null);
+  const { isDark } = useTheme();
 
   return (
     <GestureHandlerRootView>
-      <View className="flex-1 bg-white">
-        <View className="flex flex-col h-screen bg-blue-500">
+      <View className="flex-1 bg-white dark:bg-neutral-950">
+        <View className="flex flex-col h-screen bg-blue-500 dark:bg-neutral-900">
           <View className="flex flex-row absolute z-10 top-16 items-center justify-start px-5">
             <TouchableOpacity onPress={() => router.back()}>
-              <View className="w-10 h-10 bg-white rounded-full items-center justify-center">
+              <View className="w-10 h-10 bg-white dark:bg-neutral-900 rounded-full items-center justify-center">
                 <Image
                   source={icons.backArrow}
-                  alt="Back arrow"
+                  alt={tr("components.rideLayout.backArrowAlt")}
                   resizeMode="contain"
                   className="w-6 h-6"
                 />
               </View>
             </TouchableOpacity>
 
-            <Text className="text-xl font-JakartaSemiBold ml-5">{title}</Text>
+            <Text className="text-xl font-JakartaSemiBold ml-5 text-black dark:text-white">
+              {title ?? tr("components.rideLayout.goBack")}
+            </Text>
           </View>
 
           <Map />
@@ -47,6 +52,10 @@ export const RideLayout = ({
           ref={bottomSheetRef}
           snapPoints={snapPoints ?? ["40%", "85%"]}
           index={0}
+          backgroundStyle={{ backgroundColor: isDark ? "#0a0a0a" : "#ffffff" }}
+          handleIndicatorStyle={{
+            backgroundColor: isDark ? "#525252" : "#d4d4d4",
+          }}
         >
           <BottomSheetView
             style={{