From 5862f006ed984ef193f5da6b56e451f45ec8c9f4 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Mon, 15 Jul 2024 04:14:31 +0530 Subject: [PATCH 1/7] fix: Individually selected expense rows in grouped reports don't have a background color applied to them. Signed-off-by: krishna2323 --- .../Search/ExpenseItemHeaderNarrow.tsx | 5 ++++- .../SelectionList/Search/ReportListItem.tsx | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx index cfffa2629f43a..911cca7f801d9 100644 --- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx +++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx @@ -1,5 +1,6 @@ import React, {memo} from 'react'; import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithFeedback} from '@components/Pressable'; @@ -20,6 +21,7 @@ type ExpenseItemHeaderNarrowProps = { participantToDisplayName: string; action?: SearchTransactionAction; transactionID?: string; + containerStyle?: StyleProp; onButtonPress: () => void; canSelectMultiple?: boolean; isSelected?: boolean; @@ -36,6 +38,7 @@ function ExpenseItemHeaderNarrow({ onButtonPress, action, canSelectMultiple, + containerStyle, isDisabledCheckbox, isSelected, isDisabled, @@ -48,7 +51,7 @@ function ExpenseItemHeaderNarrow({ const theme = useTheme(); return ( - + {canSelectMultiple && ( ({ return; } - const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, styles.ph3]; + const listItemPressableStyle = [ + styles.selectionListPressableItemWrapper, + styles.pv3, + styles.pb0, + item.isSelected && styles.activeComponentBG, + isFocused && styles.sidebarLinkActive, + styles.ph0, + styles.overflowHidden, + ]; const handleOnButtonPress = () => { onSelectRow(item); @@ -144,9 +152,10 @@ function ReportListItem({ participantToDisplayName={participantToDisplayName} action={reportItem.action} onButtonPress={handleOnButtonPress} + containerStyle={styles.ph3} /> )} - + {canSelectMultiple && ( @@ -191,11 +200,11 @@ function ReportListItem({ }} onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)} showItemHeaderOnNarrowLayout={false} - containerStyle={styles.mt3} + containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv2]} isChildListItem isDisabled={!!isDisabled} canSelectMultiple={!!canSelectMultiple} - isButtonSelected={item.isSelected} + isButtonSelected={transaction.isSelected} shouldShowTransactionCheckbox /> ))} From 41cde0a29383a9e24631446a17998b1388de9f45 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 17 Jul 2024 09:03:02 +0530 Subject: [PATCH 2/7] add padding to search list items container. Signed-off-by: krishna2323 --- src/components/SelectionList/Search/ReportListItem.tsx | 7 ++----- src/styles/index.ts | 6 ++++++ 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx index d905a43559b76..2c2e65470087c 100644 --- a/src/components/SelectionList/Search/ReportListItem.tsx +++ b/src/components/SelectionList/Search/ReportListItem.tsx @@ -73,12 +73,9 @@ function ReportListItem({ const listItemPressableStyle = [ styles.selectionListPressableItemWrapper, - styles.pv3, - styles.pb0, + styles.reportListItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, - styles.ph0, - styles.overflowHidden, ]; const handleOnButtonPress = () => { @@ -155,7 +152,7 @@ function ReportListItem({ containerStyle={styles.ph3} /> )} - + {canSelectMultiple && ( diff --git a/src/styles/index.ts b/src/styles/index.ts index 697b5c0dba65c..f86b2f32be1ea 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5101,6 +5101,12 @@ const styles = (theme: ThemeColors) => height: 172, }, + reportListItemWrapper: { + paddingVertical: 6, + paddingHorizontal: 0, + overflow: 'hidden', + }, + reportListItemTitle: { color: theme.text, fontSize: variables.fontSizeNormal, From 3682821e0994408cbdba32cd0a13107704e14045 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 17 Jul 2024 09:07:20 +0530 Subject: [PATCH 3/7] minor update. Signed-off-by: krishna2323 --- src/components/SelectionList/Search/ReportListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx index 2c2e65470087c..1a1e6d1eb713a 100644 --- a/src/components/SelectionList/Search/ReportListItem.tsx +++ b/src/components/SelectionList/Search/ReportListItem.tsx @@ -149,7 +149,7 @@ function ReportListItem({ participantToDisplayName={participantToDisplayName} action={reportItem.action} onButtonPress={handleOnButtonPress} - containerStyle={styles.ph3} + containerStyle={[styles.ph3, {paddingTop: 6}]} /> )} From 510dd09ec45204d62e27286c40ad54492e893050 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 18 Jul 2024 13:18:07 +0530 Subject: [PATCH 4/7] update spacing. Signed-off-by: krishna2323 --- src/components/SelectionList/Search/ReportListItem.tsx | 4 ++-- src/styles/index.ts | 4 ++++ src/styles/utils/spacing.ts | 4 ++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx index 1a1e6d1eb713a..c99bd9ec2eef9 100644 --- a/src/components/SelectionList/Search/ReportListItem.tsx +++ b/src/components/SelectionList/Search/ReportListItem.tsx @@ -152,8 +152,8 @@ function ReportListItem({ containerStyle={[styles.ph3, {paddingTop: 6}]} /> )} - - + + {canSelectMultiple && ( overflow: 'hidden', }, + reportListItemHeaderInner: { + minHeight: 40, + }, + reportListItemTitle: { color: theme.text, fontSize: variables.fontSizeNormal, diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index 877cffbe1292a..c420414f1ef0a 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -401,6 +401,10 @@ export default { paddingVertical: 4, }, + pv1half: { + paddingVertical: 6, + }, + pv2: { paddingVertical: 8, }, From 83eedc17d07aa04bb0c7370ccb11ae3d2ec468b9 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Thu, 18 Jul 2024 15:56:19 +0530 Subject: [PATCH 5/7] minor update. Signed-off-by: krishna2323 --- src/components/SelectionList/Search/ReportListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx index c99bd9ec2eef9..62fd527d02d8c 100644 --- a/src/components/SelectionList/Search/ReportListItem.tsx +++ b/src/components/SelectionList/Search/ReportListItem.tsx @@ -197,7 +197,7 @@ function ReportListItem({ }} onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)} showItemHeaderOnNarrowLayout={false} - containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv2]} + containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv1half]} isChildListItem isDisabled={!!isDisabled} canSelectMultiple={!!canSelectMultiple} From 9b6c4bfcba78e474427c8525df889da747729f67 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Fri, 19 Jul 2024 06:44:08 +0530 Subject: [PATCH 6/7] fix: spacing for mobile width. Signed-off-by: krishna2323 --- .../SelectionList/Search/ExpenseItemHeaderNarrow.tsx | 2 +- .../SelectionList/Search/ReportListItem.tsx | 12 +++++++----- src/styles/index.ts | 10 ---------- src/styles/utils/spacing.ts | 10 +++++++++- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx index 911cca7f801d9..63ae6b1579caf 100644 --- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx +++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx @@ -51,7 +51,7 @@ function ExpenseItemHeaderNarrow({ const theme = useTheme(); return ( - + {canSelectMultiple && ( ({ const listItemPressableStyle = [ styles.selectionListPressableItemWrapper, - styles.reportListItemWrapper, + styles.pv2half, + styles.ph0, + styles.overflowHidden, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, ]; @@ -149,11 +151,11 @@ function ReportListItem({ participantToDisplayName={participantToDisplayName} action={reportItem.action} onButtonPress={handleOnButtonPress} - containerStyle={[styles.ph3, {paddingTop: 6}]} + containerStyle={[styles.ph3, styles.pt2half, styles.mb2half]} /> )} - - + + {canSelectMultiple && ( ({ }} onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)} showItemHeaderOnNarrowLayout={false} - containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv1half]} + containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv2half]} isChildListItem isDisabled={!!isDisabled} canSelectMultiple={!!canSelectMultiple} diff --git a/src/styles/index.ts b/src/styles/index.ts index 77b2733ed58bb..697b5c0dba65c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5101,16 +5101,6 @@ const styles = (theme: ThemeColors) => height: 172, }, - reportListItemWrapper: { - paddingVertical: 6, - paddingHorizontal: 0, - overflow: 'hidden', - }, - - reportListItemHeaderInner: { - minHeight: 40, - }, - reportListItemTitle: { color: theme.text, fontSize: variables.fontSizeNormal, diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index c420414f1ef0a..55aad5150a0cf 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -287,6 +287,10 @@ export default { marginBottom: 4, }, + mb2half: { + marginBottom: 6, + }, + mb2: { marginBottom: 8, }, @@ -401,7 +405,7 @@ export default { paddingVertical: 4, }, - pv1half: { + pv2half: { paddingVertical: 6, }, @@ -553,6 +557,10 @@ export default { paddingTop: 4, }, + pt2half: { + paddingTop: 6, + }, + pt2: { paddingTop: 8, }, From 1f07cb5c60add125109aecc70db301d5a05d64a0 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 23 Jul 2024 16:02:21 +0530 Subject: [PATCH 7/7] minor update. Signed-off-by: krishna2323 --- src/components/SelectionList/Search/ReportListItem.tsx | 8 ++++---- src/styles/utils/spacing.ts | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx index a00f93482ce68..be8ddfe438222 100644 --- a/src/components/SelectionList/Search/ReportListItem.tsx +++ b/src/components/SelectionList/Search/ReportListItem.tsx @@ -73,7 +73,7 @@ function ReportListItem({ const listItemPressableStyle = [ styles.selectionListPressableItemWrapper, - styles.pv2half, + styles.pv1half, styles.ph0, styles.overflowHidden, item.isSelected && styles.activeComponentBG, @@ -151,10 +151,10 @@ function ReportListItem({ participantToDisplayName={participantToDisplayName} action={reportItem.action} onButtonPress={handleOnButtonPress} - containerStyle={[styles.ph3, styles.pt2half, styles.mb2half]} + containerStyle={[styles.ph3, styles.pt1half, styles.mb1half]} /> )} - + {canSelectMultiple && ( @@ -200,7 +200,7 @@ function ReportListItem({ }} onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)} showItemHeaderOnNarrowLayout={false} - containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv2half]} + containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv1half]} isChildListItem isDisabled={!!isDisabled} canSelectMultiple={!!canSelectMultiple} diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index 55aad5150a0cf..5b416f5a120e3 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -287,7 +287,7 @@ export default { marginBottom: 4, }, - mb2half: { + mb1half: { marginBottom: 6, }, @@ -405,7 +405,7 @@ export default { paddingVertical: 4, }, - pv2half: { + pv1half: { paddingVertical: 6, }, @@ -557,7 +557,7 @@ export default { paddingTop: 4, }, - pt2half: { + pt1half: { paddingTop: 6, },