From 420e79f6a3e84ec76363e2bfd4cba0e367515af5 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 13 Mar 2025 02:37:51 +0330
Subject: [PATCH] changed percent icon

---
 frontend/components/product/ProductHero.vue   |  2 +-
 .../components/product/ProductVariant.vue     | 52 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/components/product/ProductHero.vue b/frontend/components/product/ProductHero.vue
index e3a1384..9806746 100644
--- a/frontend/components/product/ProductHero.vue
+++ b/frontend/components/product/ProductHero.vue
@@ -98,7 +98,7 @@ watch(
                         v-if="selectedVariant.discount > 0"
                         class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1"
                     >
-                        <Icon name="material-symbols:percent" class="size-4" />
+                        <Icon name="bi:percent" class="size-4" />
                         {{ selectedVariant.discount }}
                         درصد تخفیف
                     </div>
diff --git a/frontend/components/product/ProductVariant.vue b/frontend/components/product/ProductVariant.vue
index fe2d0d0..4f06799 100644
--- a/frontend/components/product/ProductVariant.vue
+++ b/frontend/components/product/ProductVariant.vue
@@ -1,36 +1,36 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
     isSelected: boolean;
     variantDetail: ProductVariant;
-}
+};
 
 // props
 
 defineProps<Props>();
-
 </script>
 
 <template>
     <div
         :class="[
             isSelected ? 'border-blue-500' : 'border-slate-300',
-            variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100'
+            variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
         ]"
         class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
     >
         <div>
             <div
                 :class="[
-                    isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300',
-                    variantDetail.in_stock > 0 ? '' : '!ring-slate-100 !bg-slate-300-100'
+                    isSelected
+                        ? 'ring-blue-500 bg-blue-500'
+                        : 'ring-slate-300 bg-slate-300',
+                    variantDetail.in_stock > 0
+                        ? ''
+                        : '!ring-slate-100 !bg-slate-300-100',
                 ]"
-                class="size-3 mt-2 ring-2 ring-offset-2 rounded-full "
-            >
-
-            </div>
+                class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
+            ></div>
         </div>
         <div class="w-full">
             <div class="w-full flex justify-between items-center gap-2">
@@ -39,29 +39,32 @@ defineProps<Props>();
                 </span>
                 <div
                     v-if="variantDetail.discount > 0"
-                    :class="variantDetail.in_stock > 0 ? 'bg-blue-500' :'bg-slate-400/60'"
+                    :class="
+                        variantDetail.in_stock > 0
+                            ? 'bg-blue-500'
+                            : 'bg-slate-400/60'
+                    "
                     class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
                 >
                     <template v-if="variantDetail.in_stock > 0">
-                        <Icon name="material-symbols:percent" class="size-3.5" />
+                        <Icon name="bi:percent" class="size-3.5" />
                         <span class="mt-px">
                             {{ variantDetail.discount }}
                         </span>
                     </template>
 
-                    <span v-else class="mt-px">
-                        اتمام موجودی
-                    </span>
+                    <span v-else class="mt-px"> اتمام موجودی </span>
                 </div>
             </div>
-            <div class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4">
-
-<!--                <div-->
-<!--                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
-<!--                >-->
-<!--                    <span>رنگ</span>-->
-<!--                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
-<!--                </div>-->
+            <div
+                class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
+            >
+                <!--                <div-->
+                <!--                    class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
+                <!--                >-->
+                <!--                    <span>رنگ</span>-->
+                <!--                    <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
+                <!--                </div>-->
 
                 <div
                     v-for="attribute in variantDetail.product_attributes"
@@ -70,8 +73,7 @@ defineProps<Props>();
                     <span>{{ attribute.attribute_type.name }}</span>
                     <span>{{ attribute.value }}</span>
                 </div>
-
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>