Merge pull request #52529 from nkdengineer/fix/52370

Fix workspace card list style
Expensify · Nov 15, 2024 · 09f6db7 · 09f6db7
2 parents 9228354 + ae29f3a
commit 09f6db7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx
@@ -45,8 +45,8 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
                 />
             </View>
 
-            <View style={[styles.flexRow, styles.mh5, styles.gap5, styles.p4]}>
-                <View style={[styles.flexRow, styles.flex5, styles.gap2, styles.alignItemsCenter]}>
+            <View style={[styles.flexRow, styles.mh5, styles.gap2, styles.p4]}>
+                <View style={[styles.flexRow, styles.flex4, styles.gap2, styles.alignItemsCenter]}>
                     <Text
                         numberOfLines={1}
                         style={[styles.textLabelSupporting, styles.lh16]}
@@ -64,7 +64,15 @@ function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) {
                         </Text>
                     </View>
                 )}
-                <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout ? styles.flex2 : styles.flex1, styles.alignItemsCenter, styles.justifyContentStart]}>
+                <View
+                    style={[
+                        styles.flexRow,
+                        styles.gap2,
+                        shouldUseNarrowLayout ? styles.flex2 : styles.flex1,
+                        styles.alignItemsCenter,
+                        shouldUseNarrowLayout ? styles.justifyContentCenter : styles.justifyContentStart,
+                    ]}
+                >
                     <Text
                         numberOfLines={1}
                         style={[styles.textLabelSupporting, styles.lh16]}

diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx
@@ -39,8 +39,8 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i
     const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]);
     const cardType = isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical');
     return (
-        <View style={[styles.flexRow, styles.gap5, styles.br3, styles.p4]}>
-            <View style={[styles.flexRow, styles.flex5, styles.gap3, styles.alignItemsCenter]}>
+        <View style={[styles.flexRow, styles.gap3, styles.br3, styles.p4]}>
+            <View style={[styles.flexRow, styles.flex4, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
                     source={cardholder?.avatar ?? FallbackAvatar}
                     avatarID={cardholder?.accountID}
@@ -66,13 +66,21 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i
                 <View style={[styles.flexRow, styles.gap2, styles.flex1, styles.alignItemsCenter, styles.justifyContentStart]}>
                     <Text
                         numberOfLines={1}
-                        style={[styles.textNormalThemeText]}
+                        style={[styles.textNormalThemeText, styles.lh16]}
                     >
                         {cardType}
                     </Text>
                 </View>
             )}
-            <View style={[styles.flexRow, styles.gap2, shouldUseNarrowLayout ? styles.flex2 : styles.flex1, styles.alignItemsCenter, styles.justifyContentStart]}>
+            <View
+                style={[
+                    styles.flexRow,
+                    styles.gap2,
+                    shouldUseNarrowLayout ? styles.flex2 : styles.flex1,
+                    shouldUseNarrowLayout ? styles.alignItemsStart : styles.alignItemsCenter,
+                    shouldUseNarrowLayout ? styles.justifyContentCenter : styles.justifyContentStart,
+                ]}
+            >
                 <Text
                     numberOfLines={1}
                     style={[styles.textNormalThemeText]}
@@ -86,24 +94,22 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i
                     shouldUseNarrowLayout ? styles.flex3 : styles.flex1,
                     !shouldUseNarrowLayout && styles.gap2,
                     !shouldUseNarrowLayout ? styles.alignItemsCenter : styles.alignItemsEnd,
-                    styles.justifyContentEnd,
+                    shouldUseNarrowLayout ? styles.justifyContentStart : styles.justifyContentEnd,
                 ]}
             >
                 <Text
                     numberOfLines={1}
                     style={[styles.textNormalThemeText]}
                 >
-                    {CurrencyUtils.convertToDisplayString(limit, currency)}
+                    {CurrencyUtils.convertToShortDisplayString(limit, currency)}
                 </Text>
                 {shouldUseNarrowLayout && (
-                    <View style={[styles.flexRow, styles.gap2, styles.flex1, styles.alignItemsCenter, styles.justifyContentStart]}>
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textLabelSupporting]}
-                        >
-                            {cardType}
-                        </Text>
-                    </View>
+                    <Text
+                        numberOfLines={1}
+                        style={[styles.textLabelSupporting, styles.lh16]}
+                    >
+                        {cardType}
+                    </Text>
                 )}
             </View>
         </View>