From 0d701e648d0f1c08cb3e1bd81e04f3df7a8c0030 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 5 Jul 2024 13:53:08 +0300
Subject: [PATCH 1/3] Fix tab highlight for Expensify card list

---
 .../expensifyCard/WorkspaceCardListRow.tsx    |  7 ++---
 .../WorkspaceExpensifyCardListPage.tsx        | 29 +++++++++----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
index 92d814604e57..77ae060ccc46 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
@@ -13,9 +13,6 @@ import CONST from '@src/CONST';
 import type {PersonalDetails} from '@src/types/onyx';
 
 type WorkspacesListRowProps = {
-    /** Additional styles applied to the row */
-    style: StyleProp<ViewStyle>;
-
     /** The last four digits of the card */
     lastFourPAN: string;
 
@@ -32,14 +29,14 @@ type WorkspacesListRowProps = {
     currency: string;
 };
 
-function WorkspaceCardListRow({style, limit, cardholder, lastFourPAN, name, currency}: WorkspacesListRowProps) {
+function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency}: WorkspacesListRowProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
 
     const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]);
 
     return (
-        <View style={[styles.flexRow, styles.highlightBG, styles.mh5, styles.mb3, styles.gap5, styles.br3, styles.p4, style]}>
+        <View style={[styles.flexRow, styles.gap5, styles.br3, styles.p4]}>
             <View style={[styles.flexRow, styles.flex5, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
                     source={getDefaultAvatarURL(cardholder.accountID)}
diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index 66b64b271792..b3412a095247 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -10,7 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {PressableWithoutFeedback} from '@components/Pressable';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -121,24 +121,23 @@ function WorkspaceExpensifyCardListPage({route}: WorkspaceExpensifyCardListPageP
             errorRowStyles={styles.ph5}
             errors={item.errors}
         >
-            <PressableWithoutFeedback
+            <PressableWithFeedback
                 role={CONST.ROLE.BUTTON}
+                style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
                 accessibilityLabel="row"
+                hoverStyle={[styles.hoveredComponentBG]}
                 onPress={() => {}} // TODO: add navigation action when card details screen is implemented (https://github.com/Expensify/App/issues/44325)
             >
-                {({hovered}) => (
-                    <WorkspaceCardListRow
-                        style={hovered && styles.hoveredComponentBG}
-                        lastFourPAN={item.lastFourPAN ?? ''}
-                        // @ts-expect-error TODO: change cardholder to accountID and get personal details with it
-                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                        cardholder={item.cardholder}
-                        limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
-                        name={item.nameValuePairs?.cardTitle ?? ''}
-                        currency={policyCurrency}
-                    />
-                )}
-            </PressableWithoutFeedback>
+                <WorkspaceCardListRow
+                    lastFourPAN={item.lastFourPAN ?? ''}
+                    // @ts-expect-error TODO: change cardholder to accountID and get personal details with it
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    cardholder={item.cardholder}
+                    limit={item.nameValuePairs?.unapprovedExpenseLimit ?? 0}
+                    name={item.nameValuePairs?.cardTitle ?? ''}
+                    currency={policyCurrency}
+                />
+            </PressableWithFeedback>
         </OfflineWithFeedback>
     );
 

From b32c5ce2178eabfffc35f82bdb1d544b48d72447 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 5 Jul 2024 13:53:47 +0300
Subject: [PATCH 2/3] clean up

---
 src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
index 77ae060ccc46..009b289c9bb4 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
 import Avatar from '@components/Avatar';
 import Badge from '@components/Badge';
 import Text from '@components/Text';

From 3b67c6483718ea37ef9eb33b441446c951190497 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 5 Jul 2024 13:58:46 +0300
Subject: [PATCH 3/3] update import

---
 .../workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
index b3412a095247..5c6a5117c85d 100644
--- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
+++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -10,7 +10,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import {PressableWithFeedback} from '@components/Pressable';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';