feat: Add support for dark mode in more pages

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

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

@@ -1,13 +1,10 @@
 <template>
-  <li class="dropdown-menu--divider" :tabindex="null" :aria-disabled="true" />
+  <li
+    class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
+    :tabindex="null"
+    :aria-disabled="true"
+  />
 </template>
 <script>
 export default {};
 </script>
-<style lang="scss" scoped>
-.dropdown-menu--divider {
-  list-style: none;
-  margin: var(--space-small) 0;
-  border-bottom: 1px solid var(--s-50);
-}
-</style>

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>

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

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="dropdown-menu__item"
+    class="dropdown-menu__item list-none mb-1"
     :class="{
       'is-disabled': disabled,
     }"
@@ -28,26 +28,21 @@ export default {
 </script>
 <style lang="scss" scoped>
 .dropdown-menu__item {
-  list-style: none;
-  margin-bottom: var(--space-micro);
-
   ::v-deep {
     a,
     .button {
-      display: inline-flex;
-      white-space: nowrap;
-      width: 100%;
-      text-align: left;
-      color: var(--s-700);
-
-      &:hover {
-        background: var(--color-background);
-      }
-
-      &:focus {
-        background: var(--color-background);
-      }
+      @apply inline-flex whitespace-nowrap w-full text-left rtl:text-right;
     }
   }
 }
+
+// A hacky fix to remove the background that came from the foundation styles node module file
+// Can be removed once we remove the foundation styles node module
+.dropdown.menu {
+  // Top-level item
+  > li > a {
+    background: transparent;
+    padding: 4px 10.8px;
+  }
+}
 </style>