feat: maps android darkmode, fix the cta pay to business button

app/i18n/en/index.ts

@@ -2061,7 +2061,7 @@ const en: BaseTranslation = {
     locationPermissionNeutral: "Ask Me Later",
     locationPermissionPositive: "OK",
     locationPermissionTitle: "Locate yourself on the map",
-    payBusiness: "pay this business",
+    payBusiness: "Pay this business",
     title: "Map",
   },
   HomeScreen: {

app/i18n/i18n-types.ts

@@ -6342,7 +6342,7 @@ type RootTranslation = {
 		 */
 		locationPermissionTitle: string
 		/**
-		 * p​a​y​ ​t​h​i​s​ ​b​u​s​i​n​e​s​s
+		 * P​a​y​ ​t​h​i​s​ ​b​u​s​i​n​e​s​s
 		 */
 		payBusiness: string
 		/**
@@ -15097,7 +15097,7 @@ export type TranslationFunctions = {
 		 */
 		locationPermissionTitle: () => LocalizedString
 		/**
-		 * pay this business
+		 * Pay this business
 		 */
 		payBusiness: () => LocalizedString
 		/**

app/i18n/raw-i18n/source/en.json

@@ -2016,7 +2016,7 @@
         "locationPermissionNeutral": "Ask Me Later",
         "locationPermissionPositive": "OK",
         "locationPermissionTitle": "Locate yourself on the map",
-        "payBusiness": "pay this business",
+        "payBusiness": "Pay this business",
         "title": "Map"
     },
     "HomeScreen": {

app/screens/map-screen/map-screen.tsx

@@ -3,8 +3,7 @@ import { StackNavigationProp } from "@react-navigation/stack"
 import * as React from "react"
 import { useCallback } from "react"
 // eslint-disable-next-line react-native/split-platform-components
-import { PermissionsAndroid, Text, View } from "react-native"
-import { Button } from "@rneui/base"
+import { PermissionsAndroid, View } from "react-native"
 import MapView, {
   Callout,
   CalloutSubview,
@@ -20,8 +19,10 @@ import crashlytics from "@react-native-firebase/crashlytics"
 import { useBusinessMapMarkersQuery } from "@app/graphql/generated"
 import { gql } from "@apollo/client"
 import { useIsAuthed } from "@app/graphql/is-authed-context"
-import { makeStyles, useTheme } from "@rneui/themed"
+import { Text, makeStyles, useTheme } from "@rneui/themed"
 import { PhoneLoginInitiateType } from "../phone-auth-screen"
+import { GaloyPrimaryButton } from "@app/components/atomic/galoy-primary-button"
+import MapStyles from "./map-styles.json"
 
 const useStyles = makeStyles(({ colors }) => ({
   android: { marginTop: 18 },
@@ -38,7 +39,7 @@ const useStyles = makeStyles(({ colors }) => ({
     width: "100%",
   },
 
-  title: { color: colors._darkGrey, fontSize: 18 },
+  title: { color: colors._darkGrey },
 }))
 
 type Props = {
@@ -62,7 +63,7 @@ gql`
 
 export const MapScreen: React.FC<Props> = ({ navigation }) => {
   const {
-    theme: { colors },
+    theme: { colors, mode: themeMode },
   } = useTheme()
   const styles = useStyles()
   const isAuthed = useIsAuthed()
@@ -141,26 +142,25 @@ export const MapScreen: React.FC<Props> = ({ navigation }) => {
           key={item.username}
           pinColor={colors._orange}
         >
-          <Callout
-            // alphaHitTest
-            // tooltip
-            onPress={() => (Boolean(item.username) && !isIos ? onPress() : null)}
-          >
+          <Callout onPress={() => (Boolean(item.username) && !isIos ? onPress() : null)}>
             <View style={styles.customView}>
-              <Text style={styles.title}>{item.mapInfo.title}</Text>
-              {Boolean(item.username) && !isIos && (
-                <Button
-                  containerStyle={styles.android}
-                  title={LL.MapScreen.payBusiness()}
-                />
-              )}
-              {isIos && (
-                <CalloutSubview onPress={() => (item.username ? onPress() : null)}>
-                  {Boolean(item.username) && (
-                    <Button style={styles.ios} title={LL.MapScreen.payBusiness()} />
-                  )}
-                </CalloutSubview>
-              )}
+              <Text type="h1" style={styles.title}>
+                {item.mapInfo.title}
+              </Text>
+              {Boolean(item.username) &&
+                (isIos ? (
+                  <CalloutSubview onPress={() => onPress()}>
+                    <GaloyPrimaryButton
+                      style={styles.ios}
+                      title={LL.MapScreen.payBusiness()}
+                    />
+                  </CalloutSubview>
+                ) : (
+                  <GaloyPrimaryButton
+                    containerStyle={styles.android}
+                    title={LL.MapScreen.payBusiness()}
+                  />
+                ))}
             </View>
           </Callout>
         </Marker>,
@@ -179,6 +179,7 @@ export const MapScreen: React.FC<Props> = ({ navigation }) => {
           latitudeDelta: 0.02,
           longitudeDelta: 0.02,
         }}
+        customMapStyle={themeMode === "dark" ? MapStyles.dark : MapStyles.light}
       >
         {markers}
       </MapView>

app/screens/map-screen/map-styles.json

@@ -0,0 +1,164 @@
+{
+  "dark": [
+    {
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#242f3e"
+        }
+      ]
+    },
+    {
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#746855"
+        }
+      ]
+    },
+    {
+      "elementType": "labels.text.stroke",
+      "stylers": [
+        {
+          "color": "#242f3e"
+        }
+      ]
+    },
+    {
+      "featureType": "administrative.locality",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#d59563"
+        }
+      ]
+    },
+    {
+      "featureType": "poi",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#d59563"
+        }
+      ]
+    },
+    {
+      "featureType": "poi.park",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#263c3f"
+        }
+      ]
+    },
+    {
+      "featureType": "poi.park",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#6b9a76"
+        }
+      ]
+    },
+    {
+      "featureType": "road",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#38414e"
+        }
+      ]
+    },
+    {
+      "featureType": "road",
+      "elementType": "geometry.stroke",
+      "stylers": [
+        {
+          "color": "#212a37"
+        }
+      ]
+    },
+    {
+      "featureType": "road",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#9ca5b3"
+        }
+      ]
+    },
+    {
+      "featureType": "road.highway",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#746855"
+        }
+      ]
+    },
+    {
+      "featureType": "road.highway",
+      "elementType": "geometry.stroke",
+      "stylers": [
+        {
+          "color": "#1f2835"
+        }
+      ]
+    },
+    {
+      "featureType": "road.highway",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#f3d19c"
+        }
+      ]
+    },
+    {
+      "featureType": "transit",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#2f3948"
+        }
+      ]
+    },
+    {
+      "featureType": "transit.station",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#d59563"
+        }
+      ]
+    },
+    {
+      "featureType": "water",
+      "elementType": "geometry",
+      "stylers": [
+        {
+          "color": "#17263c"
+        }
+      ]
+    },
+    {
+      "featureType": "water",
+      "elementType": "labels.text.fill",
+      "stylers": [
+        {
+          "color": "#515c6d"
+        }
+      ]
+    },
+    {
+      "featureType": "water",
+      "elementType": "labels.text.stroke",
+      "stylers": [
+        {
+          "color": "#17263c"
+        }
+      ]
+    }
+  ],
+  "light": []
+}