Merge pull request #43733 from truph01/fix/43512

Feat: Update font
Expensify · Jun 21, 2024 · 2c9ad92 · 2c9ad92
2 parents e45d519 + bbc6066
commit 2c9ad92
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 28 deletions.
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -25,8 +25,8 @@ 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.flexRow, styles.alignItemsCenter, styles.gap1, styles.flex1]}>
+        <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
                         participant={participantFrom}

diff --git 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.textNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
         />
     );
 }

diff --git 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
@@ -39,6 +39,7 @@ type ActionCellProps = {
 } & CellProps;
 
 type TotalCellProps = {
+    // eslint-disable-next-line react/no-unused-prop-types
     isChildListItem: boolean;
 } & TransactionCellProps;
 
@@ -103,33 +104,32 @@ 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.lh20, styles.pre, styles.justifyContentCenter]}
         />
     );
 }
 
-function TotalCell({showTooltip, isLargeScreenWidth, transactionItem, isChildListItem}: TotalCellProps) {
+function TotalCell({showTooltip, isLargeScreenWidth, transactionItem}: TotalCellProps) {
     const styles = useThemeStyles();
     const currency = TransactionUtils.getCurrency(transactionItem);
 
     return (
         <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]}
         />
     );
 }
@@ -169,13 +169,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, styles.mnh0]}
         />
     );
 }
@@ -186,13 +187,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, styles.mnh0]}
         />
     );
 }
@@ -208,7 +210,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]}
         />
     );
 }
@@ -258,14 +260,14 @@ 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}
                             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/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,24 +14,25 @@ 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}
                 source={avatarURL}
                 name={displayName}
                 type={iconType}
                 avatarID={isWorkspace ? participant?.id : participant?.accountID}
+                containerStyles={[styles.pr2]}
             />
             <Text
                 numberOfLines={1}
-                style={[styles.textMicroBold, 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
@@ -361,7 +361,9 @@ const styles = (theme: ThemeColors) =>
         verticalAlignTop: {
             verticalAlign: 'top',
         },
-
+        lineHeightLarge: {
+            lineHeight: variables.lineHeightLarge,
+        },
         label: {
             fontSize: variables.fontSizeLabel,
             lineHeight: variables.lineHeightLarge,
@@ -373,6 +375,10 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightLarge,
         },
 
+        themeTextColor: {
+            color: theme.text,
+        },
+
         mutedTextLabel: {
             color: theme.textSupporting,
             fontSize: variables.fontSizeLabel,
@@ -444,11 +450,6 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightHero,
         },
 
-        textNewKansasNormal: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
-            fontSize: variables.fontSizeNormal,
-        },
-
         textStrong: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontWeight: FontUtils.fontWeight.bold,
@@ -490,6 +491,10 @@ const styles = (theme: ThemeColors) =>
             color: theme.link,
         },
 
+        textBold: {
+            fontWeight: FontUtils.fontWeight.bold,
+        },
+
         textVersion: {
             color: theme.iconColorfulBackground,
             fontSize: variables.fontSizeNormal,

diff --git 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.w84 : variables.w52);
                 break;
             case CONST.SEARCH_TABLE_COLUMNS.MERCHANT:
             case CONST.SEARCH_TABLE_COLUMNS.FROM:
@@ -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/utils/sizing.ts b/src/styles/utils/sizing.ts
@@ -42,6 +42,10 @@ export default {
         minHeight: 80,
     },
 
+    mnh0: {
+        minHeight: 0,
+    },
+
     mnw2: {
         minWidth: 8,
     },

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -239,12 +239,14 @@ export default {
     eReceiptBackgroundImageMinWidth: 217,
 
     searchTypeColumnWidth: 52,
-
+    w20: 20,
     h36: 36,
     w28: 28,
     w36: 36,
     w40: 40,
     w44: 44,
+    w52: 52,
     w80: 80,
+    w84: 84,
     w96: 96,
 } as const;