From adc212638e8e3e852a34b84f834eb10e6e1acb4f Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:21:43 +0330
Subject: [PATCH] updated style and fixed update quantity bug

---
 frontend/components/cart/index/CartItem.vue | 64 +++++++++++----------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index e11a7f9..aa62337 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -92,7 +92,7 @@ watch(
     () => debouncedCounter.value,
     (nv) => {
         addCartItem(
-            { id: data.value.id, quantity: nv },
+            { id: data.value.product.id, quantity: nv },
             {
                 onSuccess: () => {
                     invalidateCart();
@@ -116,20 +116,10 @@ watch(
     <li
         class="flex flex-col items-center w-full gap-4 p-4 border lg:flex-row border-slate-200 rounded-xl bg-slate-50 overflow-hidden relative"
     >
-        <img
-            src="/logo.png"
-            class="absolute -top-5 -left-5 rotate-[135deg] size-28"
-        />
-
-        <div class="flex items-center justify-start w-full gap-2.5 lg:gap-4">
-            <Skeleton
-                v-if="cartImageIsLoading"
-                class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
-            />
-
+        <div class="flex items-start justify-start w-full gap-2.5 lg:gap-4">
             <div
-                v-else
-                class="size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
+                v-if="!cartImageIsLoading"
+                class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
             >
                 <img
                     :src="data.product.image"
@@ -137,34 +127,42 @@ watch(
                     alt="product"
                 />
             </div>
+            <Skeleton
+                v-else
+                class="!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
+            />
 
-            <div class="flex flex-col w-full gap-4">
-                <span class="font-semibold typo-sub-h-sm text-slate-600">
-                    {{ data.product.category }}
-                </span>
-
-                <div class="flex items-center justify-start gap-3">
-                    <span class="font-semibold typo-sub-h-xl text-black">
-                        {{ data.product.title }}
+            <div class="flex flex-col w-full gap-3 lg:gap-4">
+                <div class="flex items-center justify-between gap-3">
+                    <span
+                        class="font-semibold typo-sub-h-xs lg:typo-sub-h-sm text-slate-600"
+                    >
+                        {{ data.product.category }}
                     </span>
                     <div
                         v-if="data.product.discount > 0"
-                        class="text-white bg-blue-500 px-4 py-2 text-xs rounded-full flex items-center gap-1"
+                        class="text-white bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[10px] lg:text-xs rounded-full flex items-center gap-1"
                     >
                         <Icon name="bi:percent" class="size-4" />
                         {{ data.product.discount }}
-                        % تخفیف
+                        تخفیف
                     </div>
                 </div>
 
+                <span
+                    class="font-semibold typo-sub-h-sm lg:typo-sub-h-xl text-black"
+                >
+                    {{ data.product.title }}
+                </span>
+
                 <div class="flex items-center justify-start gap-1.5">
                     <div
                         v-if="!!data.product.color"
-                        class="px-3 py-1 rounded-full border border-slate-200 text-sm flex-center gap-1.5"
+                        class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5"
                     >
                         <span> رنگ </span>
                         <span
-                            class="!size-4 shadow-black/30 shadow-inner rounded-full"
+                            class="size-3 lg:!size-4 shadow-black/30 shadow-inner rounded-full"
                             :style="{
                                 backgroundColor: `${data.product.color}`,
                             }"
@@ -176,7 +174,7 @@ watch(
                         v-for="(variant, index) in data.product
                             .product_attributes"
                         :index="index"
-                        class="px-3 py-1 rounded-full border border-slate-200 text-sm"
+                        class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
                     >
                         {{ variant.value }}
                     </span>
@@ -249,7 +247,7 @@ watch(
             <div class="flex items-center">
                 <button
                     @click="handleIncreaseQuantity"
-                    class="border size-10 flex-center rounded-100 border-slate-300"
+                    class="border size-7 p-1 lg:size-10 flex-center rounded-50 border-slate-300"
                     :class="
                         deleteCartItemIsPending ? 'pointer-events-none' : ''
                     "
@@ -257,11 +255,13 @@ watch(
                     <Icon name="bi:plus" class="**:stroke-slate-800" />
                 </button>
 
-                <div class="size-10 text-[1.125rem] flex-center">1</div>
+                <div class="size-10 text-sm flex-center">
+                    {{ counter }}
+                </div>
 
                 <button
                     @click="handleDecreaseQuantity"
-                    class="border size-10 flex-center rounded-100 border-slate-300"
+                    class="border size-7 lg:size-10 p-1 flex-center rounded-50 border-slate-300"
                     :class="
                         deleteCartItemIsPending ? 'pointer-events-none' : ''
                     "
@@ -279,7 +279,9 @@ watch(
                 </button>
             </div>
 
-            <span class="text-[1.125rem] text-slate-900 font-semibold">
+            <span
+                class="text-sm lg:text-[1.125rem] text-slate-900 font-semibold"
+            >
                 {{ data.product.price }}
             </span>
         </div>