[GPS] Change GPS in progress FAB to floating pill

src/components/FloatingGPSButton/index.native.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
-import {View} from 'react-native';
-import Icon from '@components/Icon';
-import {PressableWithoutFeedback} from '@components/Pressable';
+import Button from '@components/Button';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import {generateReportID} from '@libs/ReportUtils';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -18,8 +14,7 @@ function FloatingGpsButton() {
     const [gpsDraftDetails] = useOnyx(ONYXKEYS.GPS_DRAFT_DETAILS);
     const {translate} = useLocalize();
 
-    const icons = useMemoizedLazyExpensifyIcons(['Location'] as const);
-    const {textMutedReversed} = useTheme();
+    const icons = useMemoizedLazyExpensifyIcons(['Crosshair'] as const);
     const styles = useThemeStyles();
 
     if (!gpsDraftDetails?.isTracking) {
@@ -32,26 +27,17 @@ function FloatingGpsButton() {
     };
 
     return (
-        <PressableWithoutFeedback
-            style={[styles.navigationTabBarFABItem, styles.ph0, styles.userSelectNone, styles.floatingGpsButton]}
-            accessibilityLabel={translate('gps.fabGpsTripExplained')}
+        <Button
+            text={translate('gps.gpsFloatingPillText')}
+            icon={icons.Crosshair}
             onPress={navigateToGpsScreen}
-            role={CONST.ROLE.BUTTON}
+            success
+            small
+            style={[styles.floatingGpsButton]}
             testID="floating-gps-button"
+            accessibilityLabel={translate('gps.gpsFloatingPillText')}
             sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.FLOATING_GPS_BUTTON}
-        >
-            <View
-                style={styles.floatingSecondaryActionButton}
-                testID="floating-gps-button-container"
-            >
-                <Icon
-                    fill={textMutedReversed}
-                    src={icons.Location}
-                    width={variables.iconSizeNormal}
-                    height={variables.iconSizeNormal}
-                />
-            </View>
-        </PressableWithoutFeedback>
+        />
     );
 }
 

src/languages/de.ts

@@ -7826,7 +7826,7 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             confirm: 'Einstellungen öffnen',
             prompt: 'Bitte erlaube den Standortzugriff in den Einstellungen deines Geräts, um die GPS‑Streckenverfolgung zu starten.',
         },
-        fabGpsTripExplained: 'Zum GPS-Bildschirm wechseln (Schnellaktion)',
+        gpsFloatingPillText: 'GPS-Verfolgung läuft...',
         liveActivity: {subtitle: 'Entfernungserfassung', button: 'Fortschritt anzeigen'},
     },
     reportCardLostOrDamaged: {

src/languages/en.ts

@@ -7791,7 +7791,7 @@ const translations = {
             confirm: 'Open settings',
             prompt: 'Please allow location access in your device settings to start GPS distance tracking.',
         },
-        fabGpsTripExplained: 'Go to GPS screen (Floating action)',
+        gpsFloatingPillText: 'GPS tracking in progress...',
         liveActivity: {
             subtitle: 'Tracking distance',
             button: 'View progress',

src/languages/es.ts

@@ -8997,7 +8997,7 @@ ${amount} para ${merchant} - ${date}`,
             confirm: 'Abrir ajustes',
             prompt: 'Por favor, permite el acceso a la ubicación en los ajustes de tu dispositivo para iniciar el seguimiento de distancia por GPS.',
         },
-        fabGpsTripExplained: 'Ir a la pantalla de GPS (Acción flotante)',
+        gpsFloatingPillText: 'Seguimiento GPS en curso...',
         liveActivity: {
             subtitle: 'Seguimiento de distancia',
             button: 'Ver progreso',

src/languages/fr.ts

@@ -7849,7 +7849,7 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             confirm: 'Ouvrir les paramètres',
             prompt: 'Veuillez autoriser l’accès à la localisation dans les réglages de votre appareil pour commencer le suivi de distance GPS.',
         },
-        fabGpsTripExplained: 'Aller à l’écran GPS (action flottante)',
+        gpsFloatingPillText: 'Suivi GPS en cours...',
         liveActivity: {subtitle: 'Suivi de la distance', button: 'Voir la progression'},
     },
     reportCardLostOrDamaged: {

src/languages/it.ts

@@ -7812,7 +7812,7 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             confirm: 'Apri impostazioni',
             prompt: 'Consenti l’accesso alla posizione nelle impostazioni del dispositivo per iniziare il tracciamento della distanza GPS.',
         },
-        fabGpsTripExplained: 'Vai alla schermata GPS (azione flottante)',
+        gpsFloatingPillText: 'Tracciamento GPS in corso...',
         liveActivity: {subtitle: 'Rilevamento distanza', button: 'Visualizza avanzamento'},
     },
     reportCardLostOrDamaged: {

src/languages/ja.ts

@@ -7725,7 +7725,7 @@ ${reportName}
             confirm: '設定を開く',
             prompt: 'GPSで距離の追跡を開始するには、端末の設定で位置情報へのアクセスを許可してください。',
         },
-        fabGpsTripExplained: 'GPS画面へ移動（フローティングアクション）',
+        gpsFloatingPillText: 'GPS 追跡を実行中です…',
         liveActivity: {subtitle: '距離の記録', button: '進捗を表示'},
     },
     reportCardLostOrDamaged: {

src/languages/nl.ts

@@ -7791,7 +7791,7 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
             confirm: 'Instellingen openen',
             prompt: 'Sta locatiestoegang toe in de instellingen van je apparaat om GPS-afstandsregistratie te starten.',
         },
-        fabGpsTripExplained: 'Ga naar GPS-scherm (zwevende actie)',
+        gpsFloatingPillText: 'GPS-tracking bezig...',
         liveActivity: {subtitle: 'Afstand bijhouden', button: 'Voortgang bekijken'},
     },
     reportCardLostOrDamaged: {

src/languages/pl.ts

@@ -7779,7 +7779,7 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             confirm: 'Otwórz ustawienia',
             prompt: 'Zezwól na dostęp do lokalizacji w ustawieniach urządzenia, aby rozpocząć śledzenie dystansu GPS.',
         },
-        fabGpsTripExplained: 'Przejdź do ekranu GPS (działanie pływające)',
+        gpsFloatingPillText: 'Trwa śledzenie GPS...',
         liveActivity: {subtitle: 'Śledzenie dystansu', button: 'Zobacz postęp'},
     },
     reportCardLostOrDamaged: {

src/languages/pt-BR.ts

@@ -7783,7 +7783,7 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
             confirm: 'Abrir configurações',
             prompt: 'Permita o acesso à localização nas configurações do seu dispositivo para iniciar o rastreamento de distância por GPS.',
         },
-        fabGpsTripExplained: 'Ir para a tela de GPS (Ação flutuante)',
+        gpsFloatingPillText: 'Rastreamento por GPS em andamento...',
         liveActivity: {subtitle: 'Rastreamento de distância', button: 'Ver progresso'},
     },
     reportCardLostOrDamaged: {

src/languages/zh-hans.ts

@@ -7591,7 +7591,7 @@ ${reportName}
             confirm: '打开设置',
             prompt: '请在设备设置中允许访问位置信息，以开始使用 GPS 距离跟踪。',
         },
-        fabGpsTripExplained: '前往 GPS 页面（浮动操作）',
+        gpsFloatingPillText: '正在进行 GPS 跟踪…',
         liveActivity: {subtitle: '跟踪距离', button: '查看进度'},
     },
     reportCardLostOrDamaged: {

src/styles/index.ts

@@ -1703,10 +1703,8 @@ const staticStyles = (theme: ThemeColors) =>
 
         floatingGpsButton: {
             position: 'absolute',
-            // floatingActionButton top property value (componentSizeLarge + 16) +
-            // + floatingCameraButton height (componentSizeLarge) + gap (12) + floatingGpsButton height (componentSizeLarge) + gap (12) = 3 * variables.componentSizeLarge + 40
-            top: 3 * -variables.componentSizeLarge - 40,
-            right: 16,
+            top: -variables.componentSizeSmall - 16,
+            alignSelf: 'center',
             zIndex: 10,
         },