From 08de20eb3bbb0a0386d21d540327a77e57766cb5 Mon Sep 17 00:00:00 2001
From: tom <tom@ohhhh.me>
Date: Thu, 17 Oct 2024 16:02:00 +0200
Subject: [PATCH] fix hero banner config for dark color mode

---
 theme/components/Button/Button.ts | 25 +++++++++++++------------
 ui/home/HeroBanner.tsx            | 24 +++++++++++++++++++-----
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
index 85f97fb8c2..e9482b8fbc 100644
--- a/theme/components/Button/Button.ts
+++ b/theme/components/Button/Button.ts
@@ -154,33 +154,34 @@ const variantSubtle = defineStyle((props) => {
 
 // for buttons in the hero banner
 const variantHero = defineStyle((props) => {
+  const buttonConfig = config.UI.homepage.heroBanner?.button;
   return {
     bg: mode(
-      config.UI.homepage.heroBanner?.button?._default?.background?.[0] || 'blue.600',
-      config.UI.homepage.heroBanner?.button?._default?.background?.[1] || 'blue.600',
+      buttonConfig?._default?.background?.[0] || 'blue.600',
+      buttonConfig?._default?.background?.[1] || buttonConfig?._default?.background?.[0] || 'blue.600',
     )(props),
     color: mode(
-      config.UI.homepage.heroBanner?.button?._default?.text_color?.[0] || 'white',
-      config.UI.homepage.heroBanner?.button?._default?.text_color?.[1] || 'white',
+      buttonConfig?._default?.text_color?.[0] || 'white',
+      buttonConfig?._default?.text_color?.[1] || buttonConfig?._default?.text_color?.[0] || 'white',
     )(props),
     _hover: {
       bg: mode(
-        config.UI.homepage.heroBanner?.button?._hover?.background?.[0] || 'blue.400',
-        config.UI.homepage.heroBanner?.button?._hover?.background?.[1] || 'blue.400',
+        buttonConfig?._hover?.background?.[0] || 'blue.400',
+        buttonConfig?._hover?.background?.[1] || buttonConfig?._hover?.background?.[0] || 'blue.400',
       )(props),
       color: mode(
-        config.UI.homepage.heroBanner?.button?._hover?.text_color?.[0] || 'white',
-        config.UI.homepage.heroBanner?.button?._hover?.text_color?.[1] || 'white',
+        buttonConfig?._hover?.text_color?.[0] || 'white',
+        buttonConfig?._hover?.text_color?.[1] || buttonConfig?._hover?.text_color?.[0] || 'white',
       )(props),
     },
     '&[data-selected=true]': {
       bg: mode(
-        config.UI.homepage.heroBanner?.button?._selected?.background?.[0] || 'blue.50',
-        config.UI.homepage.heroBanner?.button?._selected?.background?.[1] || 'blue.50',
+        buttonConfig?._selected?.background?.[0] || 'blue.50',
+        buttonConfig?._selected?.background?.[1] || buttonConfig?._selected?.background?.[0] || 'blue.50',
       )(props),
       color: mode(
-        config.UI.homepage.heroBanner?.button?._selected?.text_color?.[0] || 'blackAlpha.800',
-        config.UI.homepage.heroBanner?.button?._selected?.text_color?.[1] || 'blackAlpha.800',
+        buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
+        buttonConfig?._selected?.text_color?.[1] || buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
       )(props),
     },
   };
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
index 9ad893a668..5055732287 100644
--- a/ui/home/HeroBanner.tsx
+++ b/ui/home/HeroBanner.tsx
@@ -13,18 +13,32 @@ const BORDER_DEFAULT = 'none';
 
 const HeroBanner = () => {
   const background = useColorModeValue(
-    config.UI.homepage.heroBanner?.background?.[0] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT,
-    config.UI.homepage.heroBanner?.background?.[1] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT,
+    // light mode
+    config.UI.homepage.heroBanner?.background?.[0] ||
+    config.UI.homepage.plate.background ||
+    BACKGROUND_DEFAULT,
+    // dark mode
+    config.UI.homepage.heroBanner?.background?.[1] ||
+    config.UI.homepage.heroBanner?.background?.[0] ||
+    config.UI.homepage.plate.background ||
+    BACKGROUND_DEFAULT,
   );
 
   const textColor = useColorModeValue(
-    config.UI.homepage.heroBanner?.text_color?.[0] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT,
-    config.UI.homepage.heroBanner?.text_color?.[1] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT,
+    // light mode
+    config.UI.homepage.heroBanner?.text_color?.[0] ||
+    config.UI.homepage.plate.textColor ||
+    TEXT_COLOR_DEFAULT,
+    // dark mode
+    config.UI.homepage.heroBanner?.text_color?.[1] ||
+    config.UI.homepage.heroBanner?.text_color?.[0] ||
+    config.UI.homepage.plate.textColor ||
+    TEXT_COLOR_DEFAULT,
   );
 
   const border = useColorModeValue(
     config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
-    config.UI.homepage.heroBanner?.border?.[1] || BORDER_DEFAULT,
+    config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
   );
 
   return (