Merge pull request Weaverse#206 from Weaverse/dev

v3.0.2
Weaverse · Sep 6, 2024 · 5f09353 · 5f09353
2 parents 4c37654 + f0447a8
commit 5f09353
Show file tree

Hide file tree

Showing 5 changed files with 529 additions and 471 deletions.
diff --git a/app/modules/header/cart-count.tsx b/app/modules/header/cart-count.tsx
@@ -67,9 +67,10 @@ function Badge({
               "flex items-center justify-center min-w-4 rounded-full p-0.5",
               "absolute top-0 -right-1",
               "transition-colors duration-300",
+              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[var(--color-header-bg)]",
               isTransparent
-                ? "bg-white text-gray-800"
-                : "bg-gray-800 text-white",
+                ? "text-[var(--color-header-text)] bg-[var(--color-transparent-header-text)]"
+                : "bg-[var(--color-header-text)] text-[var(--color-header-bg)]",
             )}
           >
             <span>{count}</span>

diff --git a/app/modules/header/desktop-header.tsx b/app/modules/header/desktop-header.tsx
@@ -1,4 +1,10 @@
-import { Await, Link, useLocation, useRouteLoaderData } from "@remix-run/react";
+import {
+  Await,
+  Link,
+  useLocation,
+  useRouteError,
+  useRouteLoaderData,
+} from "@remix-run/react";
 import { useThemeSettings } from "@weaverse/hydrogen";
 import { Suspense, useEffect, useState } from "react";
 import useWindowScroll from "react-use/esm/useWindowScroll";
@@ -24,22 +30,12 @@ export function DesktopHeader({
   let { enableTransparentHeader, topbarHeight } = useThemeSettings();
   let isHome = useIsHomePath();
   let { y } = useWindowScroll();
-  let [hovered, setHovered] = useState(false); // use state to delay disappearing header when drawer closes
   let { isOpen, openDrawer, closeDrawer } = useDrawer();
-
-  useEffect(() => {
-    if (isOpen) {
-      setHovered(true);
-    } else {
-      setTimeout(() => {
-        setHovered(false);
-      }, 200);
-    }
-  }, [isOpen]);
+  let routeError = useRouteError();
 
   let scrolled = y >= 50;
-  let isTransparent =
-    enableTransparentHeader && isHome && !scrolled && !hovered;
+  let enableTransparent = enableTransparentHeader && isHome && !routeError;
+  let isTransparent = enableTransparent && !scrolled;
 
   return (
     <header
@@ -56,11 +52,10 @@ export function DesktopHeader({
         "hover:text-[var(--color-header-text)] hover:bg-[var(--color-header-bg)]",
         "border-b border-[rgb(230,230,230)]",
         scrolled && "shadow-header",
-        enableTransparentHeader && isHome
+        enableTransparent
           ? [
               "fixed top-[var(--topbar-height,var(--initial-topbar-height))] w-screen group/header",
               !scrolled &&
-                !hovered &&
                 "text-[var(--color-transparent-header-text)] bg-transparent border-transparent",
             ]
           : "sticky top-0",

diff --git a/app/modules/text.tsx b/app/modules/text.tsx
@@ -160,7 +160,7 @@ export function PageHeader({
   className,
   heading,
   variant = "default",
-  as,
+  as: Component,
   ...props
 }: {
   children?: React.ReactNode;
@@ -180,13 +180,13 @@ export function PageHeader({
   const styles = clsx(variants[variant], className);
 
   return (
-    <header {...props} className={styles}>
+    <Component {...props} className={styles}>
       {heading && (
-        <Heading as={as} width="narrow" size="heading" className="inline-block">
+        <Heading as="h6" width="narrow" size="heading" className="inline-block">
           {heading}
         </Heading>
       )}
       {children}
-    </header>
+    </Component>
   );
 }