Skip to content

Commit f6e7b99

Browse files
JS00001JS00001
authored
Merge pull request Expensify#89353 from Krishna2323/krishna2323/issue/89066
Fix header border color when items are selected
2 parents b35556f + dfe0fd7 commit f6e7b99

8 files changed

Lines changed: 29 additions & 16 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ function MoneyRequestReportTransactionItem({
151151
}}
152152
disabled={isTransactionPendingDelete(transaction)}
153153
ref={viewRef}
154-
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]}
154+
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}
155155
>
156156
{({hovered}) => (
157157
<TransactionItemRow

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -655,7 +655,8 @@ function MoneyRequestReportTransactionList({
655655
!isDesktopTableLayout && styles.pl5,
656656
isDesktopTableLayout ? styles.pr11 : styles.pr16,
657657
styles.alignItemsCenter,
658-
isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5, styles.borderBottom],
658+
isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5],
659+
StyleUtils.getSelectedBorderBottomStyle(selectedTransactionIDs.length > 0),
659660
]}
660661
>
661662
<View

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
180180
styles.mh0,
181181
isPendingDelete && styles.cursorDisabled,
182182
isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius,
183+
!isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
183184
!isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
184185
!isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
185186
],
@@ -283,7 +284,6 @@ function ExpenseReportListItem<TItem extends ListItem>({
283284
isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
284285
!isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
285286
!isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
286-
!isLargeScreenWidth && !isLastItem && styles.borderBottom,
287287
]}
288288
accessible={false}
289289
shouldShowRightCaret={false}

‎src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
1414
import useLocalize from '@hooks/useLocalize';
1515
import useOnyx from '@hooks/useOnyx';
1616
import useResponsiveLayout from '@hooks/useResponsiveLayout';
17+
import useStyleUtils from '@hooks/useStyleUtils';
1718
import useTheme from '@hooks/useTheme';
1819
import useThemeStyles from '@hooks/useThemeStyles';
1920
import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -92,6 +93,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
9293
const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0;
9394
const shouldDisplayLoadingIndicator = !isExpenseReportType && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch;
9495
const {isLargeScreenWidth} = useResponsiveLayout();
96+
const StyleUtils = useStyleUtils();
9597

9698
const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide);
9799
const isTaxAmountColumnWide = transactions.some((transaction) => transaction.isTaxAmountColumnWide);
@@ -224,7 +226,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
224226
isActionColumnWide={isActionColumnWide}
225227
/>
226228
</View>
227-
<View style={[styles.borderBottom, styles.ml3, styles.mr3]} />
229+
<View style={[StyleUtils.getSelectedBorderBottomStyle(visibleTransactions.at(0)?.isSelected), styles.ml3, styles.mr3]} />
228230
</>
229231
)}
230232
{visibleTransactions.map((transaction, index) => {

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
214214
...(isLastItem ? styles.searchTableBottomRadius : {}),
215215
},
216216
isItemSelected && styles.activeComponentBG,
217+
!isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected),
217218
];
218219
const pressableRef = useRef<View>(null);
219220

@@ -540,11 +541,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
540541
styles.userSelectNone,
541542
isLargeScreenWidth
542543
? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden]
543-
: [
544-
!isFirstItem && styles.borderTop,
545-
isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
546-
isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
547-
],
544+
: [isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]],
548545
]}
549546
>
550547
{({hovered}) => (
@@ -555,7 +552,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
555552
onPress={onExpandIconPress}
556553
expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half}
557554
shouldShowToggleButton={isLargeScreenWidth}
558-
borderBottomStyle={isLargeScreenWidth && styles.borderNone}
555+
borderBottomStyle={isLargeScreenWidth ? styles.borderNone : isItemSelected && {borderColor: theme.buttonHoveredBG}}
559556
sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE}
560557
>
561558
<TransactionGroupListExpandedItem

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function TransactionListItem<TItem extends ListItem>({
6868
const theme = useTheme();
6969
const StyleUtils = useStyleUtils();
7070

71-
const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
71+
const {isLargeScreenWidth} = useResponsiveLayout();
7272
const {currentSearchHash, currentSearchKey, currentSearchResults} = useSearchStateContext();
7373
const snapshotReport = (currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as Report;
7474

@@ -122,6 +122,7 @@ function TransactionListItem<TItem extends ListItem>({
122122
}
123123
: {...styles.flexColumn, ...styles.alignItemsStretch},
124124
isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
125+
!isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
125126
!isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
126127
!isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
127128
];
@@ -226,7 +227,6 @@ function TransactionListItem<TItem extends ListItem>({
226227
isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
227228
!isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
228229
!isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
229-
!isLargeScreenWidth && !isLastItem && styles.borderBottom,
230230
]}
231231
>
232232
{({hovered}) => (
@@ -262,7 +262,12 @@ function TransactionListItem<TItem extends ListItem>({
262262
isActionColumnWide={transactionItem.isActionColumnWide}
263263
shouldShowCheckbox={!!canSelectMultiple}
264264
checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
265-
style={[styles.p3, styles.pv2, shouldUseNarrowLayout ? [styles.p0, styles.pt3, styles.noBorderRadius] : isLargeScreenWidth && styles.noBorderRadius]}
265+
style={[
266+
styles.p3,
267+
styles.pv2,
268+
!isLargeScreenWidth && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius],
269+
isLargeScreenWidth && (isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius),
270+
]}
266271
violations={transactionViolations}
267272
onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
268273
isHover={hovered}

‎src/components/TransactionItemRow/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -816,7 +816,7 @@ function TransactionItemRow({
816816
{!!shouldShowBottomBorder && (
817817
<View style={bgActiveStyles}>
818818
<View style={styles.ph3}>
819-
<View style={[styles.borderBottom]} />
819+
<View style={[StyleUtils.getSelectedBorderBottomStyle(isSelected)]} />
820820
</View>
821821
</View>
822822
)}
@@ -891,7 +891,7 @@ function TransactionItemRow({
891891
{!!shouldShowBottomBorder && (
892892
<View style={bgActiveStyles}>
893893
<View style={styles.ph3}>
894-
<View style={styles.borderBottom} />
894+
<View style={[StyleUtils.getSelectedBorderBottomStyle(isSelected)]} />
895895
</View>
896896
</View>
897897
)}

‎src/styles/utils/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1834,14 +1834,22 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
18341834

18351835
getSearchTableRowPressableStyle: (isLastItem?: boolean, isSelected?: boolean, padding?: {vertical?: number; horizontal?: number}): ViewStyle => ({
18361836
minHeight: variables.tableRowHeight,
1837-
borderRadius: 0,
1837+
borderTopLeftRadius: 0,
1838+
borderTopRightRadius: 0,
1839+
borderBottomLeftRadius: 0,
1840+
borderBottomRightRadius: 0,
18381841
borderBottomWidth: isLastItem ? 0 : 1,
18391842
borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
18401843
...(isLastItem ? styles.searchTableBottomRadius : {}),
18411844
...(padding?.vertical !== undefined && {paddingVertical: padding.vertical}),
18421845
...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}),
18431846
}),
18441847

1848+
getSelectedBorderBottomStyle: (isSelected?: boolean): ViewStyle => ({
1849+
...styles.borderBottom,
1850+
borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
1851+
}),
1852+
18451853
getSearchTableHighlightBorderRadius: (isLargeScreenWidth: boolean): number => (isLargeScreenWidth ? 0 : variables.componentBorderRadius),
18461854

18471855
getReportTableColumnStyles: (columnName: string, options: GetReportTableColumnStylesParams = {}): ViewStyle => {

0 commit comments

Comments
 (0)