feat: Add support for dark mode in more pages

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/shared/components/ui/dropdown/DropdownHeader.vue

@@ -1,6 +1,10 @@
 <template>
-  <li class="dropdown-menu--header" :tabindex="null" :aria-disabled="true">
-    <span class="title">{{ title }}</span>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
     <slot />
   </li>
 </template>
@@ -15,22 +19,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.dropdown-menu--header {
-  display: inline-flex;
-  list-style: none;
-
-  .title {
-    width: 100%;
-    display: block;
-    text-align: left;
-    white-space: nowrap;
-    padding: var(--space-small) var(--space-small);
-    margin-top: var(--space-smaller);
-    font-size: var(--font-size-mini);
-    color: var(--s-600);
-    font-weight: var(--font-weight-medium);
-    border-radius: var(--border-radius-normal);
-  }
-}
-</style>