Allow the use of light text in marketplace banner

YARC-Official · Sep 30, 2024 · 8718b47 · 8718b47
1 parent eb43f89
commit 8718b47
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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