Merge branch 'Weaverse:main' into main

Weaverse · Nov 15, 2024 · 22d796c · 22d796c
2 parents e852a67 + 28aa4eb
commit 22d796c
Show file tree

Hide file tree

Showing 35 changed files with 1,929 additions and 1,048 deletions.
diff --git a/@/components/input.tsx b/@/components/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex w-full rounded border-2 border-bar-subtle px-3 py-3 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-bar hover:border-bar disabled:cursor-not-allowed disabled:opacity-50',
+          'flex w-full rounded border-2 border-bar-subtle px-3 py-3 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-bar hover:border-bar disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-foreground-subtle',
           className,
         )}
         ref={ref}

diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -86,7 +86,10 @@ function CartLines({
         )}
         <tbody>
           {lines?.nodes?.map((line) => (
-            <CartLineItem key={line.id} line={line} layout={layout} />
+            <>
+              {layout === "page" && <div className="h-4 w-full"></div>}
+              <CartLineItem key={line.id} line={line} layout={layout} />
+            </>
           ))}
         </tbody>
       </table>
@@ -106,7 +109,8 @@ 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] pb-4",
+    aside:
+      "grid gap-y-2 gap-x-3 grid-rows-[1fr_auto] grid-cols-[100px_1fr] pb-4",
   };
 
   const cellStyles = {
@@ -121,7 +125,7 @@ function CartLineItem({
         {image && (
           <Image
             alt={title}
-            aspectRatio="3/4"
+            aspectRatio="1/1"
             data={image}
             height={100}
             loading="lazy"
@@ -131,7 +135,7 @@ function CartLineItem({
         )}
       </td>
       <td className={cellClass}>
-        <div className=" flex gap-1 justify-between">
+        <div className="flex gap-1 justify-between">
           <Link
             prefetch="intent"
             to={lineItemUrl}
@@ -142,13 +146,22 @@ function CartLineItem({
               }
             }}
           >
-            <p className="line-clamp-1">{product.title}</p>
+            <p
+              className={clsx(
+                "line-clamp-1",
+                layout === "page"
+                  ? "text-base font-normal"
+                  : "text-base font-semibold"
+              )}
+            >
+              {product.title}
+            </p>
           </Link>
           <div className={layout === "page" ? "md:hidden" : ""}>
             <CartLineRemoveButton lineIds={[line.id]} />
           </div>
         </div>
-        <ul className="mt-4 space-y-1">
+        <ul className="space-y-1">
           {selectedOptions.map((option) => (
             <li key={option.name}>
               <span className="text-foreground-subtle">{option.value}</span>
@@ -163,9 +176,9 @@ function CartLineItem({
       )}
       <td className={cn(cellClass, "row-start-2")}>
         <div className="flex items-center justify-between gap-2">
-          <CartLineQuantity line={line} />
+          <CartLineQuantity line={line} layout={layout} />
           {layout === "aside" && (
-            <p className="text-center">
+            <p className="text-center text-base font-semibold">
               <Money withoutTrailingZeros data={line.cost.amountPerQuantity} />
             </p>
           )}
@@ -326,17 +339,26 @@ function CartLineRemoveButton({ lineIds }: { lineIds: string[] }) {
   );
 }
 
-function CartLineQuantity({ line }: { line: CartLine }) {
+function CartLineQuantity({
+  line,
+  layout,
+}: {
+  line: CartLine;
+  layout: CartMainProps["layout"];
+}) {
   if (!line || typeof line?.quantity === "undefined") return null;
   const { id: lineId, quantity } = line;
   const prevQuantity = Number(Math.max(0, quantity - 1).toFixed(0));
   const nextQuantity = Number((quantity + 1).toFixed(0));
-
+  let buttonStyles = {
+    page: "w-10 h-10 transition",
+    aside: "w-10 h-[35px] transition",
+  };
   return (
     <div className="flex items-center border border-bar-subtle rounded w-fit">
       <CartLineUpdateButton lines={[{ id: lineId, quantity: prevQuantity }]}>
         <button
-          className="w-10 h-10 transition "
+          className={buttonStyles[layout]}
           aria-label="Decrease quantity"
           disabled={quantity <= 1}
           name="decrease-quantity"
@@ -348,7 +370,7 @@ function CartLineQuantity({ line }: { line: CartLine }) {
       <div className="px-2 w-8 text-center">{quantity}</div>
       <CartLineUpdateButton lines={[{ id: lineId, quantity: nextQuantity }]}>
         <button
-          className="w-10 h-10 transition "
+          className={buttonStyles[layout]}
           aria-label="Increase quantity"
           name="increase-quantity"
           value={nextQuantity}

diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
@@ -85,7 +85,7 @@ export function Drawer({
                     className={cn(
                       "sticky top-0 flex h-nav items-center px-6 py-5",
                       heading ? "justify-between" : "justify-items-end",
-                      openFrom === "left" || (openFrom === "top" && !isBackMenu)
+                      openFrom === "left" || isForm === "cart" || (openFrom === "top" && !isBackMenu)
                         ? "flex-row-reverse"
                         : ""
                     )}
@@ -99,10 +99,10 @@ export function Drawer({
                       <IconClose aria-label="Close panel" />
                     </button>
                     {heading !== null && (
-                      <Dialog.Title>
-                        <h4 className=" font-semibold" id="cart-contents">
+                      <Dialog.Title as="span">
+                        <span className={cn("font-semibold font-heading text-xl", isForm !== 'search' && 'uppercase')} id="cart-contents">
                           {heading}
-                        </h4>
+                        </span>
                       </Dialog.Title>
                     )}
                     {isBackMenu && (

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
@@ -59,7 +59,7 @@ export function DrawerFilter({
               open={isOpen}
               onClose={closeDrawer}
               openFrom="left"
-              heading="Filter"
+              heading="FILTER"
               isForm='filter'
             >
               <div className="w-96 px-6">

diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx
@@ -62,7 +62,7 @@ function CartDrawer({
       open={isOpen}
       onClose={onClose}
       openFrom="right"
-      heading="Cart"
+      heading="CART"
       isForm="cart"
     >
       <div>

diff --git a/app/components/Input.tsx b/app/components/Input.tsx
@@ -54,7 +54,7 @@ export let Input = React.forwardRef<HTMLInputElement, InputProps>(
         // type={type}
         ref={ref}
         className={clsx(
-          'w-full !shadow-none focus:ring-0 focus-visible:outline-none',
+          'w-full !shadow-none focus:ring-0 focus-visible:outline-none placeholder:text-foreground-subtle',
           hasChild
             ? 'relatvie grow border-none bg-transparent p-0'
             : commonClasses,

diff --git a/app/components/ProductCard.tsx b/app/components/ProductCard.tsx
@@ -86,7 +86,7 @@ export function ProductCard({
               {hasTwoImages && (
                 <>
                   <Image
-                    className="fadeIn w-full object-cover absolute opacity-100 transition-opacity duration-300 group-hover/productCard:opacity-0"
+                    className="fadeIn w-full object-cover absolute rounded opacity-100 transition-opacity duration-300 group-hover/productCard:opacity-0"
                     sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                     aspectRatio="1/1"
                     data={productImages[0]}
@@ -96,7 +96,7 @@ export function ProductCard({
                     loading={loading}
                   />
                   <Image
-                    className="fadeIn w-full object-cover absolute opacity-0 transition-opacity duration-300 group-hover/productCard:opacity-100"
+                    className="fadeIn w-full object-cover absolute rounded opacity-0 transition-opacity duration-300 group-hover/productCard:opacity-100"
                     sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                     aspectRatio="1/1"
                     data={productImages[1]}
@@ -109,7 +109,7 @@ export function ProductCard({
               )}
               {!hasTwoImages && productImages[0] && (
                 <Image
-                  className="fadeIn w-full object-cover"
+                  className="fadeIn w-full object-cover rounded"
                   sizes="(min-width: 64em) 25vw, (min-width: 48em) 30vw, 45vw"
                   aspectRatio="1/1"
                   data={image}
@@ -135,7 +135,7 @@ export function ProductCard({
           {quickAdd &&
             variants.length === 1 &&
             firstVariant.availableForSale && (
-              <div className="absolute bottom-0 hidden w-full bg-[rgba(238,239,234,0.10)] px-3 py-5 opacity-100 backdrop-blur-2xl lg:group-hover/productCard:block">
+              <div className="absolute bottom-0 hidden w-full rounded-b bg-[rgba(238,239,234,0.10)] px-3 py-5 opacity-100 backdrop-blur-2xl lg:group-hover/productCard:block">
                 <AddToCartButton
                   className="w-full"
                   lines={[

diff --git a/app/components/QuickView.tsx b/app/components/QuickView.tsx
@@ -91,7 +91,7 @@ export function QuickView(props: { data: Jsonify<ProductData> }) {
           <div className="flex flex-col justify-start gap-4">
             <div className="flex flex-col gap-3">
               <div className="flex flex-col gap-2">
-                <h2 className="font-medium tracking-tighter font-heading">
+                <h2 className="font-medium tracking-tighter">
                   {title}
                 </h2>
                 {showVendor && vendor && (
@@ -207,7 +207,7 @@ export function QuickViewTrigger(props: { productHandle: string }) {
   }, [quickAddOpen, data, load, state]);
   return (
     <>
-      <div className="mt-2 absolute bottom-0 hidden lg:group-hover/productCard:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
+      <div className="mt-2 absolute rounded-b bottom-0 hidden lg:group-hover/productCard:block py-5 px-3 w-full opacity-100 bg-[rgba(238,239,234,0.10)] backdrop-blur-2xl">
         <Button
           onClick={(e) => {
             e.preventDefault();

diff --git a/app/components/predictive-search/PredictiveSearchResult.tsx b/app/components/predictive-search/PredictiveSearchResult.tsx
@@ -20,11 +20,11 @@ export function PredictiveSearchResult({
 
   return (
     <div
-      className="predictive-search-result flex flex-col gap-4 divide-y divide-bar-subtle"
+      className="predictive-search-result flex flex-col gap-3 divide-y divide-bar-subtle"
       key={type}
     >
       <Link prefetch="intent" to={categoryUrl} onClick={goToSearchResult}>
-        <h5 className="uppercase font-semibold">{isSuggestions ? 'Suggestions' : type}</h5>
+        <span className="uppercase font-semibold font-heading text-xl">{isSuggestions ? 'Suggestions' : type}</span>
       </Link>
       <ul className={clsx("pt-5", type === "products" ? 'space-y-4' : 'space-y-1')}>
         {items.map((item: NormalizedPredictiveSearchResultItem) => (

diff --git a/app/components/predictive-search/ResultItem.tsx b/app/components/predictive-search/ResultItem.tsx
@@ -1,19 +1,25 @@
-import {Link} from '@remix-run/react';
-import {Image, Money, Pagination} from '@shopify/hydrogen';
-import {SearchResultItemProps} from './types';
+import { Link } from "@remix-run/react";
+import { Image, Money } from "@shopify/hydrogen";
+import { SearchResultItemProps } from "./types";
+import clsx from "clsx";
 
 export function SearchResultItem({
   goToSearchResult,
   item,
 }: SearchResultItemProps) {
   return (
     <li key={item.id}>
-      <Link className="flex gap-4" onClick={goToSearchResult} to={item.url} data-type={item.__typename}>
-        {item.__typename === 'Product' && (
-          <div className="h-20 w-20 shrink-0">
+      <Link
+        className="flex gap-3"
+        onClick={goToSearchResult}
+        to={item.url}
+        data-type={item.__typename}
+      >
+        {item.__typename === "Product" && (
+          <div className="h-20 w-20 shrink-0 aspect-square">
             {item.image?.url && (
               <Image
-                alt={item.image.altText ?? ''}
+                alt={item.image.altText ?? ""}
                 src={item.image.url}
                 width={80}
                 height={80}
@@ -22,26 +28,29 @@ export function SearchResultItem({
             )}
           </div>
         )}
-        <div className="space-y-2">
+        <div className="flex flex-col">
           {item.vendor && (
-            <div>
+            <p>
               <small className="text-foreground-subtle">By {item.vendor}</small>
-            </div>
+            </p>
           )}
           {item.styledTitle ? (
-            <div
+            <p
               dangerouslySetInnerHTML={{
                 __html: item.styledTitle,
               }}
+              className="text-base font-normal"
             />
           ) : (
-            <div
-              className={
-                item.__typename === 'Product' ? 'line-clamp-1' : 'line-clamp-2'
-              }
+            <p
+              className={clsx(
+                item.__typename === "Product"
+                  ? "line-clamp-1 font-heading text-xl font-semibold"
+                  : "line-clamp-2 font-body text-base font-normal"
+              )}
             >
               {item.title}
-            </div>
+            </p>
           )}
           <div className="flex gap-2">
             {item?.compareAtPrice && (

diff --git a/app/components/product-form/options.tsx b/app/components/product-form/options.tsx
@@ -80,7 +80,7 @@ export function VariantOption(props: VariantOptionProps) {
         <span className="ml-2 font-semibold text-base">{selectedOptionValue}</span>
       </legend>
       {type === "button" && (
-        <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
           {values.map((value) => (
             <button
               key={value.value}
@@ -99,7 +99,7 @@ export function VariantOption(props: VariantOptionProps) {
       )}
 
       {type === "color" && (
-        <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
           {values.map((value) => {
             let swatchColor: string =
               swatches.colorSwatches.find((color) => color.name === value.value)
@@ -128,7 +128,7 @@ export function VariantOption(props: VariantOptionProps) {
         </div>
       )}
       {type === "custom-image" && (
-        <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
           {values.map((value) => {
             let swatchImage: WeaverseImage =
               swatches.imageSwatches.find((image) => image.name === value.value)
@@ -159,7 +159,7 @@ export function VariantOption(props: VariantOptionProps) {
         </div>
       )}
       {type === "variant-image" && (
-        <div className="flex gap-4">
+        <div className="flex gap-4 flex-wrap">
           {values.map((value) => {
             return (
               <button
@@ -198,7 +198,7 @@ export function VariantOption(props: VariantOptionProps) {
       )}
 
       {type === "default" && (
-        <div className="flex gap-3">
+        <div className="flex gap-3 flex-wrap">
           {values.map((value) => (
             <div
               key={value.value}

diff --git a/app/components/product-form/product-media.tsx b/app/components/product-form/product-media.tsx
@@ -61,10 +61,10 @@ export function ProductMedia(props: ProductMediaProps) {
             : undefined
         }
         onSwiper={setSwiperInstance}
-        className="vt-product-image max-w-full pb-14 md:pb-0 md:[&_.swiper-pagination-bullets]:hidden mySwiper2"
+        className="vt-product-image max-w-full pb-4 md:pb-0 md:[&_.swiper-pagination-bullets]:hidden mySwiper2"
         style={
           {
-            "--swiper-pagination-bottom": "20px",
+            "--swiper-pagination-bottom": "-6px",
             "--swiper-pagination-color": "#3D490B",
           } as React.CSSProperties
         }