From 727dad7e195b22e182789dc55f72ce9433471da2 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 10 Mar 2024 09:43:24 -0500
Subject: [PATCH] Update multi select highlight color to yellow, remove console
 logs

---
 client/components/ui/MultiSelect.vue           | 5 +----
 client/components/ui/MultiSelectQueryInput.vue | 6 +++---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/components/ui/MultiSelect.vue b/client/components/ui/MultiSelect.vue
index 26c85bbd..516b062d 100644
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@@ -17,7 +17,7 @@
 
       <ul ref="menu" v-show="showMenu" class="absolute z-60 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in itemsToShow">
-          <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-sky-400' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+          <li :key="item" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate">{{ item }}</span>
             </div>
@@ -129,14 +129,12 @@ export default {
           } else {
             this.selectedMenuItemIndex = Math.min(this.selectedMenuItemIndex + 1, items.length - 1)
           }
-          console.log('ArrowDown. this.selectedMenuItemIndex=', this.selectedMenuItemIndex)
         } else if (event.key === 'ArrowUp') {
           if (this.selectedMenuItemIndex === null) {
             this.selectedMenuItemIndex = items.length - 1
           } else {
             this.selectedMenuItemIndex = Math.max(this.selectedMenuItemIndex - 1, 0)
           }
-          console.log('ArrowUp. this.selectedMenuItemIndex=', this.selectedMenuItemIndex)
         }
         this.recalcScroll()
         return
@@ -144,7 +142,6 @@ export default {
         if (this.selectedMenuItemIndex !== null) {
           this.clickedOption(event, items[this.selectedMenuItemIndex])
         } else {
-          console.log('Enter. this.textInput=', this.textInput)
           this.submitForm()
         }
         return
diff --git a/client/components/ui/MultiSelectQueryInput.vue b/client/components/ui/MultiSelectQueryInput.vue
index d671e29d..6e9c0f10 100644
--- a/client/components/ui/MultiSelectQueryInput.vue
+++ b/client/components/ui/MultiSelectQueryInput.vue
@@ -20,7 +20,7 @@
 
       <ul ref="menu" v-show="showMenu" class="absolute z-60 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in itemsToShow">
-          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-sky-400' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
+          <li :key="item.id" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="itemsToShow[selectedMenuItemIndex] === item ? 'text-yellow-300' : ''" role="option" @click="clickedOption($event, item)" @mouseup.stop.prevent @mousedown.prevent>
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate">{{ item.name }}</span>
             </div>
@@ -143,7 +143,7 @@ export default {
         }
         this.recalcScroll()
         return
-      }  else if (event.key === 'Enter') {
+      } else if (event.key === 'Enter') {
         if (this.selectedMenuItemIndex !== null) {
           this.clickedOption(event, items[this.selectedMenuItemIndex])
         } else {
@@ -155,7 +155,7 @@ export default {
       clearTimeout(this.typingTimeout)
       this.typingTimeout = setTimeout(() => {
         this.search()
-      }, 250)      
+      }, 250)
       this.setInputWidth()
     },
     setInputWidth() {