Merge pull request #43452 from truph01/fix/43058-distance-center-butt…

…on-has-no-hover-effect Fix: Center button has no hover and press effect
Expensify · Jun 18, 2024 · ee436ca · ee436ca
2 parents a474d6c + 8fd2663
commit ee436ca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 30 deletions.
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
@@ -4,17 +4,15 @@ import Mapbox, {MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Icon from '@components/Icon';
+import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PressableWithoutFeedback} from '@components/Pressable';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserLocation from '@libs/actions/UserLocation';
 import getCurrentPosition from '@libs/getCurrentPosition';
 import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types';
 import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types';
 import colors from '@styles/theme/colors';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
@@ -238,20 +236,13 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Mapbox.MapView>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithoutFeedback
-                        accessibilityRole={CONST.ROLE.BUTTON}
+                    <Button
                         onPress={centerMap}
+                        iconFill={theme.icon}
+                        medium
+                        icon={Expensicons.Crosshair}
                         accessibilityLabel={translate('common.center')}
-                    >
-                        <View style={styles.primaryMediumIcon}>
-                            <Icon
-                                width={variables.iconSizeNormal}
-                                height={variables.iconSizeNormal}
-                                src={Expensicons.Crosshair}
-                                fill={theme.icon}
-                            />
-                        </View>
-                    </PressableWithoutFeedback>
+                    />
                 </View>
             </View>
         ) : (

diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
@@ -10,15 +10,13 @@ import type {MapRef} from 'react-map-gl';
 import Map, {Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Icon from '@components/Icon';
+import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PressableWithoutFeedback} from '@components/Pressable';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {GeolocationErrorCallback} from '@libs/getCurrentPosition/getCurrentPosition.types';
 import {GeolocationErrorCode} from '@libs/getCurrentPosition/getCurrentPosition.types';
-import variables from '@styles/variables';
 import * as UserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
@@ -253,20 +251,13 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Map>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithoutFeedback
-                        accessibilityRole={CONST.ROLE.BUTTON}
+                    <Button
                         onPress={centerMap}
+                        iconFill={theme.icon}
+                        medium
+                        icon={Expensicons.Crosshair}
                         accessibilityLabel={translate('common.center')}
-                    >
-                        <View style={styles.primaryMediumIcon}>
-                            <Icon
-                                width={variables.iconSizeNormal}
-                                height={variables.iconSizeNormal}
-                                src={Expensicons.Crosshair}
-                                fill={theme.icon}
-                            />
-                        </View>
-                    </PressableWithoutFeedback>
+                    />
                 </View>
             </View>
         ) : (