feat(v4): Update the help center portal design (#10296)

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { nextTick, ref, computed, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -32,6 +32,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  message: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -80,10 +84,6 @@ watch(
     selectedValue.value = newValue;
   }
 );
-
-onClickOutside(comboboxRef, () => {
-  open.value = false;
-});
 </script>
 
 <template>
@@ -95,69 +95,77 @@ onClickOutside(comboboxRef, () => {
       'group/combobox': !disabled,
     }"
   >
-    <Button
-      variant="outline"
-      :label="selectedLabel"
-      icon-position="right"
-      size="sm"
-      :disabled="disabled"
-      class="justify-between w-full text-slate-900 dark:text-slate-100 group-hover/combobox:border-slate-300 dark:group-hover/combobox:border-slate-600"
-      :icon="open ? 'chevron-up' : 'chevron-down'"
-      @click="toggleDropdown"
-    />
-    <div
-      v-show="open"
-      class="absolute z-50 w-full mt-1 transition-opacity duration-200 bg-white border rounded-md shadow-lg border-slate-200 dark:bg-slate-900 dark:border-slate-700/50"
-    >
-      <div class="relative border-b border-slate-100 dark:border-slate-700/50">
-        <FluentIcon
-          icon="search"
-          :size="14"
-          class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
-          aria-hidden="true"
-        />
-        <input
-          ref="searchInput"
-          v-model="search"
-          type="search"
-          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-          class="w-full py-2 pl-10 pr-2 text-sm bg-white border-none rounded-t-md dark:bg-slate-900 text-slate-900 dark:text-slate-50"
-        />
-      </div>
-      <ul
-        class="py-1 overflow-auto max-h-60"
-        role="listbox"
-        :aria-activedescendant="selectedValue"
+    <OnClickOutside @trigger="open = false">
+      <Button
+        variant="outline"
+        :label="selectedLabel"
+        icon-position="right"
+        :disabled="disabled"
+        class="justify-between w-full !px-2 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :icon="open ? 'chevron-lucide-up' : 'chevron-lucide-down'"
+        icon-lib="lucide"
+        @click="toggleDropdown"
+      />
+      <div
+        v-show="open"
+        class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
       >
-        <li
-          v-for="option in filteredOptions"
-          :key="option.value"
-          class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
-          :class="{
-            'bg-slate-50 dark:bg-slate-800/50': option.value === selectedValue,
-          }"
-          role="option"
-          :aria-selected="option.value === selectedValue"
-          @click="selectOption(option)"
-        >
-          <span :class="{ 'font-medium': option.value === selectedValue }">
-            {{ option.label }}
-          </span>
+        <div class="relative border-b border-n-strong">
           <FluentIcon
-            v-if="option.value === selectedValue"
-            icon="checkmark"
-            :size="16"
-            class="flex-shrink-0"
+            icon="search"
+            :size="14"
+            class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
             aria-hidden="true"
           />
-        </li>
-        <li
-          v-if="filteredOptions.length === 0"
-          class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+          <input
+            ref="searchInput"
+            v-model="search"
+            type="search"
+            :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+            class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+          />
+        </div>
+        <ul
+          class="py-1 mb-0 overflow-auto max-h-60"
+          role="listbox"
+          :aria-activedescendant="selectedValue"
         >
-          {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
-        </li>
-      </ul>
-    </div>
+          <li
+            v-for="option in filteredOptions"
+            :key="option.value"
+            class="flex items-center justify-between !text-n-slate-12 w-full gap-2 px-2 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-solid-2"
+            :class="{
+              'bg-n-solid-2': option.value === selectedValue,
+            }"
+            role="option"
+            :aria-selected="option.value === selectedValue"
+            @click="selectOption(option)"
+          >
+            <span :class="{ 'font-medium': option.value === selectedValue }">
+              {{ option.label }}
+            </span>
+            <FluentIcon
+              v-if="option.value === selectedValue"
+              icon="checkmark"
+              :size="16"
+              class="flex-shrink-0 text-n-slate-11 dark:text-n-slate-11"
+              aria-hidden="true"
+            />
+          </li>
+          <li
+            v-if="filteredOptions.length === 0"
+            class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+          >
+            {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+          </li>
+        </ul>
+      </div>
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out text-n-slate-11 dark:text-n-slate-11"
+      >
+        {{ message }}
+      </p>
+    </OnClickOutside>
   </div>
 </template>