Update shopify cart

components/commerce/cart-drawer.tsx

@@ -5,12 +5,7 @@ import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { Loader } from '@/components/ui/loader';
-import {
-  RiCloseLine,
-  RiImageLine,
-  RiSubtractLine,
-  RiAddLine,
-} from '@remixicon/react';
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
 import {
   Empty,
   EmptyHeader,
@@ -66,7 +61,7 @@ const CartDrawer: React.FC = () => {
               Shopping Cart ({itemCount})
             </SheetTitle>
             <Button onClick={closeCart} variant="ghost" size="icon-sm">
-              <RiCloseLine size={20} />
+              <X size={20} />
             </Button>
           </div>
         </SheetHeader>
@@ -116,7 +111,7 @@ const CartDrawer: React.FC = () => {
                         />
                       ) : (
                         <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <RiImageLine size={24} />
+                          <ImageIcon size={24} />
                         </div>
                       )}
                     </div>
@@ -153,7 +148,7 @@ const CartDrawer: React.FC = () => {
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <RiSubtractLine size={14} />
+                            <Minus size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
@@ -167,7 +162,7 @@ const CartDrawer: React.FC = () => {
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <RiAddLine size={14} />
+                            <Plus size={14} />
                           </Button>
                         </div>
                       </div>
@@ -189,7 +184,7 @@ const CartDrawer: React.FC = () => {
                         disabled={loading}
                         className="text-gray-400 hover:text-gray-700"
                       >
-                        <RiCloseLine size={18} />
+                        <X size={18} />
                       </Button>
                     </div>
                   </div>

components/commerce/product-details.tsx

@@ -6,6 +6,7 @@ import { useShopifyCart } from "@/hooks/use-shopify-cart";
 import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
@@ -191,7 +192,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               disabled={!variant || adding}
               className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
             >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
             </button>
           </div>