From 08452adb5f3bcf749d46da76d6c78f8323df19c6 Mon Sep 17 00:00:00 2001
From: Carlos Martins <cmartins@expensify.com>
Date: Thu, 14 Mar 2024 11:51:45 -0600
Subject: [PATCH] Merge pull request #38275 from
 narefyev91/fix-icons-regressions

[CP Staging] Fix icons after regression

(cherry picked from commit 5f086a9bfae35c7d029be115f81afd5de3d48860)
---
 src/components/AvatarCropModal/AvatarCropModal.tsx   |  3 +--
 src/components/Button/index.tsx                      |  1 +
 .../DistanceRequest/DistanceRequestFooter.tsx        |  2 +-
 src/components/Icon/index.tsx                        |  6 +++++-
 src/pages/ReimbursementAccount/BankAccountStep.js    |  3 ++-
 .../ConnectBankAccount/components/FinishChatCard.tsx |  3 ++-
 .../workspace/categories/WorkspaceCategoriesPage.tsx |  3 +--
 src/pages/workspace/tags/WorkspaceTagsPage.tsx       |  3 +--
 src/styles/index.ts                                  |  7 +++++++
 src/styles/utils/index.ts                            | 12 ++++++++----
 src/styles/utils/sizing.ts                           |  4 ++++
 src/styles/utils/spacing.ts                          |  4 ++++
 src/styles/variables.ts                              |  1 +
 13 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx
index 2998b2258ef1..eac41b6d627a 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.tsx
+++ b/src/components/AvatarCropModal/AvatarCropModal.tsx
@@ -404,9 +404,8 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                                 >
                                     <View>
                                         <Button
-                                            medium
                                             icon={Expensicons.Rotate}
-                                            iconFill={theme.inverse}
+                                            iconFill={theme.icon}
                                             onPress={rotateImage}
                                         />
                                     </View>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 17d58f5abaf2..3abc5b17ae80 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -241,6 +241,7 @@ function Button(
                             <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}
+                                    hasText={!!text}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
                                     medium={medium}
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx
index f86d5369d4ac..624ea940888b 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.tsx
+++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx
@@ -96,7 +96,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
                         onPress={() => navigateToWaypointEditPage(Object.keys(transaction?.comment?.waypoints ?? {}).length)}
                         text={translate('distance.addStop')}
                         isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
-                        innerStyles={[styles.ph10]}
+                        innerStyles={[styles.pl10, styles.pr10]}
                     />
                 </View>
             )}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index e4484980fff1..b4da5c0b0fa2 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -40,6 +40,9 @@ type IconProps = {
     /** Is icon pressed */
     pressed?: boolean;
 
+    /** Is icon will be used with text */
+    hasText?: boolean;
+
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
 
@@ -56,6 +59,7 @@ function Icon({
     height = variables.iconSizeNormal,
     fill = undefined,
     small = false,
+    hasText = false,
     large = false,
     medium = false,
     inline = false,
@@ -67,7 +71,7 @@ function Icon({
 }: IconProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
-    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, hasText);
     const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
 
     if (inline) {
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index ea652b6d7eb0..666e233196b6 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -135,6 +135,7 @@ function BankAccountStep(props) {
                         )}
                         <Button
                             icon={Expensicons.Bank}
+                            iconStyles={[styles.customMarginButtonWithMenuItem]}
                             text={props.translate('bankAccount.connectOnlineWithPlaid')}
                             onPress={() => {
                                 if (props.isPlaidDisabled || !props.user.validated) {
@@ -147,7 +148,7 @@ function BankAccountStep(props) {
                             style={[styles.mt4]}
                             shouldShowRightIcon
                             success
-                            large
+                            innerStyles={[styles.pr2, styles.pl4, styles.h13]}
                         />
                         {Boolean(props.error) && <Text style={[styles.formError, styles.mh5]}>{props.error}</Text>}
                         <View style={[styles.mv3]}>
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
index 8d7c147572f0..7ecf9b9ad253 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
@@ -39,12 +39,13 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
             >
                 <Text style={styles.mb6}>{translate('connectBankAccountStep.letsChatText')}</Text>
                 <Button
+                    iconStyles={[styles.customMarginButtonWithMenuItem]}
                     text={translate('connectBankAccountStep.letsChatCTA')}
                     onPress={handleNavigateToConciergeChat}
                     icon={Expensicons.ChatBubble}
                     shouldShowRightIcon
-                    large
                     success
+                    innerStyles={[styles.pr2, styles.pl4, styles.h13]}
                 />
                 <MenuItem
                     title={translate('workspace.bankAccount.noLetsStartOver')}
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index d22b822359f9..30a3ac257e4f 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -236,14 +236,13 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
                         onPress={navigateToCreateCategoryPage}
                         icon={Expensicons.Plus}
                         text={translate('workspace.categories.addCategory')}
-                        style={[styles.pr2, isSmallScreenWidth && styles.w50]}
+                        style={[styles.mr3, isSmallScreenWidth && styles.w50]}
                     />
                 )}
                 <Button
                     medium
                     onPress={navigateToCategoriesSettings}
                     icon={Expensicons.Gear}
-                    iconStyles={[styles.mr2]}
                     text={translate('common.settings')}
                     style={[isSmallScreenWidth && styles.w50]}
                 />
diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index 4ea8ba669b9b..1286cde8012a 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -129,14 +129,13 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
                 onPress={navigateToCreateTagPage}
                 icon={Expensicons.Plus}
                 text={translate('workspace.tags.addTag')}
-                style={[styles.pr2, isSmallScreenWidth && styles.w50]}
+                style={[styles.mr3, isSmallScreenWidth && styles.w50]}
             />
             {policyTags && (
                 <Button
                     medium
                     onPress={navigateToTagsSettings}
                     icon={Expensicons.Gear}
-                    iconStyles={[styles.mr2]}
                     text={translate('common.settings')}
                     style={[isSmallScreenWidth && styles.w50]}
                 />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 55292988503f..35867ce3b817 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -573,6 +573,7 @@ const styles = (theme: ThemeColors) =>
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,
+            minWidth: variables.componentSizeSmall,
             paddingHorizontal: 12,
             backgroundColor: theme.buttonDefaultBG,
         },
@@ -580,6 +581,7 @@ const styles = (theme: ThemeColors) =>
         buttonMedium: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeNormal,
+            minWidth: variables.componentSizeNormal,
             paddingHorizontal: 16,
             backgroundColor: theme.buttonDefaultBG,
         },
@@ -587,6 +589,7 @@ const styles = (theme: ThemeColors) =>
         buttonLarge: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeLarge,
+            minWidth: variables.componentSizeLarge,
             paddingHorizontal: 20,
             backgroundColor: theme.buttonDefaultBG,
         },
@@ -2091,6 +2094,10 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'flex-end',
         },
 
+        customMarginButtonWithMenuItem: {
+            marginRight: variables.bankButtonMargin,
+        },
+
         composerSizeButton: {
             alignSelf: 'center',
             height: 32,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index f1141dd11e94..9a25313837fe 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -461,14 +461,14 @@ function getWidthAndHeightStyle(width: number, height?: number): Pick<ViewStyle,
     };
 }
 
-function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number): Pick<ImageSVGProps, 'width' | 'height'> {
+function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number, hasText?: boolean): Pick<ImageSVGProps, 'width' | 'height'> {
     switch (true) {
         case small:
-            return {width: variables.iconSizeExtraSmall, height: variables.iconSizeExtraSmall};
+            return {width: hasText ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: hasText ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
         case medium:
-            return {width: variables.iconSizeSmall, height: variables.iconSizeSmall};
+            return {width: hasText ? variables.iconSizeSmall : variables.iconSizeNormal, height: hasText ? variables.iconSizeSmall : variables.iconSizeNormal};
         case large:
-            return {width: variables.iconSizeNormal, height: variables.iconSizeNormal};
+            return {width: hasText ? variables.iconSizeNormal : variables.iconSizeLarge, height: hasText ? variables.iconSizeNormal : variables.iconSizeLarge};
         default: {
             return {width, height};
         }
@@ -499,6 +499,10 @@ function getButtonStyleWithIcon(
             return useDefaultButtonStyles ? styles.buttonLarge : {...styles.buttonLarge, ...(hasText ? verticalStyle : styles.ph0)};
         }
         default: {
+            if (hasIcon && !hasText) {
+                return {...styles.buttonMedium, ...styles.ph0};
+            }
+
             return undefined;
         }
     }
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index b461fc0f5d09..1e9a6662d102 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -14,6 +14,10 @@ export default {
         height: 272,
     },
 
+    h13: {
+        height: 52,
+    },
+
     w15: {
         width: '15%',
     },
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 56000a851e7b..740bf053c2d0 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -485,6 +485,10 @@ export default {
         paddingRight: 32,
     },
 
+    pr10: {
+        paddingRight: 40,
+    },
+
     pr15: {
         paddingRight: 60,
     },
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 61c16a8c2fd7..0ebc4e60991f 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -222,4 +222,5 @@ export default {
 
     mushroomTopHatWidth: 138,
     mushroomTopHatHeight: 128,
+    bankButtonMargin: 23,
 } as const;