From b4218a48f26e4aa7a7dab98a7a9989f2b056518e Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 8 Mar 2024 14:12:41 +0200
Subject: [PATCH 01/13] Updated button specification with Icon

---
 src/components/Button/index.tsx              |  4 +++-
 src/components/Icon/index.tsx                | 11 +++++++++--
 src/pages/workspace/WorkspaceProfilePage.tsx |  2 ++
 src/styles/index.ts                          |  8 +++-----
 src/styles/utils/index.ts                    | 16 ++++++++++++++++
 5 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index ca1bc391e800..c81975b96aab 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -237,11 +237,13 @@ function Button(
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {icon && (
-                            <View style={[styles.mr1, iconStyles]}>
+                            <View style={[large ? styles.mr2 : styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
+                                    medium={medium}
+                                    large={large}
                                 />
                             </View>
                         )}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index d3214565ba46..f0574c32f3b5 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -25,6 +25,12 @@ type IconProps = {
     /** Is small icon */
     small?: boolean;
 
+    /** Is large icon */
+    large?: boolean;
+
+    /** Is medium large */
+    medium?: boolean;
+
     /** Is inline icon */
     inline?: boolean;
 
@@ -50,6 +56,8 @@ function Icon({
     height = variables.iconSizeNormal,
     fill = undefined,
     small = false,
+    large = false,
+    medium = false,
     inline = false,
     additionalStyles = [],
     hovered = false,
@@ -59,8 +67,7 @@ function Icon({
 }: IconProps) {
     const StyleUtils = useStyleUtils();
     const styles = useThemeStyles();
-    const iconWidth = small ? variables.iconSizeSmall : width;
-    const iconHeight = small ? variables.iconSizeSmall : height;
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height)
     const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
 
     if (inline) {
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index 9d90557b1d37..30b17cd197f4 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -193,6 +193,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                         text={translate('common.share')}
                                         onPress={onPressShare}
                                         medium
+                                        icon={Expensicons.QrCode}
                                     />
                                     <Button
                                         accessibilityLabel={translate('common.delete')}
@@ -200,6 +201,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                         style={[styles.ml2]}
                                         onPress={() => setIsDeleteModalOpen(true)}
                                         medium
+                                        icon={Expensicons.Trashcan}
                                     />
                                 </View>
                             )}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 405a05cfce78..4330188b8d3b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -573,23 +573,21 @@ const styles = (theme: ThemeColors) =>
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,
-            paddingHorizontal: 14,
+            paddingHorizontal: 12,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         buttonMedium: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeNormal,
-            paddingRight: 16,
-            paddingLeft: 16,
+            paddingHorizontal: 16,
             backgroundColor: theme.buttonDefaultBG,
         },
 
         buttonLarge: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeLarge,
-            paddingRight: 10,
-            paddingLeft: 10,
+            paddingHorizontal: 20,
             backgroundColor: theme.buttonDefaultBG,
         },
 
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index ddd3075115c1..5ac55721f921 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -3,6 +3,7 @@ import type {AnimatableNumericValue, Animated, ColorValue, DimensionValue, Image
 import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
+import type ImageSVGProps from '@components/ImageSVG/types';
 import * as Browser from '@libs/Browser';
 import * as UserUtils from '@libs/UserUtils';
 // eslint-disable-next-line no-restricted-imports
@@ -460,6 +461,20 @@ function getWidthAndHeightStyle(width: number, height?: number): ViewStyle {
     };
 }
 
+function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: boolean, width: number, height: number): Pick<ImageSVGProps, 'width' | 'height'> {
+    switch (true) {
+        case small:
+            return {width: variables.iconSizeExtraSmall, height: variables.iconSizeExtraSmall};
+        case medium:
+            return {width: variables.iconSizeSmall, height: variables.iconSizeSmall};
+        case large:
+            return {width: variables.iconSizeNormal, height: variables.iconSizeNormal};
+        default: {
+            return {width, height};
+        }
+    }
+}
+
 /**
  * Combine margin/padding with safe area inset
  *
@@ -1096,6 +1111,7 @@ const staticStyleUtils = {
     getOpacityStyle,
     getMultiGestureCanvasContainerStyle,
     getSignInBgStyles,
+    getIconWidthAndHeightStyle,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({

From 187b4a8f8bc3e928996e9e7220e676e898da4d13 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 8 Mar 2024 15:36:31 +0200
Subject: [PATCH 02/13] fix prettier

---
 src/components/Icon/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index f0574c32f3b5..b2586e783585 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -67,7 +67,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);
     const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
 
     if (inline) {

From 19e2bfe6fead4a998d6cc379d0e455bd3905768e Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Fri, 8 Mar 2024 15:54:52 +0200
Subject: [PATCH 03/13] wording

---
 src/components/Icon/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index b2586e783585..e4484980fff1 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -28,7 +28,7 @@ type IconProps = {
     /** Is large icon */
     large?: boolean;
 
-    /** Is medium large */
+    /** Is medium icon */
     medium?: boolean;
 
     /** Is inline icon */

From 3138f752081d92f6b8ed26a174d3bf6a579dc78d Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Mon, 11 Mar 2024 12:46:20 +0200
Subject: [PATCH 04/13] add correct padding based on design and icon usage

---
 src/components/Button/index.tsx | 15 ++++++++-------
 src/styles/utils/index.ts       | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index c81975b96aab..3679d4298ffa 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -16,6 +16,7 @@ import HapticFeedback from '@libs/HapticFeedback';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
+import useStyleUtils from "@hooks/useStyleUtils";
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonWithText = {
@@ -24,9 +25,6 @@ type ButtonWithText = {
 
     /** Boolean whether to display the right icon */
     shouldShowRightIcon?: boolean;
-
-    /** The icon asset to display to the left of the text */
-    icon?: IconAsset | null;
 };
 
 type ButtonProps = (ButtonWithText | ChildrenProps) & {
@@ -116,6 +114,9 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
 
     /** Accessibility label for the component */
     accessibilityLabel?: string;
+
+    /** The icon asset to display to the left of the text */
+    icon?: IconAsset | null;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
@@ -162,6 +163,7 @@ function Button(
 
         iconRight = Expensicons.ArrowRight,
         iconFill,
+        icon = null,
         iconStyles = [],
         iconRightStyles = [],
 
@@ -202,13 +204,14 @@ function Button(
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     const renderContent = () => {
         if ('children' in rest) {
             return rest.children;
         }
 
-        const {text = '', icon = null, shouldShowRightIcon = false} = rest;
+        const {text = '', shouldShowRightIcon = false} = rest;
 
         const textComponent = (
             <Text
@@ -312,9 +315,7 @@ function Button(
                 ]}
                 style={[
                     styles.button,
-                    small ? styles.buttonSmall : undefined,
-                    medium ? styles.buttonMedium : undefined,
-                    large ? styles.buttonLarge : undefined,
+                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon)),
                     success ? styles.buttonSuccess : undefined,
                     danger ? styles.buttonDanger : undefined,
                     isDisabled ? styles.buttonOpacityDisabled : undefined,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 5ac55721f921..d1441db1ec8f 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -475,6 +475,20 @@ function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: bool
     }
 }
 
+function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean): ViewStyle | undefined {
+    switch (true) {
+        case small:
+            return !hasIcon ? styles.buttonSmall : {...styles.buttonSmall, ...styles.pl1};
+        case medium:
+            return !hasIcon ? styles.buttonMedium : {...styles.buttonMedium, ...styles.pl3};
+        case large:
+            return !hasIcon ? styles.buttonLarge : {...styles.buttonLarge, ...styles.pl4};
+        default: {
+            return undefined;
+        }
+    }
+}
+
 /**
  * Combine margin/padding with safe area inset
  *
@@ -1112,6 +1126,7 @@ const staticStyleUtils = {
     getMultiGestureCanvasContainerStyle,
     getSignInBgStyles,
     getIconWidthAndHeightStyle,
+    getButtonStyleWithIcon
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({

From 4e8786b3171d4379cdcae80f117c5be45ff4097b Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Mon, 11 Mar 2024 16:20:18 +0200
Subject: [PATCH 05/13] add logic for button without text, clean up all places
 with icons

---
 .../AttachmentCarousel/CarouselButtons.js     |  2 --
 .../AvatarCropModal/AvatarCropModal.tsx       |  1 -
 src/components/Button/index.tsx               | 28 +++++++++----------
 src/components/ConnectBankAccountButton.tsx   |  3 --
 src/components/FeatureList.tsx                |  1 -
 .../ReimbursementAccount/BankAccountStep.js   |  1 -
 .../components/FinishChatCard.tsx             |  1 -
 .../ContinueBankAccountSetup.js               |  1 -
 .../EnableBankAccount/EnableBankAccount.tsx   |  1 -
 .../settings/Wallet/PaymentMethodList.tsx     |  1 -
 src/pages/workspace/WorkspaceMembersPage.tsx  |  1 -
 .../card/WorkspaceCardVBANoECardView.tsx      |  1 -
 .../categories/WorkspaceCategoriesPage.tsx    |  1 -
 .../distanceRates/PolicyDistanceRatesPage.tsx |  2 --
 .../members/WorkspaceMemberDetailsPage.tsx    |  3 --
 src/styles/utils/index.ts                     | 10 +++----
 16 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
index 1847d30ede22..a2c5dadb101d 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.js
@@ -54,7 +54,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             innerStyles={[styles.arrowIcon]}
                             icon={Expensicons.BackArrow}
                             iconFill={theme.text}
-                            iconStyles={[styles.mr0]}
                             onPress={onBack}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
@@ -70,7 +69,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward
                             innerStyles={[styles.arrowIcon]}
                             icon={Expensicons.ArrowRight}
                             iconFill={theme.text}
-                            iconStyles={[styles.mr0]}
                             onPress={onForward}
                             onPressIn={cancelAutoHideArrow}
                             onPressOut={autoHideArrow}
diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx
index dd6d41f4b227..011c3ad0bf4f 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.tsx
+++ b/src/components/AvatarCropModal/AvatarCropModal.tsx
@@ -407,7 +407,6 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                                             medium
                                             icon={Expensicons.Rotate}
                                             iconFill={theme.inverse}
-                                            iconStyles={[styles.mr0]}
                                             onPress={rotateImage}
                                         />
                                     </View>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 3679d4298ffa..d9311eef3f69 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,24 +10,16 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import HapticFeedback from '@libs/HapticFeedback';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
-import useStyleUtils from "@hooks/useStyleUtils";
 import validateSubmitShortcut from './validateSubmitShortcut';
 
-type ButtonWithText = {
-    /** The text for the button label */
-    text?: string;
-
-    /** Boolean whether to display the right icon */
-    shouldShowRightIcon?: boolean;
-};
-
-type ButtonProps = (ButtonWithText | ChildrenProps) & {
+type ButtonProps = Partial<ChildrenProps> & {
     /** Should the press event bubble across multiple instances when Enter key triggers it. */
     allowBubble?: boolean;
 
@@ -117,6 +109,12 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
 
     /** The icon asset to display to the left of the text */
     icon?: IconAsset | null;
+
+    /** The text for the button label */
+    text?: string;
+
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon?: boolean;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority'>;
@@ -166,6 +164,7 @@ function Button(
         icon = null,
         iconStyles = [],
         iconRightStyles = [],
+        text = '',
 
         small = false,
         large = false,
@@ -195,6 +194,7 @@ function Button(
         shouldRemoveLeftBorderRadius = false,
         shouldEnableHapticFeedback = false,
         isLongPressDisabled = false,
+        shouldShowRightIcon = false,
 
         id = '',
         accessibilityLabel = '',
@@ -211,8 +211,6 @@ function Button(
             return rest.children;
         }
 
-        const {text = '', shouldShowRightIcon = false} = rest;
-
         const textComponent = (
             <Text
                 numberOfLines={1}
@@ -240,7 +238,7 @@ function Button(
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {icon && (
-                            <View style={[large ? styles.mr2 : styles.mr1, iconStyles]}>
+                            <View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
                                 <Icon
                                     src={icon}
                                     fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
@@ -315,7 +313,7 @@ function Button(
                 ]}
                 style={[
                     styles.button,
-                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon)),
+                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon), Boolean(text?.length > 0)),
                     success ? styles.buttonSuccess : undefined,
                     danger ? styles.buttonDanger : undefined,
                     isDisabled ? styles.buttonOpacityDisabled : undefined,
@@ -323,7 +321,7 @@ function Button(
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    'text' in rest && rest?.shouldShowRightIcon ? styles.alignItemsStretch : undefined,
+                    text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                 ]}
                 hoverStyle={[
diff --git a/src/components/ConnectBankAccountButton.tsx b/src/components/ConnectBankAccountButton.tsx
index aed1c88ab1d1..ee6ad04d727e 100644
--- a/src/components/ConnectBankAccountButton.tsx
+++ b/src/components/ConnectBankAccountButton.tsx
@@ -3,7 +3,6 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReimbursementAccount from '@userActions/ReimbursementAccount';
 import Button from './Button';
@@ -19,7 +18,6 @@ type ConnectBankAccountButtonProps = {
 };
 
 function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonProps) {
-    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const activeRoute = Navigation.getActiveRouteWithoutParams();
@@ -34,7 +32,6 @@ function ConnectBankAccountButton({style, policyID}: ConnectBankAccountButtonPro
             onPress={() => ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
             icon={Expensicons.Bank}
             style={style}
-            iconStyles={styles.buttonCTAIcon}
             shouldShowRightIcon
             large
             success
diff --git a/src/components/FeatureList.tsx b/src/components/FeatureList.tsx
index f46b289b88d7..d5976f2f7c34 100644
--- a/src/components/FeatureList.tsx
+++ b/src/components/FeatureList.tsx
@@ -81,7 +81,6 @@ function FeatureList({
                                 icon={icon}
                                 iconWidth={variables.avatarSizeMedium}
                                 iconHeight={variables.avatarSizeMedium}
-                                iconStyles={styles.mr2}
                                 interactive={false}
                                 displayInDefaultIconColor
                                 wrapperStyle={[styles.p0, styles.cursorAuto]}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index e18155ea6139..ea652b6d7eb0 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -145,7 +145,6 @@ function BankAccountStep(props) {
                             }}
                             isDisabled={props.isPlaidDisabled || !props.user.validated}
                             style={[styles.mt4]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
                             success
                             large
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
index 65f7f14d6c91..8d7c147572f0 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
@@ -42,7 +42,6 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
                     text={translate('connectBankAccountStep.letsChatCTA')}
                     onPress={handleNavigateToConciergeChat}
                     icon={Expensicons.ChatBubble}
-                    iconStyles={[styles.buttonCTAIcon]}
                     shouldShowRightIcon
                     large
                     success
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 9c28fe928d33..5d5fa080ff92 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -69,7 +69,6 @@ function ContinueBankAccountSetup(props) {
                             onPress={props.continue}
                             icon={Expensicons.Bank}
                             style={[styles.mv4]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
                             large
                             success
diff --git a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
index 4c4bd9a20b71..ee40e85e3775 100644
--- a/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
+++ b/src/pages/ReimbursementAccount/EnableBankAccount/EnableBankAccount.tsx
@@ -93,7 +93,6 @@ function EnableBankAccount({reimbursementAccount, user, onBackButtonPress}: Enab
                                 }}
                                 icon={Expensicons.Mail}
                                 style={[styles.mt4]}
-                                iconStyles={[styles.buttonCTAIcon]}
                                 shouldShowRightIcon
                                 large
                                 success
diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx
index 556634269f5c..2bbc73355d68 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodList.tsx
@@ -358,7 +358,6 @@ function PaymentMethodList({
                             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                             isDisabled={isLoadingPaymentMethods || isFormOffline}
                             style={[styles.mh4, styles.buttonCTA]}
-                            iconStyles={[styles.buttonCTAIcon]}
                             key="addPaymentMethodButton"
                             success
                             shouldShowRightIcon
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 2715a008c991..0d21c1b1678c 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -483,7 +483,6 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                         onPress={inviteUser}
                         text={translate('workspace.invite.member')}
                         icon={Expensicons.Plus}
-                        iconStyles={StyleUtils.getTransformScaleStyle(0.6)}
                         innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                     />
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
index 02874a96ba76..db7a3f4b6368 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
@@ -44,7 +44,6 @@ function WorkspaceCardVBANoECardView({user}: WorkspaceCardVBANoECardViewProps) {
                     }}
                     icon={Expensicons.Mail}
                     style={[styles.mt4]}
-                    iconStyles={[styles.buttonCTAIcon]}
                     shouldShowRightIcon
                     large
                     success
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index 17afefd1cea4..b6290f1d390e 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -143,7 +143,6 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
                 medium
                 onPress={navigateToCategoriesSettings}
                 icon={Expensicons.Gear}
-                iconStyles={[styles.mr2]}
                 text={translate('common.settings')}
                 style={[isSmallScreenWidth && styles.w50]}
             />
diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
index fd6466da1758..be0f78fd65f7 100644
--- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
+++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -200,7 +200,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                         onPress={addRate}
                         style={[styles.mr3, isSmallScreenWidth && styles.flexGrow1]}
                         icon={Expensicons.Plus}
-                        iconStyles={[styles.mr2]}
                         success
                     />
 
@@ -210,7 +209,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                         onPress={openSettings}
                         style={[isSmallScreenWidth && styles.flexGrow1]}
                         icon={Expensicons.Gear}
-                        iconStyles={[styles.mr2]}
                     />
                 </>
             ) : (
diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
index d44ff8baa08b..bb7f4d6a03aa 100644
--- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
+++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -14,7 +14,6 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as UserUtils from '@libs/UserUtils';
 import Navigation from '@navigation/Navigation';
@@ -41,7 +40,6 @@ type WorkspaceMemberDetailsPageProps = WithPolicyAndFullscreenLoadingProps & Wor
 function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, route}: WorkspaceMemberDetailsPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const StyleUtils = useStyleUtils();
 
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = React.useState(false);
 
@@ -106,7 +104,6 @@ function WorkspaceMemberDetailsPage({personalDetails, policyMembers, policy, rou
                                 onPress={askForConfirmationToRemove}
                                 medium
                                 icon={Expensicons.RemoveMembers}
-                                iconStyles={StyleUtils.getTransformScaleStyle(0.8)}
                                 style={styles.mv5}
                             />
                             <ConfirmModal
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 4bf4f3da2463..bed90745dc4d 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -475,14 +475,14 @@ function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: bool
     }
 }
 
-function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean): ViewStyle | undefined {
+function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean, hasText?: boolean): ViewStyle | undefined {
     switch (true) {
         case small:
-            return !hasIcon ? styles.buttonSmall : {...styles.buttonSmall, ...styles.pl1};
+            return !hasIcon ? styles.buttonSmall : {...styles.buttonSmall, ...(hasText ? styles.pl2 : styles.ph0)};
         case medium:
-            return !hasIcon ? styles.buttonMedium : {...styles.buttonMedium, ...styles.pl3};
+            return !hasIcon ? styles.buttonMedium : {...styles.buttonMedium, ...(hasText ? styles.pl3 : styles.ph0)};
         case large:
-            return !hasIcon ? styles.buttonLarge : {...styles.buttonLarge, ...styles.pl4};
+            return !hasIcon ? styles.buttonLarge : {...styles.buttonLarge, ...(hasText ? styles.pl4 : styles.ph0)};
         default: {
             return undefined;
         }
@@ -1126,7 +1126,7 @@ const staticStyleUtils = {
     getMultiGestureCanvasContainerStyle,
     getSignInBgStyles,
     getIconWidthAndHeightStyle,
-    getButtonStyleWithIcon
+    getButtonStyleWithIcon,
 };
 
 const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({

From cc5f18a81399f13dcebbb55f7f1202c7bdbc05a1 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Mon, 11 Mar 2024 16:59:54 +0200
Subject: [PATCH 06/13] update button style to use default 40px height

---
 ios/Podfile.lock    | 2 +-
 src/styles/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index bb26b37d4015..6adbfd2cb498 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -2017,4 +2017,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.11.3
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b4b5718e8843..ad9bf57a72a9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -534,7 +534,7 @@ const styles = (theme: ThemeColors) =>
         button: {
             backgroundColor: theme.buttonDefaultBG,
             borderRadius: variables.buttonBorderRadius,
-            minHeight: variables.componentSizeLarge,
+            minHeight: variables.componentSizeNormal,
             justifyContent: 'center',
             alignItems: 'center',
             ...spacing.ph3,

From 4f784302d148168ffda2bbe1fb4571ac94cd62c4 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Mon, 11 Mar 2024 17:00:48 +0200
Subject: [PATCH 07/13] pod back

---
 ios/Podfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 6adbfd2cb498..bb26b37d4015 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -2017,4 +2017,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0ccbb4f2406893c6e9f266dc1e7470dcd72885d2
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.13.0

From 1a13efea1464aea769ec47b841a4c35295571d7c Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 12 Mar 2024 09:42:57 +0200
Subject: [PATCH 08/13] update tags page

---
 src/pages/workspace/tags/WorkspaceTagsPage.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
index cc809892d45e..6b2bf34081c0 100644
--- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx
+++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -123,7 +123,6 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
                 medium
                 onPress={navigateToTagsSettings}
                 icon={Expensicons.Gear}
-                iconStyles={[styles.mr2]}
                 text={translate('common.settings')}
                 style={[isSmallScreenWidth && styles.w50]}
             />

From 59288bf71048738e102c5e53ba09bf9aa7e1f124 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 12 Mar 2024 19:00:32 +0200
Subject: [PATCH 09/13] fallback defaults

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index d6fba5dc1179..f9f10937e115 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -534,7 +534,7 @@ const styles = (theme: ThemeColors) =>
         button: {
             backgroundColor: theme.buttonDefaultBG,
             borderRadius: variables.buttonBorderRadius,
-            minHeight: variables.componentSizeNormal,
+            minHeight: variables.componentSizeLarge,
             justifyContent: 'center',
             alignItems: 'center',
             ...spacing.ph3,

From b992571de3208dd64246d3abc9f480356ad23db8 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Tue, 12 Mar 2024 20:02:18 +0200
Subject: [PATCH 10/13] use default size medium, and large to buttons without
 size specified

---
 src/components/AttachmentModal.tsx                             | 1 +
 src/components/AvatarCropModal/AvatarCropModal.tsx             | 1 +
 src/components/ConfirmContent.tsx                              | 2 ++
 src/components/ConfirmationPage.tsx                            | 1 +
 src/components/DistanceRequest/index.tsx                       | 1 +
 src/components/FeatureList.tsx                                 | 1 +
 src/components/FormAlertWithSubmitButton.tsx                   | 2 ++
 src/components/OptionsSelector/BaseOptionsSelector.js          | 1 +
 src/components/PDFView/PDFPasswordForm.js                      | 1 +
 src/components/ProcessMoneyRequestHoldMenu.tsx                 | 1 +
 src/components/SelectionList/BaseSelectionList.tsx             | 1 +
 src/components/TimePicker/TimePicker.js                        | 3 +++
 src/pages/NewChatPage.tsx                                      | 1 +
 src/pages/OnboardEngagement/ExpensifyClassicPage.tsx           | 1 +
 src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx        | 2 ++
 src/pages/ProcessMoneyRequestHoldPage.tsx                      | 1 +
 .../ReimbursementAccount/BankInfo/substeps/Confirmation.tsx    | 1 +
 .../BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx     | 1 +
 .../BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx      | 1 +
 .../PersonalInfo/substeps/Confirmation.tsx                     | 1 +
 src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx           | 1 +
 src/pages/home/report/ReportActionItem.tsx                     | 2 ++
 .../MoneyTemporaryForRefactorRequestParticipantsSelector.js    | 1 +
 src/pages/iou/request/step/IOURequestStepDistance.js           | 1 +
 src/pages/iou/steps/MoneyRequestAmountForm.tsx                 | 1 +
 .../MoneyRequestParticipantsSelector.js                        | 1 +
 src/pages/settings/AboutPage/ConsolePage.tsx                   | 3 +++
 src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx        | 1 +
 src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx     | 1 +
 .../Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx | 1 +
 src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx  | 1 +
 .../settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx     | 1 +
 src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx | 1 +
 src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx         | 1 +
 src/pages/settings/Wallet/ExpensifyCardPage.tsx                | 2 ++
 src/pages/signin/ChooseSSOOrMagicCode.tsx                      | 2 ++
 src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx     | 1 +
 src/pages/workspace/WorkspaceNewRoomPage.tsx                   | 1 +
 src/styles/index.ts                                            | 2 +-
 39 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 1ed7b6d188a0..0c047ce52dc8 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -569,6 +569,7 @@ function AttachmentModal({
                                 <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
                                     <Button
                                         success
+                                        large
                                         style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
                                         textStyles={[styles.buttonConfirmText]}
                                         text={translate('common.send')}
diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx
index 011c3ad0bf4f..2998b2258ef1 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.tsx
+++ b/src/components/AvatarCropModal/AvatarCropModal.tsx
@@ -420,6 +420,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
                     style={[styles.m5]}
                     onPress={cropAndSaveImage}
                     pressOnEnter
+                    large
                     text={translate('common.save')}
                 />
             </ScreenWrapper>
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
index c0c146bbae08..26331f92401c 100644
--- a/src/components/ConfirmContent.tsx
+++ b/src/components/ConfirmContent.tsx
@@ -145,6 +145,7 @@ function ConfirmContent({
                             style={[styles.mt4]}
                             onPress={onConfirm}
                             pressOnEnter
+                            large
                             text={confirmText || translate('common.yes')}
                             isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
                         />
@@ -152,6 +153,7 @@ function ConfirmContent({
                             <Button
                                 style={[styles.mt3, styles.noSelect]}
                                 onPress={onCancel}
+                                large
                                 text={cancelText || translate('common.no')}
                             />
                         )}
diff --git a/src/components/ConfirmationPage.tsx b/src/components/ConfirmationPage.tsx
index fe4036a4435f..4c2fb46dccf8 100644
--- a/src/components/ConfirmationPage.tsx
+++ b/src/components/ConfirmationPage.tsx
@@ -47,6 +47,7 @@ function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, desc
                 <FixedFooter>
                     <Button
                         success
+                        large
                         text={buttonText}
                         style={styles.mt6}
                         pressOnEnter
diff --git a/src/components/DistanceRequest/index.tsx b/src/components/DistanceRequest/index.tsx
index 8920c9a4a92b..f9e8c0be12ff 100644
--- a/src/components/DistanceRequest/index.tsx
+++ b/src/components/DistanceRequest/index.tsx
@@ -275,6 +275,7 @@ function DistanceRequest({transactionID = '', report, transaction, route, isEdit
                 <Button
                     success
                     allowBubble
+                    large
                     pressOnEnter
                     style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                     onPress={submitWaypoints}
diff --git a/src/components/FeatureList.tsx b/src/components/FeatureList.tsx
index d5976f2f7c34..5f713d5f3aef 100644
--- a/src/components/FeatureList.tsx
+++ b/src/components/FeatureList.tsx
@@ -95,6 +95,7 @@ function FeatureList({
                     accessibilityLabel={ctaAccessibilityLabel}
                     style={styles.w100}
                     success
+                    large
                 />
             </View>
         </Section>
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index 270d476f4f79..27db5687a925 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -96,6 +96,7 @@ function FormAlertWithSubmitButton({
                             style={style}
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
+                            large={!useSmallerSubmitButtonSize}
                         />
                     ) : (
                         <Button
@@ -108,6 +109,7 @@ function FormAlertWithSubmitButton({
                             isLoading={isLoading}
                             danger={isSubmitActionDangerous}
                             medium={useSmallerSubmitButtonSize}
+                            large={!useSmallerSubmitButtonSize}
                         />
                     )}
                     {footerContent}
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 2694e2b83f7f..af85f00f084f 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -666,6 +666,7 @@ class BaseOptionsSelector extends Component {
                         {shouldShowDefaultConfirmButton && (
                             <Button
                                 success
+                                large
                                 style={[this.props.themeStyles.w100]}
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}
diff --git a/src/components/PDFView/PDFPasswordForm.js b/src/components/PDFView/PDFPasswordForm.js
index 97d893b511dd..2abf5a1236e0 100644
--- a/src/components/PDFView/PDFPasswordForm.js
+++ b/src/components/PDFView/PDFPasswordForm.js
@@ -150,6 +150,7 @@ function PDFPasswordForm({isFocused, isPasswordInvalid, shouldShowLoadingIndicat
                 style={styles.mt4}
                 isLoading={shouldShowLoadingIndicator}
                 pressOnEnter
+                large
             />
         </ScrollView>
     ) : (
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index f1dc47b8556b..eefab719a103 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -53,6 +53,7 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit
                     style={[styles.mt5]}
                     text={translate('common.buttonConfirm')}
                     onPress={onConfirm}
+                    large
                 />
             </View>
         </Popover>
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 9dc3e4aa2c7e..4afa878830b8 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -512,6 +512,7 @@ function BaseSelectionList<TItem extends ListItem>(
                             <FixedFooter style={[styles.mtAuto]}>
                                 <Button
                                     success
+                                    large
                                     style={[styles.w100]}
                                     text={confirmButtonText || translate('common.confirm')}
                                     onPress={onConfirm}
diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
index f57f2540dfb3..95af2bc0c1b5 100644
--- a/src/components/TimePicker/TimePicker.js
+++ b/src/components/TimePicker/TimePicker.js
@@ -511,6 +511,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         shouldEnableHapticFeedback
                         innerStyles={styleForAM}
                         medium={isExtraSmallScreenHeight}
+                        large={!isExtraSmallScreenHeight}
                         text={translate('common.am')}
                         onLongPress={() => {}}
                         onPress={() => {
@@ -523,6 +524,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         shouldEnableHapticFeedback
                         innerStyles={[...styleForPM, styles.ml1]}
                         medium={isExtraSmallScreenHeight}
+                        large={!isExtraSmallScreenHeight}
                         text={translate('common.pm')}
                         onLongPress={() => {}}
                         onPress={() => {
@@ -551,6 +553,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             <Button
                 success
                 medium={isExtraSmallScreenHeight}
+                large={!isExtraSmallScreenHeight}
                 style={[styles.mb5, styles.mh5]}
                 onPress={handleSubmit}
                 pressOnEnter
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index c707f937eed5..f9f5a789e7ae 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -260,6 +260,7 @@ function NewChatPage({isGroupChat, reports, isSearchingForReports}: NewChatPageP
                         text={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
                         onPress={createGroup}
                         pressOnEnter
+                        large
                     />
                 )}
             </>
diff --git a/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx b/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
index ad704156435d..7b242dd4aefa 100644
--- a/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
+++ b/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
@@ -49,6 +49,7 @@ function ExpensifyClassicModal() {
                     success
                     pressOnEnter
                     medium={isExtraSmallScreenHeight}
+                    large={!isExtraSmallScreenHeight}
                     style={[styles.w100, styles.mtAuto]}
                     text={translate('expensifyClassic.buttonText')}
                     onPress={navigateToOldDot}
diff --git a/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx b/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
index 559da335cf13..fb642c897dbc 100644
--- a/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
+++ b/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
@@ -97,6 +97,7 @@ function ManageTeamsExpensesModal() {
                     <View style={styles.flexRow}>
                         <Button
                             medium={isExtraSmallScreenHeight}
+                            large={!isExtraSmallScreenHeight}
                             style={[styles.flexGrow1, styles.mr1, styles.mtAuto]}
                             text={translate('common.no')}
                             onPress={completeEngagement}
@@ -104,6 +105,7 @@ function ManageTeamsExpensesModal() {
                         <Button
                             pressOnEnter
                             medium={isExtraSmallScreenHeight}
+                            large={!isExtraSmallScreenHeight}
                             style={[styles.flexGrow1, styles.ml1, styles.mtAuto]}
                             text={translate('common.yes')}
                             onPress={navigateToExpensifyClassicPage}
diff --git a/src/pages/ProcessMoneyRequestHoldPage.tsx b/src/pages/ProcessMoneyRequestHoldPage.tsx
index 65437a6b1f85..ec305cc5adfb 100644
--- a/src/pages/ProcessMoneyRequestHoldPage.tsx
+++ b/src/pages/ProcessMoneyRequestHoldPage.tsx
@@ -25,6 +25,7 @@ function ProcessMoneyRequestHoldPage() {
                 success
                 text={translate('common.buttonConfirm')}
                 onPress={onConfirm}
+                large
             />
         ),
         [onConfirm, translate],
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
index 44f83f55a23f..4aec290a4da9 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -96,6 +96,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                             success
                             style={[styles.w100]}
                             onPress={onNext}
+                            large
                             text={translate('common.confirm')}
                         />
                     </View>
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
index 3d6f1d5947ef..939c52bfed27 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -114,6 +114,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
                         <Button
                             isDisabled={isOffline}
                             success
+                            large
                             style={[styles.w100, styles.mt2, styles.pb5]}
                             onPress={onNext}
                             text={translate('common.confirm')}
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
index 45feabdf102f..542d3d0cf6d0 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -141,6 +141,7 @@ function CompanyOwnersListUBO({
                     </View>
                     <Button
                         success
+                        large
                         isLoading={isLoading}
                         isDisabled={isOffline}
                         style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
index 80639c429685..0e11aff395de 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
@@ -120,6 +120,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                         <Button
                             isDisabled={isOffline}
                             success
+                            large
                             isLoading={isLoading}
                             style={[styles.w100]}
                             onPress={onNext}
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
index 9433aba2f299..551568e7dbb1 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
@@ -36,6 +36,7 @@ function ImTeacherUpdateEmailPage() {
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
                     success
+                    large
                     accessibilityLabel={translate('teachersUnitePage.updateEmail')}
                     text={translate('teachersUnitePage.updateEmail')}
                     onPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(activeRoute))}
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index a9aba936f807..2a3c73e2853e 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -487,6 +487,7 @@ function ReportActionItem({
                                 text={translate('bankAccount.addBankAccount')}
                                 onPress={() => BankAccounts.openPersonalBankAccountSetupView(report.reportID)}
                                 pressOnEnter
+                                large
                             />
                         )}
 
@@ -503,6 +504,7 @@ function ReportActionItem({
                                     <Button
                                         ref={buttonRef}
                                         success
+                                        large
                                         style={[styles.w100, styles.requestPreviewBox]}
                                         text={translate('iou.enableWallet')}
                                         onPress={triggerKYCFlow}
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index 01b6b0f4d21c..edf33a70e741 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -282,6 +282,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                         text={translate('iou.addToSplit')}
                         onPress={handleConfirmSelection}
                         pressOnEnter
+                        large
                         isDisabled={shouldShowSplitBillErrorMessage}
                     />
                 )}
diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js
index 320359192c8d..9e12381bc497 100644
--- a/src/pages/iou/request/step/IOURequestStepDistance.js
+++ b/src/pages/iou/request/step/IOURequestStepDistance.js
@@ -234,6 +234,7 @@ function IOURequestStepDistance({
                         success
                         allowBubble
                         pressOnEnter
+                        large
                         style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                         onPress={submitWaypoints}
                         text={translate('common.next')}
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.tsx b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
index 55bf77e9ae88..aec2f4765fd4 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.tsx
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
@@ -329,6 +329,7 @@ function MoneyRequestAmountForm(
                     allowBubble={!isEditing}
                     pressOnEnter
                     medium={isExtraSmallScreenHeight}
+                    large={!isExtraSmallScreenHeight}
                     style={[styles.w100, canUseTouchScreen ? styles.mt5 : styles.mt3]}
                     onPress={submitAndNavigateToNextPage}
                     text={buttonText}
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index ca52053eca33..517156b89ab9 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -300,6 +300,7 @@ function MoneyRequestParticipantsSelector({
                         text={translate('iou.addToSplit')}
                         onPress={handleConfirmSelection}
                         pressOnEnter
+                        large
                         isDisabled={shouldShowSplitBillErrorMessage}
                     />
                 )}
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 5c5e9ba91874..50cbce314be4 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -148,12 +148,14 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                 <Button
                     text={translate('initialSettingsPage.debugConsole.saveLog')}
                     onPress={saveLogs}
+                    large
                     icon={Expensicons.Download}
                     style={[styles.flex1, styles.mr1]}
                 />
                 <Button
                     text={translate('initialSettingsPage.debugConsole.shareLog')}
                     onPress={shareLogs}
+                    large
                     icon={!isGeneratingLogsFile ? Expensicons.UploadAlt : undefined}
                     style={[styles.flex1, styles.ml1]}
                     isLoading={isGeneratingLogsFile}
@@ -173,6 +175,7 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
                     text={translate('initialSettingsPage.debugConsole.execute')}
                     onPress={executeArbitraryCode}
                     style={[styles.mt5]}
+                    large
                 />
             </View>
             <ConfirmModal
diff --git a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
index 14739c4ffc52..66b7ce13f568 100644
--- a/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
+++ b/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx
@@ -81,6 +81,7 @@ function ExitSurveyConfirmPage({exitReason, isLoading, route, navigation}: ExitS
             <FixedFooter>
                 <Button
                     success
+                    large
                     text={translate('exitSurvey.goToExpensifyClassic')}
                     onPress={() => {
                         ExitSurvey.switchToOldDot();
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
index 3851ef7153fb..80b76b9a6acb 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
@@ -121,6 +121,7 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
                 {loginMenuItems}
                 <FixedFooter style={[styles.mtAuto, styles.pt5]}>
                     <Button
+                        large
                         success
                         text={translate('contacts.newContactMethod')}
                         onPress={onNewContactMethodButtonPress}
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx
index adf2680549c7..fc4ec0220b41 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -224,6 +224,7 @@ function BaseValidateCodeForm({account = {}, contactMethod, hasMagicCodeBeenSent
                     style={[styles.mt4]}
                     success
                     pressOnEnter
+                    large
                     isLoading={account?.isLoading}
                 />
             </OfflineWithFeedback>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index b4c1bc249c81..dfa769077374 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -131,6 +131,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
                     )}
                     <Button
                         success
+                        large
                         text={translate('common.next')}
                         onPress={() => {
                             if (!account?.codesAreCopied) {
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
index db64a805d088..588c21defee3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
@@ -25,6 +25,7 @@ function DisabledStep() {
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
                     success
+                    large
                     text={translate('common.buttonConfirm')}
                     onPress={() => TwoFactorAuthActions.quitAndNavigateBack()}
                 />
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index 58e7d98d69de..cfd233d61cf1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -121,6 +121,7 @@ function VerifyStep({account}: VerifyStepProps) {
                 </View>
                 <Button
                     success
+                    large
                     text={translate('common.next')}
                     isLoading={account?.isLoading}
                     onPress={() => {
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
index 4edf637618ea..d5b1230fd216 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
@@ -150,6 +150,7 @@ function ActivatePhysicalCardPage({
                 isDisabled={isOffline}
                 isLoading={physicalCard?.isLoading}
                 medium={isExtraSmallScreenHeight}
+                large={!isExtraSmallScreenHeight}
                 style={[styles.w100, styles.p5, styles.mtAuto]}
                 onPress={submitAndNavigateToNextPage}
                 pressOnEnter
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.tsx b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
index 097b2cf28ed0..732a21bc993c 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.tsx
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
@@ -230,6 +230,7 @@ function ExpensifyCardPage({
                     {physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
                         <Button
                             success
+                            large
                             style={[styles.w100, styles.p5]}
                             onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain))}
                             text={translate('activateCardPage.activatePhysicalCard')}
@@ -238,6 +239,7 @@ function ExpensifyCardPage({
                     {physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
                         <Button
                             success
+                            large
                             text={translate('cardPage.getPhysicalCard')}
                             pressOnEnter
                             onPress={goToGetPhysicalCardFlow}
diff --git a/src/pages/signin/ChooseSSOOrMagicCode.tsx b/src/pages/signin/ChooseSSOOrMagicCode.tsx
index 7a39df332611..4143c2b733e0 100644
--- a/src/pages/signin/ChooseSSOOrMagicCode.tsx
+++ b/src/pages/signin/ChooseSSOOrMagicCode.tsx
@@ -56,6 +56,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos
                 <Button
                     isDisabled={isOffline}
                     success
+                    large
                     style={[styles.mv3]}
                     text={translate('samlSignIn.useSingleSignOn')}
                     isLoading={account?.isLoading}
@@ -73,6 +74,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos
                 <Button
                     isDisabled={isOffline}
                     style={[styles.mv3]}
+                    large
                     text={translate('samlSignIn.useMagicCode')}
                     isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)}
                     onPress={() => {
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
index 8111e8d39afa..afb6e0557bad 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -380,6 +380,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
                 <Button
                     isDisabled={isOffline}
                     success
+                    large
                     style={[styles.mv3]}
                     text={translate('common.signIn')}
                     isLoading={isValidateCodeFormSubmitting}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
index b9236b0e7252..69f2d74b6be7 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.tsx
+++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -223,6 +223,7 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
             />
             <Button
                 success
+                large
                 text={translate('footer.learnMore')}
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 style={[styles.mh5, styles.mb5]}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index f9f10937e115..d6fba5dc1179 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -534,7 +534,7 @@ const styles = (theme: ThemeColors) =>
         button: {
             backgroundColor: theme.buttonDefaultBG,
             borderRadius: variables.buttonBorderRadius,
-            minHeight: variables.componentSizeLarge,
+            minHeight: variables.componentSizeNormal,
             justifyContent: 'center',
             alignItems: 'center',
             ...spacing.ph3,

From c72b0823272bc6b7f13f2a20190c0e2ff5d25cf3 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Wed, 13 Mar 2024 09:55:37 +0200
Subject: [PATCH 11/13] update qrcode svg

---
 assets/images/qrcode.svg | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/images/qrcode.svg b/assets/images/qrcode.svg
index f506a944d54e..42c49c958246 100644
--- a/assets/images/qrcode.svg
+++ b/assets/images/qrcode.svg
@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 14"><path d="M0.666504 6H6.6665V0H0.666504V6ZM2.6665 2H4.6665V4H2.6665V2ZM8.6665 0V6H14.6665V0H8.6665ZM12.6665 4H10.6665V2H12.6665V4ZM0.666504 14H6.6665V8H0.666504V14ZM2.6665 10H4.6665V12H2.6665V10ZM13.6665 8H14.6665V12H11.6665V11H10.6665V14H8.6665V8H11.6665V9H13.6665V8ZM13.6665 13H14.6665V14H13.6665V13ZM11.6665 13H12.6665V14H11.6665V13Z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<g>
+	<path d="M11.143,2v6.857H18V2H11.143z M15.714,6.571h-2.286V4.286h2.286V6.571z"/>
+	<path d="M2,18h6.857v-6.857H2V18z M4.286,13.429h2.286v2.286H4.286V13.429z"/>
+	<polygon points="16.857,12.286 14.571,12.286 14.571,11.143 11.143,11.143 11.143,18 13.429,18 13.429,14.571 14.571,14.571 
+		14.571,15.714 18,15.714 18,11.143 16.857,11.143 	"/>
+	<rect x="16.857" y="16.857" width="1.143" height="1.143"/>
+	<rect x="14.571" y="16.857" width="1.143" height="1.143"/>
+	<path d="M2,8.857h6.857V2H2V8.857z M4.286,4.286h2.286v2.286H4.286V4.286z"/>
+</g>
+</svg>

From 26599b18cceb2c73c4e7c3a15834e04dc54b7278 Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Wed, 13 Mar 2024 16:51:32 +0200
Subject: [PATCH 12/13] update to support right icon correct styling

---
 src/components/Button/index.tsx |  6 ++++--
 src/styles/utils/index.ts       | 21 ++++++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index d9311eef3f69..17d58f5abaf2 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -251,11 +251,13 @@ function Button(
                         {textComponent}
                     </View>
                     {shouldShowRightIcon && (
-                        <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
+                        <View style={[styles.justifyContentCenter, large ? styles.ml2 : styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
                                 fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                 small={small}
+                                medium={medium}
+                                large={large}
                             />
                         </View>
                     )}
@@ -313,7 +315,7 @@ function Button(
                 ]}
                 style={[
                     styles.button,
-                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon), Boolean(text?.length > 0)),
+                    StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon), Boolean(text?.length > 0), shouldShowRightIcon),
                     success ? styles.buttonSuccess : undefined,
                     danger ? styles.buttonDanger : undefined,
                     isDisabled ? styles.buttonOpacityDisabled : undefined,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index a3c501b186b8..cd18231d582d 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -475,14 +475,21 @@ function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: bool
     }
 }
 
-function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean, hasText?: boolean): ViewStyle | undefined {
+function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean, hasText?: boolean, shouldShowRightIcon?: boolean): ViewStyle | undefined {
+    const useDefaultButtonStyles = Boolean(hasIcon && shouldShowRightIcon) || Boolean(!hasIcon && !shouldShowRightIcon);
     switch (true) {
-        case small:
-            return !hasIcon ? styles.buttonSmall : {...styles.buttonSmall, ...(hasText ? styles.pl2 : styles.ph0)};
-        case medium:
-            return !hasIcon ? styles.buttonMedium : {...styles.buttonMedium, ...(hasText ? styles.pl3 : styles.ph0)};
-        case large:
-            return !hasIcon ? styles.buttonLarge : {...styles.buttonLarge, ...(hasText ? styles.pl4 : styles.ph0)};
+        case small: {
+            const verticalStyle = hasIcon ? styles.pl2 : styles.pr2;
+            return useDefaultButtonStyles ? styles.buttonSmall : {...styles.buttonSmall, ...(hasText ? verticalStyle : styles.ph0)};
+        }
+        case medium: {
+            const verticalStyle = hasIcon ? styles.pl3 : styles.pr3;
+            return useDefaultButtonStyles ? styles.buttonMedium : {...styles.buttonMedium, ...(hasText ? verticalStyle : styles.ph0)};
+        }
+        case large: {
+            const verticalStyle = hasIcon ? styles.pl4 : styles.pr4;
+            return useDefaultButtonStyles ? styles.buttonLarge : {...styles.buttonLarge, ...(hasText ? verticalStyle : styles.ph0)};
+        }
         default: {
             return undefined;
         }

From 11cb85751a596a94559b11dba6030b57b866795a Mon Sep 17 00:00:00 2001
From: Nicolay Arefyeu <n.arefyev91@gmail.com>
Date: Wed, 13 Mar 2024 17:04:57 +0200
Subject: [PATCH 13/13] prettier

---
 src/styles/utils/index.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index cd18231d582d..f1141dd11e94 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -475,7 +475,15 @@ function getIconWidthAndHeightStyle(small: boolean, medium: boolean, large: bool
     }
 }
 
-function getButtonStyleWithIcon(styles: ThemeStyles, small: boolean, medium: boolean, large: boolean, hasIcon?: boolean, hasText?: boolean, shouldShowRightIcon?: boolean): ViewStyle | undefined {
+function getButtonStyleWithIcon(
+    styles: ThemeStyles,
+    small: boolean,
+    medium: boolean,
+    large: boolean,
+    hasIcon?: boolean,
+    hasText?: boolean,
+    shouldShowRightIcon?: boolean,
+): ViewStyle | undefined {
     const useDefaultButtonStyles = Boolean(hasIcon && shouldShowRightIcon) || Boolean(!hasIcon && !shouldShowRightIcon);
     switch (true) {
         case small: {