From 9fb81ac8c7b75e3aa521e50db422d436b32df371 Mon Sep 17 00:00:00 2001 From: sahil Date: Tue, 12 Apr 2022 21:18:15 +0530 Subject: [PATCH 1/4] present CTAs as green buttons --- assets/images/connect.svg | 12 +++++ src/components/Button.js | 53 ++++++++++++++++--- src/components/Icon/Expensicons.js | 2 + .../ReimbursementAccount/BankAccountStep.js | 11 ++-- .../ReimbursementAccount/ValidationStep.js | 32 ++++++----- .../settings/Payments/PaymentMethodList.js | 35 ++++++++---- .../workspace/WorkspaceBankAccountPage.js | 32 ++++++----- .../bills/WorkspaceBillsNoVBAView.js | 20 +++---- .../workspace/card/WorkspaceCardNoVBAView.js | 19 ++++--- .../invoices/WorkspaceInvoicesNoVBAView.js | 20 +++---- .../reimburse/WorkspaceReimburseNoVBAView.js | 19 ++++--- .../travel/WorkspaceTravelNoVBAView.js | 20 +++---- src/styles/styles.js | 17 ++++++ src/styles/variables.js | 2 + 14 files changed, 202 insertions(+), 92 deletions(-) create mode 100644 assets/images/connect.svg diff --git a/assets/images/connect.svg b/assets/images/connect.svg new file mode 100644 index 000000000000..6d4e9eb21d97 --- /dev/null +++ b/assets/images/connect.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/src/components/Button.js b/src/components/Button.js index d192c43f7738..2ed68e72d74f 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -10,14 +10,27 @@ 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'; 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 +40,9 @@ const propTypes = { /** medium sized button */ medium: PropTypes.bool, + /** Extra large sized button */ + xLarge: PropTypes.bool, + /** Indicates whether the button should be disabled and in the loading state */ isLoading: PropTypes.bool, @@ -84,12 +100,17 @@ const propTypes = { const defaultProps = { text: '', + shouldShowRightIcon: false, icon: null, + iconRight: Expensicons.ArrowRight, + iconFill: '#fff', + iconStyles: [], isLoading: false, isDisabled: false, small: false, large: false, medium: false, + xLarge: false, onPress: () => {}, onLongPress: () => {}, onPressIn: () => {}, @@ -158,6 +179,7 @@ class Button extends Component { this.props.small && styles.buttonSmallText, this.props.medium && styles.buttonMediumText, this.props.large && styles.buttonLargeText, + this.props.xLarge && styles.buttonXLargeText, this.props.success && styles.buttonSuccessText, this.props.danger && styles.buttonDangerText, ...this.props.textStyles, @@ -169,15 +191,29 @@ class Button extends Component { if (this.props.icon) { return ( - - - + + + + + + {textComponent} - {textComponent} + {this.props.shouldShowRightIcon && ( + + + + )} ); } @@ -216,6 +252,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.xLarge ? styles.buttonXLarge : 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/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index 4dc6b42dff85..4d98f1146930 100644 --- a/src/components/Icon/Expensicons.js +++ b/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, diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index a3dff5c46aff..5042cfea861a 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/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,12 +215,16 @@ class BankAccountStep extends React.Component { )} - 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 + xLarge /> {this.props.isPlaidDisabled && ( @@ -227,7 +232,7 @@ class BankAccountStep extends React.Component { )} BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)} diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 40111a4219d6..d0d8ff06ddea 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/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 {
{this.props.translate('validationStep.letsChatText')}
+