Merge pull request #2300 from blockscout/tom2drum/fix-hero-banner-config

Fix hero banner config for dark color mode
blockscout · Oct 18, 2024 · dc83feb · dc83feb
2 parents 86b7372 + 38060e0
commit dc83feb
Show file tree

Hide file tree

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

diff --git a/...__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png b/...__screenshots__/HeroBanner.pw.tsx_dark-color-mode_customization-dark-mode-1.png