Merge pull request #38275 from narefyev91/fix-icons-regressions

[CP Staging] Fix icons after regression (cherry picked from commit 5f086a9)
Expensify · Mar 14, 2024 · 08452ad · 08452ad
1 parent d4837c0
commit 08452ad
Show file tree

Hide file tree

Showing 13 changed files with 38 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -573,20 +573,23 @@ const styles = (theme: ThemeColors) =>
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,
+            minWidth: variables.componentSizeSmall,
             paddingHorizontal: 12,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         buttonMedium: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeNormal,
+            minWidth: variables.componentSizeNormal,
             paddingHorizontal: 16,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         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
@@ -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
@@ -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
@@ -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
@@ -222,4 +222,5 @@ export default {
 
     mushroomTopHatWidth: 138,
     mushroomTopHatHeight: 128,
+    bankButtonMargin: 23,
 } as const;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,10 @@ export default { @@
             height: 272,
         },
+        h13: {
+            height: 52,
+        },
         w15: {
             width: '15%',
         },
@@ Expand Down @@