From aa5a0a66fa4bfdc9eec1ef240615c02b28564725 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 23 Jan 2026 12:30:28 +0700
Subject: [PATCH] Apply dark glass style (bg-black/30) to navbar, left panel,
 mobile panel

---
 app/components/navigation/MainNavigation.vue | 60 ++++++++++----------
 app/components/page/CatalogPage.vue          |  6 +-
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 3d3b7b2..2db0295 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -1,25 +1,25 @@
 <template>
-  <header class="h-[100px] bg-base-100/70 backdrop-blur-md shadow-md">
+  <header class="h-[100px] bg-black/30 backdrop-blur-md shadow-lg border-b border-white/10">
     <!-- Single row: Logo + Search + Icons -->
     <div class="flex items-stretch h-full px-4 lg:px-6 gap-4">
       <!-- Left: Logo + Nav links (top aligned) -->
       <div class="flex items-start gap-6 flex-shrink-0 pt-4">
         <NuxtLink :to="localePath('/')" class="flex items-center gap-2">
-          <span class="font-bold text-xl">Optovia</span>
+          <span class="font-bold text-xl text-white">Optovia</span>
         </NuxtLink>
 
         <!-- Service nav links -->
         <nav v-if="showModeToggle" class="flex items-center gap-1">
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="catalogMode === 'explore' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+            :class="catalogMode === 'explore' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
             @click="$emit('set-catalog-mode', 'explore')"
           >
             TradeScanner
           </button>
           <button
             class="px-3 py-1 text-sm font-medium rounded-lg transition-colors"
-            :class="catalogMode === 'quote' ? 'bg-primary/10 text-primary' : 'text-base-content/70 hover:text-base-content hover:bg-base-200/50'"
+            :class="catalogMode === 'quote' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
             @click="$emit('set-catalog-mode', 'quote')"
           >
             Search
@@ -31,30 +31,30 @@
       <div class="flex-1 flex flex-col items-center max-w-2xl mx-auto gap-2 justify-center">
         <!-- Quote mode: Simple segmented input with search inside -->
         <template v-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full border border-base-300 bg-base-100 shadow-sm divide-x divide-base-300">
+          <div class="flex items-center w-full rounded-full border border-white/20 bg-white/10 shadow-sm divide-x divide-white/20">
             <!-- Product segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0"
               @click="$emit('edit-token', 'product')"
             >
-              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
-              <div class="font-medium truncate">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
+              <div class="text-xs text-white/60">{{ $t('catalog.quote.product') }}</div>
+              <div class="font-medium truncate text-white">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
             </button>
             <!-- Hub segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
               @click="$emit('edit-token', 'hub')"
             >
-              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
-              <div class="font-medium truncate">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
+              <div class="text-xs text-white/60">{{ $t('catalog.quote.hub') }}</div>
+              <div class="font-medium truncate text-white">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
             </button>
             <!-- Quantity segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
               @click="$emit('edit-token', 'quantity')"
             >
-              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
-              <div class="font-medium">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
+              <div class="text-xs text-white/60">{{ $t('catalog.quote.quantity') }}</div>
+              <div class="font-medium text-white">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
             </button>
             <!-- Search button inside -->
             <button
@@ -71,10 +71,10 @@
         <template v-else>
           <!-- Big pill input -->
           <div
-            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/20 bg-white/10 focus-within:border-white/40 focus-within:ring-2 focus-within:ring-white/20 transition-all cursor-text"
             @click="focusInput"
           >
-            <Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
+            <Icon name="lucide:search" size="22" class="text-white flex-shrink-0" />
 
             <!-- Tokens + input inline -->
             <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
@@ -107,7 +107,7 @@
                 v-model="localSearchQuery"
                 type="text"
                 :placeholder="placeholder"
-                class="flex-1 min-w-32 bg-transparent outline-none text-lg"
+                class="flex-1 min-w-32 bg-transparent outline-none text-lg text-white placeholder:text-white/50"
                 @input="$emit('update:search-query', localSearchQuery)"
               />
             </div>
@@ -121,7 +121,7 @@
             <button
               v-for="chip in availableChips"
               :key="chip.type"
-              class="btn btn-xs btn-ghost gap-1.5 pr-3"
+              class="flex items-center gap-1.5 px-3 py-1 rounded-full text-sm text-white/80 hover:text-white hover:bg-white/10 transition-colors"
               @click="$emit('start-select', chip.type)"
             >
               <span
@@ -139,13 +139,13 @@
       <!-- Right: AI + Globe + Team + User (top aligned) -->
       <div class="flex items-start gap-1 flex-shrink-0 pt-3">
         <!-- AI Assistant button -->
-        <NuxtLink :to="localePath('/clientarea/ai')" class="btn btn-ghost btn-circle btn-sm">
+        <NuxtLink :to="localePath('/clientarea/ai')" class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
           <Icon name="lucide:bot" size="18" />
         </NuxtLink>
 
         <!-- Globe (language/currency) dropdown -->
         <div class="dropdown dropdown-end">
-          <button tabindex="0" class="btn btn-ghost btn-circle btn-sm">
+          <button tabindex="0" class="w-8 h-8 rounded-full flex items-center justify-center text-white/70 hover:text-white hover:bg-white/10 transition-colors">
             <Icon name="lucide:globe" size="18" />
           </button>
           <div tabindex="0" class="dropdown-content bg-base-100 rounded-box z-50 w-52 p-4 shadow-lg border border-base-300">
@@ -175,7 +175,7 @@
         <!-- Team dropdown -->
         <template v-if="loggedIn && userData?.teams?.length">
           <div class="dropdown dropdown-end">
-            <button tabindex="0" class="btn btn-ghost btn-sm gap-1">
+            <button tabindex="0" class="flex items-center gap-1 px-2 py-1 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
               <Icon name="lucide:building-2" size="16" />
               <span class="hidden lg:inline max-w-24 truncate text-xs">
                 {{ userData?.activeTeam?.name || $t('common.selectTeam') }}
@@ -207,15 +207,13 @@
         <template v-if="sessionChecked">
           <template v-if="loggedIn">
             <div class="dropdown dropdown-end">
-              <div tabindex="0" role="button" class="btn btn-ghost btn-circle btn-sm avatar">
-                <div class="w-8 rounded-full">
-                  <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
-                  <div
-                    v-else
-                    class="w-full h-full bg-primary flex items-center justify-center text-primary-content font-bold text-xs"
-                  >
-                    {{ userInitials }}
-                  </div>
+              <div tabindex="0" role="button" class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-white/20 hover:ring-white/40 transition-all cursor-pointer">
+                <div v-if="userAvatarSvg" v-html="userAvatarSvg" class="w-full h-full" />
+                <div
+                  v-else
+                  class="w-full h-full bg-white/20 flex items-center justify-center text-white font-bold text-xs"
+                >
+                  {{ userInitials }}
                 </div>
               </div>
               <ul
@@ -242,7 +240,7 @@
             </div>
           </template>
           <template v-else>
-            <button @click="$emit('sign-in')" class="btn btn-primary btn-sm">
+            <button @click="$emit('sign-in')" class="px-4 py-1.5 rounded-full bg-white/20 text-white text-sm font-medium hover:bg-white/30 transition-colors">
               {{ $t('auth.login') }}
             </button>
           </template>
diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index a1f2bca..4dde499 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -69,7 +69,7 @@
       v-if="showPanel"
       class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
     >
-      <div class="bg-base-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto">
+      <div class="bg-black/30 backdrop-blur-md rounded-xl shadow-lg border border-white/10 p-4 h-full overflow-y-auto text-white">
         <slot name="panel" />
       </div>
     </div>
@@ -112,7 +112,7 @@
       <!-- Mobile panel (collapsible) - only when showPanel is true -->
       <div
         v-if="showPanel"
-        class="bg-base-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 transition-all duration-300"
+        class="bg-black/30 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white"
         :class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
       >
         <!-- Drag handle -->
@@ -120,7 +120,7 @@
           class="flex justify-center py-2 cursor-pointer"
           @click="mobilePanelExpanded = !mobilePanelExpanded"
         >
-          <div class="w-10 h-1 bg-base-300 rounded-full" />
+          <div class="w-10 h-1 bg-white/30 rounded-full" />
         </div>
 
         <div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">