Fix selected row background mismatch between wrapper and pressable on narrow screens

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Author: Krishna2323

src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx

@@ -199,7 +199,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
         borderRadius: 0,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
         shouldApplyOtherStyles: !isLargeScreenWidth,
     });
 

src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx

@@ -198,16 +198,15 @@ function TransactionGroupListItem<TItem extends ListItem>({
     };
 
     const StyleUtils = useStyleUtils();
+    const isItemSelected = isSelectAllChecked || item?.isSelected;
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: isItemSelected ? theme.activeComponentBG : theme.highlightBG,
         shouldApplyOtherStyles: false,
     });
 
-    const isItemSelected = isSelectAllChecked || item?.isSelected;
-
     const pressableStyle = [
         styles.transactionGroupListItemStyle,
         isLargeScreenWidth && {

src/components/Search/SearchList/ListItem/TransactionListItem.tsx

@@ -130,7 +130,7 @@ function TransactionListItem<TItem extends ListItem>({
         borderRadius: 0,
         shouldHighlight: item?.shouldAnimateInHighlight ?? false,
         highlightColor: theme.messageHighlightBG,
-        backgroundColor: theme.highlightBG,
+        backgroundColor: item.isSelected ? theme.activeComponentBG : theme.highlightBG,
         shouldApplyOtherStyles: !isLargeScreenWidth,
     });