Merge branch 'Weaverse:main' into main

app/components/CompareAtPrice.tsx

@@ -0,0 +1,22 @@
+import { useMoney } from "@shopify/hydrogen";
+import type { MoneyV2 } from "@shopify/hydrogen/storefront-api-types";
+import { cn } from "~/lib/cn";
+
+export function CompareAtPrice({
+  data,
+  className,
+}: {
+  data: MoneyV2;
+  className?: string;
+}) {
+  let { currencyNarrowSymbol, withoutTrailingZerosAndCurrency } =
+    useMoney(data);
+  return (
+    <span
+      className={cn("strike text-[var(--color-compare-price-text)]", className)}
+    >
+      {currencyNarrowSymbol}
+      {withoutTrailingZerosAndCurrency}
+    </span>
+  );
+}

app/components/Icons.tsx

@@ -434,3 +434,18 @@ export function IconCheck(props: IconProps) {
     </svg>
   );
 }
+
+export function IconCheckCircle(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
+    </svg>
+  );
+}

app/components/Tooltip.tsx

@@ -6,7 +6,6 @@ import type {
 import {
   Arrow,
   Content,
-  Portal,
   Provider,
   Root,
   Trigger,
@@ -30,7 +29,7 @@ export let TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
       <Content
         ref={ref}
         className={cn(
-          "animate-slideDownAndFade",
+          "animate-slide-down-and-fade",
           "z-50 px-4 rounded py-1 shadow-sm text-background bg-body opacity-0",
           className,
         )}

app/components/predictive-search/PredictiveSearchResults.tsx

@@ -32,7 +32,7 @@ export function PredictiveSearchResults() {
     );
   }
   return (
-    <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center shadow-2xl">
+    <div className="absolute left-1/2 top-20 z-10 flex w-fit -translate-x-1/2 items-center justify-center shadow-header">
       <div className="grid w-screen min-w-[430px] max-w-[720px] grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-[1fr_2fr] max-h-[80vh] overflow-y-auto">
         <div className="space-y-8">
           <div className="flex flex-col gap-4 divide-y divide-line">
@@ -82,7 +82,7 @@ function NoPredictiveSearchResults({
     return null;
   }
   return (
-    <p className="w-[640px] shadow-2xl bg-background p-6">
+    <p className="w-[640px] shadow-header bg-background p-6">
       No results found for <q>{searchTerm.current}</q>
     </p>
   );

app/data/queries.ts

@@ -69,8 +69,10 @@ export let PRODUCT_QUERY = `#graphql
       title
       vendor
       handle
+      publishedAt
       descriptionHtml
       description
+      summary: description(truncateAt: 200)
       options {
         name
         values

app/lib/utils.ts

@@ -341,15 +341,13 @@ export function getImageAspectRatio(
   },
   aspectRatio: string,
 ) {
-  let aspRt: string | undefined;
   if (aspectRatio === "adapt") {
     if (image?.width && image?.height) {
-      aspRt = `${image.width}/${image.height}`;
+      return `${image.width}/${image.height}`;
     }
-  } else {
-    aspRt = aspectRatio;
+    return "1/1";
   }
-  return aspRt;
+  return aspectRatio;
 }
 
 export function loadCSS(attrs: LinkHTMLAttributes<HTMLLinkElement>) {

app/modules/CountrySelector.tsx

@@ -16,12 +16,11 @@ import {
   PopoverButton,
   PopoverPanel,
 } from "@headlessui/react";
-import { IconCaretDown } from "~/components/Icons";
+import { IconCaretDown, IconCheckCircle } from "~/components/Icons";
 import { getCountryUrlPath } from "~/lib/locale";
 import type { Localizations } from "~/lib/type";
 import { DEFAULT_LOCALE } from "~/lib/utils";
 import type { RootLoader } from "~/root";
-import { IconCheck } from "./Icon";
 
 export function CountrySelector() {
   const fetcher = useFetcher();
@@ -82,13 +81,13 @@ export function CountrySelector() {
   return (
     <div ref={observerRef} className="grid gap-4 w-80">
       <Popover>
-        <PopoverButton className="w-full border border-line/30 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
+        <PopoverButton className="w-full border border-line overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center justify-between gap-2">
           {selectedLocale.label}
           <IconCaretDown className="w-5 h-5" />
         </PopoverButton>
         <PopoverBackdrop className="bg-black/30" />
         <PopoverPanel anchor="top">
-          <div className="w-80 max-h-40 overflow-auto py-2 rounded bg-black my-2">
+          <div className="w-80 max-h-40 overflow-auto py-2 bg-neutral-800 my-2">
             {countries &&
               Object.keys(countries).map((countryPath) => {
                 const countryLocale = countries[countryPath];
@@ -114,12 +113,12 @@ export function CountrySelector() {
                     key={countryPath}
                     type="button"
                     onClick={onChangeLocale}
-                    className="text-white bg-black hover:bg-background/30 w-full p-2 transition flex justify-start items-center text-left cursor-pointer py-2 px-4 text-sm"
+                    className="text-white bg-neutral-800 hover:bg-background/30 w-full p-2 transition flex justify-between items-center text-left cursor-pointer py-2 px-4 text-sm"
                   >
-                    {countryLocale.label}
+                    <span>{countryLocale.label}</span>
                     {isSelected ? (
                       <span className="ml-2">
-                        <IconCheck />
+                        <IconCheckCircle className="w-5 h-5" />
                       </span>
                     ) : null}
                   </CloseButton>

app/modules/Drawer.tsx

@@ -61,7 +61,7 @@ export function Drawer({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 top-nav bg-background bg-opacity-25 text-body" />
+          <div className="fixed inset-0 bg-body bg-opacity-50 text-body" />
         </Transition.Child>
 
         <div className="fixed inset-0 top-nav">

app/modules/Footer.tsx

@@ -17,7 +17,7 @@ import {
 import type { ChildEnhancedMenuItem, EnhancedMenu } from "~/lib/utils";
 import { CountrySelector, Input } from "~/modules";
 
-let variants = cva("divide-y divide-line space-y-9", {
+let variants = cva("divide-y divide-line/50 space-y-9", {
   variants: {
     width: {
       full: "w-full h-full",
@@ -53,30 +53,37 @@ export function Footer({
 
   let { items = [] } = menu || {};
   let socialItems = [
-    {
-      name: "Facebook",
-      to: socialFacebook,
-      icon: <IconFacebookLogo className="w-5 h-5" />,
-    },
     {
       name: "Instagram",
       to: socialInstagram,
       icon: <IconInstagramLogo className="w-5 h-5" />,
     },
+    {
+      name: "X",
+      to: socialX,
+      icon: <IconXLogo className="w-5 h-5" />,
+    },
     {
       name: "LinkedIn",
       to: socialLinkedIn,
       icon: <IconLinkedinLogo className="w-5 h-5" />,
     },
     {
-      name: "X",
-      to: socialX,
-      icon: <IconXLogo className="w-5 h-5" />,
+      name: "Facebook",
+      to: socialFacebook,
+      icon: <IconFacebookLogo className="w-5 h-5" />,
     },
   ];
 
   return (
-    <footer className="bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] pt-16 text-sm">
+    <footer
+      className="bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] pt-16"
+      style={
+        {
+          "--underline-color": "var(--color-footer-text)",
+        } as React.CSSProperties
+      }
+    >
       <div className={variants({ width: footerWidth })}>
         <div className="space-y-9">
           <div className="w-full grid lg:grid-cols-4 gap-8">
@@ -113,7 +120,7 @@ export function Footer({
             </div>
             <div className="flex flex-col gap-6">
               <div className="text-base">{addressTitle}</div>
-              <div>
+              <div className="space-y-2">
                 <p>{storeAddress}</p>
                 <p>Email: {storeEmail}</p>
               </div>
@@ -122,12 +129,12 @@ export function Footer({
               <div className="text-base">{newsletterTitle}</div>
               <div className="space-y-2">
                 <p>{newsletterDescription}</p>
-                <div className="flex gap-2">
+                <div className="flex">
                   <Input
                     placeholder={newsletterPlaceholder}
-                    className="max-w-96"
+                    className="max-w-96 text-body"
                   />
-                  <Button variant="secondary">{newsletterButtonText}</Button>
+                  <Button variant="custom">{newsletterButtonText}</Button>
                 </div>
               </div>
             </div>
@@ -165,21 +172,21 @@ function FooterMenu({
   items: ChildEnhancedMenuItem[];
 }) {
   return (
-    <div className="flex flex-col gap-4 lg:gap-8">
+    <div className="flex flex-col gap-4">
       <Disclosure defaultOpen>
         <DisclosureButton className="lg:hidden text-left">
-          <div className="text-base">
+          <div className="text-base font-medium">
             {to === "#" ? title : <Link to={to}>{title}</Link>}
           </div>
         </DisclosureButton>
-        <div className="text-base hidden lg:block">
+        <div className="text-lg font-medium hidden lg:block">
           {to === "#" ? title : <Link to={to}>{title}</Link>}
         </div>
         <DisclosurePanel>
           <div className="flex flex-col gap-2">
             {items.map((item, ind) => (
-              <Link to={item.to} key={ind}>
-                {item.title}
+              <Link to={item.to} key={ind} className="relative">
+                <span className="underline-animation">{item.title}</span>
               </Link>
             ))}
           </div>

app/modules/OrderCard.tsx

@@ -22,7 +22,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
             <Image
               width={168}
               height={168}
-              className="w-full opacity-0 animate-fadeIn cover"
+              className="w-full opacity-0 animate-fade-in cover"
               alt={lineItems[0].image?.altText ?? "Order image"}
               src={lineItems[0].image.url}
             />

app/modules/ProductCard.tsx

@@ -7,6 +7,7 @@ import { getProductPlaceholder } from "~/lib/placeholders";
 import { isDiscounted, isNewArrival } from "~/lib/utils";
 import { AddToCartButton, Button, Link, Text } from "~/modules";
 import { QuickViewTrigger } from "./QuickView";
+import { CompareAtPrice } from "~/components/CompareAtPrice";
 
 export function ProductCard({
   product,
@@ -65,7 +66,7 @@ export function ProductCard({
               prefetch="intent"
             >
               <Image
-                className="object-cover w-full opacity-0 animate-fadeIn"
+                className="object-cover w-full opacity-0 animate-fade-in"
                 sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                 aspectRatio="4/5"
                 data={image}
@@ -129,10 +130,7 @@ export function ProductCard({
             <Text className="flex gap-2">
               <Money withoutTrailingZeros data={price} />
               {isDiscounted(price as MoneyV2, compareAtPrice as MoneyV2) && (
-                <CompareAtPrice
-                  className={"opacity-50"}
-                  data={compareAtPrice as MoneyV2}
-                />
+                <CompareAtPrice data={compareAtPrice as MoneyV2} />
               )}
             </Text>
           </div>
@@ -167,23 +165,3 @@ export function ProductCard({
     </div>
   );
 }
-
-function CompareAtPrice({
-  data,
-  className,
-}: {
-  data: MoneyV2;
-  className?: string;
-}) {
-  const { currencyNarrowSymbol, withoutTrailingZerosAndCurrency } =
-    useMoney(data);
-
-  const styles = clsx("strike", className);
-
-  return (
-    <span className={styles}>
-      {currencyNarrowSymbol}
-      {withoutTrailingZerosAndCurrency}
-    </span>
-  );
-}

app/modules/ProductGallery.tsx

@@ -50,7 +50,7 @@ export function ProductGallery({
                     : "(min-width: 48em) 30vw, 90vw"
                 }
                 className={clsx(
-                  "object-cover w-full h-full aspect-square opacity-0 animate-fadeIn",
+                  "object-cover w-full h-full aspect-square opacity-0 animate-fade-in",
                   i === 0 ? "vt-product-image" : "",
                 )}
               />

app/modules/QuickView.tsx

@@ -40,8 +40,6 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
     showRefundPolicy,
     hideUnavailableOptions,
     showThumbnails,
-    numberOfThumbnails,
-    spacing,
   } = themeSettings;
   let handleSelectedVariantChange = (variant: any) => {
     setSelectedVariant(variant);
@@ -70,12 +68,11 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
     <div className="p-10 rounded-md bg-background w-[80vw] max-w-[1200px]">
       <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-2 lg:gap-12">
         <ProductMedia
+          mediaLayout="slider"
           // @ts-expect-error
           media={product?.media.nodes}
           selectedVariant={selectedVariant}
           showThumbnails={showThumbnails}
-          numberOfThumbnails={numberOfThumbnails}
-          spacing={spacing}
         />
         <div className="flex flex-col justify-start space-y-5">
           <div className="space-y-4">