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/widgets/conversation/PriorityMark.vue

@@ -6,8 +6,11 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="conversation-priority-mark"
-    :class="{ urgent: priority === CONVERSATION_PRIORITY.URGENT }"
+    class="shrink-0 rounded-xs inline-flex w-3 h-3 "
+    :class="{
+      'bg-red-50 text-red-500': isUrgent,
+      'bg-slate-50 text-slate-600': !isUrgent,
+    }"
   >
     <fluent-icon
       :icon="`priority-${priority.toLowerCase()}`"
@@ -41,24 +44,9 @@ export default {
         `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
       );
     },
+    isUrgent() {
+      return this.priority === CONVERSATION_PRIORITY.URGENT;
+    },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.conversation-priority-mark {
-  align-items: center;
-  flex-shrink: 0;
-  background: var(--s-50);
-  border-radius: var(--border-radius-small);
-  color: var(--s-600);
-  display: inline-flex;
-  width: var(--space-snug);
-  height: var(--space-snug);
-
-  &.urgent {
-    background: var(--r-50);
-    color: var(--r-500);
-  }
-}
-</style>