fix: text on map in dark mode (#3052)

Co-authored-by: Nicolas Burtey <[email protected]>
GaloyMoney · Feb 8, 2024 · f61a287 · f61a287
1 parent b9383a4
commit f61a287
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 71 deletions.
diff --git a/app/components/map-component/index.tsx b/app/components/map-component/index.tsx
@@ -1,19 +1,18 @@
+import { useApolloClient } from "@apollo/client"
+import { updateMapLastCoords } from "@app/graphql/client-only-query"
+import { BusinessMapMarkersQuery, MapMarker } from "@app/graphql/generated"
+import { LOCATION_PERMISSION, getUserRegion } from "@app/screens/map-screen/map-screen"
+import { isIOS } from "@rneui/base"
 import { makeStyles, useTheme } from "@rneui/themed"
-import MapView, { Region, MapMarker as MapMarkerType } from "react-native-maps"
-import MapStyles from "./map-styles.json"
+import debounce from "lodash.debounce"
 import React, { useRef } from "react"
-import { BusinessMapMarkersQuery, MapMarker } from "@app/graphql/generated"
-import { useI18nContext } from "@app/i18n/i18n-react"
-import MapMarkerComponent from "../map-marker-component"
+import { View } from "react-native"
+import MapView, { MapMarker as MapMarkerType, Region } from "react-native-maps"
 import { PermissionStatus, RESULTS, request } from "react-native-permissions"
-import { LOCATION_PERMISSION, getUserRegion } from "@app/screens/map-screen/map-screen"
+import MapMarkerComponent from "../map-marker-component"
 import LocationButtonCopy from "./location-button-copy"
-import debounce from "lodash.debounce"
-import { updateMapLastCoords } from "@app/graphql/client-only-query"
-import { useApolloClient } from "@apollo/client"
+import MapStyles from "./map-styles.json"
 import { OpenSettingsElement, OpenSettingsModal } from "./open-settings-modal"
-import { Dimensions, View } from "react-native"
-import { isIOS } from "@rneui/base"
 
 type Props = {
   data?: BusinessMapMarkersQuery
@@ -44,9 +43,7 @@ export default function MapComponent({
     theme: { colors, mode: themeMode },
   } = useTheme()
   const styles = useStyles()
-  const { LL } = useI18nContext()
   const client = useApolloClient()
-  const text = LL.MapScreen.payBusiness()
 
   const mapViewRef = useRef<MapView>(null)
   const openSettingsModalRef = React.useRef<OpenSettingsElement>(null)
@@ -145,8 +142,6 @@ export default function MapComponent({
             handleCalloutPress={handleCalloutPress}
             handleMarkerPress={handleMarkerPress}
             isFocused={focusedMarker?.username === item.username}
-            text={text}
-            styles={styles}
           />
         ))}
       </MapView>
@@ -163,45 +158,11 @@ export default function MapComponent({
   )
 }
 
-const { width: screenWidth } = Dimensions.get("window")
-
-const useStyles = makeStyles(({ colors }) => ({
-  viewContainer: { flex: 1 },
-
-  border: {
-    maxWidth: screenWidth,
-    overflow: "hidden",
-    borderRadius: 3,
-    borderWidth: 1,
-    borderColor: colors.grey4,
-    padding: 10,
-    backgroundColor: colors.white,
-  },
-
-  customView: {
-    alignItems: "center",
-    rowGap: 10,
-  },
-
-  pseudoButton: {
-    backgroundColor: colors.primary3,
-    borderRadius: 25,
-    width: 200,
-  },
-
+const useStyles = makeStyles(() => ({
   map: {
     height: "100%",
     width: "100%",
   },
 
-  title: { color: colors._darkGrey, textAlign: "center" },
-
-  text: {
-    fontSize: 20,
-    lineHeight: 24,
-    fontWeight: "600",
-    color: colors.white,
-    margin: 8,
-    textAlign: "center",
-  },
+  viewContainer: { flex: 1 },
 }))
diff --git a/app/components/map-component/location-button-copy.tsx b/app/components/map-component/location-button-copy.tsx
@@ -31,8 +31,8 @@ export default function LocationButtonCopy({
 const useStyles = makeStyles(({ colors }) => ({
   button: {
     position: "absolute",
-    top: 12,
-    right: 12,
+    bottom: 28,
+    left: 8,
     zIndex: 99,
   },
   android: {

diff --git a/app/components/map-marker-component/index.tsx b/app/components/map-marker-component/index.tsx
@@ -1,15 +1,15 @@
+import { MapMarker } from "@app/graphql/generated"
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { isIos } from "@app/utils/helper"
+import { Text, makeStyles } from "@rneui/themed"
+import { useEffect, useRef } from "react"
+import { Dimensions, View } from "react-native"
 import {
   Callout,
   CalloutSubview,
   MapMarker as MapMarkerType,
   Marker,
 } from "react-native-maps"
-import { Text } from "@rneui/themed"
-import { useEffect, useRef } from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
-import { isIos } from "@app/utils/helper"
-import { LocalizedString } from "typesafe-i18n"
-import { MapMarker } from "@app/graphql/generated"
 
 /*
   In order to increase performance, markers are initially rendered without content in the callout.
@@ -23,14 +23,6 @@ type Props = {
   handleMarkerPress: (_item: MapMarker, _ref?: MapMarkerType) => void
   handleCalloutPress: (item: MapMarker) => void
   isFocused: boolean
-  styles: {
-    customView: StyleProp<ViewStyle>
-    title: StyleProp<TextStyle>
-    text: StyleProp<TextStyle>
-    pseudoButton: StyleProp<ViewStyle>
-    border: StyleProp<ViewStyle>
-  }
-  text: LocalizedString
 }
 
 export default function MapMarkerComponent({
@@ -39,10 +31,10 @@ export default function MapMarkerComponent({
   handleMarkerPress,
   handleCalloutPress,
   isFocused,
-  styles,
-  text,
 }: Props) {
   const ref = useRef<MapMarkerType>(null)
+  const { LL } = useI18nContext()
+  const styles = useStyles()
 
   useEffect(() => {
     if (isFocused && ref.current) {
@@ -71,12 +63,12 @@ export default function MapMarkerComponent({
               {isIos ? (
                 <CalloutSubview onPress={() => handleCalloutPress(item)}>
                   <View style={styles.pseudoButton}>
-                    <Text style={styles.text}>{text}</Text>
+                    <Text style={styles.text}>{LL.MapScreen.payBusiness()}</Text>
                   </View>
                 </CalloutSubview>
               ) : (
                 <View style={styles.pseudoButton}>
-                  <Text style={styles.text}>{text}</Text>
+                  <Text style={styles.text}>{LL.MapScreen.payBusiness()}</Text>
                 </View>
               )}
             </View>
@@ -86,3 +78,44 @@ export default function MapMarkerComponent({
     </Marker>
   )
 }
+
+const { width: screenWidth } = Dimensions.get("window")
+
+const useStyles = makeStyles(({ colors }) => ({
+  border: {
+    maxWidth: screenWidth,
+    overflow: "hidden",
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: colors.grey4,
+    padding: 10,
+    backgroundColor: colors.white,
+  },
+
+  customView: {
+    alignItems: "center",
+    rowGap: 10,
+  },
+
+  pseudoButton: {
+    backgroundColor: colors.primary3,
+    borderRadius: 25,
+    width: 200,
+  },
+
+  map: {
+    height: "100%",
+    width: "100%",
+  },
+
+  title: { color: colors.black, textAlign: "center" },
+
+  text: {
+    fontSize: 20,
+    lineHeight: 24,
+    fontWeight: "600",
+    color: colors.white,
+    margin: 8,
+    textAlign: "center",
+  },
+}))