fix: light-mode for combobox on product landing page

Author: marcel-bitfly

frontend/layers/base/app/components/BaseChip.vue

@@ -13,7 +13,7 @@ const {
   <button
     class="text-nowrap border-1 font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-300"
     :class="[
-      variant === 'neutral' && 'dark:bg-gray-900 dark:border-gray-800 dark:text-gray-400 dark:aria-pressed:bg-gray-700 dark:aria-pressed:border-gray-700 dark:aria-pressed:text-white aria-pressed:shadow-none',
+      variant === 'neutral' && 'bg-gray-100 dark:bg-gray-900 border-gray-200 dark:border-gray-800 text-gray-600 dark:text-gray-400 aria-pressed:bg-gray-200 dark:aria-pressed:bg-gray-700 aria-pressed:border-gray-300 dark:aria-pressed:border-gray-700 aria-pressed:text-black dark:aria-pressed:text-white aria-pressed:shadow-none',
       size === 'sm' && 'px-md py-xs rounded-md ',
     ]"
     :aria-pressed="isSelected"

frontend/layers/base/app/components/BaseSearchInput.vue

@@ -91,7 +91,7 @@ const handleClickOutside = (e: PointerDownOutsideEvent) => {
       />
 
       <RkComboboxContent
-        class="absolute z-10 dark:bg-gray-950 mt-xl rounded-xl w-full max-h-[400px]"
+        class="absolute z-10 bg-gray-50 dark:bg-gray-950 mt-xl rounded-xl w-full max-h-[400px]"
         @pointer-down-outside="handleClickOutside"
       >
         <slot name="dropdown-fixed-header" />

frontend/layers/products/app/components/BlockchainSearchLoadingSkeleton.vue

@@ -8,19 +8,19 @@
       class="flex-1 animate-pulse"
     >
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/5 rounded-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-500 via-30% dark:to-gray-950 to-100%" />
+        <div class="h-xl w-1/5 rounded-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-500 via-30% dark:to-gray-950 to-100% from-gray-100 via-gray-300 to-gray-100" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100%" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25%" />
+        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100% from-gray-100 via-gray-300 to-gray-200" />
+        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25% from-gray-200 to-gray-100" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100%" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25%" />
+        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100% from-gray-100 via-gray-300 to-gray-200" />
+        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25% from-gray-200 to-gray-100" />
       </div>
       <div class="flex px-2xl py-lg">
-        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100%" />
-        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25%" />
+        <div class="h-xl w-1/3 rounded-l-full bg-gradient-to-r dark:from-gray-950 from-0% dark:via-gray-400 via-40% dark:to-gray-700 to-100% from-gray-100 via-gray-300 to-gray-200" />
+        <div class="h-xl w-full rounded-r-full bg-gradient-to-r dark:from-gray-700 dark:to-gray-950 to-25% from-gray-200 to-gray-100" />
       </div>
     </div>
   </div>