From f8dc72e4a207144b2344a05fb8e64aa9e92ae97b Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Wed, 2 Nov 2022 17:44:44 -0700 Subject: [PATCH 01/11] initial updates for style on workspace editor page --- .../simple-illustration__money-receipts.svg | 142 ++++++++++++++++++ src/components/Icon/Illustrations.js | 2 + src/components/Section.js | 7 +- .../reimburse/WorkspaceReimburseView.js | 17 ++- src/styles/styles.js | 14 ++ 5 files changed, 175 insertions(+), 7 deletions(-) create mode 100644 assets/images/product-illustrations/simple-illustration__money-receipts.svg diff --git a/assets/images/product-illustrations/simple-illustration__money-receipts.svg b/assets/images/product-illustrations/simple-illustration__money-receipts.svg new file mode 100644 index 0000000000000..3d81f5dba6535 --- /dev/null +++ b/assets/images/product-illustrations/simple-illustration__money-receipts.svg @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 273f5854a3d79..47822a65dc570 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -17,6 +17,7 @@ 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/product-illustrations/simple-illustration__money-receipts.svg'; export { BankArrowPink, @@ -38,4 +39,5 @@ export { TadaYellow, TadaBlue, GpsTrackOrange, + MoneyReceipts, }; diff --git a/src/components/Section.js b/src/components/Section.js index a0fbf34f0833e..9388eb8c2685c 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -46,7 +46,7 @@ const Section = (props) => { {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/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 7bdd38d471e34..575029826e0bf 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -7,6 +7,7 @@ import TextInput from '../../../components/TextInput'; import Picker from '../../../components/Picker'; 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'; @@ -193,7 +194,7 @@ class WorkspaceReimburseView extends React.Component {
- + {this.props.translate('workspace.reimburse.captureNoVBACopyBeforeEmail')} - + {this.props.translate('workspace.reimburse.trackDistanceCopy')} - + {this.props.translate('workspace.reimburse.unlockNoVBACopy')}
diff --git a/src/styles/styles.js b/src/styles/styles.js index f2d7cff023da9..5899b9c87d843 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2761,6 +2761,20 @@ const styles = { fontSize: variables.fontSizeSmall, ...spacing.ph2, }, + + workspaceSection: { + backgroundColor: colors.gray1, + borderRadius: variables.componentBorderRadiusCard, + marginVertical: 10, + marginHorizontal: 16, + padding: 20, + width: 'auto', + textAlign: 'left', + }, + + workspaceMenuItem: { + paddingHorizontal: 0, + }, }; export default styles; From 09ed8b120e4d21f1ea4e0d816f24983f174909f9 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Tue, 8 Nov 2022 18:07:37 -0500 Subject: [PATCH 02/11] update pages and consolidate images --- .../simple-illustration__bill.svg | 57 +++++ .../simple-illustration__credit-cards.svg | 92 +++++++++ .../simple-illustration__invoice.svg | 65 ++++++ .../simple-illustration__lockopen.svg | 73 +++++++ .../simple-illustration__luggage.svg | 79 +++++++ .../simple-illustration__money-receipts.svg | 0 .../simple-illustration__moneyintowallet.svg | 137 ++++++++++++ .../simple-illustration__moneywings.svg | 131 ++++++++++++ .../simple-illustration__opensafe.svg | 195 ++++++++++++++++++ .../simple-illustration__track-shoe.svg | 100 +++++++++ src/components/Icon/Illustrations.js | 20 +- .../ReimbursementAccount/BankAccountStep.js | 81 ++++---- .../bills/WorkspaceBillsFirstSection.js | 8 +- .../bills/WorkspaceBillsNoVBAView.js | 5 +- .../invoices/WorkspaceInvoicesFirstSection.js | 10 +- .../invoices/WorkspaceInvoicesNoVBAView.js | 5 +- .../reimburse/WorkspaceReimburseView.js | 14 +- .../travel/WorkspaceTravelNoVBAView.js | 5 +- src/styles/styles.js | 10 +- src/styles/themes/default.js | 1 + 20 files changed, 1029 insertions(+), 59 deletions(-) create mode 100644 assets/images/simple-illustrations/simple-illustration__bill.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__credit-cards.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__invoice.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__lockopen.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__luggage.svg rename assets/images/{product-illustrations => simple-illustrations}/simple-illustration__money-receipts.svg (100%) create mode 100644 assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__moneywings.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__opensafe.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__track-shoe.svg 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 0000000000000..7fb76fb8c09b9 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__bill.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + 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 0000000000000..8e070f074ef30 --- /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 0000000000000..0a10b70a7bfe1 --- /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 0000000000000..fb07d7a8628b8 --- /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 0000000000000..9a01eee566621 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__luggage.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/product-illustrations/simple-illustration__money-receipts.svg b/assets/images/simple-illustrations/simple-illustration__money-receipts.svg similarity index 100% rename from assets/images/product-illustrations/simple-illustration__money-receipts.svg rename to assets/images/simple-illustrations/simple-illustration__money-receipts.svg 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 0000000000000..3f89e6b14836a --- /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 0000000000000..b13abdf448afc --- /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 0000000000000..273d68b62723e --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__opensafe.svg @@ -0,0 +1,195 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 0000000000000..5d45f2f9df674 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__track-shoe.svg @@ -0,0 +1,100 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 47822a65dc570..1221fbe46130e 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -17,7 +17,16 @@ 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/product-illustrations/simple-illustration__money-receipts.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'; export { BankArrowPink, @@ -40,4 +49,13 @@ export { TadaBlue, GpsTrackOrange, MoneyReceipts, + PinkBill, + CreditCardsNew, + InvoiceBlue, + LockOpen, + Luggage, + MoneyIntoWallet, + MoneyWings, + OpenSafe, + TrackShoe, }; diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index 048f38fe3fd05..24e4edc50a448 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,51 @@ const BankAccountStep = (props) => { />
- - {props.translate('bankAccount.toGetStarted')} - - {plaidDesktopMessage && ( - - - {props.translate(plaidDesktopMessage)} - + containerStyles={[styles.cardSection]} + > + + {props.translate('bankAccount.toGetStarted')} - )} -
{!props.user.validated && ( diff --git a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js index 85f1ecac75650..f247acede9985 100644 --- a/src/pages/workspace/bills/WorkspaceBillsFirstSection.js +++ b/src/pages/workspace/bills/WorkspaceBillsFirstSection.js @@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; 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'; @@ -38,7 +39,7 @@ const WorkspaceBillsFirstSection = (props) => { return (
{ icon: Expensicons.Bill, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, ]} + containerStyles={[styles.cardSection]} > - + {props.translate('workspace.bills.askYourVendorsBeforeEmail')} {props.user.isFromPublicDomain ? ( diff --git a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js index 001ecf0273ba4..3e5449d92921c 100644 --- a/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js +++ b/src/pages/workspace/bills/WorkspaceBillsNoVBAView.js @@ -24,9 +24,10 @@ const WorkspaceBillsNoVBAView = props => (
- + {props.translate('workspace.bills.unlockNoVBACopy')}
- - {!this.props.hasVBA && ( -
- - {this.props.translate('workspace.reimburse.unlockNoVBACopy')} - -
- )} - {this.props.hasVBA && ( -
Link.openOldDotLink(`reports?policyID=${this.props.policy.id}&from=all&type=expense&showStates=Archived&isAdvancedFilterMode=true`), - icon: Expensicons.Bank, - shouldShowRightIcon: true, - iconRight: Expensicons.NewWindow, - }, - ]} - containerStyles={[styles.cardSection]} - > - - {this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')} - -
- )} - + )} ); } From afd5a33266804721c51f9856d649c460eaa64a69 Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Tue, 15 Nov 2022 19:20:11 -0500 Subject: [PATCH 04/11] add confirmed 50% of the new cards --- .../simple-illustration__bank-arrow.svg | 172 ++++++++++++++++++ .../simple-illustration__concierge-bubble.svg | 102 +++++++++++ .../simple-illustration__concierge.svg | 95 ++++++++++ .../simple-illustration__moneybadge.svg | 78 ++++++++ .../simple-illustration__treasurechest.svg | 138 ++++++++++++++ src/components/Icon/Illustrations.js | 10 + src/components/Section.js | 2 +- src/pages/GetAssistancePage.js | 9 +- src/pages/RequestCallPage.js | 6 +- .../workspace/card/WorkspaceCardNoVBAView.js | 2 +- .../reimburse/WorkspaceReimburseView.js | 4 - src/styles/styles.js | 7 + 12 files changed, 614 insertions(+), 11 deletions(-) create mode 100644 assets/images/simple-illustrations/simple-illustration__bank-arrow.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__concierge.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__moneybadge.svg create mode 100644 assets/images/simple-illustrations/simple-illustration__treasurechest.svg 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 0000000000000..7e5b4dae1ccc8 --- /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__concierge-bubble.svg b/assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg new file mode 100644 index 0000000000000..eeabc78b1881d --- /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 0000000000000..8275671c34866 --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__concierge.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 0000000000000..1f673aa20a90f --- /dev/null +++ b/assets/images/simple-illustrations/simple-illustration__moneybadge.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 0000000000000..edb868db11d25 --- /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 1221fbe46130e..d677ff1e6e4d1 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -27,6 +27,11 @@ import MoneyIntoWallet from '../../../assets/images/simple-illustrations/simple- 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'; export { BankArrowPink, @@ -58,4 +63,9 @@ export { MoneyWings, OpenSafe, TrackShoe, + BankArrow, + ConciergeBubble, + ConciergeNew, + MoneyBadge, + TreasureChest, }; diff --git a/src/components/Section.js b/src/components/Section.js index 9388eb8c2685c..83c8900a30a27 100644 --- a/src/components/Section.js +++ b/src/components/Section.js @@ -40,7 +40,7 @@ const Section = (props) => { const IconComponent = props.IconComponent; return ( <> - + {props.title} diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js index 577a7dc5f6a16..15e40664d58a4 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.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, { title: props.translate('getAssistancePage.requestSetupCall'), onPress: () => Navigation.navigate(ROUTES.getRequestCallRoute(props.route.params.taskID)), icon: Expensicons.Phone, shouldShowRightIcon: true, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, ]} > - + {props.translate('getAssistancePage.description')}
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index 6cb145f30aad1..8f572957361d0 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -274,10 +274,10 @@ class RequestCallPage extends Component { >
- + {this.props.translate('requestCallPage.description')}
diff --git a/src/pages/workspace/card/WorkspaceCardNoVBAView.js b/src/pages/workspace/card/WorkspaceCardNoVBAView.js index 765ec5ea3a9bf..e1d7c296fb2b5 100644 --- a/src/pages/workspace/card/WorkspaceCardNoVBAView.js +++ b/src/pages/workspace/card/WorkspaceCardNoVBAView.js @@ -21,7 +21,7 @@ const propTypes = { const WorkspaceCardNoVBAView = props => (
{props.translate('workspace.card.noVBACopy')} diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 21b7b135082a6..c53638c467bc3 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -216,7 +216,6 @@ class WorkspaceReimburseView extends React.Component { wrapperStyle: [styles.cardMenuItem], }, ]} - containerStyles={[styles.cardSection]} > @@ -233,7 +232,6 @@ class WorkspaceReimburseView extends React.Component {
{this.props.translate('workspace.reimburse.trackDistanceCopy')} @@ -285,7 +283,6 @@ class WorkspaceReimburseView extends React.Component { iconRight: Expensicons.NewWindow, }, ]} - containerStyles={[styles.cardSection]} > {this.props.translate('workspace.reimburse.fastReimbursementsVBACopy')} @@ -295,7 +292,6 @@ class WorkspaceReimburseView extends React.Component {
{this.props.translate('workspace.reimburse.unlockNoVBACopy')} diff --git a/src/styles/styles.js b/src/styles/styles.js index fbabb67004503..7b3979663dc76 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -2777,6 +2777,13 @@ const styles = { borderRadius: variables.componentBorderRadiusNormal, paddingVertical: 6, }, + callRequestSection: { + backgroundColor: themeColors.appBG, + paddingHorizontal: 0, + paddingBottom: 0, + marginHorizontal: 0, + marginBottom: 0, + }, }; export default styles; From a681a68eceee7a4aabd5c79bda3ab1d57761083a Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Wed, 16 Nov 2022 15:08:48 -0500 Subject: [PATCH 05/11] add all but 4 updated cards --- .../ReimbursementAccount/BankAccountStep.js | 5 +- src/pages/ReimbursementAccount/EnableStep.js | 54 +++++++++++-------- .../workspace/bills/WorkspaceBillsVBAView.js | 7 ++- .../card/WorkspaceCardVBANoECardView.js | 45 +++++++++------- .../invoices/WorkspaceInvoicesVBAView.js | 7 ++- .../reimburse/WorkspaceReimburseView.js | 4 +- .../travel/WorkspaceTravelNoVBAView.js | 1 - .../travel/WorkspaceTravelVBAView.js | 11 +++- src/styles/styles.js | 1 + src/styles/themes/default.js | 2 +- 10 files changed, 83 insertions(+), 54 deletions(-) diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js index eec2ff812cfa2..c566cb5d846fe 100644 --- a/src/pages/ReimbursementAccount/BankAccountStep.js +++ b/src/pages/ReimbursementAccount/BankAccountStep.js @@ -101,13 +101,12 @@ const BankAccountStep = (props) => {
{props.translate('bankAccount.toGetStarted')} {plaidDesktopMessage && ( - + {props.translate(plaidDesktopMessage)} @@ -152,7 +151,7 @@ const BankAccountStep = (props) => { )} - + {props.translate('common.privacy')} diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 7c0b58bf01570..c2646bfa858f6 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -1,9 +1,10 @@ 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'; @@ -11,6 +12,7 @@ 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'; @@ -18,7 +20,6 @@ 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 ( @@ -114,9 +99,7 @@ class EnableStep extends React.Component {
(!isUsingExpensifyCard ? : )} - menuItems={menuItems} + icon={!isUsingExpensifyCard ? Illustrations.ConciergeNew : confettiPop} > - + {!isUsingExpensifyCard ? this.props.translate('workspace.bankAccount.accountDescriptionNoCards') : this.props.translate('workspace.bankAccount.accountDescriptionWithCards')} + {!isUsingExpensifyCard && ( +
{this.props.user.isCheckingDomain && ( diff --git a/src/pages/workspace/bills/WorkspaceBillsVBAView.js b/src/pages/workspace/bills/WorkspaceBillsVBAView.js index 2d704d8aa47e0..8286cdf4aa56d 100644 --- 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,7 +24,7 @@ const WorkspaceBillsVBAView = props => (
( icon: Expensicons.Bill, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, ]} > - + {props.translate('workspace.bills.VBACopy')}
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js index 73b2ef6dad28c..aab2b601e118a 100644 --- 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,26 +23,30 @@ const WorkspaceCardVBANoECardView = props => ( <>
{ - Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL); - User.subscribeToExpensifyCardUpdates(); - }, - icon: Expensicons.Mail, - shouldShowRightIcon: true, - }, - ]} + icon={Illustrations.CreditCardsNew} > - + + +
{props.user.isCheckingDomain && ( @@ -48,6 +54,7 @@ const WorkspaceCardVBANoECardView = props => ( {props.translate('workspace.card.checkingDomain')} )} + ); diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js b/src/pages/workspace/invoices/WorkspaceInvoicesVBAView.js index 646b983ea6773..beefebd56d418 100644 --- 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,7 +24,7 @@ const WorkspaceInvoicesVBAView = props => (
( icon: Expensicons.CircleHourglass, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, ]} > - + {props.translate('workspace.invoices.unlockVBACopy')}
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index c53638c467bc3..2be426d71c262 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -273,7 +273,7 @@ class WorkspaceReimburseView extends React.Component { {this.props.hasVBA ? (
diff --git a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js index 223ea369059cb..9429423df625c 100644 --- a/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js +++ b/src/pages/workspace/travel/WorkspaceTravelNoVBAView.js @@ -22,7 +22,6 @@ const WorkspaceTravelNoVBAView = props => (
{props.translate('workspace.travel.noVBACopy')} diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js index 350a9fd1bd3a0..f2dcd37861f57 100644 --- 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,7 +17,7 @@ const propTypes = { const WorkspaceTravelVBAView = props => (
( icon: Expensicons.ExpensifyCard, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, { title: props.translate('workspace.travel.bookTravelWithConcierge'), @@ -32,6 +35,8 @@ const WorkspaceTravelVBAView = props => ( }, icon: Expensicons.Concierge, shouldShowRightIcon: true, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, { title: props.translate('requestorStep.learnMore'), @@ -39,10 +44,12 @@ const WorkspaceTravelVBAView = props => ( icon: Expensicons.Info, shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, + iconFill: themeColors.buttonSuccessBG, + wrapperStyle: [styles.cardMenuItem], }, ]} > - + {props.translate('workspace.travel.VBACopy')}
diff --git a/src/styles/styles.js b/src/styles/styles.js index 7b3979663dc76..0e11f150340ea 100644 --- 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 index d4b9209f1d41e..5eff7cd4744e8 100644 --- 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, }; From b6e335f674c09b9404f1ef7b391036e9745ab45d Mon Sep 17 00:00:00 2001 From: Daniel Gale-Rosen Date: Wed, 16 Nov 2022 16:03:19 -0500 Subject: [PATCH 06/11] final components --- .../ContinueBankAccountSetup.js | 37 ++++++++++-------- src/pages/ReimbursementAccount/EnableStep.js | 2 +- .../ReimbursementAccount/ValidationStep.js | 39 +++++++++++-------- .../card/WorkspaceCardVBAWithECardView.js | 29 +++++++++----- 4 files changed, 62 insertions(+), 45 deletions(-) diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js index feeab0ec1feeb..f4d7bc2b3dca7 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')} +
-
{this.props.user.isCheckingDomain && ( - + {this.props.translate('workspace.card.checkingDomain')} )} diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 131b3add37d1c..3e41b5c613f8f 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx'; import Str from 'expensify-common/lib/str'; import _ from 'underscore'; import styles from '../../styles/styles'; +import themeColors from '../../styles/themes/default'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import * as BankAccounts from '../../libs/actions/BankAccounts'; import * as Report from '../../libs/actions/Report'; @@ -188,28 +189,32 @@ class ValidationStep extends React.Component {
{this.props.translate('validationStep.letsChatText')} +
-
{this.props.user.isCheckingDomain && ( diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index fc7cf3e61da73..97c3d62d54b06 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -204,16 +204,14 @@ class ValidationStep extends React.Component { large success /> - - - +
)} diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js index aab2b601e118a..bfbd68f9e2c1a 100644 --- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.js +++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.js @@ -54,7 +54,6 @@ const WorkspaceCardVBANoECardView = props => ( {props.translate('workspace.card.checkingDomain')} )} - );