Merge branch 'Weaverse:main' into main

Author: dangthang1903

app/components/cart/cart.tsx

@@ -181,12 +181,15 @@ function CartDiscounts({
       <UpdateDiscountForm discountCodes={codes}>
         <div className="flex items-center gap-3">
           <input
-            className="grow rounded-none border border-line bg-white px-4 py-5 leading-tight!"
+            className="h-[54px] grow rounded-none border border-line bg-white px-4 py-5 leading-tight!"
             type="text"
             name="discountCode"
             placeholder="Discount code"
           />
-          <Button variant="outline" className="!px-6 !py-5 leading-tight!">
+          <Button
+            variant="outline"
+            className="!px-6 !py-5 h-[54px] leading-tight!"
+          >
             Apply
           </Button>
         </div>
@@ -270,13 +273,13 @@ function CartCheckoutActions({
         <Link
           variant="outline"
           to="/cart"
-          className="flex w-full justify-center"
+          className="flex h-[54px] w-full items-center justify-center"
         >
           View cart
         </Link>
       )}
       <a href={checkoutUrl} target="_self">
-        <Button className="!px-6 !py-5 w-full">CHECKOUT</Button>
+        <Button className="!px-6 !py-5 h-[54px] w-full">CHECKOUT</Button>
       </a>
     </div>
   );
@@ -371,7 +374,11 @@ function CartLineItem({
     >
       {/* Thumbnail */}
       <div
-        className={clsx(layout === "drawer" ? "shrink-0" : "h-[360px] w-full")}
+        className={clsx(
+          layout === "drawer"
+            ? "shrink-0"
+            : "aspect-square w-full md:h-[360px] md:w-fit",
+        )}
       >
         {image && (
           <Image

app/components/layout/cart-drawer.tsx

@@ -14,7 +14,28 @@ export function CartDrawer() {
   const rootData = useRouteLoaderData<RootLoader>("root");
   const { publish } = useAnalytics();
   const [open, setOpen] = useState(false);
-  toggleCartDrawer = setOpen;
+  const [isAnimating, setIsAnimating] = useState(false);
+  
+  const toggleCart = (newOpen: boolean) => {
+    if (newOpen) {
+      setOpen(true);
+      setIsAnimating(false);
+    } else {
+      // Bắt đầu animation đóng
+      setIsAnimating(true);
+      // Delay để animation hoàn thành trước khi đóng
+      setTimeout(() => {
+        setOpen(false);
+        setIsAnimating(false);
+      }, 300);
+    }
+  };
+  
+  toggleCartDrawer = toggleCart;
+
+  const handleOpenChange = (newOpen: boolean) => {
+    toggleCart(newOpen);
+  };
 
   return (
     <Suspense
@@ -29,7 +50,7 @@ export function CartDrawer() {
     >
       <Await resolve={rootData?.cart}>
         {(cart) => (
-          <Dialog.Root open={open} onOpenChange={setOpen}>
+          <Dialog.Root open={open} onOpenChange={handleOpenChange}>
             <Dialog.Trigger
               onClick={() => publish("custom_sidecart_viewed", { cart })}
               className="relative flex h-8 w-8 items-center justify-center focus:ring-border"
@@ -38,28 +59,31 @@ export function CartDrawer() {
               {cart?.totalQuantity > 0 && (
                 <div
                   className={clsx(
-                    // "cart-count",
-                    "-right-1.5 absolute top-0",
-                    "flex h-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-center",
-                    "text-center font-normal text-[12px] leading-none",
-                    "transition-colors duration-300",
-                    // "group-hover/header:bg-(--color-header-text)",
-                    // "group-hover/header:text-(--color-header-bg)"
+                    "-right-2 -top-1 absolute",
+                    "flex h-5 min-w-5 items-center justify-center",
+                    "font-medium text-[11px] leading-none",
+                    "px-1 py-0.5",
                   )}
                 >
-                  <span className="-mr-px">{cart?.totalQuantity}</span>
+                  <span>{cart?.totalQuantity}</span>
                 </div>
               )}
             </Dialog.Trigger>
             <Dialog.Portal>
               <Dialog.Overlay
-                className="fixed inset-0 z-10 bg-black/50 data-[state=open]:animate-fade-in"
-                style={{ "--fade-in-duration": "100ms" } as React.CSSProperties}
+                className={clsx(
+                  "fixed inset-0 z-10 bg-black/50 transition-opacity duration-300",
+                  open && !isAnimating ? "opacity-100" : "opacity-0"
+                )}
               />
               <Dialog.Content
                 className={clsx([
                   "fixed inset-y-0 right-0 z-10 w-screen max-w-[430px] bg-background py-4",
+                  "transition-transform duration-300 ease-in-out",
                   "data-[state=open]:animate-enter-from-right",
+                  open && !isAnimating 
+                    ? "translate-x-0" 
+                    : "translate-x-full",
                 ])}
                 aria-describedby={undefined}
               >

app/components/layout/desktop-menu.tsx

@@ -60,7 +60,7 @@ export function DesktopMenu() {
                     <span
                       className={cn(
                         "ff-heading relative cursor-pointer",
-                        "after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-full after:bg-current",
+                        "after:absolute after:bottom-[-0.5px] after:left-0 after:h-[2px] after:w-full after:bg-[#6A4E4E]",
                         "after:opacity-0 hover:after:opacity-100 group-data-[state=open]:after:opacity-100",
                         "after:transition-opacity after:duration-[360ms] after:ease-[cubic-bezier(0.22,1,0.36,1)]",
                       )}
@@ -72,7 +72,7 @@ export function DesktopMenu() {
                       <span
                         className={cn(
                           "ff-heading relative cursor-pointer",
-                          "after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-full after:bg-current",
+                          "after:absolute after:bottom-[-0.5px] after:left-0 after:h-[2px] after:w-full after:bg-[#6A4E4E]",
                           "after:opacity-0 hover:after:opacity-100 group-data-[state=open]:after:opacity-100",
                           "after:transition-opacity after:duration-[360ms] after:ease-[cubic-bezier(0.22,1,0.36,1)]",
                         )}
@@ -86,7 +86,7 @@ export function DesktopMenu() {
                   <Menubar.Content
                     className={cn([
                       "px-3 md:px-4 lg:px-6",
-                      "mt-1.5 border-line-subtle border-t bg-(--color-header-bg-hover) shadow-lg lg:mt-3",
+                      "mt-1.5 border-line-subtle border-t bg-(--color-header-bg-hover) lg:mt-3",
                       isDropdown ? "max-w-[300px] py-6" : "w-screen py-8",
                     ])}
                   >