From a18674c1ce43a1e885ce98037d485d547fe567c7 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Tue, 11 Jun 2024 10:03:56 +0700
Subject: [PATCH 1/6] Fix: Center button has no hover and press effect

---
 src/components/MapView/MapView.tsx         | 6 +++---
 src/components/MapView/MapView.website.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 8168cef99cd3..19e75a6a4423 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PressableWithoutFeedback} from '@components/Pressable';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserLocation from '@libs/actions/UserLocation';
@@ -239,7 +239,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Mapbox.MapView>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithoutFeedback
+                    <PressableWithFeedback
                         accessibilityRole={CONST.ROLE.BUTTON}
                         onPress={centerMap}
                         accessibilityLabel={translate('common.center')}
@@ -252,7 +252,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 fill={theme.icon}
                             />
                         </View>
-                    </PressableWithoutFeedback>
+                    </PressableWithFeedback>
                 </View>
             </View>
         ) : (
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index bf951dcb28fd..a0462c45025e 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -12,7 +12,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PressableWithoutFeedback} from '@components/Pressable';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -253,7 +253,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Map>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithoutFeedback
+                    <PressableWithFeedback
                         accessibilityRole={CONST.ROLE.BUTTON}
                         onPress={centerMap}
                         accessibilityLabel={translate('common.center')}
@@ -266,7 +266,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 fill={theme.icon}
                             />
                         </View>
-                    </PressableWithoutFeedback>
+                    </PressableWithFeedback>
                 </View>
             </View>
         ) : (

From 7ec31fbee702abf8def6daa06bb53f2317bb2795 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 13 Jun 2024 10:23:20 +0700
Subject: [PATCH 2/6] Fix: Update button

---
 src/components/MapView/MapView.tsx         | 18 ++++++++++--------
 src/components/MapView/MapView.website.tsx | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 19e75a6a4423..c756bf9cb396 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -244,14 +244,16 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         onPress={centerMap}
                         accessibilityLabel={translate('common.center')}
                     >
-                        <View style={styles.primaryMediumIcon}>
-                            <Icon
-                                width={variables.iconSizeNormal}
-                                height={variables.iconSizeNormal}
-                                src={Expensicons.Crosshair}
-                                fill={theme.icon}
-                            />
-                        </View>
+                        {({hovered}) => (
+                            <View style={[styles.primaryMediumIcon, hovered && {backgroundColor: theme.buttonHoveredBG}]}>
+                                <Icon
+                                    width={variables.iconSizeNormal}
+                                    height={variables.iconSizeNormal}
+                                    src={Expensicons.Crosshair}
+                                    fill={hovered ? theme.textSupporting : theme.icon}
+                                />
+                            </View>
+                        )}
                     </PressableWithFeedback>
                 </View>
             </View>
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index a0462c45025e..981c361fa6a0 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -258,14 +258,16 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         onPress={centerMap}
                         accessibilityLabel={translate('common.center')}
                     >
-                        <View style={styles.primaryMediumIcon}>
-                            <Icon
-                                width={variables.iconSizeNormal}
-                                height={variables.iconSizeNormal}
-                                src={Expensicons.Crosshair}
-                                fill={theme.icon}
-                            />
-                        </View>
+                        {({hovered}) => (
+                            <View style={[styles.primaryMediumIcon, hovered && {backgroundColor: theme.buttonHoveredBG}]}>
+                                <Icon
+                                    width={variables.iconSizeNormal}
+                                    height={variables.iconSizeNormal}
+                                    src={Expensicons.Crosshair}
+                                    fill={hovered ? theme.textSupporting : theme.icon}
+                                />
+                            </View>
+                        )}
                     </PressableWithFeedback>
                 </View>
             </View>

From c40d812883d8d2cea5f64ef5f9b4632907742eef Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 16:00:51 +0700
Subject: [PATCH 3/6] Fix: Use button component

---
 src/components/MapView/MapView.tsx         | 22 ++++++----------------
 src/components/MapView/MapView.website.tsx | 22 ++++++----------------
 2 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index c756bf9cb396..08d131d7037b 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -4,9 +4,9 @@ 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 Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserLocation from '@libs/actions/UserLocation';
@@ -239,22 +239,12 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Mapbox.MapView>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithFeedback
-                        accessibilityRole={CONST.ROLE.BUTTON}
+                    <Button
                         onPress={centerMap}
-                        accessibilityLabel={translate('common.center')}
-                    >
-                        {({hovered}) => (
-                            <View style={[styles.primaryMediumIcon, hovered && {backgroundColor: theme.buttonHoveredBG}]}>
-                                <Icon
-                                    width={variables.iconSizeNormal}
-                                    height={variables.iconSizeNormal}
-                                    src={Expensicons.Crosshair}
-                                    fill={hovered ? theme.textSupporting : theme.icon}
-                                />
-                            </View>
-                        )}
-                    </PressableWithFeedback>
+                        iconFill={theme.icon}
+                        medium
+                        icon={Expensicons.Crosshair}
+                    />
                 </View>
             </View>
         ) : (
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 981c361fa6a0..ecbf28ccd748 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -10,9 +10,9 @@ 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 Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -253,22 +253,12 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                     {directionCoordinates && <Direction coordinates={directionCoordinates} />}
                 </Map>
                 <View style={[styles.pAbsolute, styles.p5, styles.t0, styles.r0, {zIndex: 1}]}>
-                    <PressableWithFeedback
-                        accessibilityRole={CONST.ROLE.BUTTON}
+                    <Button
                         onPress={centerMap}
-                        accessibilityLabel={translate('common.center')}
-                    >
-                        {({hovered}) => (
-                            <View style={[styles.primaryMediumIcon, hovered && {backgroundColor: theme.buttonHoveredBG}]}>
-                                <Icon
-                                    width={variables.iconSizeNormal}
-                                    height={variables.iconSizeNormal}
-                                    src={Expensicons.Crosshair}
-                                    fill={hovered ? theme.textSupporting : theme.icon}
-                                />
-                            </View>
-                        )}
-                    </PressableWithFeedback>
+                        iconFill={theme.icon}
+                        medium
+                        icon={Expensicons.Crosshair}
+                    />
                 </View>
             </View>
         ) : (

From 356888e56dd42c1ec04988bf3cbf0b732c6a69da Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 16:02:46 +0700
Subject: [PATCH 4/6] Fix: Remove used component

---
 src/components/MapView/MapView.tsx         | 1 -
 src/components/MapView/MapView.website.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 08d131d7037b..323a6b479f5a 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -5,7 +5,6 @@ import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo,
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
-import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index ecbf28ccd748..1bd402a5a0a3 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -11,7 +11,6 @@ import Map, {Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
-import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';

From 9db945dc4b7f98b625d7dd9acd743ed415814286 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 16:03:38 +0700
Subject: [PATCH 5/6] Fix: Remove used lib

---
 src/components/MapView/MapView.tsx         | 1 -
 src/components/MapView/MapView.website.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index 323a6b479f5a..ddf6c2b1b831 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -14,7 +14,6 @@ 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';
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 1bd402a5a0a3..05f96401eddd 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -17,7 +17,6 @@ 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';

From 8fd26636f50be5fbdfefaecf826cacd35feaa072 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Mon, 17 Jun 2024 23:05:24 +0700
Subject: [PATCH 6/6] Fix: Keep accessibilityLabel

---
 src/components/MapView/MapView.tsx         | 1 +
 src/components/MapView/MapView.website.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index f2a49abf400a..48d820ae5103 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -241,6 +241,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         iconFill={theme.icon}
                         medium
                         icon={Expensicons.Crosshair}
+                        accessibilityLabel={translate('common.center')}
                     />
                 </View>
             </View>
diff --git a/src/components/MapView/MapView.website.tsx b/src/components/MapView/MapView.website.tsx
index 05f96401eddd..640469126874 100644
--- a/src/components/MapView/MapView.website.tsx
+++ b/src/components/MapView/MapView.website.tsx
@@ -256,6 +256,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                         iconFill={theme.icon}
                         medium
                         icon={Expensicons.Crosshair}
+                        accessibilityLabel={translate('common.center')}
                     />
                 </View>
             </View>