From f58abda5cdad5257f621bf724d9edbd5c68bab46 Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Thu, 2 Apr 2026 16:07:15 +0200
Subject: [PATCH 1/2] fix: style

---
 bo/src/app.config.ts                          |  1 +
 bo/src/assets/main.css                        |  3 ++-
 bo/src/components/admin/ProductDetailView.vue | 20 +++++++++----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/bo/src/app.config.ts b/bo/src/app.config.ts
index 7e88496..f19f0d8 100644
--- a/bo/src/app.config.ts
+++ b/bo/src/app.config.ts
@@ -8,6 +8,7 @@ export const uiOptions: NuxtUIOptions = {
             }
         },
         button: {
+            base: 'light:hover:bg-none!'
         },
         input: {
             slots: {
diff --git a/bo/src/assets/main.css b/bo/src/assets/main.css
index c657abf..10fcfc0 100644
--- a/bo/src/assets/main.css
+++ b/bo/src/assets/main.css
@@ -16,7 +16,6 @@ body {
 @theme {
   --main-light: #FFFEFB;
   --second-light: #F8FAFC;
-
   --main-dark: #1A1A1A;
   --black: #1A1A1A;
 
@@ -42,6 +41,7 @@ body {
   --ui-border-accented: var(--border-light);
   --ui-border: var(--border-light);
   --ui-color-neutral-700: var(--black);
+  --ui-primary: var(--accent-blue-light)
 }
 
 .dark {
@@ -56,6 +56,7 @@ body {
   --border: var(--border-dark);
   --tw-border-style: var(--border-dark);
   --ui-text-inverted: #fff;
+  --ui-primary: var(--accent-blue-dark)
 }
 
 .label-form {
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index 0ccfe5b..503a3b9 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -7,9 +7,9 @@
     </div>
     <div class="container mx-auto ">
       <div
-        class=" gap-4 mb-6 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        class=" gap-4 mb-6 border-b border-(--border-light) dark:border-(--border-dark) pb-6 rounded-md">
         <div v-if="!isShowProductView" class="flex items-center justify-between">
-          <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
+          <div class="flex items-center gap-3" v-if="!isTranslations">
             <p class="text-md whitespace-nowrap">
               Translate from Polish to :</p>
             <USelectMenu v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
@@ -45,18 +45,18 @@
               <p class="dark:text-white"> Show product</p>
             </UButton>
             <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating" v-if="!isTranslations"
-              class="text-sky-600 bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
+              class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-sky-100 dark:bg-(--accent-blue-dark) flex items-center! justify-center!">
               Translate
             </UButton>
             <div v-else class="flex gap-3">
               <UButton @click="() => {
                 toLangId = settingStore.shopDefaultLanguage
                 isTranslations = false
-              }" color="primary" class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
+              }" color="primary" class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
                 Cancel
               </UButton>
               <UButton color="primary" @click="productStore.saveProductDescription(productID, toLangId)"
-                class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
+                class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark)">
                 Save
               </UButton>
             </div>
@@ -64,7 +64,7 @@
         </div>
         <div v-else>
           <UButton @click="isShowProductView = false" color="primary"
-            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
+            class="text-(--text-sky-light) dark:text-(--text-sky-dark) bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
             <UIcon name="line-md:arrow-left" class="" />
             Back
           </UButton>
@@ -121,8 +121,8 @@
               <div class="flex items-center justify-end gap-3 mb-4">
                 <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
                   class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-                  <p class="text-white">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                  <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 </UButton>
 
                 <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral"
@@ -146,8 +146,8 @@
               <div class="flex justify-end items-center gap-3 mb-4">
                 <UButton v-if="!isEditing" @click="enableEdit"
                   class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-                  <p class="text-white">Change Text</p>
-                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+                  <p class="text-(--text-sky-light) dark:text-(--text-sky-dark)">Change Text</p>
+                  <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-(--text-sky-light) dark:text-(--text-sky-dark)" />
                 </UButton>
 
                 <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline"

From 855721b4b148b887a2481d041012073abd91c45d Mon Sep 17 00:00:00 2001
From: Yakovenko Valeriia <yakovenko_valeriia@ma-al.com>
Date: Fri, 3 Apr 2026 08:51:45 +0200
Subject: [PATCH 2/2] fix: tabs

---
 bo/src/app.config.ts                          | 1 -
 bo/src/assets/main.css                        | 1 -
 bo/src/components/admin/ProductDetailView.vue | 7 +++++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/bo/src/app.config.ts b/bo/src/app.config.ts
index f19f0d8..7e88496 100644
--- a/bo/src/app.config.ts
+++ b/bo/src/app.config.ts
@@ -8,7 +8,6 @@ export const uiOptions: NuxtUIOptions = {
             }
         },
         button: {
-            base: 'light:hover:bg-none!'
         },
         input: {
             slots: {
diff --git a/bo/src/assets/main.css b/bo/src/assets/main.css
index 10fcfc0..3e1c5a6 100644
--- a/bo/src/assets/main.css
+++ b/bo/src/assets/main.css
@@ -46,7 +46,6 @@ body {
 
 .dark {
   --ui-bg: var(--black);
-  --ui-primary: var(--color-gray-500);
   --ui-secondary: var(--accent-green-dark);
   --ui-border-accented: var(--border-dark);
   --ui-text-dimmed: var(--gray-dark);
diff --git a/bo/src/components/admin/ProductDetailView.vue b/bo/src/components/admin/ProductDetailView.vue
index b77b85e..6fec616 100644
--- a/bo/src/components/admin/ProductDetailView.vue
+++ b/bo/src/components/admin/ProductDetailView.vue
@@ -126,7 +126,10 @@
           </div>
         </div>
 
-        <UTabs :items="items" v-model="activeTab" color="info" :content="true">
+        <UTabs :items="items" color="info" default-value="0" :ui="{
+          list: 'w-auto!',
+          root: 'items-start!'
+        }">
           <template #description>
             <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
               <UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : enableDescriptionEdit()"
@@ -361,7 +364,7 @@ const toLangId = ref<number>(settingStore.shopDefaultLanguage)
 const productID = ref<number>(0)
 const translating = ref(false)
 
-const activeTab = ref('description')
+const activeTab = ref('')
 const usageRef = ref<HTMLElement | null>(null)
 const originalUsage = ref('')
 const isEditing = ref(false)