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

components/google-text-input.tsx

@@ -9,6 +9,8 @@ import {
 } from "react-native";
 
 import { icons } from "@/constants";
+import { useT } from "@/lib/i18n";
+import { useTheme } from "@/lib/theme";
 import type { GoogleInputProps } from "@/types/type";
 
 const googleApiKey = process.env.EXPO_PUBLIC_GOOGLE_API_KEY!;
@@ -69,10 +71,15 @@ export const GoogleTextInput = ({
   textInputBackgroundColor,
   handlePress,
 }: GoogleInputProps) => {
+  const t = useT();
+  const { isDark } = useTheme();
   const [query, setQuery] = useState("");
   const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const inputBg = textInputBackgroundColor || (isDark ? "#1a1a1a" : "white");
+  const inputShadow = isDark ? "#000000" : "#d4d4d4";
+
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
 
@@ -118,14 +125,14 @@ export const GoogleTextInput = ({
         <View
           className="flex flex-row items-center rounded-full px-4 mt-1"
           style={{
-            backgroundColor: textInputBackgroundColor || "white",
-            shadowColor: "#d4d4d4",
+            backgroundColor: inputBg,
+            shadowColor: inputShadow,
           }}
         >
           <View className="justify-center items-center w-6 h-6">
             <Image
               source={icon ? icon : icons.search}
-              alt="Search"
+              alt={t("components.googleTextInput.searchAlt")}
               className="w-6 h-6"
               resizeMode="contain"
             />
@@ -134,9 +141,9 @@ export const GoogleTextInput = ({
           <TextInput
             value={query}
             onChangeText={setQuery}
-            placeholder={initialLocation ?? "Where do you want to go?"}
-            placeholderTextColor="gray"
-            className="flex-1 p-3 text-base font-JakartaSemiBold"
+            placeholder={initialLocation ?? t("components.googleTextInput.placeholder")}
+            placeholderTextColor="#a3a3a3"
+            className="flex-1 p-3 text-base font-JakartaSemiBold text-black dark:text-white"
           />
         </View>
 
@@ -144,8 +151,8 @@ export const GoogleTextInput = ({
           <View
             className="rounded-xl mt-1"
             style={{
-              backgroundColor: textInputBackgroundColor || "white",
-              shadowColor: "#d4d4d4",
+              backgroundColor: inputBg,
+              shadowColor: inputShadow,
             }}
           >
             <FlatList
@@ -155,9 +162,9 @@ export const GoogleTextInput = ({
               renderItem={({ item }) => (
                 <TouchableOpacity
                   onPress={() => onSelect(item)}
-                  className="p-3 border-b border-general-700"
+                  className="p-3 border-b border-general-700 dark:border-neutral-700"
                 >
-                  <Text className="text-base font-JakartaRegular">
+                  <Text className="text-base font-JakartaRegular text-black dark:text-white">
                     {item.text}
                   </Text>
                 </TouchableOpacity>