fix: style

bo/src/app.config.ts

@@ -47,7 +47,7 @@ export const uiOptions: NuxtUIOptions = {
         table: {
             slots: {
                 base: 'border! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! bg-(--second-light) dark:bg-(--main-dark)',
-                tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
+                // tr: 'border-b! border-(--border-light)! dark:border-(--border-dark)! outline-0! ring-0! text-(--black)! dark:text-white!',
             }
 
         },

bo/src/components/admin/PageProducts.vue

@@ -4,8 +4,7 @@
             <CategoryMenu />
             <div class="w-full flex flex-col items-center gap-4">
                 <UTable :data="productsList" :columns="columns" class="flex-1 w-full" :ui="{
-                    root : 'max-w-100wv overflow-auto!'
+                    root: 'max-w-100wv overflow-auto!' }" />
-                }" />
                 <UPagination v-model:page="page" :total="total" :items-per-page="perPage" />
             </div>
         </div>

bo/src/components/admin/ProductDetailView.vue

@@ -7,7 +7,7 @@
     </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 bg-slate-50 dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
         <div class="flex items-center justify-between">
           <div class="flex flex-col items-center gap-3" v-if="!isTranslations">
             <USelectMenu v-model="toLangId" :items="langs" value-key="id"
@@ -97,7 +97,7 @@
       </div>
 
       <div v-else-if="productStore.productDescription" class="">
-        <div class="flex items-start gap-30">
+        <div class="flex items-start gap-30 py-8">
           <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
             <span class="text-gray-500 dark:text-gray-400">Product Image</span>
           </div>
@@ -131,7 +131,7 @@
           root: 'items-start!'
         }">
           <template #description>
-            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 mb-4">
+            <div v-if="!isTranslations" class="flex justify-end items-center gap-3 py-4">
               <UButton v-if="!isEditing" @click="activeTab === 'usage' ? enableEdit() : 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>
@@ -154,16 +154,17 @@
                 </template>
               </UEditorToolbar>
             </UEditor>
-            <p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white"></p>
+            <p v-else v-html="productStore.productDescription.description" class="text-black dark:text-white px-7"></p>
           </template>
 
           <template #usage>
             <div class="px-7">
-              <div class="flex justify-end items-center gap-3 mb-4">
+              <div class="flex justify-end items-center gap-3 py-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-(--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)" />
+                  <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"
@@ -178,7 +179,8 @@
               </div>
 
               <UEditor v-if="isTranslations" v-slot="{ editor }" v-model="productStore.productDescription.usage"
-                content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74" placeholder="Write there ...">
+                content-type="html" :ui="{ base: 'p-8 sm:px-16' }" class="w-full min-h-74"
+                placeholder="Write there ...">
                 <UEditorToolbar :editor="editor" :items="toolbarItems" class="sm:px-8">
                   <template #link>
                     <EditorLinkPopover :editor="editor" auto-open />
@@ -478,13 +480,16 @@ function removeInlineStylesFromAll(product) {
     const div = document.createElement('div')
     div.innerHTML = html
 
+    const isDark = document.documentElement.classList.contains('dark')
     div.querySelectorAll('*').forEach(el => {
       const bg = el.style.background || el.style.backgroundColor
       if (bg) {
         el.style.background = ''
         el.style.backgroundColor = ''
+        el.style.color = isDark ? 'white' : 'black'
       }
     })
+
     div.querySelectorAll('p').forEach(p => {
       if (p.querySelector('img')) {
         p.style.display = 'flex'

bo/src/components/inner/CategoryMenu.vue

@@ -1,5 +1,7 @@
 <template>
-  <UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" />
+  <UNavigationMenu orientation="vertical" type="single" :items="items" class="data-[orientation=vertical]:w-72" :ui="{
+    root:''
+  }"/>
 </template>
 
 <script setup lang="ts">

bo/src/layouts/default.vue

@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div class="flex-1 p-4 bg-slate-50 h-svh">
+      <div class="flex-1 p-4 bg-slate-50 dark:bg-(--black) h-svh">
         <slot />
       </div>
     </div>