From 61cb88af24cb735d935903937239050863f350fd Mon Sep 17 00:00:00 2001 From: "Jayesh Mangwani (via MelvinBot)" Date: Mon, 4 May 2026 15:44:15 +0000 Subject: [PATCH 1/5] Change unreported badge background color to be distinct from selected row The unreported badge backgroundColor was using productDark400/productLight400 which is the same as activeComponentBG. When a row is selected, both backgrounds match and the badge becomes invisible. Use productDark500/productLight500 instead. Co-authored-by: Jayesh Mangwani --- src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 55e1374410b4..1eedeecdf976 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -198,7 +198,7 @@ const darkTheme = { textColor: colors.productDark900, }, unreported: { - backgroundColor: colors.productDark400, + backgroundColor: colors.productDark500, textColor: colors.productDark900, }, }, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 3418f9ad908c..b8d790330f75 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -198,7 +198,7 @@ const lightTheme = { textColor: colors.productLight100, }, unreported: { - backgroundColor: colors.productLight400, + backgroundColor: colors.productLight500, textColor: colors.productLight900, }, }, From 498b43ec9fce17c819ad94d389dce79eccb7b173 Mon Sep 17 00:00:00 2001 From: "Jayesh Mangwani (via MelvinBot)" Date: Mon, 4 May 2026 20:49:39 +0000 Subject: [PATCH 2/5] Use buttonHoveredBG for unreported badge only when row is selected Revert the static badge color back to productDark400/productLight400 and dynamically switch to buttonHoveredBG only when the parent row is selected, matching the pattern used by ReceiptCell. Co-authored-by: Jayesh Mangwani --- .../SearchList/ListItem/ExpenseReportListItemRow.tsx | 1 + .../Search/SearchList/ListItem/StatusCell.tsx | 10 ++++++++-- src/components/TransactionItemRow/index.tsx | 1 + src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- 5 files changed, 12 insertions(+), 4 deletions(-) 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/StatusCell.tsx b/src/components/Search/SearchList/ListItem/StatusCell.tsx index ee40f6f6e440..8a1832a1b4c8 100644 --- a/src/components/Search/SearchList/ListItem/StatusCell.tsx +++ b/src/components/Search/SearchList/ListItem/StatusCell.tsx @@ -18,9 +18,12 @@ type StatusCellProps = { /** Whether the transaction is deleted */ isDeleted?: boolean; + + /** Whether the parent row is selected */ + isSelected?: boolean; }; -function StatusCell({stateNum, statusNum, isPending, isDeleted}: StatusCellProps) { +function StatusCell({stateNum, statusNum, isPending, isDeleted, isSelected}: StatusCellProps) { const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); @@ -32,11 +35,14 @@ function StatusCell({stateNum, statusNum, isPending, isDeleted}: StatusCellProps return null; } + const isUnreported = stateNum === undefined && statusNum === undefined && !isDeleted; + const backgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle.backgroundColor; + return ( 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/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 1eedeecdf976..55e1374410b4 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -198,7 +198,7 @@ const darkTheme = { textColor: colors.productDark900, }, unreported: { - backgroundColor: colors.productDark500, + backgroundColor: colors.productDark400, textColor: colors.productDark900, }, }, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index b8d790330f75..3418f9ad908c 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -198,7 +198,7 @@ const lightTheme = { textColor: colors.productLight100, }, unreported: { - backgroundColor: colors.productLight500, + backgroundColor: colors.productLight400, textColor: colors.productLight900, }, }, From 47e6ad63b23898b70c9bdbfc461583e7b6e14293 Mon Sep 17 00:00:00 2001 From: "Jayesh Mangwani (via MelvinBot)" Date: Mon, 4 May 2026 21:10:39 +0000 Subject: [PATCH 3/5] Apply unreported badge selected color to mobile/narrow layout The buttonHoveredBG color for selected unreported badges was only applied in StatusCell (wide/desktop layout). On mobile/narrow screens, UserInfoAndActionButtonRow renders StatusBadge directly and was missing the isSelected-based color logic. Pass isSelected through from all three callers and apply the same conditional background. Co-authored-by: Jayesh Mangwani --- .../Search/SearchList/ListItem/ExpenseReportListItem.tsx | 1 + .../Search/SearchList/ListItem/ReportListItemHeader.tsx | 1 + .../Search/SearchList/ListItem/TransactionListItem.tsx | 1 + .../SearchList/ListItem/UserInfoAndActionButtonRow.tsx | 6 +++++- 4 files changed, 8 insertions(+), 1 deletion(-) 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/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} /> ({ 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 isUnreported = stateNum === undefined && statusNum === undefined; + const badgeBackgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle?.backgroundColor; const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? ''; return ( @@ -53,7 +57,7 @@ function UserInfoAndActionButtonRow({ {!!statusText && !!reportStatusColorStyle && ( )} From c81b0ab346e225ca851963dea367f7404a0e2144 Mon Sep 17 00:00:00 2001 From: "Jayesh Mangwani (via MelvinBot)" Date: Mon, 4 May 2026 21:50:40 +0000 Subject: [PATCH 4/5] Use OR logic for isUnreported to match getReportStatusTranslation/getReportStatusColorStyle Co-authored-by: Jayesh Mangwani --- src/components/Search/SearchList/ListItem/StatusCell.tsx | 2 +- .../Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/StatusCell.tsx b/src/components/Search/SearchList/ListItem/StatusCell.tsx index 8a1832a1b4c8..69756132c342 100644 --- a/src/components/Search/SearchList/ListItem/StatusCell.tsx +++ b/src/components/Search/SearchList/ListItem/StatusCell.tsx @@ -35,7 +35,7 @@ function StatusCell({stateNum, statusNum, isPending, isDeleted, isSelected}: Sta return null; } - const isUnreported = stateNum === undefined && statusNum === undefined && !isDeleted; + const isUnreported = (stateNum === undefined || statusNum === undefined) && !isDeleted; const backgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle.backgroundColor; return ( diff --git a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx index 8757913123f3..5fcab34020b2 100644 --- a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx +++ b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx @@ -34,7 +34,7 @@ function UserInfoAndActionButtonRow({ const {translate} = useLocalize(); const statusText = getReportStatusTranslation({stateNum, statusNum, translate}); const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum); - const isUnreported = stateNum === undefined && statusNum === undefined; + const isUnreported = stateNum === undefined || statusNum === undefined; const badgeBackgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle?.backgroundColor; const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? ''; return ( From e743c03c3964633924ec5181fc1dfeacc4a2cd4d Mon Sep 17 00:00:00 2001 From: "Jayesh Mangwani (via MelvinBot)" Date: Tue, 5 May 2026 04:40:20 +0000 Subject: [PATCH 5/5] Extract getStatusBadgeBackgroundColor helper to eliminate duplicated logic Moves the isUnreported + conditional background color logic into a shared helper in ReportUtils, fixing the inconsistency where UserInfoAndActionButtonRow was missing the !isDeleted guard that StatusCell had. Co-authored-by: Jayesh Mangwani --- src/components/Search/SearchList/ListItem/StatusCell.tsx | 5 ++--- .../SearchList/ListItem/UserInfoAndActionButtonRow.tsx | 5 ++--- src/libs/ReportUtils.ts | 7 +++++++ 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/StatusCell.tsx b/src/components/Search/SearchList/ListItem/StatusCell.tsx index 69756132c342..c780d44fe1f2 100644 --- a/src/components/Search/SearchList/ListItem/StatusCell.tsx +++ b/src/components/Search/SearchList/ListItem/StatusCell.tsx @@ -4,7 +4,7 @@ import StatusBadge from '@components/StatusBadge'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import {getReportStatusColorStyle, getReportStatusTranslation} from '@libs/ReportUtils'; +import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils'; type StatusCellProps = { /** The stateNum of the report */ @@ -35,8 +35,7 @@ function StatusCell({stateNum, statusNum, isPending, isDeleted, isSelected}: Sta return null; } - const isUnreported = (stateNum === undefined || statusNum === undefined) && !isDeleted; - const backgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle.backgroundColor; + const backgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, isDeleted, isSelected); return ( diff --git a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx index 5fcab34020b2..16ae9200e5bc 100644 --- a/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx +++ b/src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx @@ -9,7 +9,7 @@ import StatusBadge from '@components/StatusBadge'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import {getReportStatusColorStyle, getReportStatusTranslation} from '@libs/ReportUtils'; +import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils'; import CONST from '@src/CONST'; import type {ExpenseReportListItemType, TransactionListItemType, TransactionReportGroupListItemType} from './types'; import UserInfoCellsWithArrow from './UserInfoCellsWithArrow'; @@ -34,8 +34,7 @@ function UserInfoAndActionButtonRow({ const {translate} = useLocalize(); const statusText = getReportStatusTranslation({stateNum, statusNum, translate}); const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum); - const isUnreported = stateNum === undefined || statusNum === undefined; - const badgeBackgroundColor = isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle?.backgroundColor; + const badgeBackgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, undefined, isSelected); const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? ''; return ( 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,