diff --git a/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg b/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg
new file mode 100644
index 000000000000..17ff47e6ca12
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg
@@ -0,0 +1,57 @@
+
+
\ No newline at end of file
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 53b8aa8acb72..3fe36239d631 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -49,6 +49,7 @@ import CompanyCard from '@assets/images/simple-illustrations/simple-illustration
import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
+import CreditCardEyes from '@assets/images/simple-illustrations/simple-illustration__creditcardeyes.svg';
import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
@@ -190,4 +191,5 @@ export {
ExpensifyApprovedLogoLight,
SendMoney,
CheckmarkCircle,
+ CreditCardEyes,
};
diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index e7cadbe73b82..49ef1e89cff9 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -86,6 +86,9 @@ type SectionProps = Partial & {
/** The height of the icon. */
iconHeight?: number;
+
+ /** Banner to display at the top of the section */
+ banner?: ReactNode;
};
function isIllustrationLottieAnimation(illustration: DotLottieAnimation | IconAsset | undefined): illustration is DotLottieAnimation {
@@ -119,6 +122,7 @@ function Section({
iconWidth,
iconHeight,
renderSubtitle,
+ banner = null,
}: SectionProps) {
const styles = useThemeStyles();
const theme = useTheme();
@@ -133,6 +137,7 @@ function Section({
return (
+ {banner}
{cardLayout === CARD_LAYOUT.ICON_ON_TOP && (
+
+
+ {title && {title}}
+ {subtitle && {subtitle}}
+
+ {isError && shouldShowRedDotIndicator && (
+
+ )}
+
+ );
+}
+
+BillingBanner.displayName = 'BillingBanner';
+
+export default BillingBanner;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7b49b90505ba..f4b8d0b0b91d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2848,6 +2848,10 @@ const styles = (theme: ThemeColors) =>
width: variables.iconSizeExtraLarge,
},
+ trialBannerBackgroundColor: {
+ backgroundColor: theme.trialBannerBackgroundColor,
+ },
+
selectCircle: {
width: variables.componentSizeSmall,
height: variables.componentSizeSmall,
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index f0493a815747..418d45b8ab64 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -83,6 +83,7 @@ const darkTheme = {
ourMentionBG: colors.green600,
tooltipSupportingText: colors.productLight800,
tooltipPrimaryText: colors.productLight900,
+ trialBannerBackgroundColor: colors.green700,
skeletonLHNIn: colors.productDark400,
skeletonLHNOut: colors.productDark600,
QRLogo: colors.green400,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index cf490a90a7f7..12f059738e13 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -83,6 +83,7 @@ const lightTheme = {
ourMentionBG: colors.green100,
tooltipSupportingText: colors.productDark800,
tooltipPrimaryText: colors.productDark900,
+ trialBannerBackgroundColor: colors.green100,
skeletonLHNIn: colors.productLight400,
skeletonLHNOut: colors.productLight600,
QRLogo: colors.green400,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 8be9f3226fe5..a388d06bc51e 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -85,6 +85,7 @@ type ThemeColors = {
ourMentionBG: Color;
tooltipSupportingText: Color;
tooltipPrimaryText: Color;
+ trialBannerBackgroundColor: Color;
skeletonLHNIn: Color;
skeletonLHNOut: Color;
QRLogo: Color;