feat: Add support for dark mode in dashboard (#7460)

- Add config for TailwindCSS
- Enable HMR
- Add a config in LocalStorage for Dark Mode

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

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -5,38 +5,69 @@
     custom
     active-class="active"
   >
-    <li :class="{ active: isActive }">
+    <li
+      class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      :class="{
+        'bg-woot-25 dark:bg-slate-800': isActive,
+        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+      }"
+      @click="navigate"
+    >
       <a
         :href="href"
-        class="button clear menu-item text-truncate"
-        :class="{ 'is-active': isActive, 'text-truncate': shouldTruncate }"
-        @click="navigate"
+        class="inline-flex text-left max-w-full w-full items-center"
       >
-        <span v-if="icon" class="badge--icon">
-          <fluent-icon class="inbox-icon" :icon="icon" size="12" />
+        <span
+          v-if="icon"
+          class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        >
+          <fluent-icon
+            class="text-xxs text-slate-600 dark:text-slate-200"
+            :class="{
+              'text-woot-500 dark:text-woot-500': isActive,
+            }"
+            :icon="icon"
+            size="12"
+          />
         </span>
+
         <span
           v-if="labelColor"
-          class="badge--label"
+          class="inline-flex rounded-sm bg-slate-100 h-3 w-3.5 mr-1.5 rtl:mr-0 rtl:ml-1.5 border border-slate-50 dark:border-slate-900"
           :style="{ backgroundColor: labelColor }"
         />
-        <span
-          :title="menuTitle"
-          class="menu-label button__content"
-          :class="{ 'text-truncate': shouldTruncate }"
+        <div
+          class="items-center flex overflow-hidden whitespace-nowrap text-ellipsis w-full justify-between"
         >
-          {{ label }}
-          <span v-if="showChildCount" class="count-view">
+          <span
+            :title="menuTitle"
+            class="text-sm text-slate-600 dark:text-slate-100"
+            :class="{
+              'text-woot-500 dark:text-woot-500': isActive,
+              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+            }"
+          >
+            {{ label }}
+          </span>
+          <span
+            v-if="showChildCount"
+            class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
+            :class="
+              isCountZero
+                ? `text-slate-300 dark:text-slate-600`
+                : `text-slate-600 dark:text-slate-50`
+            "
+          >
             {{ childItemCount }}
           </span>
-        </span>
-        <span v-if="count" class="badge" :class="{ secondary: !isActive }">
-          {{ count }}
-        </span>
-        <span v-if="warningIcon" class="badge--icon">
+        </div>
+        <span
+          v-if="warningIcon"
+          class="inline-flex rounded-sm mr-1 bg-slate-100"
+        >
           <fluent-icon
             v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
-            class="inbox-icon"
+            class="text-xxs"
             :icon="warningIcon"
             size="12"
           />
@@ -72,10 +103,6 @@ export default {
       type: String,
       default: '',
     },
-    count: {
-      type: String,
-      default: '',
-    },
     showChildCount: {
       type: Boolean,
       default: false,
@@ -89,96 +116,12 @@ export default {
     showIcon() {
       return { 'text-truncate': this.shouldTruncate };
     },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
     menuTitle() {
       return this.shouldTruncate ? this.label : '';
     },
   },
 };
 </script>
-<style lang="scss" scoped>
-$badge-size: var(--space-normal);
-$label-badge-size: var(--space-slab);
-
-.button {
-  margin: var(--space-small) 0;
-}
-
-.menu-item {
-  display: inline-flex;
-  color: var(--s-600);
-  font-weight: var(--font-weight-medium);
-  width: 100%;
-  height: var(--space-medium);
-  padding: var(--space-smaller) var(--space-smaller);
-  margin: var(--space-smaller) 0;
-  text-align: left;
-  line-height: 1.2;
-
-  &:hover {
-    background: var(--s-25);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-300);
-  }
-
-  &.is-active {
-    background: var(--w-25);
-    color: var(--w-500);
-    border-color: var(--w-25);
-  }
-  &.is-active .count-view {
-    background: var(--w-75);
-    color: var(--w-500);
-  }
-}
-
-.menu-label {
-  flex-grow: 1;
-}
-
-.inbox-icon {
-  font-size: var(--font-size-nano);
-}
-
-.badge--label,
-.badge--icon {
-  display: inline-flex;
-  border-radius: var(--border-radius-small);
-  margin-right: var(--space-smaller);
-  background: var(--s-100);
-}
-
-.badge--icon {
-  align-items: center;
-  height: $badge-size;
-  justify-content: center;
-  min-width: $badge-size;
-}
-
-.badge--label {
-  height: $label-badge-size;
-  min-width: $label-badge-size;
-  margin-left: var(--space-smaller);
-  border: 1px solid var(--color-border-light);
-}
-
-.badge.secondary {
-  min-width: unset;
-  background: var(--s-75);
-  color: var(--s-600);
-  font-weight: var(--font-weight-bold);
-}
-
-.count-view {
-  background: var(--s-50);
-  border-radius: var(--border-radius-normal);
-  color: var(--s-600);
-  font-size: var(--font-size-micro);
-  font-weight: var(--font-weight-bold);
-  margin-left: var(--space-smaller);
-  padding: var(--space-zero) var(--space-smaller);
-  line-height: var(--font-size-small);
-}
-</style>