diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index ba0027009ee5..f1b96ddd8c3f 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -299,6 +299,7 @@ function ExpenseReportListItem({ shouldShowUserInfo={!!reportItem?.from} stateNum={reportItem.stateNum} statusNum={reportItem.statusNum} + isSelected={!!reportItem.isSelected} /> )} {!isLargeScreenWidth && ( diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx index 98d7c0786c39..240e4d915e8f 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx @@ -117,6 +117,7 @@ function ExpenseReportListItemRow({ stateNum={item.stateNum} statusNum={item.statusNum} isPending={item.shouldShowStatusAsPending} + isSelected={item.isSelected} /> ), diff --git a/src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx b/src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx index b7b697a9f71e..98180e87bec5 100644 --- a/src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx +++ b/src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx @@ -251,6 +251,7 @@ function ReportListItemHeader({ containerStyles={[styles.pr3, styles.mb2]} stateNum={reportItem.stateNum} statusNum={reportItem.statusNum} + isSelected={!!reportItem.isSelected} /> diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 2d26c7d7cb2b..7b83119ebbd3 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -237,6 +237,7 @@ function TransactionListItem({ shouldShowUserInfo={!isDeletedTransaction && !!transactionItem?.from} stateNum={transactionItem.report?.stateNum} statusNum={transactionItem.report?.statusNum} + isSelected={!!transactionItem.isSelected} /> )} ; stateNum: ExpenseReportListItemType['stateNum']; statusNum: ExpenseReportListItemType['statusNum']; + isSelected?: boolean; }) { const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); const statusText = getReportStatusTranslation({stateNum, statusNum, translate}); const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum); + const badgeBackgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, undefined, isSelected); const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? ''; return ( @@ -53,7 +56,7 @@ function UserInfoAndActionButtonRow({ {!!statusText && !!reportStatusColorStyle && ( )} diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index fb58fc366456..5f6a2cf69536 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -681,6 +681,7 @@ function TransactionItemRow({ stateNum={transactionItem.report?.stateNum} statusNum={transactionItem.report?.statusNum} isDeleted={isDeletedTransaction} + isSelected={isSelected} /> ); diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 0dbd8c0b3d3f..af85349af0d6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -13251,6 +13251,12 @@ function getReportStatusColorStyle(theme: ThemeColors, stateNum?: number, status return undefined; } +function getStatusBadgeBackgroundColor(theme: ThemeColors, stateNum?: number, statusNum?: number, isDeleted?: boolean, isSelected?: boolean): ColorValue | undefined { + const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum, isDeleted); + const isUnreported = (stateNum === undefined || statusNum === undefined) && !isDeleted; + return isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle?.backgroundColor; +} + /** * Checks if a workspace member is leaving a workspace room * This is used to determine if we need to show special handling when a workspace member leaves a room @@ -13727,6 +13733,7 @@ export { isMoneyRequestReportEligibleForMerge, getReportStatusTranslation, getReportStatusColorStyle, + getStatusBadgeBackgroundColor, getMovedActionMessage, excludeParticipantsForDisplay, getReceiptUploadErrorReason,