From ca775096d5de47541024a2e862943be3849de5eb Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 1 May 2026 11:51:37 +0530 Subject: [PATCH 1/7] Fix header border color when items are selected Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 10 +-- .../MoneyRequestReportTransactionList.tsx | 68 +++++++++++-------- .../ListItem/ExpenseReportListItem.tsx | 2 +- .../ListItem/TransactionGroupListExpanded.tsx | 2 +- .../ListItem/TransactionListItem.tsx | 2 +- 5 files changed, 47 insertions(+), 37 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 858ffba9006a..cdcd61c9cdd8 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -70,8 +70,8 @@ type MoneyRequestReportTransactionItemProps = { /** List of cards for the user */ nonPersonalAndWorkspaceCards: CardList; - /** Whether this is the last item in the list (used to skip border-bottom on narrow) */ - isLastItem?: boolean; + /** Whether this is the first item in the list */ + isFirstItem?: boolean; }; function MoneyRequestReportTransactionItem({ @@ -91,7 +91,7 @@ function MoneyRequestReportTransactionItem({ onArrowRightPress, shouldBeHighlighted, nonPersonalAndWorkspaceCards, - isLastItem = false, + isFirstItem = false, }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -136,7 +136,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]} + style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius, shouldUseNarrowLayout && !isFirstItem && styles.borderTop]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -146,7 +146,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]} > {({hovered}) => ( transactions.filter((t) => !isTransactionPendingDelete(t)), [transactions]); const currentUserDetails = useCurrentUserPersonalDetails(); const isReportArchived = useReportIsArchived(report?.reportID); @@ -556,9 +560,8 @@ function MoneyRequestReportTransactionList({ const lastTransactionID = useMemo(() => { const allTransactions = shouldShowGroupedTransactions ? groupedTransactions.flatMap((group) => group.transactions) : resolvedTransactions; - const nonDeletedTransactions = allTransactions.filter((t) => !isTransactionPendingDelete(t)); - return nonDeletedTransactions.at(-1)?.transactionID; - }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions]); + return allTransactions.findLast((t) => isOffline || !isTransactionPendingDelete(t))?.transactionID; + }, [shouldShowGroupedTransactions, groupedTransactions, resolvedTransactions, isOffline]); const transactionItems = shouldShowGroupedTransactions ? groupedTransactions.map((group) => { @@ -587,31 +590,28 @@ function MoneyRequestReportTransactionList({ pendingAction={selectionState.pendingAction} shouldUseNarrowLayout={shouldUseNarrowLayout} /> - {group.transactions.map((transaction) => { - const isLastItem = transaction.transactionID === lastTransactionID; - return ( - - ); - })} + {group.transactions.map((transaction, index) => ( + + ))} ); }) @@ -664,7 +664,17 @@ function MoneyRequestReportTransactionList({ const tableHeaderContent = ( - + 0 && {borderColor: theme.buttonHoveredBG}, + ]} + > { diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index 532137448637..f6d6b6337a75 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -182,6 +182,7 @@ function ExpenseReportListItem({ isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + !isLargeScreenWidth && !isFirstItem && styles.borderTop, ], [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils], ); @@ -283,7 +284,6 @@ function ExpenseReportListItem({ isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, - !isLargeScreenWidth && !isLastItem && styles.borderBottom, ]} accessible={false} shouldShowRightCaret={false} diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx index 087288f8149b..a698e9ff88ca 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx @@ -224,7 +224,7 @@ function TransactionGroupListExpanded({ isActionColumnWide={isActionColumnWide} /> - + )} {visibleTransactions.map((transaction, index) => { diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 87a1577686f7..76878544aa82 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -216,6 +216,7 @@ function TransactionListItem({ pressableStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), isDeletedTransaction && styles.cursorDefault, + !isLargeScreenWidth && !isFirstItem && styles.borderTop, ]} onFocus={onFocus} wrapperStyle={[ @@ -226,7 +227,6 @@ function TransactionListItem({ isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, - !isLargeScreenWidth && !isLastItem && styles.borderBottom, ]} > {({hovered}) => ( From 03be4d9c3368e698b39debc806313678fc23da0c Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 1 May 2026 11:54:47 +0530 Subject: [PATCH 2/7] Fix invisible borders on selected rows Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 13 +++++++++---- .../SearchList/ListItem/ExpenseReportListItem.tsx | 4 ++-- .../ListItem/TransactionGroupListItem.tsx | 7 ++----- .../SearchList/ListItem/TransactionListItem.tsx | 2 +- src/components/TransactionItemRow/index.tsx | 4 ++-- 5 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index cdcd61c9cdd8..6b535904534f 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -70,8 +70,8 @@ type MoneyRequestReportTransactionItemProps = { /** List of cards for the user */ nonPersonalAndWorkspaceCards: CardList; - /** Whether this is the first item in the list */ - isFirstItem?: boolean; + /** Whether this is the last item in the list */ + isLastItem?: boolean; }; function MoneyRequestReportTransactionItem({ @@ -91,7 +91,7 @@ function MoneyRequestReportTransactionItem({ onArrowRightPress, shouldBeHighlighted, nonPersonalAndWorkspaceCards, - isFirstItem = false, + isLastItem = false, }: MoneyRequestReportTransactionItemProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); @@ -136,7 +136,11 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius, shouldUseNarrowLayout && !isFirstItem && styles.borderTop]} + style={[ + styles.transactionListItemStyle, + shouldUseNarrowLayout && styles.noBorderRadius, + shouldUseNarrowLayout && !isLastItem && {...styles.borderBottom, borderColor: isSelected ? theme.buttonHoveredBG : theme.border}, + ]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} @@ -170,6 +174,7 @@ function MoneyRequestReportTransactionItem({ }} onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)} isHover={hovered} + shouldShowBottomBorder={shouldUseNarrowLayout && !isLastItem} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards} /> )} diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index f6d6b6337a75..9cf656e2d4d0 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -180,11 +180,11 @@ function ExpenseReportListItem({ styles.mh0, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, + !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], - !isLargeScreenWidth && !isFirstItem && styles.borderTop, ], - [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils], + [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils, theme.border, theme.buttonHoveredBG], ); const listItemWrapperStyle = useMemo( diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index 639fb50539d7..02318417c595 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -214,6 +214,7 @@ function TransactionGroupListItem({ ...(isLastItem ? styles.searchTableBottomRadius : {}), }, isItemSelected && styles.activeComponentBG, + !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: isItemSelected ? theme.buttonHoveredBG : theme.border}, ]; const pressableRef = useRef(null); @@ -540,11 +541,7 @@ function TransactionGroupListItem({ styles.userSelectNone, isLargeScreenWidth ? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden] - : [ - !isFirstItem && styles.borderTop, - isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], - isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], - ], + : [isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]], ]} > {({hovered}) => ( diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 76878544aa82..e1318daae9c7 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -122,6 +122,7 @@ function TransactionListItem({ } : {...styles.flexColumn, ...styles.alignItemsStretch}, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]; @@ -216,7 +217,6 @@ function TransactionListItem({ pressableStyle, isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG), isDeletedTransaction && styles.cursorDefault, - !isLargeScreenWidth && !isFirstItem && styles.borderTop, ]} onFocus={onFocus} wrapperStyle={[ diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index ba4fa52823f9..90033ec31526 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -784,7 +784,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} @@ -859,7 +859,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} From e5423df79e14a16a22c90b09fac7ed851879f077 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 1 May 2026 12:31:13 +0530 Subject: [PATCH 3/7] Fix last item border radius lost on hover/selection Signed-off-by: krishna2323 --- .../Search/SearchList/ListItem/TransactionListItem.tsx | 7 ++++++- src/styles/utils/index.ts | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index e1318daae9c7..85cc46bf5733 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -262,7 +262,12 @@ function TransactionListItem({ isActionColumnWide={transactionItem.isActionColumnWide} shouldShowCheckbox={!!canSelectMultiple} checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX} - style={[styles.p3, styles.pv2, shouldUseNarrowLayout ? [styles.p0, styles.pt3, styles.noBorderRadius] : isLargeScreenWidth && styles.noBorderRadius]} + style={[ + styles.p3, + styles.pv2, + shouldUseNarrowLayout && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius], + isLargeScreenWidth && (isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius), + ]} violations={transactionViolations} onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)} isHover={hovered} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 71410b3531d9..ff3f48d3e848 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1834,7 +1834,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ getSearchTableRowPressableStyle: (isLastItem?: boolean, isSelected?: boolean, padding?: {vertical?: number; horizontal?: number}): ViewStyle => ({ minHeight: variables.tableRowHeight, - borderRadius: 0, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, borderBottomWidth: isLastItem ? 0 : 1, borderColor: isSelected ? theme.buttonHoveredBG : theme.border, ...(isLastItem ? styles.searchTableBottomRadius : {}), From b4afeb94b261f34e02e55190c9ccd0e522adeed9 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 1 May 2026 13:04:59 +0530 Subject: [PATCH 4/7] Remove duplicate borderBottom from MoneyRequestReportTransactionItem Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 6 +----- .../Search/SearchList/ListItem/TransactionGroupListItem.tsx | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 6b535904534f..12fafb86919c 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -136,11 +136,7 @@ function MoneyRequestReportTransactionItem({ role={getButtonRole(true)} isNested id={transaction.transactionID} - style={[ - styles.transactionListItemStyle, - shouldUseNarrowLayout && styles.noBorderRadius, - shouldUseNarrowLayout && !isLastItem && {...styles.borderBottom, borderColor: isSelected ? theme.buttonHoveredBG : theme.border}, - ]} + style={[styles.transactionListItemStyle, shouldUseNarrowLayout && styles.noBorderRadius]} hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} onPressIn={() => canUseTouchScreen() && ControlSelection.block()} diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index 02318417c595..6cc61215149a 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -552,7 +552,7 @@ function TransactionGroupListItem({ onPress={onExpandIconPress} expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half} shouldShowToggleButton={isLargeScreenWidth} - borderBottomStyle={isLargeScreenWidth && styles.borderNone} + borderBottomStyle={isLargeScreenWidth ? styles.borderNone : isItemSelected && {borderColor: theme.buttonHoveredBG}} sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE} > Date: Fri, 1 May 2026 13:18:18 +0530 Subject: [PATCH 5/7] Fix report page border: use full-width and correct last item check Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 7 +++++-- .../MoneyRequestReportTransactionList.tsx | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 12fafb86919c..227762e2c0a0 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -146,7 +146,11 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone]} + wrapperStyle={[ + animatedHighlightStyle, + styles.userSelectNone, + shouldUseNarrowLayout && !isLastItem && {...styles.borderBottom, borderColor: isSelected ? theme.buttonHoveredBG : theme.border}, + ]} > {({hovered}) => ( onArrowRightPress?.(transaction.transactionID)} isHover={hovered} - shouldShowBottomBorder={shouldUseNarrowLayout && !isLastItem} nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards} /> )} diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index f5719079b3bf..60a556fd1e45 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -597,7 +597,7 @@ function MoneyRequestReportTransactionList({ pendingAction={selectionState.pendingAction} shouldUseNarrowLayout={shouldUseNarrowLayout} /> - {group.transactions.map((transaction, index) => ( + {group.transactions.map((transaction) => ( ))} From e350b5b9b1a4a69e1a49b35ddfde8c18f0776b2e Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 1 May 2026 21:38:55 +0530 Subject: [PATCH 6/7] Extract getSelectedBorderBottomStyle to deduplicate border color logic Signed-off-by: krishna2323 --- .../MoneyRequestReportTransactionItem.tsx | 8 +++----- .../MoneyRequestReportTransactionList.tsx | 12 +----------- .../SearchList/ListItem/ExpenseReportListItem.tsx | 4 ++-- .../ListItem/TransactionGroupListExpanded.tsx | 4 +++- .../SearchList/ListItem/TransactionGroupListItem.tsx | 2 +- .../SearchList/ListItem/TransactionListItem.tsx | 2 +- src/components/TransactionItemRow/index.tsx | 4 ++-- src/styles/utils/index.ts | 5 +++++ 8 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 227762e2c0a0..1fcc83e35beb 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -10,6 +10,7 @@ import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useTransactionViolations from '@hooks/useTransactionViolations'; @@ -98,6 +99,7 @@ function MoneyRequestReportTransactionItem({ // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP(); + const StyleUtils = useStyleUtils(); const theme = useTheme(); const isPendingDelete = isTransactionPendingDelete(transaction); const pendingAction = getTransactionPendingAction(transaction); @@ -146,11 +148,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[ - animatedHighlightStyle, - styles.userSelectNone, - shouldUseNarrowLayout && !isLastItem && {...styles.borderBottom, borderColor: isSelected ? theme.buttonHoveredBG : theme.border}, - ]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]} > {({hovered}) => ( - 0 && {borderColor: theme.buttonHoveredBG}, - ]} - > + 0)]}> { diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index 9cf656e2d4d0..ba0027009ee5 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -180,11 +180,11 @@ function ExpenseReportListItem({ styles.mh0, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, - !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ], - [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils, theme.border, theme.buttonHoveredBG], + [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils], ); const listItemWrapperStyle = useMemo( diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx index a698e9ff88ca..90d0f6d8d7c3 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx @@ -14,6 +14,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -92,6 +93,7 @@ function TransactionGroupListExpanded({ const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0; const shouldDisplayLoadingIndicator = !isExpenseReportType && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch; const {isLargeScreenWidth} = useResponsiveLayout(); + const StyleUtils = useStyleUtils(); const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide); const isTaxAmountColumnWide = transactions.some((transaction) => transaction.isTaxAmountColumnWide); @@ -224,7 +226,7 @@ function TransactionGroupListExpanded({ isActionColumnWide={isActionColumnWide} /> - + )} {visibleTransactions.map((transaction, index) => { diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx index 6cc61215149a..a1e6654d7a0b 100644 --- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx @@ -214,7 +214,7 @@ function TransactionGroupListItem({ ...(isLastItem ? styles.searchTableBottomRadius : {}), }, isItemSelected && styles.activeComponentBG, - !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: isItemSelected ? theme.buttonHoveredBG : theme.border}, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected), ]; const pressableRef = useRef(null); diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 85cc46bf5733..a861c48ac8c5 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -122,7 +122,7 @@ function TransactionListItem({ } : {...styles.flexColumn, ...styles.alignItemsStretch}, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], - !isLargeScreenWidth && !isLastItem && {...styles.borderBottom, borderColor: item.isSelected ? theme.buttonHoveredBG : theme.border}, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]; diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index f48e36f71feb..97a41e375348 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -805,7 +805,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} @@ -880,7 +880,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ff3f48d3e848..c0415bb95f69 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1845,6 +1845,11 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ ...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}), }), + getSelectedBorderBottomStyle: (isSelected?: boolean): ViewStyle => ({ + ...styles.borderBottom, + borderColor: isSelected ? theme.buttonHoveredBG : theme.border, + }), + getSearchTableHighlightBorderRadius: (isLargeScreenWidth: boolean): number => (isLargeScreenWidth ? 0 : variables.componentBorderRadius), getReportTableColumnStyles: (columnName: string, options: GetReportTableColumnStylesParams = {}): ViewStyle => { From dfe0fd73a1cceade19ac1cc160c071830d31e512 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 4 May 2026 14:44:06 +0530 Subject: [PATCH 7/7] Fix double padding on tweener by using for narrow style override Signed-off-by: krishna2323 --- .../Search/SearchList/ListItem/TransactionListItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index a861c48ac8c5..2d26c7d7cb2b 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -68,7 +68,7 @@ function TransactionListItem({ const theme = useTheme(); const StyleUtils = useStyleUtils(); - const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); + const {isLargeScreenWidth} = useResponsiveLayout(); const {currentSearchHash, currentSearchKey, currentSearchResults} = useSearchStateContext(); const snapshotReport = (currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as Report; @@ -265,7 +265,7 @@ function TransactionListItem({ style={[ styles.p3, styles.pv2, - shouldUseNarrowLayout && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius], + !isLargeScreenWidth && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius], isLargeScreenWidth && (isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius), ]} violations={transactionViolations}