Feat: Update font

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]}
         />
     );
 }

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>

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]}
         />
     );
 }

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.textBold : styles.textMicro, styles.flexShrink1]}
             >
                 {displayName}
             </Text>

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,
@@ -446,8 +452,7 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightHero,
         },
 
-        textNewKansasNormal: {
-            fontFamily: FontUtils.fontFamily.platform.EXP_NEW_KANSAS_MEDIUM,
+        fontSizeNormal: {
             fontSize: variables.fontSizeNormal,
         },