present CTAs as green buttons

src/components/Button.js

@@ -10,14 +10,28 @@ import Icon from './Icon';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import HapticFeedback from '../libs/HapticFeedback';
+import * as Expensicons from './Icon/Expensicons';
+import colors from '../styles/colors';
 
 const propTypes = {
     /** The text for the button label */
     text: PropTypes.string,
 
+    /** Boolean whether to display the right icon */
+    shouldShowRightIcon: PropTypes.bool,
+
     /** The icon asset to display to the left of the text */
     icon: PropTypes.func,
 
+    /** The icon asset to display to the right of the text */
+    iconRight: PropTypes.func,
+
+    /** The fill color to pass into the icon. */
+    iconFill: PropTypes.string,
+
+    /** Any additional styles to pass to the icon container. */
+    iconStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Small sized button */
     small: PropTypes.bool,
 
@@ -27,6 +41,9 @@ 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,
 
@@ -84,12 +101,17 @@ const propTypes = {
 
 const defaultProps = {
     text: '',
+    shouldShowRightIcon: false,
     icon: null,
+    iconRight: Expensicons.ArrowRight,
+    iconFill: colors.white,
+    iconStyles: [],
     isLoading: false,
     isDisabled: false,
     small: false,
     large: false,
     medium: false,
+    extraLarge: false,
     onPress: () => {},
     onLongPress: () => {},
     onPressIn: () => {},
@@ -158,6 +180,7 @@ 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,
@@ -169,15 +192,29 @@ class Button extends Component {
 
         if (this.props.icon) {
             return (
-                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                    <View style={styles.mr1}>
-                        <Icon
-                            src={this.props.icon}
-                            fill={themeColors.heading}
-                            small={this.props.small}
-                        />
+                <View style={[styles.justifyContentBetween, styles.flexRow]}>
+                    <View style={[styles.alignItemsCenter, styles.flexRow]}>
+                        <View style={[
+                            styles.mr1,
+                            ...this.props.iconStyles,
+                        ]}
+                        >
+                            <Icon
+                                src={this.props.icon}
+                                fill={this.props.iconFill}
+                                small={this.props.small}
+                            />
+                        </View>
+                        {textComponent}
                     </View>
-                    {textComponent}
+                    {this.props.shouldShowRightIcon && (
+                        <View>
+                            <Icon
+                                src={this.props.iconRight}
+                                fill={this.props.iconFill}
+                            />
+                        </View>
+                    )}
                 </View>
             );
         }
@@ -216,6 +253,7 @@ 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,

src/components/Icon/Expensicons.js

@@ -74,6 +74,7 @@ import ActiveRoomAvatar from '../../../assets/images/avatars/room.svg';
 import DeletedRoomAvatar from '../../../assets/images/avatars/deleted-room.svg';
 import AdminRoomAvatar from '../../../assets/images/avatars/admin-room.svg';
 import AnnounceRoomAvatar from '../../../assets/images/avatars/announce-room.svg';
+import Connect from '../../../assets/images/connect.svg';
 
 export {
     ActiveRoomAvatar,
@@ -98,6 +99,7 @@ export {
     Close,
     ClosedSign,
     Concierge,
+    Connect,
     CreditCard,
     DeletedRoomAvatar,
     DownArrow,

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -30,6 +30,7 @@ import * as Illustrations from '../../components/Icon/Illustrations';
 import getPlaidDesktopMessage from '../../libs/getPlaidDesktopMessage';
 import CONFIG from '../../CONFIG';
 import ROUTES from '../../ROUTES';
+import Button from '../../components/Button';
 
 const propTypes = {
     /** Bank account currently in setup */
@@ -214,20 +215,24 @@ class BankAccountStep extends React.Component {
                                 </TextLink>
                             </View>
                         )}
-                        <MenuItem
+                        <Button
                             icon={Expensicons.Bank}
-                            title={this.props.translate('bankAccount.connectOnlineWithPlaid')}
+                            text={this.props.translate('bankAccount.connectOnlineWithPlaid')}
                             onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
                             disabled={this.props.isPlaidDisabled || !this.props.user.validated}
+                            style={[styles.mt5, styles.mh3]}
+                            iconStyles={[styles.mr5]}
                             shouldShowRightIcon
+                            success
+                            extraLarge
                         />
                         {this.props.isPlaidDisabled && (
                             <Text style={[styles.formError, styles.mh5]}>
                                 {this.props.translate('bankAccount.error.tooManyAttempts')}
                             </Text>
                         )}
                         <MenuItem
-                            icon={Expensicons.Paycheck}
+                            icon={Expensicons.Connect}
                             title={this.props.translate('bankAccount.connectManually')}
                             disabled={!this.props.user.validated}
                             onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)}

src/pages/ReimbursementAccount/ValidationStep.js

@@ -25,6 +25,8 @@ import * as Expensicons from '../../components/Icon/Expensicons';
 import * as Illustrations from '../../components/Icon/Illustrations';
 import Section from '../../components/Section';
 import CONST from '../../CONST';
+import Button from '../../components/Button';
+import MenuItem from '../../components/MenuItem';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -232,25 +234,27 @@ class ValidationStep extends React.Component {
                         <Section
                             title={this.props.translate('workspace.bankAccount.letsFinishInChat')}
                             icon={Illustrations.ConciergeBlue}
-                            menuItems={[
-                                {
-                                    title: this.props.translate('validationStep.letsChatCTA'),
-                                    icon: Expensicons.ChatBubble,
-                                    onPress: Report.navigateToConciergeChat,
-                                    shouldShowRightIcon: true,
-                                },
-                                {
-                                    title: this.props.translate('workspace.bankAccount.noLetsStartOver'),
-                                    icon: Expensicons.RotateLeft,
-                                    shouldShowRightIcon: true,
-                                    onPress: BankAccounts.requestResetFreePlanBankAccount,
-                                },
-                            ]}
                         >
                             <Text>
                                 {this.props.translate('validationStep.letsChatText')}
                             </Text>
                         </Section>
+                        <Button
+                            text={this.props.translate('validationStep.letsChatCTA')}
+                            onPress={Report.navigateToConciergeChat}
+                            icon={Expensicons.ChatBubble}
+                            style={[styles.mt4, styles.mh3]}
+                            iconStyles={[styles.mr5]}
+                            shouldShowRightIcon
+                            extraLarge
+                            success
+                        />
+                        <MenuItem
+                            title={this.props.translate('workspace.bankAccount.noLetsStartOver')}
+                            icon={Expensicons.RotateLeft}
+                            onPress={BankAccounts.requestResetFreePlanBankAccount}
+                            shouldShowRightIcon
+                        />
                     </View>
                 )}
             </View>

src/pages/settings/Payments/PaymentMethodList.js

@@ -6,6 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import styles from '../../../styles/styles';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import MenuItem from '../../../components/MenuItem';
+import Button from '../../../components/Button';
 import Text from '../../../components/Text';
 import compose from '../../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -16,14 +17,12 @@ import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 
 const MENU_ITEM = 'menuItem';
+const BUTTON = 'button';
 
 const propTypes = {
     /** What to do when a menu item is pressed */
     onPress: PropTypes.func.isRequired,
 
-    /** Is the payment options menu open / active? */
-    isAddPaymentMenuActive: PropTypes.bool,
-
     /** User's paypal.me username if they have one */
     payPalMeUsername: PropTypes.string,
 
@@ -77,7 +76,6 @@ const defaultProps = {
         walletLinkedAccountID: 0,
         walletLinkedAccountType: '',
     },
-    isAddPaymentMenuActive: false,
     shouldShowAddPaymentMethodButton: true,
     filterType: '',
     actionPaymentMethodType: '',
@@ -155,13 +153,16 @@ class PaymentMethodList extends Component {
         }
 
         combinedPaymentMethods.push({
-            type: MENU_ITEM,
-            title: this.props.translate('paymentMethodList.addPaymentMethod'),
-            icon: Expensicons.Plus,
+            type: BUTTON,
+            text: this.props.translate('paymentMethodList.addPaymentMethod'),
+            icon: Expensicons.CreditCard,
+            style: [styles.mh4],
+            iconStyles: [styles.mr4],
             onPress: e => this.props.onPress(e),
+            isDisabled: this.props.isLoadingPayments,
+            shouldShowRightIcon: true,
+            success: true,
             key: 'addPaymentMethodButton',
-            iconFill: this.props.isAddPaymentMenuActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
-            wrapperStyle: this.props.isAddPaymentMenuActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : [],
         });
 
         return combinedPaymentMethods;
@@ -204,6 +205,21 @@ class PaymentMethodList extends Component {
                 />
             );
         }
+        if (item.type === BUTTON) {
+            return (
+                <Button
+                    text={item.text}
+                    icon={item.icon}
+                    onPress={item.onPress}
+                    isDisabled={item.isDisabled}
+                    style={item.style}
+                    iconStyles={item.iconStyles}
+                    success={item.success}
+                    shouldShowRightIcon={item.shouldShowRightIcon}
+                    extraLarge
+                />
+            );
+        }
 
         return (
             <Text

src/pages/workspace/WorkspaceBankAccountPage.js

@@ -21,6 +21,8 @@ import WorkspaceResetBankAccountModal from './WorkspaceResetBankAccountModal';
 import styles from '../../styles/styles';
 import CONST from '../../CONST';
 import withFullPolicy from './withFullPolicy';
+import Button from '../../components/Button';
+import MenuItem from '../../components/MenuItem';
 
 const propTypes = {
     /** ACH data for the withdrawal account actively being set up */
@@ -110,25 +112,27 @@ class WorkspaceBankAccountPage extends React.Component {
                     <Section
                         title={this.props.translate('workspace.bankAccount.almostDone')}
                         icon={Illustrations.BankArrowPink}
-                        menuItems={[
-                            {
-                                title: this.props.translate('workspace.bankAccount.continueWithSetup'),
-                                icon: Expensicons.Bank,
-                                onPress: this.navigateToBankAccountRoute,
-                                shouldShowRightIcon: true,
-                            },
-                            {
-                                title: this.props.translate('workspace.bankAccount.startOver'),
-                                icon: Expensicons.RotateLeft,
-                                onPress: BankAccounts.requestResetFreePlanBankAccount,
-                                shouldShowRightIcon: true,
-                            },
-                        ]}
                     >
                         <Text>
                             {this.props.translate('workspace.bankAccount.youreAlmostDone')}
                         </Text>
                     </Section>
+                    <Button
+                        text={this.props.translate('workspace.bankAccount.continueWithSetup')}
+                        onPress={this.navigateToBankAccountRoute}
+                        icon={Expensicons.Bank}
+                        style={[styles.mh3, styles.mt2]}
+                        iconStyles={[styles.mr5]}
+                        shouldShowRightIcon
+                        extraLarge
+                        success
+                    />
+                    <MenuItem
+                        title={this.props.translate('workspace.bankAccount.startOver')}
+                        icon={Expensicons.RotateLeft}
+                        onPress={BankAccounts.requestResetFreePlanBankAccount}
+                        shouldShowRightIcon
+                    />
                 </ScrollView>
                 <WorkspaceResetBankAccountModal />
             </ScreenWrapper>

src/pages/workspace/bills/WorkspaceBillsNoVBAView.js

@@ -10,6 +10,7 @@ import Section from '../../../components/Section';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import WorkspaceBillsFirstSection from './WorkspaceBillsFirstSection';
+import Button from '../../../components/Button';
 
 const propTypes = {
     /** The policy ID currently being configured */
@@ -25,19 +26,20 @@ const WorkspaceBillsNoVBAView = props => (
         <Section
             title={props.translate('workspace.bills.unlockOnlineBillPayment')}
             icon={Illustrations.JewelBoxPink}
-            menuItems={[
-                {
-                    title: props.translate('workspace.common.bankAccount'),
-                    onPress: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID)),
-                    icon: Expensicons.Bank,
-                    shouldShowRightIcon: true,
-                    iconRight: Expensicons.ArrowRight,
-                },
-            ]}
         >
             <View style={[styles.mv4]}>
                 <Text>{props.translate('workspace.bills.unlockNoVBACopy')}</Text>
             </View>
+            <Button
+                text={props.translate('workspace.common.bankAccount')}
+                onPress={() => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(props.policyID))}
+                icon={Expensicons.Bank}
+                style={[styles.mt4]}
+                iconStyles={[styles.mr5]}
+                shouldShowRightIcon
+                extraLarge
+                success
+            />
         </Section>
     </>
 );