Merge pull request #10470 from thesahindia/thesahindia/CTA-button

Reduce the height of green CTA button
Expensify · Aug 30, 2022 · 0229523 · 0229523
2 parents 2617708 + c4217b7
commit 0229523
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 47 deletions.
diff --git a/src/components/Button.js b/src/components/Button.js
@@ -45,9 +45,6 @@ const propTypes = {
     /** medium sized button */
     medium: PropTypes.bool,
 
-    /** Extra large sized button */
-    extraLarge: PropTypes.bool,
-
     /** Indicates whether the button should be disabled and in the loading state */
     isLoading: PropTypes.bool,
 
@@ -123,7 +120,6 @@ const defaultProps = {
     small: false,
     large: false,
     medium: false,
-    extraLarge: false,
     onPress: () => {},
     onLongPress: () => {},
     onPressIn: () => {},
@@ -191,7 +187,6 @@ class Button extends Component {
                     this.props.small && styles.buttonSmallText,
                     this.props.medium && styles.buttonMediumText,
                     this.props.large && styles.buttonLargeText,
-                    this.props.extraLarge && styles.buttonExtraLargeText,
                     this.props.success && styles.buttonSuccessText,
                     this.props.danger && styles.buttonDangerText,
                     ...this.props.textStyles,
@@ -271,7 +266,6 @@ class Button extends Component {
                                 this.props.small ? styles.buttonSmall : undefined,
                                 this.props.medium ? styles.buttonMedium : undefined,
                                 this.props.large ? styles.buttonLarge : undefined,
-                                this.props.extraLarge ? styles.buttonExtraLarge : undefined,
                                 this.props.success ? styles.buttonSuccess : undefined,
                                 this.props.danger ? styles.buttonDanger : undefined,
                                 (this.props.isDisabled && this.props.success) ? styles.buttonSuccessDisabled : undefined,

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -227,11 +227,11 @@ class BankAccountStep extends React.Component {
                             text={this.props.translate('bankAccount.connectOnlineWithPlaid')}
                             onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
                             disabled={this.props.isPlaidDisabled || !validated}
-                            style={[styles.mt5, styles.mh3]}
-                            iconStyles={[styles.mr5]}
+                            style={[styles.mt5, styles.buttonCTA]}
+                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
                             success
-                            extraLarge
+                            large
                         />
                         {this.props.error && (
                             <Text style={[styles.formError, styles.mh5]}>

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -244,10 +244,10 @@ class ValidationStep extends React.Component {
                             text={this.props.translate('validationStep.letsChatCTA')}
                             onPress={Report.navigateToConciergeChat}
                             icon={Expensicons.ChatBubble}
-                            style={[styles.mt4, styles.mh3]}
-                            iconStyles={[styles.mr5]}
+                            style={[styles.mt4, styles.buttonCTA]}
+                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
-                            extraLarge
+                            large
                             success
                         />
                         <MenuItem

diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
@@ -156,8 +156,8 @@ class PaymentMethodList extends Component {
             type: BUTTON,
             text: this.props.translate('paymentMethodList.addPaymentMethod'),
             icon: Expensicons.CreditCard,
-            style: [styles.mh4],
-            iconStyles: [styles.mr4],
+            style: [styles.buttonCTA],
+            iconStyles: [styles.buttonCTAIcon],
             onPress: e => this.props.onPress(e),
             isDisabled: this.props.isLoadingPayments,
             shouldShowRightIcon: true,
@@ -245,7 +245,7 @@ class PaymentMethodList extends Component {
                             iconStyles={item.iconStyles}
                             success={item.success}
                             shouldShowRightIcon={item.shouldShowRightIcon}
-                            extraLarge
+                            large
                         />
                     )}
                 </FormAlertWrapper>

diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js
@@ -101,10 +101,10 @@ class WorkspaceBankAccountPage extends React.Component {
                             text={this.props.translate('workspace.bankAccount.continueWithSetup')}
                             onPress={this.navigateToBankAccountRoute}
                             icon={Expensicons.Bank}
-                            style={[styles.mh3, styles.mt2]}
-                            iconStyles={[styles.mr5]}
+                            style={[styles.mt2, styles.buttonCTA]}
+                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
-                            extraLarge
+                            large
                             success
                         />
                         <MenuItem

diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js
@@ -34,9 +34,9 @@ const WorkspaceBillsNoVBAView = props => (
                 onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
-                iconStyles={[styles.mr5]}
+                iconStyles={[styles.buttonCTAIcon]}
                 shouldShowRightIcon
-                extraLarge
+                large
                 success
             />
         </Section>

diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js
@@ -42,7 +42,7 @@ const WorkspaceCardNoVBAView = props => (
             style={[styles.mt6]}
             iconStyles={[styles.mr5]}
             shouldShowRightIcon
-            extraLarge
+            large
             success
         />
     </Section>

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesNoVBAView.js
@@ -34,9 +34,9 @@ const WorkspaceInvoicesNoVBAView = props => (
                 onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
-                iconStyles={[styles.mr5]}
+                iconStyles={[styles.buttonCTAIcon]}
                 shouldShowRightIcon
-                extraLarge
+                large
                 success
             />
         </Section>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -235,9 +235,9 @@ class WorkspaceReimburseView extends React.Component {
                             onPress={() => ReimbursementAccount.navigateToBankAccountRoute(this.props.policyID)}
                             icon={Expensicons.Bank}
                             style={[styles.mt4]}
-                            iconStyles={[styles.mr5]}
+                            iconStyles={[styles.buttonCTAIcon]}
                             shouldShowRightIcon
-                            extraLarge
+                            large
                             success
                         />
                     </Section>

diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -31,9 +31,9 @@ const WorkspaceTravelNoVBAView = props => (
                 onPress={() => ReimbursementAccount.navigateToBankAccountRoute(props.policyID)}
                 icon={Expensicons.Bank}
                 style={[styles.mt4]}
-                iconStyles={[styles.mr5]}
+                iconStyles={[styles.buttonCTAIcon]}
                 shouldShowRightIcon
-                extraLarge
+                large
                 success
             />
         </Section>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -381,19 +381,9 @@ const styles = {
         borderRadius: variables.componentBorderRadius,
         height: variables.componentSizeLarge,
         paddingTop: 8,
-        paddingRight: 12,
+        paddingRight: 14,
         paddingBottom: 8,
-        paddingLeft: 12,
-        backgroundColor: themeColors.buttonDefaultBG,
-    },
-
-    buttonExtraLarge: {
-        borderRadius: variables.componentBorderRadius,
-        height: variables.componentSizeExtraLarge,
-        paddingTop: 12,
-        paddingRight: 18,
-        paddingBottom: 12,
-        paddingLeft: 18,
+        paddingLeft: 14,
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
@@ -418,13 +408,6 @@ const styles = {
         textAlign: 'center',
     },
 
-    buttonExtraLargeText: {
-        fontSize: variables.fontSizeMedium,
-        fontFamily: fontFamily.GTA_BOLD,
-        fontWeight: fontWeightBold,
-        textAlign: 'center',
-    },
-
     buttonSuccess: {
         backgroundColor: themeColors.buttonSuccessBG,
         borderWidth: 0,
@@ -473,6 +456,15 @@ const styles = {
         borderBottomLeftRadius: 0,
     },
 
+    buttonCTA: {
+        paddingVertical: 6,
+        ...spacing.mh4,
+    },
+
+    buttonCTAIcon: {
+        marginRight: 22,
+    },
+
     buttonConfirm: {
         margin: 20,
     },

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -4,7 +4,6 @@ export default {
     componentSizeNormal: 40,
     inputComponentSizeNormal: 42,
     componentSizeLarge: 52,
-    componentSizeExtraLarge: 64,
     componentBorderRadius: 8,
     componentBorderRadiusSmall: 4,
     componentBorderRadiusNormal: 8,