From 8718b479c921ccaceeb71d6a772b6b91ab0efb72 Mon Sep 17 00:00:00 2001
From: EliteAsian <29520859+EliteAsian123@users.noreply.github.com>
Date: Mon, 30 Sep 2024 19:53:26 -0400
Subject: [PATCH] Allow the use of light text in marketplace banner

---
 src/profiles/marketplace.ts                   | 1 +
 src/routes/Marketplace/Marketplace.module.css | 8 ++++++++
 src/routes/Marketplace/index.tsx              | 9 +++++++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/profiles/marketplace.ts b/src/profiles/marketplace.ts
index 5fc5b88..3390e90 100644
--- a/src/profiles/marketplace.ts
+++ b/src/profiles/marketplace.ts
@@ -4,6 +4,7 @@ export interface MarketplaceIndex {
     banner: Localized<{
         backgroundUrl: string,
         backgroundAccent?: string,
+        useLightText?: boolean,
         preHeaderText?: string,
         headerText: string,
 
diff --git a/src/routes/Marketplace/Marketplace.module.css b/src/routes/Marketplace/Marketplace.module.css
index a797df3..e7284e0 100644
--- a/src/routes/Marketplace/Marketplace.module.css
+++ b/src/routes/Marketplace/Marketplace.module.css
@@ -54,6 +54,14 @@
     text-transform: uppercase;
 }
 
+.lightBannerText > .preHeader {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.lightBannerText > .header {
+    color: #FFF;
+}
+
 .banner > .buttons {
     margin-top: 12px;
     display: flex;
diff --git a/src/routes/Marketplace/index.tsx b/src/routes/Marketplace/index.tsx
index e31dbdf..4ffabcd 100644
--- a/src/routes/Marketplace/index.tsx
+++ b/src/routes/Marketplace/index.tsx
@@ -36,10 +36,15 @@ function Marketplace() {
 
     const banner = localizeObject(marketIndex.banner, "en-US");
 
+    const bannerStyles = [ styles.banner ];
+    if (banner.useLightText) {
+        bannerStyles.push(styles.lightBannerText);
+    }
+
     return <main className={styles.main}>
         <MarketplacePopup marketplaceProfile={selectedProfile} setSelectedProfile={setSelectedProfile} />
 
-        <div className={styles.banner}
+        <div className={bannerStyles.join(" ")}
             style={{
                 "--banner": `url(${processAssetUrl(banner.backgroundUrl)})`,
                 "--accent": banner.backgroundAccent === undefined ? "transparent" : banner.backgroundAccent
@@ -71,7 +76,7 @@ function Marketplace() {
                 </Button>
 
                 {banner.previewUrl !== undefined &&
-                    <Button color={ButtonColor.DARK} rounded border
+                    <Button color={banner.useLightText ? ButtonColor.BLUE : ButtonColor.DARK} rounded border
                         onClick={async () => await askOpenUrl(banner.previewUrl as string)}>
 
                         Preview