diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx index 5c6fa5954ed6..420b1584fc77 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx @@ -151,7 +151,7 @@ function MoneyRequestReportTransactionItem({ }} disabled={isTransactionPendingDelete(transaction)} ref={viewRef} - wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]} + wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]} > {({hovered}) => ( 0), ]} > ({ styles.mh0, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius, + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ], @@ -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..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 639fb50539d7..a1e6654d7a0b 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 && StyleUtils.getSelectedBorderBottomStyle(isItemSelected), ]; 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}) => ( @@ -555,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} > ({ 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; @@ -122,6 +122,7 @@ function TransactionListItem({ } : {...styles.flexColumn, ...styles.alignItemsStretch}, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected), !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]; @@ -226,7 +227,6 @@ function TransactionListItem({ isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius, !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, - !isLargeScreenWidth && !isLastItem && styles.borderBottom, ]} > {({hovered}) => ( @@ -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, + !isLargeScreenWidth && [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/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 74bc39fab8c9..89c0b37de375 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -807,7 +807,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} @@ -882,7 +882,7 @@ function TransactionItemRow({ {!!shouldShowBottomBorder && ( - + )} diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 71410b3531d9..c0415bb95f69 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 : {}), @@ -1842,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 => {