Merge branch 'Weaverse:main' into main

Weaverse · Sep 6, 2024 · 99626eb · 99626eb
2 parents 567e476 + 5f09353
commit 99626eb
Show file tree

Hide file tree

Showing 8 changed files with 549 additions and 489 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -40,7 +40,8 @@ export default async function handleRequest(
   }
 
   responseHeaders.set("Content-Type", "text/html");
-  responseHeaders.set("Content-Security-Policy", header);
+  // TODO: change to Content-Security-Policy when you ready with your CSP configs.
+  responseHeaders.set("Content-Security-Policy-Report-Only", header);
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,

diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx
@@ -36,13 +36,12 @@ export function Cart({
 }) {
   let optimisticCart = useOptimisticCart<CartApiQueryFragment>(cart);
   let linesCount = Boolean(optimisticCart?.lines?.nodes?.length || 0);
+  let cartHasItems = !!cart && cart.totalQuantity > 0;
 
-  return (
-    <>
-      <CartEmpty hidden={linesCount} onClose={onClose} layout={layout} />
-      <CartDetails cart={optimisticCart} layout={layout} />
-    </>
-  );
+  if (cartHasItems) {
+    return <CartDetails cart={optimisticCart} layout={layout} />;
+  }
+  return <CartEmpty hidden={linesCount} onClose={onClose} layout={layout} />;
 }
 
 export function CartDetails({
@@ -52,7 +51,6 @@ export function CartDetails({
   layout: Layouts;
   cart: OptimisticCart<CartApiQueryFragment>;
 }) {
-  let cartHasItems = !!cart && cart.totalQuantity > 0;
   return (
     <div
       className={clsx(
@@ -66,12 +64,10 @@ export function CartDetails({
       )}
     >
       <CartLines lines={cart?.lines?.nodes} layout={layout} />
-      {cartHasItems && (
-        <CartSummary cost={cart.cost} layout={layout}>
-          <CartDiscounts discountCodes={cart.discountCodes} />
-          <CartCheckoutActions checkoutUrl={cart.checkoutUrl} layout={layout} />
-        </CartSummary>
-      )}
+      <CartSummary cost={cart.cost} layout={layout}>
+        <CartDiscounts discountCodes={cart.discountCodes} />
+        <CartCheckoutActions checkoutUrl={cart.checkoutUrl} layout={layout} />
+      </CartSummary>
     </div>
   );
 }
@@ -486,17 +482,17 @@ export function CartEmpty({
       )}
       hidden={hidden}
     >
-      <div>
+      <div className={clsx(layout === "page" && "text-center")}>
         <p className="mb-4">
           Looks like you haven&rsquo;t added anything yet, let&rsquo;s get you
           started!
         </p>
         <Button
-          className={clsx(layout === "drawer" ? "w-full" : "")}
+          className={clsx(layout === "drawer" ? "w-full" : "min-w-48")}
           link={layout === "page" ? "/products" : ""}
           onClick={onClose}
         >
-          Continue shopping
+          Start Shopping
         </Button>
       </div>
       <div className="grid gap-4">

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/header/mobile-header.tsx b/app/modules/header/mobile-header.tsx
@@ -26,14 +26,19 @@ export function MobileHeader({
 }) {
   // useHeaderStyleFix(containerStyle, setContainerStyle, isHome);
   let isHome = useIsHomePath();
-  let { enableTransparentHeader } = useThemeSettings();
+  let { enableTransparentHeader, topbarHeight } = useThemeSettings();
   let { y } = useWindowScroll();
   let params = useParams();
   let scrolled = y >= 50;
   let isTransparent = enableTransparentHeader && isHome && !scrolled;
 
   return (
     <header
+      style={
+        {
+          "--initial-topbar-height": `${topbarHeight}px`,
+        } as React.CSSProperties
+      }
       className={cn(
         "transition-colors duration-300 ease-in-out",
         "h-nav z-40 top-[var(--topbar-height,var(--initial-topbar-height))] w-full leading-none",

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>
   );
 }