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

components/service-selector.tsx

@@ -2,6 +2,7 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Text, TouchableOpacity, View } from "react-native";
 
 import { SERVICES } from "@/constants/services";
+import { useT } from "@/lib/i18n";
 import { useServiceStore } from "@/store";
 
 /**
@@ -14,6 +15,7 @@ import { useServiceStore } from "@/store";
  */
 export const ServiceSelector = () => {
   const { service, setService } = useServiceStore();
+  const t = useT();
 
   const selected = SERVICES.find((item) => item.id === service);
 
@@ -33,7 +35,7 @@ export const ServiceSelector = () => {
               className={`flex-1 items-center rounded-2xl border py-3 ${
                 active
                   ? "border-primary-500 bg-primary-500/10"
-                  : "border-neutral-100 bg-neutral-100"
+                  : "border-neutral-100 bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800"
               }`}
             >
               <MaterialCommunityIcons
@@ -45,10 +47,10 @@ export const ServiceSelector = () => {
               <Text
                 numberOfLines={1}
                 className={`mt-1.5 text-xs font-JakartaBold ${
-                  active ? "text-primary-500" : "text-black"
+                  active ? "text-primary-500" : "text-black dark:text-white"
                 }`}
               >
-                {item.label}
+                {t(item.labelKey)}
               </Text>
             </TouchableOpacity>
           );
@@ -56,8 +58,8 @@ export const ServiceSelector = () => {
       </View>
 
       {selected ? (
-        <Text className="mt-3 text-sm font-Jakarta text-general-200">
-          {selected.tagline}
+        <Text className="mt-3 text-sm font-Jakarta text-general-200 dark:text-neutral-400">
+          {t(selected.taglineKey)}
         </Text>
       ) : null}
     </View>