Merge branch 'Weaverse:main' into main

app/components/Footer.tsx

@@ -16,7 +16,7 @@ export function Footer({footerMenu}: FooterProps) {
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
   return (
     <footer className="footer w-full bg-background-subtle-2">
-      <div className='flex flex-col gap-6 md:gap-10 lg:gap-8 lg:container px-4 pb-10 lg:px-10 lg:py-16 md:px-6 md:py-10 pt-6 h-fit'>
+      <div className="flex h-fit flex-col gap-6 px-4 pb-10 pt-6 container md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-10 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">
             <h3>Newsletter</h3>
@@ -86,9 +86,7 @@ function MenuLink(props: SingleMenuItem) {
     <>
       <div className="hidden flex-col gap-6 md:flex">
         <h4 className="font-medium uppercase">
-          <NavLink to={to} prefetch="intent">
-            <span className="text-animation">{title}</span>
-          </NavLink>
+          <span className="font-heading">{title}</span>
         </h4>
         <ul className="space-y-1.5">
           {items.map((subItem, ind) => (
@@ -145,14 +143,7 @@ function MenuLink(props: SingleMenuItem) {
 }
 
 function HeaderText({title, to}: {title: string; to: string}) {
-  return (
-    <NavLink
-      to={to}
-      className="border-b border-foreground pb-4 md:border-none md:pb-0"
-    >
-      <h4 className="text-animation font-medium uppercase">{title}</h4>
-    </NavLink>
-  );
+  return <h4 className="font-heading font-medium uppercase">{title}</h4>;
 }
 
 // function FooterMenu({

app/components/Header/MenuDrawerHeader.tsx

@@ -11,12 +11,12 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
-import {DrawerMenu} from './menu/DrawerMenu';
 import {CartCount} from './CartCount';
-import { SearchToggle } from './SearchToggle';
+import {DrawerMenu} from './menu/DrawerMenu';
+import {SearchToggle} from './SearchToggle';
 
 export function UseMenuDrawerHeader({
   header,
@@ -29,7 +29,7 @@ export function UseMenuDrawerHeader({
   cart: Promise<CartApiQueryFragment | null>;
   className?: string;
 }) {
-  const isHome  = useIsHomePath();
+  const isHome = useIsHomePath();
   const {y} = useWindowScroll();
   let settings = useThemeSettings();
   let [hovered, setHovered] = useState(false);
@@ -51,14 +51,16 @@ export function UseMenuDrawerHeader({
       role="banner"
       className={clsx(
         enableTransparent ? 'fixed' : 'sticky',
-        isTransparent ? 'text-white' : 'shadow-header',
-        'z-40 w-full border-b border-foreground top-0',
+        isTransparent
+          ? 'border-secondary bg-transparent text-secondary'
+          : 'shadow-header border-foreground bg-background-subtle-1 text-primary',
+        'top-0 z-40 w-full border-b border-foreground',
         className,
       )}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className=" z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 px-6 py-4 lg:container">
+      <div className="z-40 flex h-nav items-center justify-between gap-3 px-6 py-4 transition-all duration-300 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',

app/components/Header/MenuMegaHeader.tsx

@@ -11,7 +11,7 @@ import {CartApiQueryFragment} from 'storefrontapi.generated';
 import {CartMain} from '../Cart';
 import {CartLoading} from '../CartLoading';
 import {Drawer, useDrawer} from '../Drawer';
-import {IconAccount, IconLogin, IconSearch} from '../Icon';
+import {IconAccount, IconLogin} from '../Icon';
 import {Link} from '../Link';
 import {Logo} from '../Logo';
 import {MegaMenu} from './menu/MegaMenu';
@@ -52,15 +52,15 @@ export function UseMenuMegaHeader({
       className={clsx(
         enableTransparent ? 'fixed' : 'sticky',
         isTransparent
-          ? 'text-white'
-          : 'shadow-header',
-        'top-0 z-40 w-full border-b border-foreground',
+          ? ' text-secondary bg-transparent border-secondary'
+          : 'shadow-header text-primary bg-background-subtle-1 border-foreground',
+        'top-0 z-40 w-full border-b',
         className,
       )}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
     >
-      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 lg:container">
+      <div className="z-40 flex transition-all duration-300 h-nav items-center justify-between gap-3 container">
         <div
           className={clsx(
             'absolute inset-0 z-20 bg-background-subtle-1',

app/components/Header/SearchToggle.tsx

@@ -12,7 +12,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
   let settings = useThemeSettings();
   const [searchType, setSearchType] = useState(settings?.searchType);
   const [openFrom, setOpenFrom] = useState<TypeOpenFrom>(
-    searchType === 'headerSearch' ? 'top' : 'right'
+    searchType === 'popupSearch' ? 'top' : 'right'
   );
 
   useEffect(() => {
@@ -25,7 +25,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         if (settings?.searchType === 'drawerSearch' && isOpenDrawerHearder) {
           setOpenFrom('left');
         } else {
-          setOpenFrom(settings?.searchType === 'headerSearch' ? 'top' : 'right');
+          setOpenFrom(settings?.searchType === 'popupSearch' ? 'top' : 'right');
         }
       }
     };
@@ -50,7 +50,7 @@ export function SearchToggle({isOpenDrawerHearder}: {isOpenDrawerHearder?: boole
         heading="Search"
         isForm="search"
       >
-        {searchType === 'headerSearch' && <SearchTypeHeader isOpen={isOpen} />}
+        {searchType === 'popupSearch' && <SearchTypeHeader isOpen={isOpen} />}
         {searchType === 'drawerSearch' && <SearchTypeDrawer isOpen={isOpen} />}
       </Drawer>
     </>

app/components/Icon.tsx

@@ -88,42 +88,16 @@ export function IconBag(props: IconProps) {
 
 export function IconArrowRight(props: IconProps) {
   return (
-    <Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
-      <path
-        d="M5.5 16H27.5"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M18.5 7L27.5 16L18.5 25"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <Icon {...props} fill="currentColor" stroke={props.stroke || 'currentColor'} viewBox='0 0 256 256'>
+      <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" />
     </Icon>
   );
 }
 
 export function IconArrowLeft(props: IconProps) {
   return (
-    <Icon {...props} fill="none" stroke={props.stroke || 'currentColor'}>
-      <path
-        d="M27.5 16H5.5"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14.5 7L5.5 16L14.5 25"
-        stroke="#3D490B"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <Icon {...props} fill="currentColor" stroke={props.stroke || 'currentColor'} viewBox='0 0 256 256'>
+      <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z" />
     </Icon>
   );
 }

app/components/predictive-search/PredictiveSearch/SearchDrawer/SearchTypeDrawerResults.tsx

@@ -34,8 +34,8 @@ export function SearchTypeDrawerResults() {
     );
   }
   return (
-    <div className="flex items-center justify-center border-t bg-background-subtle-1">
-      <div className="grid max-h-[78vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
+    <div className="relative flex items-center justify-center border-t bg-background-subtle-1">
+      <div className="grid custom-scroll max-h-[81vh] w-screen grid-cols-1 gap-6 overflow-y-auto p-6">
         <div className="space-y-8">
           {queries && (
             <div className="flex flex-col gap-4 divide-y divide-bar-subtle">
@@ -83,11 +83,12 @@ export function SearchTypeDrawerResults() {
             />
           </div>
         )}
+        <div className='h-[50px]'/>
         {searchTerm.current && (
           <Link
             onClick={goToSearchResult}
             to={`/search?q=${searchTerm.current}`}
-            className="flex justify-center"
+            className="flex justify-center absolute bottom-0 p-6 bg-background-subtle-1 left-0 right-0"
           >
             <p className="inline-flex h-[50px] items-center justify-center rounded-md border border-primary bg-primary px-5 py-3 font-normal text-primary-foreground hover:border-bar hover:bg-background hover:text-foreground">
               Show All Results ({totalResultsCount})

app/sections/atoms/BackgroundImage.tsx

@@ -29,7 +29,7 @@ let variants = cva("absolute inset-0 w-full h-full z-[-1]", {
 });
 
 export type BackgroundImageProps = VariantProps<typeof variants> & {
-  backgroundImage: WeaverseImage | string;
+  backgroundImage?: WeaverseImage | string;
 };
 
 export function BackgroundImage(props: BackgroundImageProps) {