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/routes/dashboard/Dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row app-wrapper">
+  <div class="row app-wrapper dark:text-slate-300">
     <sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -154,12 +154,11 @@ export default {
 }
 .contact--panel {
   height: 100%;
-  background: white;
   font-size: var(--font-size-small);
   overflow-y: auto;
   overflow: auto;
   position: relative;
-  border-right: 1px solid var(--color-border);
+  @apply border-r border-slate-50 dark:border-slate-700;
 }
 
 .list-group {

app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
     <div class="header">
-      <h5 class="block-title">
+      <h5 class="block-title text-black-900 dark:text-slate-200">
         {{ $t('EVENTS.HEADER.TITLE') }}
       </h5>
     </div>

app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue

@@ -124,7 +124,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .left {
-  border-right: 1px solid var(--color-border);
+  @apply border-r border-slate-50 dark:border-slate-700;
   overflow: auto;
 }
 

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="medium-3 bg-white contact--panel">
+  <div
+    class="medium-3 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 contact--panel"
+  >
     <contact-info
       :contact="contact"
       :channel-type="channelType"
@@ -258,7 +260,6 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .contact--panel {
-  background: white;
   border-left: 1px solid var(--color-border);
   font-size: $font-size-small;
   overflow-y: auto;

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="conversation-page">
+  <section class="conversation-page bg-white dark:bg-slate-900">
     <chat-list
       :show-conversation-list="showConversationList"
       :conversation-inbox="inboxId"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue

@@ -22,7 +22,7 @@
     </div>
     <draggable
       tag="div"
-      class="article-container--border"
+      class="border-t-0"
       :disabled="!dragEnabled"
       :list="localArticles"
       ghost-class="article-ghost-class"
@@ -142,11 +142,6 @@ export default {
 .article-container {
   width: 100%;
 
-  & > :not([hidden]) ~ :not([hidden]) {
-    border-top-width: 1px;
-    border-bottom-width: 0px;
-  }
-
   .article-container--header {
     margin: 0 var(--space-minus-normal);
     padding: 0 var(--space-normal);

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -2,7 +2,7 @@
   <div v-on-clickaway="closePortalPopover" class="portal-popover__container">
     <header>
       <div class="actions">
-        <h2 class="block-title">
+        <h2 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
         </h2>
         <div>

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wizard-body columns content-box small-9">
     <div class="medium-12 columns">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
         {{
           $t(
             'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wizard-body height-auto small-9 columns">
     <div class="medium-12 columns">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
         {{
           $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
         }}

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -98,7 +98,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/woot';
+@import '~dashboard/assets/scss/variables';
 .secondary-menu {
   display: flex;
   flex-direction: column;

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -1,7 +1,7 @@
 <template>
   <transition name="popover-animation">
     <div class="article-settings--container">
-      <h3 class="block-title">
+      <h3 class="block-title text-black-900 dark:text-slate-200">
         {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
       </h3>
       <div class="form-wrap">

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="settings-header">
-    <h1 class="page-title">
+  <div
+    class="settings-header bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800"
+  >
+    <h1 class="page-title text-black-900 dark:text-slate-300">
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <back-button
         v-if="showBackButton"

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="columns profile--settings">
     <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
-      <div class="small-12 row profile--settings--row">
+      <div
+        class="small-12 row profile--settings--row border-b border-slate-25 dark:border-slate-700"
+      >
         <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
           </h4>
           <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
@@ -82,9 +84,11 @@
         </div>
       </div>
 
-      <div class="profile--settings--row row">
+      <div
+        class="profile--settings--row border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
+      >
         <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
           </h4>
           <p>
@@ -288,7 +292,6 @@ export default {
 }
 
 .profile--settings--row {
-  @include border-normal-bottom;
   padding: $space-normal;
   .small-3 {
     padding: $space-normal $space-medium $space-normal 0;

app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="settings--content">
     <div class="widget-builder-container">
-      <div class="settings-container">
+      <div class="settings-container w-100 lg:w-[40%]">
         <div class="settings-content">
           <form @submit.prevent="updateWidget">
             <woot-avatar-uploader
@@ -123,7 +123,7 @@
           </form>
         </div>
       </div>
-      <div class="widget-container">
+      <div class="widget-container w-100 lg:w-[60%]">
         <input-radio-group
           name="widget-view-options"
           :items="getWidgetViewOptions"
@@ -428,11 +428,6 @@ export default {
 }
 
 .settings-container {
-  width: 40%;
-  @include breakpoint(900px down) {
-    width: 100%;
-  }
-
   .settings-content {
     padding: var(--space-normal) var(--space-zero);
     overflow-y: scroll;
@@ -445,12 +440,6 @@ export default {
 }
 
 .widget-container {
-  width: 60%;
-
-  @include breakpoint(900px down) {
-    width: 100%;
-  }
-
   .widget-preview {
     display: flex;
     flex-direction: column;

app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue

@@ -1,8 +1,8 @@
 <template>
   <form @submit.prevent="changePassword()">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }}
         </h4>
         <p>{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.NOTE') }}</p>

app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue

@@ -3,7 +3,7 @@
     <form @submit.prevent="updateUser('profile')">
       <div class="small-12 row profile--settings--row">
         <div class="columns small-3">
-          <h4 class="block-title">
+          <h4 class="block-title text-black-900 dark:text-slate-200">
             {{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
           </h4>
           <p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p>
@@ -70,9 +70,9 @@
       </div>
     </form>
     <message-signature />
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE') }}
         </h4>
         <p>
@@ -97,9 +97,9 @@
     </div>
     <change-password v-if="!globalConfig.disableUserProfileUpdate" />
     <notification-settings />
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
         </h4>
         <p>

app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue

@@ -1,8 +1,8 @@
 <template>
   <form @submit.prevent="updateSignature()">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
         </h4>
         <p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="profile-settings-notifications">
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE') }}
         </h4>
         <p>
@@ -139,9 +139,9 @@
         </div>
       </div>
     </div>
-    <div class="profile--settings--row row">
+    <div class="profile--settings--row text-black-900 dark:text-slate-300 row">
       <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
         </h4>
         <p>
@@ -236,10 +236,10 @@
     </div>
     <div
       v-if="vapidPublicKey && hasPushAPISupport"
-      class="profile--settings--row row push-row"
+      class="profile--settings--row text-black-900 dark:text-slate-300 row push-row"
     >
       <div class="columns small-3 ">
-        <h4 class="block-title">
+        <h4 class="block-title text-black-900 dark:text-slate-200">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </h4>
         <p>{{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.NOTE') }}</p>