Merge branch 'Weaverse:main' into main

app/components/Cart.tsx

@@ -59,7 +59,7 @@ function CartLines({
   if (!lines) return null;
   const styles = {
     page: "col-span-2",
-    aside: "flex-1 overflow-y-auto",
+    aside: "flex-1 overflow-y-auto overflow-hidden custom-scroll",
   };
   return (
     <div aria-labelledby="cart-lines" className={styles[layout]}>
@@ -106,7 +106,7 @@ function CartLineItem({
   const lineItemUrl = useVariantUrl(product.handle, selectedOptions);
   let styles = {
     page: "grid md:table-row gap-2 grid-rows-2 grid-cols-[100px_1fr_64px]",
-    aside: "grid gap-3 grid-rows-[1fr_auto] grid-cols-[100px_1fr_64px] pb-4",
+    aside: "grid gap-3 grid-rows-[1fr_auto] grid-cols-[100px_1fr] pb-4",
   };
 
   const cellStyles = {
@@ -117,48 +117,58 @@ function CartLineItem({
 
   return (
     <tr key={id} className={styles[layout]}>
-      <td className="py-2 row-start-1 row-end-3">
+      <td className="row-start-1 row-end-3">
         {image && (
           <Image
             alt={title}
-            aspectRatio="1/1"
+            aspectRatio="3/4"
             data={image}
             height={100}
             loading="lazy"
             width={100}
+            className="object-cover"
           />
         )}
       </td>
       <td className={cellClass}>
-        <Link
-          prefetch="intent"
-          to={lineItemUrl}
-          onClick={() => {
-            if (layout === "aside") {
-              // close the drawer
-              window.location.href = lineItemUrl;
-            }
-          }}
-        >
-          <p>{product.title}</p>
-        </Link>
-        <ul className="mt-1 space-y-1">
+        <div className=" flex gap-1 justify-between">
+          <Link
+            prefetch="intent"
+            to={lineItemUrl}
+            onClick={() => {
+              if (layout === "aside") {
+                // close the drawer
+                window.location.href = lineItemUrl;
+              }
+            }}
+          >
+            <p className="line-clamp-1">{product.title}</p>
+          </Link>
+          <div className={layout === "page" ? "md:hidden" : ""}>
+            <CartLineRemoveButton lineIds={[line.id]} />
+          </div>
+        </div>
+        <ul className="mt-4 space-y-1">
           {selectedOptions.map((option) => (
             <li key={option.name}>
               <span className="text-foreground-subtle">{option.value}</span>
             </li>
           ))}
         </ul>
       </td>
-      <td className={cn(cellClass, "text-center")}>
-        <Money withoutTrailingZeros data={line.cost.amountPerQuantity} />
-      </td>
+      {layout === "page" && (
+        <td className={cn(cellClass, "text-center")}>
+          <Money withoutTrailingZeros data={line.cost.amountPerQuantity} />
+        </td>
+      )}
       <td className={cn(cellClass, "row-start-2")}>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center justify-between gap-2">
           <CartLineQuantity line={line} />
-          <div className={layout === "page" ? "md:hidden" : ""}>
-            <CartLineRemoveButton lineIds={[line.id]} />
-          </div>
+          {layout === "aside" && (
+            <p className="text-center">
+              <Money withoutTrailingZeros data={line.cost.amountPerQuantity} />
+            </p>
+          )}
         </div>
       </td>
       {layout === "page" && (
@@ -283,7 +293,7 @@ export function CartSummary({
       <div
         className={clsx(
           "flex items-center justify-between font-medium",
-          totalStyles[layout],
+          totalStyles[layout]
         )}
       >
         <span className="font-semibold">Subtotal</span>

app/components/Drawer.tsx

@@ -35,6 +35,8 @@ export function Drawer({
     top: "-translate-y-full",
   };
 
+  const maxWidth = isForm === "cart" ? "max-w-[420px]" : "max-w-96";
+
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={onClose}>
@@ -70,10 +72,10 @@ export function Drawer({
                   className={cn(
                     "transform text-left align-middle shadow-xl transition-all",
                     openFrom === "left"
-                      ? "h-screen-dynamic w-screen max-w-96"
+                      ? `h-screen-dynamic w-screen ${maxWidth}`
                       : openFrom === "top"
                         ? "h-fit w-screen"
-                        : "h-screen-dynamic w-screen max-w-96",
+                        : `h-screen-dynamic w-screen ${maxWidth}`,
                     isForm === "cart" || isForm === "filter"
                       ? "bg-background-basic"
                       : "bg-background-subtle-1"

app/components/Footer.tsx

@@ -12,6 +12,7 @@ import {IconPlusLinkFooter} from './Icon';
 import {LayoutProps} from './Layout';
 
 type FooterProps = Pick<LayoutProps, 'footerMenu'>;
+type TagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export function Footer({footerMenu}: FooterProps) {
   let fetcher = useFetcher<any>();
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
@@ -22,13 +23,14 @@ export function Footer({footerMenu}: FooterProps) {
     newsletterDescription,
     newsletterPlaceholder,
     newsletterButtonText,
+    tagNameTitle: Tag = 'h6',
   } = settings;
   return (
     <footer className="footer w-full bg-[var(--footer-menu-background-color)]">
       <div className="container flex h-fit flex-col gap-6 px-4 pb-10 pt-6 md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-0 lg:py-16">
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">
-            {newsletterTitle && <h5>{newsletterTitle}</h5>}
+            {newsletterTitle && <Tag className='font-semibold'>{newsletterTitle}</Tag>}
             <div className="flex w-fit flex-col gap-4 md:h-fit">
               {newsletterDescription && <p>{newsletterDescription}</p>}
               {newsletterButtonText && (
@@ -99,12 +101,14 @@ function FooterMenu({menu}: {menu: EnhancedMenu | undefined | null}) {
 
 function MenuLink(props: SingleMenuItem) {
   let {title, items, to} = props;
+  const settings = useThemeSettings();
+  let {tagNameTitle: Tag = 'h6'} = settings || {};
   return (
     <>
       <div className="hidden flex-col gap-6 md:flex">
-        <h5 className="font-medium uppercase">
+        <Tag className="font-semibold uppercase">
           {title}
-        </h5>
+        </Tag>
         <ul className="space-y-1.5">
           {items.map((subItem, ind) => (
             <li key={ind} className="leading-6">
@@ -122,15 +126,15 @@ function MenuLink(props: SingleMenuItem) {
           {({open}) => (
             <>
               <Disclosure.Button className="w-full text-left">
-                <h5 className="flex justify-between font-medium uppercase">
+                <Tag className="flex justify-between font-semibold uppercase">
                   {title}
                   <span>
                     <IconPlusLinkFooter
                       open={open}
                       className={`trasition-transform h-5 w-5 duration-300 ${open ? 'rotate-90' : 'rotate-0'}`}
                     />
                   </span>
-                </h5>
+                </Tag>
               </Disclosure.Button>
               <div
                 className={`${
@@ -160,5 +164,7 @@ function MenuLink(props: SingleMenuItem) {
 }
 
 function HeaderText({title, to}: {title: string; to: string}) {
-  return <h5 className="font-medium uppercase">{title}</h5>;
+  const settings = useThemeSettings();
+  let {tagNameTitle: Tag = 'h6'} = settings || {};
+  return <Tag className="font-semibold uppercase">{title}</Tag>;
 }

app/components/Header/MenuDrawerHeader.tsx

@@ -1,17 +1,17 @@
-import {Await} from '@remix-run/react';
-import {useThemeSettings} from '@weaverse/hydrogen';
-import {EnhancedMenu, useIsHomePath} from '~/lib/utils';
-import {useRootLoaderData} from '~/root';
-import clsx from 'clsx';
-import {Suspense, useState} from 'react';
-import useWindowScroll from 'react-use/lib/useWindowScroll';
-import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconListMenu, IconLogin} from '../Icon';
-import {Link} from '../Link';
-import {Logo} from '../Logo';
-import {CartCount} from './CartCount';
-import {DrawerMenu} from './menu/DrawerMenu';
-import {SearchToggle} from './SearchToggle';
+import { Await } from "@remix-run/react";
+import { useThemeSettings } from "@weaverse/hydrogen";
+import { EnhancedMenu, useIsHomePath } from "~/lib/utils";
+import { useRootLoaderData } from "~/root";
+import clsx from "clsx";
+import { Suspense, useEffect, useState } from "react";
+import useWindowScroll from "react-use/lib/useWindowScroll";
+import { Drawer, useDrawer } from "../Drawer";
+import { IconAccount, IconListMenu, IconLogin } from "../Icon";
+import { Link } from "../Link";
+import { Logo } from "../Logo";
+import { CartCount } from "./CartCount";
+import { DrawerMenu } from "./menu/DrawerMenu";
+import { SearchToggle } from "./SearchToggle";
 
 export function UseMenuDrawerHeader({
   header,
@@ -22,42 +22,46 @@ export function UseMenuDrawerHeader({
   className?: string;
   openCart: () => void;
 }) {
-  let {stickyAnnouncementBar, announcementBarHeight} = useThemeSettings();
+  let { stickyAnnouncementBar, announcementBarHeight } = useThemeSettings();
   const isHome = useIsHomePath();
-  const {y} = useWindowScroll();
+  const { y } = useWindowScroll();
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
-  let {isOpen} = useDrawer();
+  const [top, setCalculatedTop] = useState(0);
+  let { isOpen } = useDrawer();
 
   let onHover = () => setHovered(true);
   let onLeave = () => setHovered(false);
 
   let enableTransparent = settings?.enableTransparentHeader && isHome;
   let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
-  let top = stickyAnnouncementBar
-    ? announcementBarHeight
-    : Math.max(announcementBarHeight - y, 0);
+  useEffect(() => {
+    let calculatedTop = stickyAnnouncementBar
+      ? announcementBarHeight
+      : Math.max(announcementBarHeight - y, 0);
+    setCalculatedTop(calculatedTop);
+  }, [y, stickyAnnouncementBar, announcementBarHeight]);
   return (
     <header
       role="banner"
       className={clsx(
-        enableTransparent ? 'fixed' : 'sticky',
+        enableTransparent ? "fixed w-screen" : "sticky",
         isTransparent
-          ? 'border-secondary bg-transparent text-secondary'
-          : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
-        'top-0 z-40 w-screen border-b border-foreground',
-        className,
+          ? "border-secondary bg-transparent text-secondary"
+          : "shadow-header border-foreground bg-background-subtle-1 text-primary",
+        "top-0 z-40 border-b border-foreground",
+        className
       )}
-      style={{['--announcement-bar-height' as string]: `${top}px`}}
+      style={{ ["--announcement-bar-height" as string]: `${top}px` }}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 container">
+      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 md:px-8 lg:px-6 py-4 transition-all duration-300 container">
         <div
           className={clsx(
-            'absolute inset-0 z-20 bg-background-subtle-1',
-            'transition-all duration-300 ease-in-out',
-            isTransparent ? 'opacity-0' : 'opacity-100',
+            "absolute inset-0 z-20 bg-background-subtle-1",
+            "transition-all duration-300 ease-in-out",
+            isTransparent ? "opacity-0" : "opacity-100"
           )}
         ></div>
         {header && <HeaderMenuDrawer menu={header} />}
@@ -75,8 +79,12 @@ export function UseMenuDrawerHeader({
   );
 }
 
-function HeaderMenuDrawer({menu}: {menu?: EnhancedMenu | null | undefined}) {
-  let {isOpen: showMenu, openDrawer, closeDrawer} = useDrawer();
+function HeaderMenuDrawer({
+  menu,
+}: {
+  menu?: EnhancedMenu | null | undefined;
+}) {
+  let { isOpen: showMenu, openDrawer, closeDrawer } = useDrawer();
   return (
     <nav
       className="z-30 flex items-center justify-start gap-3"
@@ -91,15 +99,15 @@ function HeaderMenuDrawer({menu}: {menu?: EnhancedMenu | null | undefined}) {
         onClose={closeDrawer}
         openFrom="left"
         heading="MENU"
-        isForm='menu'
+        isForm="menu"
       >
         <DrawerMenu menu={menu} />
       </Drawer>
     </nav>
   );
 }
 
-function AccountLink({className}: {className?: string}) {
+function AccountLink({ className }: { className?: string }) {
   const rootData = useRootLoaderData();
   const isLoggedIn = rootData?.isLoggedIn;
 

app/components/Header/MenuMegaHeader.tsx

@@ -3,7 +3,7 @@ import {useThemeSettings} from '@weaverse/hydrogen';
 import {EnhancedMenu, useIsHomePath} from '~/lib/utils';
 import {useRootLoaderData} from '~/root';
 import clsx from 'clsx';
-import {Suspense, useState} from 'react';
+import {Suspense, useEffect, useState} from 'react';
 import useWindowScroll from 'react-use/lib/useWindowScroll';
 import { useDrawer} from '../Drawer';
 import {IconAccount, IconLogin} from '../Icon';
@@ -27,32 +27,36 @@ export function UseMenuMegaHeader({
   const {y} = useWindowScroll();
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
+  const [top, setCalculatedTop] = useState(0);
   let {isOpen} = useDrawer();
 
   let onHover = () => setHovered(true);
   let onLeave = () => setHovered(false);
 
   let enableTransparent = settings?.enableTransparentHeader && isHome;
   let isTransparent = enableTransparent && y < 50 && !isOpen && !hovered;
-  let top = stickyAnnouncementBar
-    ? announcementBarHeight
-    : Math.max(announcementBarHeight - y, 0);
+  useEffect(() => {
+    let calculatedTop = stickyAnnouncementBar
+      ? announcementBarHeight
+      : Math.max(announcementBarHeight - y, 0);
+      setCalculatedTop(calculatedTop);
+  }, [y, stickyAnnouncementBar, announcementBarHeight]);
   return (
     <header
       role="banner"
       className={clsx(
-        enableTransparent ? 'fixed' : 'sticky',
+        enableTransparent ? 'fixed w-screen' : 'sticky',
         isTransparent
           ? 'border-secondary bg-transparent text-secondary'
           : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
-        'top-0 z-40 w-screen border-b',
+        'top-0 z-40 border-b',
         className,
       )}
       style={{['--announcement-bar-height' as string]: `${top}px`}}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="container z-40 flex h-nav items-center justify-between gap-3 transition-all duration-300">
+      <div className="container px-6 md:px-8 lg:px-6 z-40 flex h-nav items-center justify-between gap-3 transition-all duration-300">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',

app/components/Modal.tsx

@@ -23,7 +23,7 @@ export function Modal({
 
   return (
     <div
-      className="relative z-50"
+      className="relative z-50 hidden lg:block"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true"