Merge branch 'Weaverse:main' into main

Author: dangthang1903

app/components/layout/cart-drawer.tsx

@@ -64,9 +64,9 @@ export function CartDrawer() {
                 aria-describedby={undefined}
               >
                 <div className="">
-                  <div className="flex gap-2 items-center justify-between px-4">
+                  <div className="flex gap-2 items-center justify-between px-4 pb-0.5 pt-1.5">
                     <Dialog.Title asChild className="text-base">
-                      <span className="font-bold">Cart</span>
+                      <span className="font-semibold uppercase">Cart</span>
                     </Dialog.Title>
                     <Dialog.Close asChild>
                       <button

app/components/layout/country-selector.tsx

@@ -86,7 +86,7 @@ export function CountrySelector({
           <button
             type="button"
             className={cn(
-              "w-full border border-line-subtle overflow-clip cursor-pointer text-left outline-hidden flex items-center gap-2",
+              "w-full border border-[#A79D95] overflow-clip cursor-pointer text-left outline-hidden flex items-center gap-2",
               inputClassName,
             )}
             aria-label="Select country"
@@ -104,7 +104,7 @@ export function CountrySelector({
         </Popover.Trigger>
         <Popover.Portal>
           <Popover.Content className="z-10">
-            <div className="w-80 max-h-40 overflow-auto py-2 bg-neutral-800 my-2">
+            <div className="w-48 max-h-40 overflow-auto py-2 bg-[#3b352c] my-2">
               {countries &&
                 Object.keys(countries).map((countryPath) => {
                   const countryLocale = countries[countryPath];
@@ -128,13 +128,15 @@ export function CountrySelector({
                           },
                         })
                       }
-                      className="text-white bg-neutral-800 hover:bg-neutral-600 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
+                      className="text-white bg-[#3b352c] hover:bg-[#4a423a] w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
                     >
-                      <ReactCountryFlag
-                        svg
-                        countryCode={countryLocale.country}
-                        style={{ width: "24px", height: "14px" }}
-                      />
+                      {enableFlag && (
+                        <ReactCountryFlag
+                          svg
+                          countryCode={countryLocale.country}
+                          style={{ width: "24px", height: "14px" }}
+                        />
+                      )}
                       <span>{countryLocale.label}</span>
                       {isSelected ? (
                         <span className="ml-auto">

app/components/layout/footer.tsx

@@ -159,7 +159,7 @@ export function Footer() {
                       type="email"
                       required
                       placeholder={newsletterPlaceholder}
-                      className="text-body focus-visible:outline-hidden px-3 placeholder:text-[#918379] border border-line-subtle lg:w-80 w-full"
+                      className="text-body bg-white focus-visible:outline-hidden px-3 placeholder:text-[#918379] border border-line-subtle lg:w-80 w-full"
                     />
                     <Button
                       variant="primary"
@@ -195,7 +195,7 @@ export function Footer() {
                 {copyright}
               </p>
               <div className="flex justify-start lg:justify-center items-center order-1">
-                <CountrySelector inputClassName="px-4 py-3" enableFlag={false} />
+                <CountrySelector inputClassName="px-4 py-2" enableFlag={false} />
               </div>
               <div className="flex gap-4 justify-start md:justify-end order-2">
                 {SOCIAL_ACCOUNTS.map((social) =>

app/components/layout/header.tsx

@@ -62,7 +62,7 @@ export function Header() {
         "text-(--color-header-text) hover:text-(--color-header-text)",
         "border-b border-line-subtle",
         variants({ padding: headerWidth }),
-        scrolled ? "shadow-header" : "shadow-none",
+        scrolled ? "shadow-none" : "shadow-none",
         enableTransparent
           ? [
               "fixed w-screen group/header",

app/components/layout/scrolling-announcement.tsx

@@ -210,7 +210,7 @@ export function ScrollingAnnouncement() {
           </button>
         </div>
         <div className="lg:flex justify-end hidden">
-          <CountrySelector inputClassName="px-4 py-2" enableFlag={false} />
+          <CountrySelector inputClassName="px-4 py-1" enableFlag={false} />
         </div>
       </div>
     </div>

app/components/link.tsx

@@ -145,7 +145,6 @@ export const Link = forwardRef(
         "--btn-bg-hover": backgroundColorHover,
         "--btn-text-hover": textColorHover,
         "--btn-border-hover": borderColorHover,
-        
       } as React.CSSProperties;
     }
     if (variant === "decor") {
@@ -170,20 +169,29 @@ export const Link = forwardRef(
         {...rest}
       >
         {variant === "decor" ? (
-          <span className="inline-flex items-center gap-1">
+          <span className="inline-flex items-center gap-2.5">
             {children || text}
-            <ArrowRight
-              size={20}
-              weight="thin"
-              className="transition-transform duration-300 transform group-hover:translate-x-1"
-            />
+            <span className="transition-transform duration-300 transform group-hover:translate-x-1">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+            >
+              <path
+                d="M14.0575 4.74121L13.1737 5.62508L16.9236 9.37496H0.625V10.625H16.9234L13.1737 14.3748L14.0575 15.2586L19.3163 9.99992L14.0575 4.74121Z"
+                fill="currentColor"
+              />
+            </svg>
+            </span>
           </span>
         ) : (
           children || text
         )}
       </RemixLink>
     );
-  }
+  },
 );
 
 export default Link;

app/components/product/product-card.tsx

@@ -88,7 +88,7 @@ export function ProductCard({
   return (
     <div
       className={clsx(
-        "group rounded-(--pcard-radius) transition-all hover:border hover:border-[#DBD7D1] hover:shadow-lg",
+        "group rounded-(--pcard-radius) transition-all hover:border hover:border-[#DBD7D1]",
         className
       )}
       style={
@@ -183,7 +183,7 @@ export function ProductCard({
               )
             }
           >
-            <RevealUnderline>{product.title}</RevealUnderline>
+            <span className="font-semibold uppercase">{product.title}</span>
           </NavLink>
           <div
             className={clsx(

app/components/product/quick-shop.tsx

@@ -111,7 +111,7 @@ function ProductDescriptionDrawer({
         />
         <Dialog.Content
           className={clsx([
-            "fixed inset-y-0 w-full md:max-w-[430px] bg-background py-6 z-20",
+            "fixed inset-y-0 w-full md:max-w-[430px] bg-background py-2.5 z-20",
             "right-0 data-[state=open]:animate-enter-from-right shadow-2xl",
           ])}
           aria-describedby={undefined}
@@ -128,7 +128,7 @@ function ProductDescriptionDrawer({
                   <CaretLeftIcon className="w-4 h-4 text-[#29231E]" />
                 </button>
                 <Dialog.Title asChild>
-                  <span className="font-semibold text-sm tracking-[0.02em] text-[#29231E] uppercase">DESCRIPTION</span>
+                  <span className="font-semibold uppercase">DESCRIPTION</span>
                 </Dialog.Title>
               </div>
               <button
@@ -229,7 +229,7 @@ export function QuickShop({
         {/* Product Details */}
         <div className="space-y-6">
           {/* Product Title & Price */}
-          <h4 className="font-semibold leading-tight line-clamp-2">{title}</h4>
+          <h4 className="font-medium leading-tight line-clamp-2">{title}</h4>
           <button
             type="button"
             className="underline cursor-pointer"
@@ -341,7 +341,7 @@ export function QuickShopTrigger({ productHandle }: { productHandle: string }) {
           type="button"
           className={clsx(
             "absolute inset-x-4 bottom-4 !opacity-0 -translate-y-1.5 -translate-x-2 lg:group-hover:!opacity-100 lg:group-hover:translate-x-0 lg:group-hover:translate-y-2 !transition-all duration-500",
-            "border px-4 py-3",
+            "border px-4 py-2",
             "text-(--btn-secondary-text)",
             "bg-(--btn-secondary-bg)",
             "border-(--btn-secondary-bg)",
@@ -362,16 +362,16 @@ export function QuickShopTrigger({ productHandle }: { productHandle: string }) {
         />
         <Dialog.Content
           className={clsx([
-            "fixed inset-y-0 w-full md:max-w-[430px] bg-background py-4 z-10",
+            "fixed inset-y-0 w-full md:max-w-[430px] bg-background py-2.5 z-10",
             "right-0 data-[state=open]:animate-enter-from-right shadow-2xl",
           ])}
           aria-describedby={undefined}
         >
           <div className="h-full flex flex-col">
             {/* Header */}
-            <div className="flex items-center justify-between px-5 flex-shrink-0 py-2.5">
+            <div className="flex items-center justify-between px-5 flex-shrink-0 py-3">
               <Dialog.Title asChild>
-                <span className="font-semibold">Quick Shop</span>
+                <span className="font-semibold uppercase">Quick Shop</span>
               </Dialog.Title>
               <button
                 type="button"

app/sections/collection-filters/tools-bar.tsx

@@ -91,14 +91,14 @@ function FiltersDrawer({
         />
         <Dialog.Content
           className={clsx([
-            "fixed inset-y-0 w-full md:w-[360px] bg-(--color-background) py-4 z-10",
+            "fixed inset-y-0 w-full md:max-w-[430px] bg-(--color-background) py-4 z-10",
             "right-0 data-[state=open]:animate-enter-from-right",
           ])}
           aria-describedby={undefined}
         >
           <div className="space-y-1">
             <div className="flex gap-2 items-center justify-between px-4">
-              <Dialog.Title asChild className="py-2.5 font-bold">
+              <Dialog.Title asChild className="py-2.5 font-semibold uppercase">
                 <span>Filters</span>
               </Dialog.Title>
               <Dialog.Close asChild>

app/sections/featured-products/index.tsx

@@ -19,13 +19,17 @@ const FeaturedProducts = forwardRef<
 
 export default FeaturedProducts;
 
-// TODO: allowing pick products or select a collection
 const FEATURED_PRODUCTS_QUERY = `#graphql
-  query featuredProducts($country: CountryCode, $language: LanguageCode)
+  query featuredProducts($country: CountryCode, $language: LanguageCode, $handle: String!)
   @inContext(country: $country, language: $language) {
-    products(first: 16) {
-      nodes {
-        ...ProductCard
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      products(first: 16) {
+        nodes {
+          ...ProductCard
+        }
       }
     }
   }
@@ -34,14 +38,17 @@ const FEATURED_PRODUCTS_QUERY = `#graphql
 
 export type FeaturedProductsLoaderData = Awaited<ReturnType<typeof loader>>;
 
-export const loader = async ({ weaverse }: ComponentLoaderArgs) => {
+export const loader = async ({ weaverse, data }: ComponentLoaderArgs) => {
   const { language, country } = weaverse.storefront.i18n;
+  const { collectionHandle = 'frontpage' } = data;
+  
   return await weaverse.storefront.query<FeaturedProductsQuery>(
     FEATURED_PRODUCTS_QUERY,
     {
       variables: {
         country,
         language,
+        handle: collectionHandle,
       },
     },
   );
@@ -52,13 +59,26 @@ export const schema = createSchema({
   title: "Featured products",
   childTypes: ["featured-products-items", "featured-content-products"],
   settings: [
+    {
+      group: "Collection",
+      inputs: [
+        {
+          type: "text",
+          name: "collectionHandle",
+          label: "Collection handle",
+          defaultValue: "frontpage",
+          placeholder: "Enter collection handle (e.g., frontpage, featured)",
+        },
+      ],
+    },
     {
       group: "Layout",
       inputs: layoutInputs.filter((i) => i.name !== "borderRadius"),
     },
   ],
   presets: {
     gap: 32,
+    collectionHandle: "frontpage",
     children: [
       { type: "featured-content-products" },
       { type: "featured-products-items" },