From e12e507f0f967151874e053a3bf3a4e4f6f9b74c Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Mon, 1 Jul 2024 17:49:24 +0700
Subject: [PATCH 01/12] fix: update grouped expense on search page

---
 src/components/SelectionList/Search/ActionCell.tsx |  2 ++
 .../SelectionList/Search/ReportListItem.tsx        |  2 --
 .../Search/TransactionListItemRow.tsx              | 14 +++++++-------
 src/styles/index.ts                                |  1 -
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 6aabfebf0da9..e4730753e61d 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -53,6 +53,8 @@ function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isL
             small
             pressOnEnter
             style={[styles.w100]}
+            innerStyles={[styles.bgTransparent]}
+            textStyles={[styles.link]}
         />
     );
 }
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index f9e8e1951d9a..ed7c6e3a1180 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -147,7 +147,6 @@ function ReportListItem<TItem extends ListItem>({
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
                             <View style={[styles.flexShrink1]}>
                                 <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
-                                <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
                             </View>
                         </View>
                         <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
@@ -172,7 +171,6 @@ function ReportListItem<TItem extends ListItem>({
                         </>
                     )}
                 </View>
-                <View style={[styles.mt3, styles.reportListItemSeparator]} />
                 {reportItem.transactions.map((transaction) => (
                     <TransactionListItemRow
                         item={transaction}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 0adc7ee21fd1..6afd42d86124 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -288,6 +288,13 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                         showTooltip={false}
                     />
                 </View>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
+                    <TypeCell
+                        transactionItem={item}
+                        isLargeScreenWidth={isLargeScreenWidth}
+                        showTooltip={false}
+                    />
+                </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
                     <DateCell
                         transactionItem={item}
@@ -350,13 +357,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                         isChildListItem={isChildListItem}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
-                    <TypeCell
-                        transactionItem={item}
-                        isLargeScreenWidth={isLargeScreenWidth}
-                        showTooltip={false}
-                    />
-                </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         onButtonPress={onButtonPress}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ebc30b5d2f0b..5785a5e9b74b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5044,7 +5044,6 @@ const styles = (theme: ThemeColors) =>
         reportListItemTitle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,
-            fontWeight: FontUtils.fontWeight.bold,
         },
     } satisfies Styles);
 

From 36218136814a2071f56ecdebabfc2cb4b14aa743 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Tue, 2 Jul 2024 14:18:55 +0700
Subject: [PATCH 02/12] Fix: Remove unsed lib

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index ed7c6e3a1180..d4fb4a2377b8 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -4,7 +4,6 @@ import BaseListItem from '@components/SelectionList/BaseListItem';
 import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
-import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -62,7 +61,6 @@ function ReportListItem<TItem extends ListItem>({
     const reportItem = item as unknown as ReportListItemType;
 
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
     const {isLargeScreenWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
 

From 4b73b4abaf616ee19c4a0008a2e03baffea14cbf Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Tue, 2 Jul 2024 14:53:01 +0700
Subject: [PATCH 03/12] fix: change order type

---
 src/components/SelectionList/SearchTableHeader.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index 6ba753273e8c..ae7422af816d 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -25,6 +25,12 @@ const SearchColumns: SearchColumnConfig[] = [
         shouldShow: () => true,
         isColumnSortable: false,
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
+        translationKey: 'common.type',
+        shouldShow: () => true,
+        isColumnSortable: false,
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
         translationKey: 'common.date',
@@ -71,12 +77,6 @@ const SearchColumns: SearchColumnConfig[] = [
         translationKey: 'common.total',
         shouldShow: () => true,
     },
-    {
-        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
-        translationKey: 'common.type',
-        shouldShow: () => true,
-        isColumnSortable: false,
-    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',

From 3bf9ce93f106b6f2995318dfc295e32efb3d39b4 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 4 Jul 2024 10:27:39 +0700
Subject: [PATCH 04/12] Feat: Update styles

---
 src/components/Button/index.tsx                     | 13 ++++++++++++-
 src/components/SelectionList/Search/ActionCell.tsx  |  8 +++++---
 .../SelectionList/Search/ReportListItem.tsx         |  2 --
 .../SelectionList/Search/TransactionListItemRow.tsx |  1 +
 src/styles/index.ts                                 |  9 ++++-----
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 88ae8d48a871..1ffbf496f4ab 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,6 +1,6 @@
 import {useIsFocused} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {ActivityIndicator, View} from 'react-native';
 import Icon from '@components/Icon';
@@ -89,6 +89,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Whether we should use the danger theme color */
     danger?: boolean;
 
+    /** Whether we should display the button as a link */
+    link?: boolean;
+
     /** Should we remove the right border radius top + bottom? */
     shouldRemoveRightBorderRadius?: boolean;
 
@@ -202,6 +205,7 @@ function Button(
         id = '',
         accessibilityLabel = '',
         isSplitButton = false,
+        link = false,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
@@ -209,6 +213,7 @@ function Button(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const [isHovered, setIsHovered] = useState(false);
 
     const renderContent = () => {
         if ('children' in rest) {
@@ -229,6 +234,9 @@ function Button(
                     danger && styles.buttonDangerText,
                     !!icon && styles.textAlignLeft,
                     textStyles,
+                    link && styles.link,
+                    link && isHovered && styles.linkHover,
+                    link && styles.fontWeightNormal,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
@@ -339,6 +347,7 @@ function Button(
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
+                    link && styles.bgTransparent,
                 ]}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -349,6 +358,8 @@ function Button(
                 accessibilityLabel={accessibilityLabel}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
+                onHoverIn={() => setIsHovered(true)}
+                onHoverOut={() => setIsHovered(false)}
             >
                 {renderContent()}
                 {isLoading && (
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index f594c10866e1..2e1a79d25464 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -15,9 +15,10 @@ type ActionCellProps = {
     action?: string;
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
+    isChildListItem?: boolean;
 };
 
-function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false}: ActionCellProps) {
+function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false, isChildListItem = false}: ActionCellProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -54,8 +55,9 @@ function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isL
             small
             pressOnEnter
             style={[styles.w100]}
-            innerStyles={[isSelected ? styles.buttonDefaultHovered : {}, styles.bgTransparent]}
-            textStyles={[styles.link]}
+            innerStyles={[isSelected ? styles.buttonDefaultHovered : {}]}
+            link={isChildListItem}
+            shouldUseDefaultHover={!isChildListItem}
         />
     );
 }
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 862cd0b3e2aa..12f62b35ca84 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -170,8 +170,6 @@ function ReportListItem<TItem extends ListItem>({
                     </View>
                     {isLargeScreenWidth && (
                         <>
-                            {/** We add an empty view with type style to align the total with the table header */}
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
                                     isLargeScreenWidth={isLargeScreenWidth}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 1f356bd6d8af..dfc53e3a4b41 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -387,6 +387,7 @@ function TransactionListItemRow({
                         onButtonPress={onButtonPress}
                         action={item.action}
                         isSelected={isButtonSelected}
+                        isChildListItem={isChildListItem}
                     />
                 </View>
             </View>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 22258cf379c0..8b63f220afbf 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -584,6 +584,10 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.buttonBorderRadius,
         },
 
+        linkHover: {
+            color: theme.linkHover,
+        },
+
         buttonText: {
             color: theme.text,
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
@@ -5039,11 +5043,6 @@ const styles = (theme: ThemeColors) =>
             height: 172,
         },
 
-        reportListItemSeparator: {
-            borderBottomWidth: 1,
-            borderBottomColor: theme.activeComponentBG,
-        },
-
         reportListItemTitle: {
             color: theme.text,
             fontSize: variables.fontSizeNormal,

From 94509ed112db81a46778721c19460804736a628e Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 4 Jul 2024 10:35:49 +0700
Subject: [PATCH 05/12] Fix: Lint

---
 .../SelectionList/Search/ReportListItem.tsx    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 12f62b35ca84..d45b064ff48d 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -169,16 +169,14 @@ function ReportListItem<TItem extends ListItem>({
                         </View>
                     </View>
                     {isLargeScreenWidth && (
-                        <>
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
-                                <ActionCell
-                                    isLargeScreenWidth={isLargeScreenWidth}
-                                    onButtonPress={handleOnButtonPress}
-                                    action={reportItem.action}
-                                    isSelected={item.isSelected}
-                                />
-                            </View>
-                        </>
+                        <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
+                            <ActionCell
+                                isLargeScreenWidth={isLargeScreenWidth}
+                                onButtonPress={handleOnButtonPress}
+                                action={reportItem.action}
+                                isSelected={item.isSelected}
+                            />
+                        </View>
                     )}
                 </View>
                 {reportItem.transactions.map((transaction) => (

From f55184a12568b98ce5a6b3e97c72310d6507a955 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Fri, 5 Jul 2024 18:18:35 +0700
Subject: [PATCH 06/12] fix set minHeight to header report and update
 ActionCell

---
 src/components/SelectionList/Search/ActionCell.tsx           | 5 +++--
 src/components/SelectionList/Search/ReportListItem.tsx       | 3 ++-
 .../SelectionList/Search/TransactionListItemRow.tsx          | 3 +++
 src/styles/utils/sizing.ts                                   | 3 +++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 2e1a79d25464..f863ee77fce1 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -16,15 +16,16 @@ type ActionCellProps = {
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
     isChildListItem?: boolean;
+    parentAction?: string;
 };
 
-function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false, isChildListItem = false}: ActionCellProps) {
+function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false, isChildListItem = false, parentAction = ''}: ActionCellProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
 
-    if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
+    if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) {
         const buttonTextKey = action === CONST.SEARCH.ACTION_TYPES.PAID ? 'iou.settledExpensify' : 'common.done';
         return (
             <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index a1d8994c02b9..c0982c0a448e 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -143,7 +143,7 @@ function ReportListItem<TItem extends ListItem>({
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, isLargeScreenWidth && styles.mr4]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, isLargeScreenWidth && styles.mr4, styles.mnh40]}>
                     <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
                             {canSelectMultiple && (
@@ -181,6 +181,7 @@ function ReportListItem<TItem extends ListItem>({
                 </View>
                 {reportItem.transactions.map((transaction) => (
                     <TransactionListItemRow
+                        parentAction={reportItem.action}
                         item={transaction}
                         showTooltip={showTooltip}
                         onButtonPress={() => {
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index dfc53e3a4b41..51c11ebc5480 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -51,6 +51,7 @@ type TransactionListItemRowProps = {
     isDisabled: boolean;
     canSelectMultiple: boolean;
     isButtonSelected?: boolean;
+    parentAction?: string;
 };
 
 const getTypeIcon = (type?: SearchTransactionType) => {
@@ -225,6 +226,7 @@ function TransactionListItemRow({
     containerStyle,
     isChildListItem = false,
     isButtonSelected = false,
+    parentAction = '',
 }: TransactionListItemRowProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useWindowDimensions();
@@ -388,6 +390,7 @@ function TransactionListItemRow({
                         action={item.action}
                         isSelected={isButtonSelected}
                         isChildListItem={isChildListItem}
+                        parentAction={parentAction}
                     />
                 </View>
             </View>
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index d0855b47f2bd..574bef6b10d4 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -41,6 +41,9 @@ export default {
     mnh20: {
         minHeight: 80,
     },
+    mnh40: {
+        minHeight: 40,
+    },
 
     mnh0: {
         minHeight: 0,

From 4dc85fdd1fa283dc217fc7e565c0e3a7b0efc8e5 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Mon, 8 Jul 2024 17:44:44 +0700
Subject: [PATCH 07/12] update view link font size

---
 src/components/Button/index.tsx | 1 +
 src/styles/index.ts             | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1ffbf496f4ab..494bb56672ad 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -237,6 +237,7 @@ function Button(
                     link && styles.link,
                     link && isHovered && styles.linkHover,
                     link && styles.fontWeightNormal,
+                    link && styles.fontSizeLabel,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ed0d0cd212da..1686e9338409 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -340,6 +340,9 @@ const styles = (theme: ThemeColors) =>
         appBG: {
             backgroundColor: theme.appBG,
         },
+        fontSizeLabel: {
+            fontSize: variables.fontSizeLabel,
+        },
 
         h4: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,

From b9119364c79e070701919f999f734908fb908119 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Wed, 10 Jul 2024 04:25:28 +0700
Subject: [PATCH 08/12] feat use StyleUtils.getColorStyle to get linkHover

---
 src/components/Button/index.tsx | 2 +-
 src/styles/index.ts             | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 0a3f1ee6eeda..f8acec2b07dd 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -235,7 +235,7 @@ function Button(
                     !!icon && styles.textAlignLeft,
                     textStyles,
                     link && styles.link,
-                    link && isHovered && styles.linkHover,
+                    link && isHovered && StyleUtils.getColorStyle(theme.linkHover),
                     link && styles.fontWeightNormal,
                     link && styles.fontSizeLabel,
                 ]}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1686e9338409..7ae805093caa 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -588,10 +588,6 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.buttonBorderRadius,
         },
 
-        linkHover: {
-            color: theme.linkHover,
-        },
-
         buttonText: {
             color: theme.text,
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,

From 9749bb9b3b89c0d68721b31ab48e51ad356ee89c Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Wed, 10 Jul 2024 17:40:36 +0700
Subject: [PATCH 09/12] fix update logic after big changes are merged in latest
 main

---
 .../SelectionList/Search/ActionCell.tsx       | 28 +++++++++++++------
 .../Search/ExpenseItemHeaderNarrow.tsx        |  1 +
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 49e4d8c2ebee..7888a8b26114 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -63,13 +63,11 @@ function ActionCell({
         }
     }, [action, currentSearchHash, transactionID]);
 
-    if (!isLargeScreenWidth) {
-        return null;
-    }
-
     const text = translate(actionTranslationsMap[action]);
 
-    if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAI && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) {
+    const shouldUseViewAction = action === CONST.SEARCH.ACTION_TYPES.VIEW || (parentAction === CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID);
+
+    if ((parentAction !== CONST.SEARCH.ACTION_TYPES.PAID && action === CONST.SEARCH.ACTION_TYPES.PAID) || action === CONST.SEARCH.ACTION_TYPES.DONE) {
         return (
             <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
                 <Badge
@@ -94,7 +92,22 @@ function ActionCell({
 
     const buttonInnerStyles = isSelected ? styles.buttonDefaultHovered : {};
 
-    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
+    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || shouldUseViewAction) {
+        return isLargeScreenWidth ? (
+            <Button
+                text={translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW])}
+                onPress={goToItem}
+                small
+                pressOnEnter
+                style={[styles.w100]}
+                innerStyles={buttonInnerStyles}
+                link={isChildListItem}
+                shouldUseDefaultHover={!isChildListItem}
+            />
+        ) : null;
+    }
+
+    if (action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
         return (
             <Button
                 text={text}
@@ -106,7 +119,6 @@ function ActionCell({
             />
         );
     }
-
     return (
         <Button
             text={text}
@@ -115,8 +127,6 @@ function ActionCell({
             pressOnEnter
             style={[styles.w100]}
             innerStyles={buttonInnerStyles}
-            link={isChildListItem}
-            shouldUseDefaultHover={!isChildListItem}
         />
     );
 }
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index f634f84509b1..1fb08a7a81ef 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -52,6 +52,7 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
                     action={action}
                     transactionID={transactionID}
                     goToItem={onButtonPress}
+                    isLargeScreenWidth={false}
                 />
             </View>
         </View>

From 523a358cfcf86e7a1665247a46a5372079a4e107 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 11 Jul 2024 15:10:45 +0700
Subject: [PATCH 10/12] update padding horizontal to 12px in case grouped
 expenses

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7ae805093caa..19da845a6bf7 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4614,7 +4614,7 @@ const styles = (theme: ThemeColors) =>
         selectionListPressableItemWrapper: {
             alignItems: 'center',
             flexDirection: 'row',
-            paddingHorizontal: 16,
+            paddingHorizontal: 12,
             paddingVertical: 16,
             marginHorizontal: 20,
             backgroundColor: theme.highlightBG,

From d54400f7e6c85de8681f877dc3b0cbd3b4ca8c3d Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 11 Jul 2024 15:13:04 +0700
Subject: [PATCH 11/12] do not modify selectionListPressableItemWrapper and use
 ph3 instead

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 19da845a6bf7..7ae805093caa 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4614,7 +4614,7 @@ const styles = (theme: ThemeColors) =>
         selectionListPressableItemWrapper: {
             alignItems: 'center',
             flexDirection: 'row',
-            paddingHorizontal: 12,
+            paddingHorizontal: 16,
             paddingVertical: 16,
             marginHorizontal: 20,
             backgroundColor: theme.highlightBG,

From 5393d7a7d62f0d137faabca07f9252759d5ddb01 Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Thu, 11 Jul 2024 15:13:59 +0700
Subject: [PATCH 12/12] fix add ph3 to listItemPressableStyle in case grouped
 expense

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index d1d7a3f19386..9133653fd628 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -70,7 +70,7 @@ function ReportListItem<TItem extends ListItem>({
         return;
     }
 
-    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, styles.ph3];
 
     const handleOnButtonPress = () => {
         onSelectRow(item);