From 10b96109187aafbe3afaad5efbba2709ff25008e Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Wed, 25 Jun 2025 13:53:36 +0200
Subject: [PATCH] translations

---
 components/CartPopup.vue        | 46 ++++++++++++++++++++-------------
 components/HeaderBlock.vue      |  6 ++---
 components/section/Product.vue  |  2 +-
 components/section/ShopMain.vue |  3 ---
 stores/menuStore.ts             |  8 +++---
 stores/productStore.ts          |  1 +
 6 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/components/CartPopup.vue b/components/CartPopup.vue
index d52c039..d429571 100644
--- a/components/CartPopup.vue
+++ b/components/CartPopup.vue
@@ -1,42 +1,51 @@
 <template>
     <div ref="dropdownRef">
         <i @click="openCart = !openCart" class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
-        <div class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[140px]">
-            <div v-if="openCart" class="xl:w-[55%] md:w-[70%] w-full px-4 md:px-0">
+        <div
+            class="absolute left-1/2 transform -translate-x-1/2 w-full px-4 sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-6 xl:max-w-[1920px] xl:px-20 right-0 z-50 flex items-center justify-end top-[90px] sm:top-[100px] md:top-[140px]">
+            <div v-if="openCart" class="xl:w-[55%] md:w-[90%] w-full px-4 md:px-0">
                 <div v-if="productStore.cart.cart_items && productStore.cart.cart_items.length > 0"
-                    class="w-full p-[25px] sm:p-[50px] first:pt-0 bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-y-[55px]">
+                    class="w-full p-[25px] sm:p-[50px] bg-bg-light dark:bg-bg-dark border border-button rounded-[32px] h-full space-25-55">
                     <div>
                         <!-- product -->
-                        <div v-for="item in productStore.cart.cart_items" class="py-[25px] border-b border-block">
-                            <div class="flex items-center max-h-[205px]">
-                                <div class="min-w-[100px] sm:w-[205px] flex items-center justify-center">
-                                    <!-- <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
-                                        alt="pics" class="max-h-[95px] sm:max-h-[180px] md:max-h-[205px] rounded-[5px]" /> -->
+                        <div v-for="item in productStore.cart.cart_items"
+                            class="py-[13px] sm:py-[25px] first:pt-0 border-b border-block">
+                            <div class="flex items-center h-[100px] sm:h-[205px]">
+                                <div
+                                    class="min-w-[100px] sm:min-w-[205px] flex items-center justify-center h-[100px] sm:h-[205px]">
+                                    <img :src="`https://www.yourgold.cz/api/public/file/${item.picture_uuid}.webp`"
+                                        alt="" class="max-w-full max-h-full object-contain">
                                 </div>
-                                <div class="flex flex-col justify-between h-full w-full gap-[7px] sm:gap-[15px">
 
+                                <div class="flex flex-col justify-between min-h-full w-full gap-[7px] sm:gap-[15px]">
                                     <div class="w-full flex items-center justify-between">
                                         <h3
-                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[250px]">
+                                            class="text-[10px] sm:text-base md:text-lg text-xl font-bold leading-[130%] sm:leading-[150%] max-w-[100px] sm:max-w-[200px] md:max-w-[250px]">
                                             {{ item.name }}
                                         </h3>
                                         <i @click="productStore.deleteCartItem(item.cart_item_id)"
-                                            class="uil uil-trash-alt text-2xl cursor-pointer"></i>
+                                            class="uil uil-trash-alt text-lg sm:text-2xl cursor-pointer"></i>
                                     </div>
                                     <div class="flex flex-col gap-[10px]">
                                         <p
                                             class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                                             {{ item.total_price }}
                                         </p>
-                                        <div class="flex items-center gap-4 text-xl">
-                                            <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
-                                                @click="productStore.decrementCartItem(item.cart_item_id)"></i>
+                                        <div class="flex items-center gap-[2px] sm:gap-4 text-xl">
                                             <div
-                                                class="w-11 min-h-11 border border-button flex items-center justify-center rounded-[4px]">
+                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                                                <i class="uil uil-minus cursor-pointer text-gray dark:text-button-disabled hover:text-gray-200 transition-all"
+                                                    @click="productStore.decrementCartItem(item.cart_item_id)"></i>
+                                            </div>
+                                            <div
+                                                class="w-5 min-h-5 sm:w-10 sm:min-h-11 text-[10px] sm:text-xl border border-button flex items-center justify-center rounded-[4px]">
                                                 {{ item.quantity }}
                                             </div>
-                                            <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
-                                                @click="productStore.incrementCartItem(item.product_id)"></i>
+                                            <div
+                                                class="w-5 min-h-5 sm:w-11 sm:min-h-11 text-[10px] sm:text-lg flex items-center justify-center">
+                                                <i class="uil uil-plus cursor-pointer hover:text-gray-200 transition-all"
+                                                    @click="productStore.incrementCartItem(item.product_id)"></i>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -44,7 +53,8 @@
                         </div>
                     </div>
                     <div class="flex items-center justify-between">
-                        <h4 class="h4-uppercase-bold-inter">{{ $t('total_amount') }}</h4>
+                        <h4 class="font-inter text-[12px] leading-[150%] font-bold uppercase sm:text-[24px]">{{
+                            $t('total_amount') }}</h4>
                         <p
                             class="text-accent-green-light dark:text-accent-green-dark font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
                             {{ productStore.cart.total_value }}
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index a51a9f6..96725e0 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -6,8 +6,8 @@
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
           <ul class="flex items-center justify-between whitespace-nowrap w-full">
             <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
-              :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter', 
-              route.params.id == item.id ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
+              :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
+                route.params.id == item.id ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
               0{{ index + 1 }} <br />
               {{ item.front_menu_lang[0].name }}
             </li>
@@ -28,7 +28,7 @@
             <ThemeSwitcher />
             <button @click="menuStore.navigateToShop" :class="[
               'cursor-pointer transition-all text-inter',
-              route.params.id == 5 
+              route.params.id == '5'
                 ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2 bg-accented  px-6 py-3 rounded-xl'
                 : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
             ]">
diff --git a/components/section/Product.vue b/components/section/Product.vue
index 8e7072c..ed590c7 100644
--- a/components/section/Product.vue
+++ b/components/section/Product.vue
@@ -18,7 +18,7 @@
           {{ props.product?.formatted_price }}
         </p>
         <button
-          class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
+          class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1">
           <i class="uil uil-shopping-cart text-lg sm:text-2xl md:text-[31px] cursor-pointer"></i>
         </button>
       </div>
diff --git a/components/section/ShopMain.vue b/components/section/ShopMain.vue
index 601e438..e767c9c 100644
--- a/components/section/ShopMain.vue
+++ b/components/section/ShopMain.vue
@@ -192,9 +192,6 @@ const props = defineProps<{
     }
 }>();
 
-console.log(props.component);
-
-
 const openCategories = ref(false);
 const isInfo = ref<boolean>(true);
 const selectedFilters = ref<any>([]);
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index df4c806..8dca1e9 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -58,10 +58,10 @@ export const useMenuStore = defineStore("menuStore", () => {
 
 
   const getLocales = async () => {
-    const { data: countrriesList } = await useMyFetch<GenericResponse<Country[]>>(`/api/public/country/list`);
-    countries.value = countrriesList;
-    selectedCountry.value = countrriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
-    selectedPhoneCountry.value = countrriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
+    const { data: countriesList } = await useMyFetch<GenericResponse<Country[]>>(`/api/public/country/list`);
+    countries.value = countriesList;
+    selectedCountry.value = countriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
+    selectedPhoneCountry.value = countriesList.find((country) => country.iso_code === $session.currentCountryIso.value) as Country;
 
 
     const { data: currenciesList } = await useMyFetch<GenericResponseItems<Currency[]>>(`/api/public/currencies`)
diff --git a/stores/productStore.ts b/stores/productStore.ts
index ea77262..51153d1 100644
--- a/stores/productStore.ts
+++ b/stores/productStore.ts
@@ -1,5 +1,6 @@
 import { useMyFetch } from "#imports";
 import type {
+  CartItem,
   GenericResponse,
   GenericResponseChildren,
   GenericResponseItems,