add all but 4 updated cards

brunovjk · Nov 16, 2022 · a681a68 · a681a68
1 parent afd5a33
commit a681a68
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 54 deletions.
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -101,13 +101,12 @@ const BankAccountStep = (props) => {
                 <Section
                     icon={Illustrations.MoneyWings}
                     title={props.translate('workspace.bankAccount.streamlinePayments')}
-                    containerStyles={[styles.cardSection]}
                 >
                     <View style={[styles.mv3]}>
                         <Text>{props.translate('bankAccount.toGetStarted')}</Text>
                     </View>
                     {plaidDesktopMessage && (
-                        <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
+                        <View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
                             <TextLink href={bankAccountRoute}>
                                 {props.translate(plaidDesktopMessage)}
                             </TextLink>
@@ -152,7 +151,7 @@ const BankAccountStep = (props) => {
                         </Text>
                     </View>
                 )}
-                <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
+                <View style={[styles.mv0, styles.mh5, styles.flexRow, styles.justifyContentBetween]}>
                     <TextLink href="https://use.expensify.com/privacy">
                         {props.translate('common.privacy')}
                     </TextLink>

diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
@@ -1,24 +1,25 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Image} from 'react-native';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
+import themeColors from '../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
+import Button from '../../components/Button';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import MenuItem from '../../components/MenuItem';
 import getBankIcon from '../../components/Icon/BankIcons';
 import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
 import confettiPop from '../../../assets/images/confetti-pop.gif';
-import Icon from '../../components/Icon';
 import Section from '../../components/Section';
 import * as Illustrations from '../../components/Icon/Illustrations';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -84,22 +85,6 @@ class EnableStep extends React.Component {
             }`
             : '';
         const bankName = account.addressName;
-        const menuItems = [{
-            title: this.props.translate('workspace.bankAccount.disconnectBankAccount'),
-            icon: Expensicons.Close,
-            onPress: BankAccounts.requestResetFreePlanBankAccount,
-        }];
-        if (!isUsingExpensifyCard) {
-            menuItems.unshift({
-                title: this.props.translate('workspace.bankAccount.addWorkEmail'),
-                icon: Expensicons.Mail,
-                onPress: () => {
-                    Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
-                    User.subscribeToExpensifyCardUpdates();
-                },
-                shouldShowRightIcon: true,
-            });
-        }
 
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -114,9 +99,7 @@ class EnableStep extends React.Component {
                 <View style={[styles.flex1]}>
                     <Section
                         title={!isUsingExpensifyCard ? this.props.translate('workspace.bankAccount.oneMoreThing') : this.props.translate('workspace.bankAccount.allSet')}
-                        // eslint-disable-next-line max-len
-                        IconComponent={() => (!isUsingExpensifyCard ? <Icon src={Illustrations.ConciergeBlue} width={80} height={80} /> : <Image source={confettiPop} style={styles.confettiIcon} />)}
-                        menuItems={menuItems}
+                        icon={!isUsingExpensifyCard ? Illustrations.ConciergeNew : confettiPop}
                     >
                         <MenuItem
                             title={bankName}
@@ -126,13 +109,38 @@ class EnableStep extends React.Component {
                             iconHeight={iconSize}
                             disabled
                             interactive={false}
-                            wrapperStyle={[styles.ph0, styles.mb3]}
+                            wrapperStyle={[styles.cardMenuItem, styles.mv3]}
+                            iconFill={themeColors.buttonSuccessBG}
                         />
-                        <Text>
+                        <Text style={[styles.mv3]}>
                             {!isUsingExpensifyCard
                                 ? this.props.translate('workspace.bankAccount.accountDescriptionNoCards')
                                 : this.props.translate('workspace.bankAccount.accountDescriptionWithCards')}
                         </Text>
+                        {!isUsingExpensifyCard && (
+                            <Button
+                                text={this.props.translate('workspace.bankAccount.addWorkEmail')}
+                                onPress={() => {
+                                    Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
+                                    User.subscribeToExpensifyCardUpdates();
+                                }}
+                                icon={Expensicons.Mail}
+                                style={[styles.mt4]}
+                                iconStyles={[styles.buttonCTAIcon]}
+                                shouldShowRightIcon
+                                large
+                                success
+                            />
+                        )}
+                        <View style={[styles.mv3]}>
+                            <MenuItem
+                                title={this.props.translate('workspace.bankAccount.disconnectBankAccount')}
+                                icon={Expensicons.Close}
+                                onPress={BankAccounts.requestResetFreePlanBankAccount}
+                                iconFill={themeColors.buttonSuccessBG}
+                                wrapperStyle={[styles.cardMenuItem]}
+                            />
+                        </View>
                     </Section>
                     {this.props.user.isCheckingDomain && (
                         <Text style={[styles.formError, styles.m5]}>

diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
@@ -23,18 +24,20 @@ const WorkspaceBillsVBAView = props => (
 
         <Section
             title={props.translate('workspace.bills.hassleFreeBills')}
-            icon={Illustrations.MoneyMousePink}
+            icon={Illustrations.MoneyBadge}
             menuItems={[
                 {
                     title: props.translate('workspace.common.bills'),
                     onPress: () => Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=bill&showStates=Processing,Approved&isAdvancedFilterMode=true`),
                     icon: Expensicons.Bill,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
+                    iconFill: themeColors.buttonSuccessBG,
+                    wrapperStyle: [styles.cardMenuItem],
                 },
             ]}
         >
-            <View style={[styles.mv4]}>
+            <View style={[styles.mv3]}>
                 <Text>{props.translate('workspace.bills.VBACopy')}</Text>
             </View>
         </Section>

diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js
@@ -1,6 +1,8 @@
 import React from 'react';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Text from '../../../components/Text';
+import Button from '../../../components/Button';
 import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -21,33 +23,38 @@ const WorkspaceCardVBANoECardView = props => (
     <>
         <Section
             title={props.translate('workspace.card.header')}
-            icon={Illustrations.JewelBoxBlue}
-            menuItems={[
-                {
-                    title: props.translate('workspace.card.addWorkEmail'),
-                    onPress: () => {
-                        Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
-                        User.subscribeToExpensifyCardUpdates();
-                    },
-                    icon: Expensicons.Mail,
-                    shouldShowRightIcon: true,
-                },
-            ]}
+            icon={Illustrations.CreditCardsNew}
         >
-            <UnorderedList
-                items={[
-                    props.translate('workspace.card.benefit1'),
-                    props.translate('workspace.card.benefit2'),
-                    props.translate('workspace.card.benefit3'),
-                    props.translate('workspace.card.benefit4'),
-                ]}
+            <View style={[styles.mv3]}>
+                <UnorderedList
+                    items={[
+                        props.translate('workspace.card.benefit1'),
+                        props.translate('workspace.card.benefit2'),
+                        props.translate('workspace.card.benefit3'),
+                        props.translate('workspace.card.benefit4'),
+                    ]}
+                />
+            </View>
+            <Button
+                text={props.translate('workspace.card.addWorkEmail')}
+                onPress={() => {
+                    Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
+                    User.subscribeToExpensifyCardUpdates();
+                }}
+                icon={Expensicons.Mail}
+                style={[styles.mt4]}
+                iconStyles={[styles.buttonCTAIcon]}
+                shouldShowRightIcon
+                large
+                success
             />
         </Section>
         {props.user.isCheckingDomain && (
             <Text style={[styles.m5, styles.formError]}>
                 {props.translate('workspace.card.checkingDomain')}
             </Text>
         )}
+
     </>
 );
 

diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
@@ -23,18 +24,20 @@ const WorkspaceInvoicesVBAView = props => (
 
         <Section
             title={props.translate('workspace.invoices.moneyBackInAFlash')}
-            icon={Illustrations.MoneyMousePink}
+            icon={Illustrations.MoneyBadge}
             menuItems={[
                 {
                     title: props.translate('workspace.invoices.viewUnpaidInvoices'),
                     onPress: () => Link.openOldDotLink(`reports?policyID=${props.policyID}&from=all&type=invoice&showStates=Processing&isAdvancedFilterMode=true`),
                     icon: Expensicons.CircleHourglass,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
+                    iconFill: themeColors.buttonSuccessBG,
+                    wrapperStyle: [styles.cardMenuItem],
                 },
             ]}
         >
-            <View style={[styles.mv4]}>
+            <View style={[styles.mv3]}>
                 <Text>{props.translate('workspace.invoices.unlockVBACopy')}</Text>
             </View>
         </Section>

diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -273,14 +273,16 @@ class WorkspaceReimburseView extends React.Component {
                 {this.props.hasVBA ? (
                     <Section
                         title={this.props.translate('workspace.reimburse.fastReimbursementsHappyMembers')}
-                        icon={Illustrations.BankUserGreen}
+                        icon={Illustrations.TreasureChest}
                         menuItems={[
                             {
                                 title: this.props.translate('workspace.reimburse.reimburseReceipts'),
                                 onPress: () => Link.openOldDotLink(`reports?policyID=${this.props.policy.id}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`),
                                 icon: Expensicons.Bank,
                                 shouldShowRightIcon: true,
                                 iconRight: Expensicons.NewWindow,
+                                iconFill: themeColors.buttonSuccessBG,
+                                wrapperStyle: [styles.cardMenuItem],
                             },
                         ]}
                     >

diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js
@@ -22,7 +22,6 @@ const WorkspaceTravelNoVBAView = props => (
         <Section
             title={props.translate('workspace.travel.unlockConciergeBookingTravel')}
             icon={Illustrations.Luggage}
-            containerStyles={[styles.cardSection]}
         >
             <View style={[styles.mv3]}>
                 <Text>{props.translate('workspace.travel.noVBACopy')}</Text>

diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
@@ -16,14 +17,16 @@ const propTypes = {
 const WorkspaceTravelVBAView = props => (
     <Section
         title={props.translate('workspace.travel.packYourBags')}
-        icon={Illustrations.RocketOrange}
+        icon={Illustrations.Luggage}
         menuItems={[
             {
                 title: props.translate('workspace.common.issueAndManageCards'),
                 onPress: () => Link.openOldDotLink('domain_companycards'),
                 icon: Expensicons.ExpensifyCard,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
+                iconFill: themeColors.buttonSuccessBG,
+                wrapperStyle: [styles.cardMenuItem],
             },
             {
                 title: props.translate('workspace.travel.bookTravelWithConcierge'),
@@ -32,17 +35,21 @@ const WorkspaceTravelVBAView = props => (
                 },
                 icon: Expensicons.Concierge,
                 shouldShowRightIcon: true,
+                iconFill: themeColors.buttonSuccessBG,
+                wrapperStyle: [styles.cardMenuItem],
             },
             {
                 title: props.translate('requestorStep.learnMore'),
                 onPress: () => Link.openExternalLink('https://community.expensify.com/discussion/7066/introducing-concierge-travel'),
                 icon: Expensicons.Info,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
+                iconFill: themeColors.buttonSuccessBG,
+                wrapperStyle: [styles.cardMenuItem],
             },
         ]}
     >
-        <View style={[styles.mv4]}>
+        <View style={[styles.mv3]}>
             <Text>{props.translate('workspace.travel.VBACopy')}</Text>
         </View>
     </Section>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2777,6 +2777,7 @@ const styles = {
         borderRadius: variables.componentBorderRadiusNormal,
         paddingVertical: 6,
     },
+
     callRequestSection: {
         backgroundColor: themeColors.appBG,
         paddingHorizontal: 0,

diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
@@ -49,5 +49,5 @@ export default {
     placeholderText: colors.gray3,
     heroCard: colors.blue,
     uploadPreviewActivityIndicator: colors.gray1,
-    cardBackground: colors.blue,
+    cardBackground: colors.gray1,
 };