Skip to content

Commit f1ac80d

Browse files
JS00001JS00001
authored
Merge pull request Expensify#89552 from Expensify/revert-89353-krishna2323/issue/89066
[CP Staging] Revert "Fix header border color when items are selected"
2 parents 1f7404d + 113dfb7 commit f1ac80d

8 files changed

Lines changed: 16 additions & 29 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 && StyleUtils.getSelectedBorderBottomStyle(isSelected)]}
154+
wrapperStyle={[animatedHighlightStyle, styles.userSelectNone, shouldUseNarrowLayout && !isLastItem && styles.borderBottom]}
155155
>
156156
{({hovered}) => (
157157
<TransactionItemRow

‎src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx‎

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,6 @@ 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),
184183
!isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
185184
!isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
186185
],
@@ -284,6 +283,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
284283
isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
285284
!isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
286285
!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: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ 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';
1817
import useTheme from '@hooks/useTheme';
1918
import useThemeStyles from '@hooks/useThemeStyles';
2019
import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -93,7 +92,6 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
9392
const shouldShowLoadingOnSearch = !!(!transactions?.length && transactionsSnapshotMetadata?.isLoading) || currentOffset > 0;
9493
const shouldDisplayLoadingIndicator = !isExpenseReportType && !!transactionsSnapshotMetadata?.isLoading && shouldShowLoadingOnSearch;
9594
const {isLargeScreenWidth} = useResponsiveLayout();
96-
const StyleUtils = useStyleUtils();
9795

9896
const isAmountColumnWide = transactions.some((transaction) => transaction.isAmountColumnWide);
9997
const isTaxAmountColumnWide = transactions.some((transaction) => transaction.isTaxAmountColumnWide);
@@ -226,7 +224,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
226224
isActionColumnWide={isActionColumnWide}
227225
/>
228226
</View>
229-
<View style={[StyleUtils.getSelectedBorderBottomStyle(visibleTransactions.at(0)?.isSelected), styles.ml3, styles.mr3]} />
227+
<View style={[styles.borderBottom, styles.ml3, styles.mr3]} />
230228
</>
231229
)}
232230
{visibleTransactions.map((transaction, index) => {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,6 @@ function TransactionGroupListItem<TItem extends ListItem>({
217217
...(isLastItem ? styles.searchTableBottomRadius : {}),
218218
},
219219
isItemSelected && styles.activeComponentBG,
220-
!isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected),
221220
];
222221
const pressableRef = useRef<View>(null);
223222

@@ -544,7 +543,11 @@ function TransactionGroupListItem<TItem extends ListItem>({
544543
styles.userSelectNone,
545544
isLargeScreenWidth
546545
? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden]
547-
: [isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden], isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]],
546+
: [
547+
!isFirstItem && styles.borderTop,
548+
isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
549+
isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
550+
],
548551
]}
549552
>
550553
{({hovered}) => (
@@ -555,7 +558,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
555558
onPress={onExpandIconPress}
556559
expandButtonStyle={isLargeScreenWidth ? styles.pv2 : styles.pv4Half}
557560
shouldShowToggleButton={isLargeScreenWidth}
558-
borderBottomStyle={isLargeScreenWidth ? styles.borderNone : isItemSelected && {borderColor: theme.buttonHoveredBG}}
561+
borderBottomStyle={isLargeScreenWidth && styles.borderNone}
559562
sentryLabel={CONST.SENTRY_LABEL.SEARCH.GROUP_EXPAND_TOGGLE}
560563
>
561564
<TransactionGroupListExpandedItem

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

Lines changed: 3 additions & 8 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} = useResponsiveLayout();
71+
const {isLargeScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
7272
const {currentSearchHash, currentSearchKey, currentSearchResults} = useSearchStateContext();
7373
const snapshotReport = (currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${transactionItem.reportID}`] ?? {}) as Report;
7474

@@ -122,7 +122,6 @@ 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),
126125
!isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
127126
!isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
128127
];
@@ -227,6 +226,7 @@ function TransactionListItem<TItem extends ListItem>({
227226
isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
228227
!isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
229228
!isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
229+
!isLargeScreenWidth && !isLastItem && styles.borderBottom,
230230
]}
231231
>
232232
{({hovered}) => (
@@ -262,12 +262,7 @@ function TransactionListItem<TItem extends ListItem>({
262262
isActionColumnWide={transactionItem.isActionColumnWide}
263263
shouldShowCheckbox={!!canSelectMultiple}
264264
checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
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-
]}
265+
style={[styles.p3, styles.pv2, shouldUseNarrowLayout ? [styles.p0, styles.pt3, styles.noBorderRadius] : isLargeScreenWidth && styles.noBorderRadius]}
271266
violations={transactionViolations}
272267
onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
273268
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={[StyleUtils.getSelectedBorderBottomStyle(isSelected)]} />
819+
<View style={[styles.borderBottom]} />
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={[StyleUtils.getSelectedBorderBottomStyle(isSelected)]} />
894+
<View style={styles.borderBottom} />
895895
</View>
896896
</View>
897897
)}

‎src/styles/utils/index.ts‎

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

18351835
getSearchTableRowPressableStyle: (isLastItem?: boolean, isSelected?: boolean, padding?: {vertical?: number; horizontal?: number}): ViewStyle => ({
18361836
minHeight: variables.tableRowHeight,
1837-
borderTopLeftRadius: 0,
1838-
borderTopRightRadius: 0,
1839-
borderBottomLeftRadius: 0,
1840-
borderBottomRightRadius: 0,
1837+
borderRadius: 0,
18411838
borderBottomWidth: isLastItem ? 0 : 1,
18421839
borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
18431840
...(isLastItem ? styles.searchTableBottomRadius : {}),
18441841
...(padding?.vertical !== undefined && {paddingVertical: padding.vertical}),
18451842
...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}),
18461843
}),
18471844

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

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

0 commit comments

Comments
 (0)