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,