diff --git a/assets/images/simple-illustrations/emptystate__big-vault.svg b/assets/images/simple-illustrations/emptystate__big-vault.svg new file mode 100644 index 000000000000..02606e39fafd --- /dev/null +++ b/assets/images/simple-illustrations/emptystate__big-vault.svg @@ -0,0 +1,378 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts index 1ef0ca14bf51..dd0cb9e2fc42 100644 --- a/src/components/Icon/Illustrations.ts +++ b/src/components/Icon/Illustrations.ts @@ -34,6 +34,7 @@ import TadaYellow from '@assets/images/product-illustrations/tada--yellow.svg'; import TeleScope from '@assets/images/product-illustrations/telescope.svg'; import ThreeLeggedLaptopWoman from '@assets/images/product-illustrations/three_legged_laptop_woman.svg'; import ToddBehindCloud from '@assets/images/product-illustrations/todd-behind-cloud.svg'; +import BigVault from '@assets/images/simple-illustrations/emptystate__big-vault.svg'; import Abacus from '@assets/images/simple-illustrations/simple-illustration__abacus.svg'; import Accounting from '@assets/images/simple-illustrations/simple-illustration__accounting.svg'; import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg'; @@ -211,5 +212,6 @@ export { FolderWithPapers, VirtualCard, Tire, + BigVault, Filters, }; diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index f8b0a9edb696..67ad0c95856d 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -67,6 +67,9 @@ type SectionProps = Partial & { /** The background color to apply in the upper half of the screen. */ illustrationBackgroundColor?: string; + /** Customize the Illustration container */ + illustrationContainerStyle?: StyleProp; + /** Styles to apply to illustration component */ illustrationStyle?: StyleProp; @@ -109,6 +112,7 @@ function Section({ isCentralPane = false, illustration, illustrationBackgroundColor, + illustrationContainerStyle, illustrationStyle, contentPaddingOnLargeScreens, overlayContent, @@ -125,9 +129,6 @@ function Section({ const isLottie = isIllustrationLottieAnimation(illustration); const lottieIllustration = isLottie ? illustration : undefined; - - const illustrationContainerStyle: StyleProp = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG); - return ( {banner} @@ -140,7 +141,16 @@ function Section({ /> )} {!!illustration && ( - + {isLottie ? ( +
+ {}} + shouldEnableScroll={false} + style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]} + listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8} + /> +
+ + {hasAssignedCard ? ( +
+ {}} + /> +
+ ) : null} + {hasWallet && (
@@ -387,9 +435,15 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi errors={walletTerms?.errors} onClose={PaymentMethods.clearWalletTermsError} errorRowStyles={[styles.ml10, styles.mr2]} - style={[styles.mt7, styles.mb5, styles.alignSelfStart]} + style={[styles.mt4, styles.mb2]} > - + )} @@ -462,13 +516,18 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi } return ( -
)} - {hasAssignedCard ? ( -
- {}} - /> -
- ) : null} -
- {}} - shouldEnableScroll={false} - style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]} - listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8} - /> -
diff --git a/src/styles/index.ts b/src/styles/index.ts index b3cb5b624bac..9b9ddbdad7bc 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4713,6 +4713,11 @@ const styles = (theme: ThemeColors) => minHeight: variables.componentSizeNormal, }, + walletIllustration: { + width: 262, + height: 152, + }, + walletCardLimit: { color: theme.text, fontSize: variables.fontSizeNormal, @@ -4747,13 +4752,6 @@ const styles = (theme: ThemeColors) => lineHeight: variables.lineHeightLarge, }, - walletBalance: { - lineHeight: undefined, - fontSize: 45, - paddingTop: 0, - paddingBottom: 0, - }, - walletRedDotSectionTitle: { color: theme.text, fontWeight: FontUtils.fontWeight.bold,