From c1394351aa4896213ee3febbd4620c8b99cefdf2 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 05:33:53 +0700
Subject: [PATCH 01/14] Feat: Update font
---
.../SelectionList/Search/ReportListItem.tsx | 2 +-
.../SelectionList/Search/TextWithIconCell.tsx | 6 +++--
.../Search/TransactionListItemRow.tsx | 22 ++++++++++++-------
.../SelectionList/Search/UserInfoCell.tsx | 8 ++++---
src/styles/index.ts | 14 +++++++++---
5 files changed, 35 insertions(+), 17 deletions(-)
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 2273b80e529d..77a64cc9c86f 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -40,7 +40,7 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? -1 : 1) * (reportItem?.total ?? 0), reportItem?.currency)}
- style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+ style={[styles.optionDisplayName, styles.fontSizeNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
/>
);
}
diff --git a/src/components/SelectionList/Search/TextWithIconCell.tsx b/src/components/SelectionList/Search/TextWithIconCell.tsx
index bd51133a362f..8cfbe0933d00 100644
--- a/src/components/SelectionList/Search/TextWithIconCell.tsx
+++ b/src/components/SelectionList/Search/TextWithIconCell.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import {View} from 'react-native';
+import type {StyleProp, TextStyle} from 'react-native';
import Icon from '@components/Icon';
import Text from '@components/Text';
import Tooltip from '@components/Tooltip';
@@ -11,9 +12,10 @@ type TextWithIconCellProps = {
icon: IconAsset;
text?: string;
showTooltip: boolean;
+ textStyle?: StyleProp<TextStyle>;
};
-export default function TextWithIconCell({icon, text, showTooltip}: TextWithIconCellProps) {
+export default function TextWithIconCell({icon, text, showTooltip, textStyle}: TextWithIconCellProps) {
const styles = useThemeStyles();
const theme = useTheme();
@@ -35,7 +37,7 @@ export default function TextWithIconCell({icon, text, showTooltip}: TextWithIcon
/>
<Text
numberOfLines={1}
- style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textMicro, styles.textSupporting, styles.flexShrink1]}
+ style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textMicro, styles.textSupporting, styles.flexShrink1, textStyle]}
>
{text}
</Text>
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index d17d923a54e1..115038007420 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -93,20 +93,19 @@ function DateCell({transactionItem, showTooltip, isLargeScreenWidth}: Transactio
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={date}
- style={[styles.label, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]}
+ style={[styles.lineHeightLarge, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : [styles.textMicro, styles.textSupporting]]}
/>
);
}
-function MerchantCell({transactionItem, showTooltip}: TransactionCellProps) {
+function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: TransactionCellProps) {
const styles = useThemeStyles();
const description = TransactionUtils.getDescription(transactionItem);
-
return (
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description}
- style={[styles.label, styles.pre, styles.justifyContentCenter]}
+ style={[isLargeScreenWidth && styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
/>
);
}
@@ -119,7 +118,12 @@ function TotalCell({showTooltip, isLargeScreenWidth, transactionItem, isChildLis
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={CurrencyUtils.convertToDisplayString(transactionItem.formattedTotal, currency)}
- style={[styles.optionDisplayName, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight, isChildListItem ? styles.label : undefined]}
+ style={[
+ styles.optionDisplayName,
+ styles.justifyContentCenter,
+ isLargeScreenWidth ? undefined : styles.textAlignRight,
+ isLargeScreenWidth && isChildListItem ? styles.label : undefined,
+ ]}
/>
);
}
@@ -159,13 +163,14 @@ function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: Transa
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={transactionItem?.category}
- style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+ style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
/>
) : (
<TextWithIconCell
icon={Expensicons.Folder}
showTooltip={showTooltip}
text={transactionItem?.category}
+ textStyle={[styles.textMicro]}
/>
);
}
@@ -176,13 +181,14 @@ function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: Transaction
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={TransactionUtils.getTagForDisplay(transactionItem)}
- style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter]}
+ style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
/>
) : (
<TextWithIconCell
icon={Expensicons.Tag}
showTooltip={showTooltip}
text={TransactionUtils.getTagForDisplay(transactionItem)}
+ textStyle={[styles.textMicro]}
/>
);
}
@@ -198,7 +204,7 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={CurrencyUtils.convertToDisplayString(taxAmount, currency)}
- style={[styles.optionDisplayName, styles.label, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
+ style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
/>
);
}
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index eb67f121c298..834cdbc23a4e 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
import Avatar from '@components/Avatar';
import Text from '@components/Text';
import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
import CONST from '@src/CONST';
import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
@@ -13,13 +14,13 @@ type UserInfoCellProps = {
function UserInfoCell({participant, displayName}: UserInfoCellProps) {
const styles = useThemeStyles();
-
+ const {isLargeScreenWidth} = useWindowDimensions();
const avatarURL = participant?.avatarURL ?? participant?.avatar;
const isWorkspace = participant?.avatarURL !== undefined;
const iconType = isWorkspace ? CONST.ICON_TYPE_WORKSPACE : CONST.ICON_TYPE_AVATAR;
return (
- <View style={[styles.flexRow, styles.gap1, styles.alignItemsCenter]}>
+ <View style={[styles.flexRow, styles.alignItemsCenter]}>
<Avatar
imageStyles={[styles.alignSelfCenter]}
size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
@@ -27,10 +28,11 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
name={displayName}
type={iconType}
avatarID={isWorkspace ? participant?.id : participant?.accountID}
+ containerStyles={[styles.pr2]}
/>
<Text
numberOfLines={1}
- style={[styles.textMicroBold, styles.flexShrink1]}
+ style={[isLargeScreenWidth ? styles.textBold : styles.textBold, styles.flexShrink1]}
>
{displayName}
</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 2b20c608085f..ae8fd480cec9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -363,7 +363,9 @@ const styles = (theme: ThemeColors) =>
verticalAlignTop: {
verticalAlign: 'top',
},
-
+ lineHeightLarge: {
+ lineHeight: variables.lineHeightLarge,
+ },
label: {
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightLarge,
@@ -405,7 +407,11 @@ const styles = (theme: ThemeColors) =>
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
-
+ textBold: {
+ color: theme.text,
+ fontWeight: FontUtils.fontWeight.bold,
+ lineHeight: variables.lineHeightSmall,
+ },
textMicroSupporting: {
color: theme.textSupporting,
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
@@ -445,7 +451,9 @@ const styles = (theme: ThemeColors) =>
fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
lineHeight: variables.lineHeightHero,
},
-
+ fontSizeNormal: {
+ fontSize: variables.fontSizeNormal,
+ },
textNewKansasNormal: {
fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
fontSize: variables.fontSizeNormal,
From 1e978e5ae20bf94b917d9823185b20ed224e91a3 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 05:39:02 +0700
Subject: [PATCH 02/14] Fix: use textMico
---
src/components/SelectionList/Search/UserInfoCell.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index 834cdbc23a4e..b6c6682d2e29 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -32,7 +32,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
/>
<Text
numberOfLines={1}
- style={[isLargeScreenWidth ? styles.textBold : styles.textBold, styles.flexShrink1]}
+ style={[isLargeScreenWidth ? styles.textBold : styles.textMicro, styles.flexShrink1]}
>
{displayName}
</Text>
From f13e7ff06f4f1a3b16f4022e2153ae6b903ec238 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 05:54:03 +0700
Subject: [PATCH 03/14] Fix: Lint
---
src/styles/index.ts | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ae8fd480cec9..b74dec835774 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -451,13 +451,10 @@ const styles = (theme: ThemeColors) =>
fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
lineHeight: variables.lineHeightHero,
},
+
fontSizeNormal: {
fontSize: variables.fontSizeNormal,
},
- textNewKansasNormal: {
- fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
- fontSize: variables.fontSizeNormal,
- },
textStrong: {
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
From dd7fccc554e5454de6c174cd8ceb85b9ae877cc8 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 16:33:06 +0700
Subject: [PATCH 04/14] Fix: Remove fontSizeNormal
---
src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
src/styles/index.ts | 4 ----
2 files changed, 1 insertion(+), 5 deletions(-)
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 77a64cc9c86f..313794eb2064 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -40,7 +40,7 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? -1 : 1) * (reportItem?.total ?? 0), reportItem?.currency)}
- style={[styles.optionDisplayName, styles.fontSizeNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+ style={[styles.optionDisplayName, styles.textNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
/>
);
}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b74dec835774..c4d688e664fc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -452,10 +452,6 @@ const styles = (theme: ThemeColors) =>
lineHeight: variables.lineHeightHero,
},
- fontSizeNormal: {
- fontSize: variables.fontSizeNormal,
- },
-
textStrong: {
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
fontWeight: FontUtils.fontWeight.bold,
From b31b5c2870e729965421591eab47bfe51ff46c39 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 14 Jun 2024 17:44:20 +0700
Subject: [PATCH 05/14] Fix: Remove bold style in desktop
---
src/components/SelectionList/Search/UserInfoCell.tsx | 2 +-
src/styles/index.ts | 10 +++++-----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index b6c6682d2e29..28821a3f6f5c 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -32,7 +32,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
/>
<Text
numberOfLines={1}
- style={[isLargeScreenWidth ? styles.textBold : styles.textMicro, styles.flexShrink1]}
+ style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicro, styles.flexShrink1]}
>
{displayName}
</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c4d688e664fc..ca6562eae7d5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -377,6 +377,10 @@ const styles = (theme: ThemeColors) =>
lineHeight: variables.lineHeightLarge,
},
+ themeTextColor: {
+ color: theme.text,
+ },
+
mutedTextLabel: {
color: theme.textSupporting,
fontSize: variables.fontSizeLabel,
@@ -407,11 +411,7 @@ const styles = (theme: ThemeColors) =>
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
- textBold: {
- color: theme.text,
- fontWeight: FontUtils.fontWeight.bold,
- lineHeight: variables.lineHeightSmall,
- },
+
textMicroSupporting: {
color: theme.textSupporting,
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE,
From a0953d58254f2d4ca2d67666a0ad5f33b9dfe805 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Tue, 18 Jun 2024 15:34:44 +0700
Subject: [PATCH 06/14] Fix: Remove category min line height
---
.../SelectionList/Search/TransactionListItemRow.tsx | 2 +-
src/styles/index.ts | 4 ++++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index ae8466e5a39e..e6cbc5949010 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -180,7 +180,7 @@ function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: Transa
icon={Expensicons.Folder}
showTooltip={showTooltip}
text={transactionItem?.category}
- textStyle={[styles.textMicro]}
+ textStyle={[styles.textMicro, styles.minHeight0]}
/>
);
}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 91c49704464f..c8173a2d6ebb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1388,6 +1388,10 @@ const styles = (theme: ThemeColors) =>
color: theme.textSupporting,
},
+ minHeight0: {
+ minHeight: 0,
+ },
+
lh14: {
lineHeight: variables.lineHeightSmall,
},
From 494db473237c86d67b059fc5ac08a11bf071d3a8 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 19 Jun 2024 15:35:41 +0700
Subject: [PATCH 07/14] Fix: Comment
---
.../SelectionList/Search/ExpenseItemHeaderNarrow.tsx | 2 +-
.../SelectionList/Search/TransactionListItemRow.tsx | 4 ++--
src/styles/utils/index.ts | 2 +-
src/styles/variables.ts | 1 +
4 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index cea9c174dda5..12c7cb7e67af 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -26,7 +26,7 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
return (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb2, styles.gap2]}>
- <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.flex1]}>
+ <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.flex1]}>
<View style={[styles.mw50]}>
<UserInfoCell
participant={participantFrom}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index e6cbc5949010..4e9b29b5911f 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -198,7 +198,7 @@ function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: Transaction
icon={Expensicons.Tag}
showTooltip={showTooltip}
text={TransactionUtils.getTagForDisplay(transactionItem)}
- textStyle={[styles.textMicro]}
+ textStyle={[styles.textMicro, styles.minHeight0]}
/>
);
}
@@ -271,7 +271,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
isLargeScreenWidth={isLargeScreenWidth}
isChildListItem={isChildListItem}
/>
- <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter]}>
+ <View style={[styles.flexRow, styles.gap1, styles.justifyContentCenter, styles.alignItemsCenter]}>
<TypeCell
transactionItem={item}
isLargeScreenWidth={isLargeScreenWidth}
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 44c40e17d60e..5097f615307b 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1559,7 +1559,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter};
break;
case CONST.SEARCH_TABLE_COLUMNS.DATE:
- columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w80 : variables.w44);
+ columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w80 : variables.w50);
break;
case CONST.SEARCH_TABLE_COLUMNS.MERCHANT:
case CONST.SEARCH_TABLE_COLUMNS.FROM:
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index df5176adff9f..c99b5340f53b 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -245,6 +245,7 @@ export default {
w36: 36,
w40: 40,
w44: 44,
+ w50: 50,
w80: 80,
w96: 96,
} as const;
From 60bc6408ba11688a7fe0fc6613f373585170739b Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 19 Jun 2024 17:17:44 +0700
Subject: [PATCH 08/14] Fix: Comment
---
.../SelectionList/Search/TransactionListItemRow.tsx | 4 ++--
src/styles/utils/index.ts | 2 +-
src/styles/variables.ts | 2 +-
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 4e9b29b5911f..dd2e5e429e0c 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -115,7 +115,7 @@ function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: Transa
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description}
- style={[isLargeScreenWidth && styles.lineHeightLarge, styles.pre, styles.justifyContentCenter]}
+ style={[isLargeScreenWidth ? styles.lineHeightLarge : styles.lh20, styles.pre, styles.justifyContentCenter]}
/>
);
}
@@ -264,7 +264,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
/>
</View>
</View>
- <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1]}>
+ <View style={[styles.alignItemsEnd, styles.flex1, styles.gap1, styles.justifyContentBetween]}>
<TotalCell
showTooltip={showTooltip}
transactionItem={item}
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 5097f615307b..c945e0e0ae9f 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1575,7 +1575,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
columnWidth = {...getWidthStyle(variables.w96), ...styles.alignItemsEnd};
break;
case CONST.SEARCH_TABLE_COLUMNS.TYPE:
- columnWidth = {...getWidthStyle(variables.w44), ...styles.alignItemsCenter};
+ columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter};
break;
case CONST.SEARCH_TABLE_COLUMNS.ACTION:
columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c99b5340f53b..21c64c5ef835 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -239,7 +239,7 @@ export default {
eReceiptBackgroundImageMinWidth: 217,
searchTypeColumnWidth: 52,
-
+ w20: 20,
h36: 36,
w28: 28,
w36: 36,
From 60b09dbbcacd91851b75ae1358f75f558326ebc9 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 20 Jun 2024 15:13:02 +0700
Subject: [PATCH 09/14] Fix: Update date width
---
src/styles/utils/index.ts | 2 +-
src/styles/variables.ts | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index c945e0e0ae9f..b034b33c0099 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1559,7 +1559,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter};
break;
case CONST.SEARCH_TABLE_COLUMNS.DATE:
- columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w80 : variables.w50);
+ columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w84 : variables.w52);
break;
case CONST.SEARCH_TABLE_COLUMNS.MERCHANT:
case CONST.SEARCH_TABLE_COLUMNS.FROM:
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 21c64c5ef835..0906ac36eb9b 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -245,7 +245,8 @@ export default {
w36: 36,
w40: 40,
w44: 44,
- w50: 50,
+ w52: 52,
w80: 80,
+ w84: 84,
w96: 96,
} as const;
From 85a8a0637ad8d5977bb050d9ea6cf7f0c8526198 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 21 Jun 2024 11:26:08 +0700
Subject: [PATCH 10/14] Fix: Incorrect total amount font
---
.../SelectionList/Search/TransactionListItemRow.tsx | 11 +++--------
src/styles/index.ts | 4 ----
src/styles/utils/sizing.ts | 4 ++++
3 files changed, 7 insertions(+), 12 deletions(-)
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index dd2e5e429e0c..66067f419418 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -128,12 +128,7 @@ function TotalCell({showTooltip, isLargeScreenWidth, transactionItem, isChildLis
<TextWithTooltip
shouldShowTooltip={showTooltip}
text={CurrencyUtils.convertToDisplayString(transactionItem.formattedTotal, currency)}
- style={[
- styles.optionDisplayName,
- styles.justifyContentCenter,
- isLargeScreenWidth ? undefined : styles.textAlignRight,
- isLargeScreenWidth && isChildListItem ? styles.label : undefined,
- ]}
+ style={[styles.optionDisplayName, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
/>
);
}
@@ -180,7 +175,7 @@ function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: Transa
icon={Expensicons.Folder}
showTooltip={showTooltip}
text={transactionItem?.category}
- textStyle={[styles.textMicro, styles.minHeight0]}
+ textStyle={[styles.textMicro, styles.mnh0]}
/>
);
}
@@ -198,7 +193,7 @@ function TagCell({isLargeScreenWidth, showTooltip, transactionItem}: Transaction
icon={Expensicons.Tag}
showTooltip={showTooltip}
text={TransactionUtils.getTagForDisplay(transactionItem)}
- textStyle={[styles.textMicro, styles.minHeight0]}
+ textStyle={[styles.textMicro, styles.mnh0]}
/>
);
}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d664a5c186bb..81f5ab38543c 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1386,10 +1386,6 @@ const styles = (theme: ThemeColors) =>
color: theme.textSupporting,
},
- minHeight0: {
- minHeight: 0,
- },
-
lh14: {
lineHeight: variables.lineHeightSmall,
},
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index bde2837f16ba..d0855b47f2bd 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -42,6 +42,10 @@ export default {
minHeight: 80,
},
+ mnh0: {
+ minHeight: 0,
+ },
+
mnw2: {
minWidth: 8,
},
From b73c088cec22c833483a1e0461ff85b9cbfc0dda Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 21 Jun 2024 11:37:31 +0700
Subject: [PATCH 11/14] Fix lint
---
src/components/SelectionList/Search/TransactionListItemRow.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 66067f419418..f1122b1fcfa7 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -120,7 +120,7 @@ function MerchantCell({transactionItem, showTooltip, isLargeScreenWidth}: Transa
);
}
-function TotalCell({showTooltip, isLargeScreenWidth, transactionItem, isChildListItem}: TotalCellProps) {
+function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TotalCellProps) {
const styles = useThemeStyles();
const currency = TransactionUtils.getCurrency(transactionItem);
From b7122c013dd9913985c7c4ec4f048c31cc22a5d0 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 21 Jun 2024 11:45:56 +0700
Subject: [PATCH 12/14] Fix: Lint
---
src/components/SelectionList/Search/TransactionListItemRow.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index f1122b1fcfa7..0099aaf64625 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -39,6 +39,7 @@ type ActionCellProps = {
} & CellProps;
type TotalCellProps = {
+ // eslint-disable-next-line react/no-unused-prop-types
isChildListItem: boolean;
} & TransactionCellProps;
From b0c08f89f13f8516631ec69410c032c0d2102c86 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 21 Jun 2024 16:29:26 +0700
Subject: [PATCH 13/14] Fix: Using margin bottom 16
---
src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 12c7cb7e67af..c3f2529b04e8 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -25,7 +25,7 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
const theme = useTheme();
return (
- <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb2, styles.gap2]}>
+ <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb4, styles.gap2]}>
<View style={[styles.flexRow, styles.alignItemsCenter, styles.gap2, styles.flex1]}>
<View style={[styles.mw50]}>
<UserInfoCell
From bbc60667223c7141ebc2800b1432796faaf11de6 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Fri, 21 Jun 2024 16:59:14 +0700
Subject: [PATCH 14/14] Fix: Add bold style
---
src/components/SelectionList/Search/UserInfoCell.tsx | 2 +-
src/styles/index.ts | 4 ++++
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/src/components/SelectionList/Search/UserInfoCell.tsx b/src/components/SelectionList/Search/UserInfoCell.tsx
index 28821a3f6f5c..2a5a7da51979 100644
--- a/src/components/SelectionList/Search/UserInfoCell.tsx
+++ b/src/components/SelectionList/Search/UserInfoCell.tsx
@@ -32,7 +32,7 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
/>
<Text
numberOfLines={1}
- style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicro, styles.flexShrink1]}
+ style={[isLargeScreenWidth ? styles.themeTextColor : [styles.textMicro, styles.textBold], styles.flexShrink1]}
>
{displayName}
</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 81f5ab38543c..754e5728b702 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -491,6 +491,10 @@ const styles = (theme: ThemeColors) =>
color: theme.link,
},
+ textBold: {
+ fontWeight: FontUtils.fontWeight.bold,
+ },
+
textVersion: {
color: theme.iconColorfulBackground,
fontSize: variables.fontSizeNormal,