From 9e6a29a8f10933249303cf3799cc9940149c6fef Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:13:50 +0330
Subject: [PATCH 1/7] refactor: optimize UI/UX styling and layout
 responsiveness across cart, modal, and product components

---
 frontend/pages/cart/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/cart/index.vue b/frontend/pages/cart/index.vue
index d236761..2bc6b60 100644
--- a/frontend/pages/cart/index.vue
+++ b/frontend/pages/cart/index.vue
@@ -29,7 +29,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
     <div class="w-full flex flex-col gap-4 lg:gap-6">
         <div
             v-if="hasCartItem"
-            class="flex items-center justify-between w-full gap-3 px-4 py-4 rounded-xl bg-slate-50 border border-slate-200"
+            class="flex items-center justify-between w-full gap-3 px-4 py-2 lg:py-4 rounded-xl bg-slate-50 border border-slate-200"
         >
             <Skeleton
                 v-if="cartIsLoading"

From 7142ce50f1eeb23d1dd6e2705409f48588cde78d Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:14:14 +0330
Subject: [PATCH 2/7] refactor: refactor Modal component, add loading skeletons
 to cart items, and perform minor UI/code cleanup across components

---
 frontend/components/cart/global/CartSummary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/cart/global/CartSummary.vue b/frontend/components/cart/global/CartSummary.vue
index a6d3ec0..09cc74f 100644
--- a/frontend/components/cart/global/CartSummary.vue
+++ b/frontend/components/cart/global/CartSummary.vue
@@ -324,8 +324,8 @@ watch(
                 :to="{ name: nextPage?.name, query: { gw: nextPage?.query } }"
             >
                 <Button
-                    start-icon="arrow-right"
-                    class="w-full rounded-100"
+                    start-icon="ci:arrow-right"
+                    class="w-full rounded-100 py-2 lg:typo-p-sm"
                     variant="primary"
                 >
                     {{ nextPage?.label }}

From 63ac850e80f1e4a00a2d1af0495930f8483f7a45 Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:14:27 +0330
Subject: [PATCH 3/7] refactor: refactor Modal component structure, optimize
 cart loading states, and apply UI styling improvements across components.

---
 frontend/components/cart/index/CartItem.vue | 26 ++++++++++-----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/components/cart/index/CartItem.vue b/frontend/components/cart/index/CartItem.vue
index abb7494..2740d87 100644
--- a/frontend/components/cart/index/CartItem.vue
+++ b/frontend/components/cart/index/CartItem.vue
@@ -59,7 +59,7 @@ const handleDeleteFromCart = () => {
                     },
                 });
             },
-        }
+        },
     );
 };
 
@@ -106,9 +106,9 @@ watch(
                         },
                     });
                 },
-            }
+            },
         );
-    }
+    },
 );
 </script>
 
@@ -117,8 +117,12 @@ watch(
         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"
     >
         <div class="flex items-start justify-start w-full gap-2.5 lg:gap-4">
+            <Skeleton
+                v-if="cartImageIsLoading"
+                class="size-[4rem] lg:!size-[12rem] aspect-square shrink-0 !rounded-xl border border-slate-200"
+            />
             <div
-                v-if="!cartImageIsLoading"
+                v-else
                 class="size-[4rem] lg:size-[12rem] aspect-square shrink-0 rounded-xl border border-slate-200 overflow-hidden"
             >
                 <NuxtImg
@@ -129,10 +133,6 @@ 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-3 lg:gap-4">
                 <div class="flex items-center justify-between gap-3">
@@ -142,7 +142,7 @@ watch(
                     <div class="w-max flex-center gap-2">
                         <div
                             v-if="data.discount > 0"
-                            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"
+                            class="text-white whitespace-pre bg-blue-500 px-3 lg:px-4 py-1.5 lg:py-2 text-[8px] lg:text-xs rounded-full flex items-center gap-1"
                         >
                             {{ data.discount_amount }}
                             تخفیف
@@ -164,7 +164,7 @@ watch(
                     {{ data.product.title }}
                 </NuxtLink>
 
-                <div class="flex items-center justify-start gap-1.5">
+                <div class="flex items-center justify-start flex-wrap gap-1.5">
                     <div
                         v-if="!!data.product.color"
                         class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm flex-center gap-1.5"
@@ -182,7 +182,7 @@ watch(
                         v-if="data.product.product_attributes.length > 0"
                         v-for="(variant, index) in data.product.product_attributes"
                         :index="index"
-                        class="px-3 py-1 rounded-full border border-slate-200 text-xs lg:text-sm"
+                        class="px-3 py-1 whitespace-pre rounded-full border border-slate-200 text-xs lg:text-sm"
                     >
                         {{ variant.value }}
                     </span>
@@ -305,7 +305,7 @@ watch(
             <div class="flex flex-col items-end">
                 <span
                     v-if="data.discount > 0"
-                    class="typo-p-xs relative flex-center w-fit line-through text-slate-400"
+                    class="text-[10px] lg:typo-p-xs relative flex-center w-fit line-through text-slate-400"
                 >
                     {{ data.price }}
                 </span>
@@ -315,7 +315,7 @@ watch(
                 >
                     تخفیف ویژه: {{ data.special_discount_amount }}
                 </span>
-                <span class="typo-p-md relative flex-center w-fit font-medium">
+                <span class="typo-p-sm lg:typo-p-md relative flex-center w-fit font-medium">
                     {{ data.final_price }}
                 </span>
             </div>

From 5351942c3db5606c50854dee772e7675f57cbef3 Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:14:38 +0330
Subject: [PATCH 4/7] refactor: improve modal architecture, fix minor layout
 bugs, and update icon references

---
 frontend/components/cart/index/DeleteCartAllModal.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/components/cart/index/DeleteCartAllModal.vue b/frontend/components/cart/index/DeleteCartAllModal.vue
index 92f40a5..7cbb0e9 100644
--- a/frontend/components/cart/index/DeleteCartAllModal.vue
+++ b/frontend/components/cart/index/DeleteCartAllModal.vue
@@ -54,8 +54,7 @@ const handleSubmit = () => {
     >
         <template #trigger>
             <Button
-                class="rounded-full shrink-0 whitespace-pre"
-                end-icon="ci:bi-trash"
+                class="rounded-full shrink-0 whitespace-pre max-lg:text-[10px]! max-lg:py-1"
                 size="md"
             >
                 حذف همه

From cc066eb0a245592d89eb013f11a09f1a248497ee Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:14:50 +0330
Subject: [PATCH 5/7] refactor: update Modal component structure and improve
 minor UI and template consistency across components

---
 frontend/components/global/Modal.vue | 62 +++++++++++++---------------
 1 file changed, 28 insertions(+), 34 deletions(-)

diff --git a/frontend/components/global/Modal.vue b/frontend/components/global/Modal.vue
index 793eea1..5814a19 100644
--- a/frontend/components/global/Modal.vue
+++ b/frontend/components/global/Modal.vue
@@ -50,50 +50,44 @@ const isShow = computed({
                 class="bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlay-show fixed inset-0 z-999"
             />
 
-            <div
-                class="fixed inset-0 w-full h-svh z-9999 flex-center"
-                v-if="isShow"
+            <DialogContent
+                class="fixed inset-0 z-9999 flex items-start justify-center overflow-y-auto overscroll-contain data-[state=open]:animate-content-show focus:outline-none"
+                style="touch-action: pan-y"
             >
                 <div
                     :class="contectClass"
-                    class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]"
+                    class="relative w-fit max-w-[50rem] my-auto py-10"
                 >
-                    <DialogContent
-                        class="data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
+                    <div
+                        class="rounded-2xl bg-white text-black font-iran-yekan-x shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
                     >
                         <div
-                            class="rounded-2xl bg-white shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]"
+                            class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
                         >
-                            <div
-                                class="w-full flex items-center px-6 justify-between py-[1.5rem] border-b border-slate-200"
+                            <DialogClose
+                                class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
+                                aria-label="Close"
                             >
-                                <DialogClose
-                                    class="inline-flex size-8 items-center justify-center transition-all rounded-full bg-gray-50 border border-slate-200 hover:border-black focus:outline-none"
-                                    aria-label="Close"
-                                >
-                                    <Icon
-                                        name="ci:bi-x-lg"
-                                        class="**:fill-black"
-                                    />
-                                </DialogClose>
-                                <DialogTitle
-                                    class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3"
-                                >
-                                    {{ title }}
-                                    <Icon
-                                        v-if="!!icon"
-                                        :name="icon"
-                                        :size="iconSize"
-                                    />
-                                </DialogTitle>
-                            </div>
-                            <div class="w-full px-6">
-                                <slot name="content" />
-                            </div>
+                                <Icon
+                                    name="ci:bi-x-lg"
+                                    class="**:fill-black"
+                                />
+                            </DialogClose>
+                            <DialogTitle class="typo-sub-h-md lg:typo-sub-h-xl font-semibold flex items-center gap-3">
+                                {{ title }}
+                                <Icon
+                                    v-if="!!icon"
+                                    :name="icon"
+                                    :size="iconSize"
+                                />
+                            </DialogTitle>
                         </div>
-                    </DialogContent>
+                        <div class="w-full px-6">
+                            <slot name="content" />
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </DialogContent>
         </DialogPortal>
     </DialogRoot>
 </template>

From 761c28169f2595e4b0c61a99f9abccb79fdabe88 Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:15:37 +0330
Subject: [PATCH 6/7] fix: update icon name in Cart layout and conditionally
 render title, while commenting out unused color selection UI in
 ProfilePictureModal

---
 frontend/components/profile/index/ProfilePictureModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/profile/index/ProfilePictureModal.vue b/frontend/components/profile/index/ProfilePictureModal.vue
index 88487ed..381d710 100644
--- a/frontend/components/profile/index/ProfilePictureModal.vue
+++ b/frontend/components/profile/index/ProfilePictureModal.vue
@@ -124,7 +124,7 @@ const resetAvatarFile = async () => {
                     </button>
                 </div>
 
-                <div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
+                <!-- <div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
                     <button
                         class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                     />
@@ -140,7 +140,7 @@ const resetAvatarFile = async () => {
                     <button
                         class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
                     />
-                </div>
+                </div> -->
 
                 <div class="w-full flex-col-center gap-5">
                     <Avatar

From 3400d86bfff70b9412b5b663b8d29f4ac92bad05 Mon Sep 17 00:00:00 2001
From: Mamalizz-dev <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 13 May 2026 13:16:27 +0330
Subject: [PATCH 7/7] fix: update arrow icon and conditionally render cart page
 title

---
 frontend/layouts/Cart.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/layouts/Cart.vue b/frontend/layouts/Cart.vue
index fee3354..17444a8 100644
--- a/frontend/layouts/Cart.vue
+++ b/frontend/layouts/Cart.vue
@@ -40,7 +40,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
                             class="flex items-center gap-2 text-sm lg:text-[1rem] font-medium"
                         >
                             <Icon
-                                name="ci:bi-arrow-right"
+                                name="ci:arrow-right"
                                 class="**:stroke-blue-500"
                             />
                             <span class="text-blue-500">
@@ -49,7 +49,7 @@ const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0)
                         </NuxtLink>
                     </div>
 
-                    <h1 class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4">
+                    <h1 v-if="pageTitle" class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4">
                         {{ pageTitle }}
                     </h1>