Merge branch 'Weaverse:main' into main

Weaverse · Dec 14, 2024 · d67aae2 · d67aae2
2 parents 6d943ba + 77bcb59
commit d67aae2
Show file tree

Hide file tree

Showing 34 changed files with 347 additions and 1,107 deletions.
diff --git a/app/components/button.tsx b/app/components/button.tsx
@@ -1,9 +1,9 @@
+import { CircleNotch } from "@phosphor-icons/react";
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { cn } from "~/lib/cn";
-import { IconCircleNotch } from "./icons";
 
 export let variants = cva(
   [
@@ -146,7 +146,7 @@ function Spinner() {
       className="button-spinner absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
       style={style}
     >
-      <IconCircleNotch className="animate-spin w-5 h-5" />
+      <CircleNotch className="animate-spin w-5 h-5" />
     </span>
   );
 }
diff --git a/app/components/header/cart-count.tsx b/app/components/header/cart-count.tsx
diff --git a/app/components/header/cart-drawer.tsx b/app/components/header/cart-drawer.tsx
@@ -3,15 +3,27 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Await, useRouteLoaderData } from "@remix-run/react";
 import { type CartReturn, useAnalytics } from "@shopify/hydrogen";
 import clsx from "clsx";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import Link from "~/components/link";
 import { ScrollArea } from "~/components/scroll-area";
 import { Cart } from "~/modules/cart";
 import type { RootLoader } from "~/root";
 
-export function CartDrawer({ isTransparent }: { isTransparent: boolean }) {
+export let openCartDrawer = () => {};
+
+export function CartDrawer() {
   let rootData = useRouteLoaderData<RootLoader>("root");
   let { publish } = useAnalytics();
+  let [open, setOpen] = useState(false);
+  openCartDrawer = () => setOpen(true);
+
+  // Toggle cart drawer when adding to cart
+  // let addToCartFetchers = useCartFetchers(CartForm.ACTIONS.LinesAdd);
+  // useEffect(() => {
+  //   if (!open && addToCartFetchers.length) {
+  //     setOpen(true);
+  //   }
+  // }, [addToCartFetchers, open]);
 
   return (
     <Suspense
@@ -26,7 +38,7 @@ export function CartDrawer({ isTransparent }: { isTransparent: boolean }) {
     >
       <Await resolve={rootData?.cart}>
         {(cart) => (
-          <Dialog.Root>
+          <Dialog.Root open={open} onOpenChange={setOpen}>
             <Dialog.Trigger
               onClick={() => publish("custom_sidecart_viewed", { cart })}
               className="relative flex items-center justify-center w-8 h-8 focus:ring-border"
@@ -35,17 +47,16 @@ export function CartDrawer({ isTransparent }: { isTransparent: boolean }) {
               {cart?.totalQuantity > 0 && (
                 <div
                   className={clsx(
-                    "text-sm leading-none text-center font-medium subpixel-antialiased",
-                    "flex items-center justify-center min-w-4 rounded-full p-0.5",
-                    "absolute top-0 -right-1",
+                    "cart-count",
+                    "absolute top-0 -right-1.5",
+                    "flex items-center text-center justify-center min-w-4.5 h-4.5 px-1 rounded-full",
+                    "text-sm leading-none text-center font-medium",
                     "transition-colors duration-300",
-                    "group-hover/header:bg-[--color-header-text] group-hover/header:text-[--color-header-bg]",
-                    isTransparent
-                      ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
-                      : "bg-[--color-header-text] text-[--color-header-bg]",
+                    "group-hover/header:bg-[--color-header-text]",
+                    "group-hover/header:text-[--color-header-bg]",
                   )}
                 >
-                  <span>{cart?.totalQuantity}</span>
+                  <span className="-mr-0.5">{cart?.totalQuantity}</span>
                 </div>
               )}
             </Dialog.Trigger>
@@ -63,8 +74,8 @@ export function CartDrawer({ isTransparent }: { isTransparent: boolean }) {
               >
                 <div className="space-y-6">
                   <div className="flex gap-2 items-center justify-between px-4">
-                    <Dialog.Title asChild className="py-2.5 font-bold">
-                      <span>Cart</span>
+                    <Dialog.Title asChild className="py-2.5">
+                      <span className="font-bold">Cart</span>
                     </Dialog.Title>
                     <Dialog.Close asChild>
                       <button

diff --git a/app/components/header/desktop-header.tsx b/app/components/header/desktop-header.tsx