diff --git a/assets/images/simple-illustrations/simple-illustration__bank-arrow.svg b/assets/images/simple-illustrations/simple-illustration__bank-arrow.svg new file mode 100644 index 000000000000..7e5b4dae1ccc --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__bank-arrow.svg @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__bill.svg b/assets/images/simple-illustrations/simple-illustration__bill.svg new file mode 100644 index 000000000000..7fb76fb8c09b --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__bill.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg b/assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg new file mode 100644 index 000000000000..eeabc78b1881 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__concierge.svg b/assets/images/simple-illustrations/simple-illustration__concierge.svg new file mode 100644 index 000000000000..8275671c3486 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__concierge.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__credit-cards.svg b/assets/images/simple-illustrations/simple-illustration__credit-cards.svg new file mode 100644 index 000000000000..8e070f074ef3 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__credit-cards.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__invoice.svg b/assets/images/simple-illustrations/simple-illustration__invoice.svg new file mode 100644 index 000000000000..0a10b70a7bfe --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__invoice.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__lockopen.svg b/assets/images/simple-illustrations/simple-illustration__lockopen.svg new file mode 100644 index 000000000000..fb07d7a8628b --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__lockopen.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__luggage.svg b/assets/images/simple-illustrations/simple-illustration__luggage.svg new file mode 100644 index 000000000000..9a01eee56662 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__luggage.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__money-receipts.svg b/assets/images/simple-illustrations/simple-illustration__money-receipts.svg new file mode 100644 index 000000000000..3d81f5dba653 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__money-receipts.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__moneybadge.svg b/assets/images/simple-illustrations/simple-illustration__moneybadge.svg new file mode 100644 index 000000000000..1f673aa20a90 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__moneybadge.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg b/assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg new file mode 100644 index 000000000000..3f89e6b14836 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg @@ -0,0 +1,137 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__moneywings.svg b/assets/images/simple-illustrations/simple-illustration__moneywings.svg new file mode 100644 index 000000000000..b13abdf448af --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__moneywings.svg @@ -0,0 +1,131 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__opensafe.svg b/assets/images/simple-illustrations/simple-illustration__opensafe.svg new file mode 100644 index 000000000000..273d68b62723 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__opensafe.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg b/assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg new file mode 100644 index 000000000000..623874d2d3eb --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__track-shoe.svg b/assets/images/simple-illustrations/simple-illustration__track-shoe.svg new file mode 100644 index 000000000000..5d45f2f9df67 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__track-shoe.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/simple-illustrations/simple-illustration__treasurechest.svg b/assets/images/simple-illustrations/simple-illustration__treasurechest.svg new file mode 100644 index 000000000000..edb868db11d2 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__treasurechest.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 273f5854a3d7..20c2006a3b82 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -17,6 +17,22 @@ import RocketOrange from '../../../assets/images/product-illustrations/rocket--o import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg'; import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg'; import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg'; +import MoneyReceipts from '../../../assets/images/simple-illustrations/simple-illustration__money-receipts.svg'; +import PinkBill from '../../../assets/images/simple-illustrations/simple-illustration__bill.svg'; +import CreditCardsNew from '../../../assets/images/simple-illustrations/simple-illustration__credit-cards.svg'; +import InvoiceBlue from '../../../assets/images/simple-illustrations/simple-illustration__invoice.svg'; +import LockOpen from '../../../assets/images/simple-illustrations/simple-illustration__lockopen.svg'; +import Luggage from '../../../assets/images/simple-illustrations/simple-illustration__luggage.svg'; +import MoneyIntoWallet from '../../../assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg'; +import MoneyWings from '../../../assets/images/simple-illustrations/simple-illustration__moneywings.svg'; +import OpenSafe from '../../../assets/images/simple-illustrations/simple-illustration__opensafe.svg'; +import TrackShoe from '../../../assets/images/simple-illustrations/simple-illustration__track-shoe.svg'; +import BankArrow from '../../../assets/images/simple-illustrations/simple-illustration__bank-arrow.svg'; +import ConciergeBubble from '../../../assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg'; +import ConciergeNew from '../../../assets/images/simple-illustrations/simple-illustration__concierge.svg'; +import MoneyBadge from '../../../assets/images/simple-illustrations/simple-illustration__moneybadge.svg'; +import TreasureChest from '../../../assets/images/simple-illustrations/simple-illustration__treasurechest.svg'; +import ThumbsUpStars from '../../../assets/images/simple-illustrations/simple-illustration__thumbsupstars.svg'; export { BankArrowPink, @@ -38,4 +54,20 @@ export { TadaYellow, TadaBlue, GpsTrackOrange, + MoneyReceipts, + PinkBill, + CreditCardsNew, + InvoiceBlue, + LockOpen, + Luggage, + MoneyIntoWallet, + MoneyWings, + OpenSafe, + TrackShoe, + BankArrow, + ConciergeBubble, + ConciergeNew, + MoneyBadge, + TreasureChest, + ThumbsUpStars, }; diff --git a/src/components/Section.js b/src/components/Section.js index a0fbf34f0833..83c8900a30a2 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -40,13 +40,13 @@ const Section = (props) => { const IconComponent = props.IconComponent; return ( <> - + {props.title} - {props.icon && } + {props.icon && } {IconComponent && } @@ -54,9 +54,12 @@ const Section = (props) => { {props.children} + + + {props.menuItems && } + - {props.menuItems && } ); }; diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js index 577a7dc5f6a1..fbf7ab90bd3a 100644 --- a/src/pages/GetAssistancePage.js +++ b/src/pages/GetAssistancePage.js @@ -7,6 +7,7 @@ import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; import Section from '../components/Section'; import Navigation from '../libs/Navigation/Navigation'; import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; import Text from '../components/Text'; import * as Expensicons from '../components/Icon/Expensicons'; import * as Illustrations from '../components/Icon/Illustrations'; @@ -36,23 +37,27 @@ const GetAssistancePage = props => (
Report.navigateToConciergeChat(), icon: Expensicons.ChatBubble, shouldShowRightIcon: true, + iconFill: themeColors.success, + wrapperStyle: [styles.cardMenuItem], }, { title: props.translate('getAssistancePage.requestSetupCall'), onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)), icon: Expensicons.Phone, shouldShowRightIcon: true, + iconFill: themeColors.success, + wrapperStyle: [styles.cardMenuItem], }, ]} > - + {props.translate('getAssistancePage.description')}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 3a71ac53b9d7..d2e5fdf9ecfa 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -9,6 +9,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import MenuItem from '../../components/MenuItem'; import * as Expensicons from '../../components/Icon/Expensicons'; import styles from '../../styles/styles'; +import themeColors from '../../styles/themes/default'; import TextLink from '../../components/TextLink'; import Icon from '../../components/Icon'; import colors from '../../styles/colors'; @@ -98,45 +99,50 @@ const BankAccountStep = (props) => { />
- - {props.translate('bankAccount.toGetStarted')} - - {plaidDesktopMessage && ( - - - {props.translate(plaidDesktopMessage)} - + > + + {props.translate('bankAccount.toGetStarted')} - )} -
{!props.user.validated && ( @@ -145,7 +151,7 @@ const BankAccountStep = (props) => { )} - + {props.translate('common.privacy')} diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js index feeab0ec1fee..a0fe9ed86514 100644 --- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js +++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js @@ -15,6 +15,7 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import MenuItem from '../../components/MenuItem'; import Navigation from '../../libs/Navigation/Navigation'; import styles from '../../styles/styles'; +import themeColors from '../../styles/themes/default'; import ScreenWrapper from '../../components/ScreenWrapper'; import Section from '../../components/Section'; import Text from '../../components/Text'; @@ -47,28 +48,30 @@ const ContinueBankAccountSetup = props => (
{props.translate('workspace.bankAccount.youreAlmostDone')} +
-