From 63d81ab42ff57b709efa998c18cbcb8e59aa74dd Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Sat, 24 Jan 2026 09:11:00 +0700
Subject: [PATCH] Search forms: white glass style (bg-white/80) for contrast

---
 app/components/navigation/MainNavigation.vue | 32 ++++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 2db0295..9f29bd1 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -29,32 +29,32 @@
 
       <!-- Center: Search input (vertically centered) -->
       <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 -->
+        <!-- Quote mode: Simple segmented input with search inside (white glass) -->
         <template v-if="catalogMode === 'quote'">
-          <div class="flex items-center w-full rounded-full border border-white/20 bg-white/10 shadow-sm divide-x divide-white/20">
+          <div class="flex items-center w-full rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg divide-x divide-base-300/30">
             <!-- Product segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
               @click="$emit('edit-token', 'product')"
             >
-              <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>
+              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.product') }}</div>
+              <div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
             </button>
             <!-- Hub segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
               @click="$emit('edit-token', 'hub')"
             >
-              <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>
+              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.hub') }}</div>
+              <div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
             </button>
             <!-- Quantity segment -->
             <button
-              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
+              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
               @click="$emit('edit-token', 'quantity')"
             >
-              <div class="text-xs text-white/60">{{ $t('catalog.quote.quantity') }}</div>
-              <div class="font-medium text-white">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
+              <div class="text-xs text-base-content/60">{{ $t('catalog.quote.quantity') }}</div>
+              <div class="font-medium text-base-content">{{ quantity ? `${quantity} ${$t('units.t')}` : '—' }}</div>
             </button>
             <!-- Search button inside -->
             <button
@@ -67,14 +67,14 @@
           </div>
         </template>
 
-        <!-- Explore mode: Regular pill input + chips -->
+        <!-- Explore mode: Regular pill input + chips (white glass) -->
         <template v-else>
           <!-- Big pill input -->
           <div
-            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"
+            class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/80 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
             @click="focusInput"
           >
-            <Icon name="lucide:search" size="22" class="text-white flex-shrink-0" />
+            <Icon name="lucide:search" size="22" class="text-primary 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 text-white placeholder:text-white/50"
+                class="flex-1 min-w-32 bg-transparent outline-none text-lg text-base-content placeholder:text-base-content/50"
                 @input="$emit('update:search-query', localSearchQuery)"
               />
             </div>
@@ -121,7 +121,7 @@
             <button
               v-for="chip in availableChips"
               :key="chip.type"
-              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"
+              class="flex items-center gap-1.5 px-3 py-1 rounded-full text-sm bg-white/60 text-base-content/80 hover:bg-white/80 hover:text-base-content transition-colors"
               @click="$emit('start-select', chip.type)"
             >
               <span