feat: Add support for dark mode in more pages

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

app/javascript/dashboard/components/ChatList.vue

@@ -126,27 +126,28 @@
       class="conversations-list"
       :class="{ 'is-context-menu-open': isContextMenuOpen }"
     >
-      <conversation-card
-        v-for="chat in conversationList"
-        :key="chat.id"
-        :active-label="label"
-        :team-id="teamId"
-        :folders-id="foldersId"
-        :chat="chat"
-        :conversation-type="conversationType"
-        :show-assignee="showAssigneeInConversationCard"
-        :selected="isConversationSelected(chat.id)"
-        @select-conversation="selectConversation"
-        @de-select-conversation="deSelectConversation"
-        @assign-agent="onAssignAgent"
-        @assign-team="onAssignTeam"
-        @assign-label="onAssignLabels"
-        @update-conversation-status="toggleConversationStatus"
-        @context-menu-toggle="onContextMenuToggle"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
-      />
-
+      <div>
+        <conversation-card
+          v-for="chat in conversationList"
+          :key="chat.id"
+          :active-label="label"
+          :team-id="teamId"
+          :folders-id="foldersId"
+          :chat="chat"
+          :conversation-type="conversationType"
+          :show-assignee="showAssigneeInConversationCard"
+          :selected="isConversationSelected(chat.id)"
+          @select-conversation="selectConversation"
+          @de-select-conversation="deSelectConversation"
+          @assign-agent="onAssignAgent"
+          @assign-team="onAssignTeam"
+          @assign-label="onAssignLabels"
+          @update-conversation-status="toggleConversationStatus"
+          @context-menu-toggle="onContextMenuToggle"
+          @mark-as-unread="markAsUnread"
+          @assign-priority="assignPriority"
+        />
+      </div>
       <div v-if="chatListLoading" class="text-center">
         <span class="spinner" />
       </div>
@@ -155,6 +156,7 @@
         v-if="!hasCurrentPageEndReached && !chatListLoading"
         variant="clear"
         size="expanded"
+        class="text-center"
         @click="loadMoreConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row settings--section" :class="{ border: showBorder }">
+  <div class="row settings--section" :class="{ 'border-bottom': showBorder }">
     <div class="medium-4 small-12 title--section">
       <p v-if="title" class="sub-block-title">
         {{ title }}
@@ -50,7 +50,7 @@ export default {
   display: flex;
   padding: 0 $space-normal $space-normal 0;
 
-  &.border {
+  &.border-bottom {
     padding-top: $space-normal;
     border-bottom: 1px solid $color-border;
   }

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -4,7 +4,7 @@
     <woot-dropdown-item
       v-for="status in availabilityStatuses"
       :key="status.value"
-      class="status-items"
+      class="flex items-baseline"
     >
       <woot-button
         size="small"
@@ -18,23 +18,25 @@
       </woot-button>
     </woot-dropdown-item>
     <woot-dropdown-divider />
-    <woot-dropdown-item class="auto-offline--toggle">
-      <div class="info-wrap">
+    <woot-dropdown-item class="m-0 flex items-center justify-between p-2">
+      <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
           icon="info"
           size="14"
-          class="info-icon"
+          class="mt-px"
         />
 
-        <span class="auto-offline--text">
+        <span
+          class="my-0 mx-1 text-xs font-medium text-slate-600 dark:text-slate-100"
+        >
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
         </span>
       </div>
 
       <woot-switch
         size="small"
-        class="auto-offline--switch"
+        class="mt-px mx-1 mb-0"
         :value="currentUserAutoOffline"
         @input="updateAutoOffline"
       />
@@ -138,71 +140,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import '~dashboard/assets/scss/variables';
-
-.status {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-micro) var(--space-smaller);
-}
-
-.status-view {
-  display: flex;
-  align-items: baseline;
-
-  & &--title {
-    color: var(--b-600);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    margin-left: var(--space-small);
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-}
-
-.status-change {
-  .dropdown-pane {
-    top: -132px;
-    right: var(--space-normal);
-  }
-
-  .status-items {
-    display: flex;
-    align-items: baseline;
-  }
-}
-
-.auto-offline--toggle {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  padding: var(--space-smaller);
-  margin: 0;
-
-  .info-wrap {
-    display: flex;
-    align-items: center;
-  }
-
-  .info-icon {
-    margin-top: -1px;
-  }
-
-  .auto-offline--switch {
-    margin: -1px var(--space-micro) 0;
-  }
-
-  .auto-offline--text {
-    margin: 0 var(--space-smaller);
-    font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-medium);
-    color: var(--s-700);
-  }
-}
-</style>

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

@@ -3,8 +3,8 @@
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="options-menu dropdown-pane"
-      :class="{ 'dropdown-pane--open': show }"
+      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md drop-shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      :class="{ 'block visible': show }"
     >
       <availability-status />
       <woot-dropdown-menu>
@@ -49,7 +49,7 @@
           >
             <a
               :href="href"
-              class="button small clear secondary custom-sidebar--button"
+              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
               :class="{ 'is-active': isActive }"
               @click="e => handleProfileSettingClick(e, navigate)"
             >
@@ -63,7 +63,7 @@
         <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
-            class="button small clear secondary custom-sidebar--button"
+            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
             target="_blank"
             rel="noopener nofollow noreferrer"
             @click="$emit('close')"
@@ -148,17 +148,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.options-menu.dropdown-pane {
-  left: var(--space-slab);
-  bottom: var(--space-larger);
-  min-width: var(--space-giga);
-  top: unset;
-  z-index: var(--z-index-low);
-}
-
-.custom-sidebar--button {
-  height: var(--space-large) !important;
-  padding: var(--space-smaller) 0.675rem !important;
-}
-</style>

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

@@ -6,6 +6,16 @@
       >
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
+      <div v-if="menuItem.showNewButton" class="flex items-center">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
+      </div>
     </div>
     <router-link
       v-else
@@ -15,13 +25,19 @@
     >
       <fluent-icon
         :icon="menuItem.icon"
-        class="min-w-[1rem] mr-2 rtl:mr-0 rtl:ml-2"
+        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
         size="14"
       />
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
       <span
         v-if="showChildCount(menuItem.count)"
-        class="rounded-xl text-xxs font-medium mx-1 py-0 px-1"
+        class="rounded-md text-xxs font-medium mx-1 py-0 px-1"
+        :class="{
+          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
+          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600': isActiveView,
+          'bg-slate-50 dark:bg-slate-700': !isActiveView,
+        }"
       >
         {{ `${menuItem.count}` }}
       </span>
@@ -103,6 +119,12 @@ export default {
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       globalConfig: 'globalConfig/get',
     }),
+    isCountZero() {
+      return this.menuItem.count === 0;
+    },
+    isActiveView() {
+      return this.computedClass.includes('active-view');
+    },
     hasSubMenu() {
       return !!this.menuItem.children;
     },
@@ -173,7 +195,7 @@ export default {
         this.isUnattended ||
         this.isCurrentRoute
       ) {
-        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
+        return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
       }
       if (this.hasSubMenu) {
         if (
@@ -182,7 +204,7 @@ export default {
           this.isIntegrationsSettings ||
           this.isApplicationsSettings
         ) {
-          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500';
+          return 'bg-woot-25 dark:bg-slate-800 text-woot-500 dark:text-woot-500 hover:text-woot-500 dark:hover:text-woot-500 active-view';
         }
         return 'hover:text-slate-700 dark:hover:text-slate-100';
       }

app/javascript/dashboard/components/ui/WootButton.vue

@@ -18,7 +18,11 @@
       :icon="icon"
       :icon-size="iconSize"
     />
-    <span v-if="$slots.default" class="button__content">
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
       <slot />
     </span>
   </button>

app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="`status-badge status-badge__${status}`" />
+  <div
+    :class="
+      `status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`
+    "
+  />
 </template>
 <script>
 export default {
@@ -9,21 +13,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
 .status-badge {
-  width: var(--space-one);
-  height: var(--space-one);
-  margin-right: var(--space-micro);
-  display: inline-block;
-  border-radius: 50%;
   &__online {
-    background: var(--g-400);
+    @apply bg-green-400;
   }
   &__offline {
-    background: var(--s-500);
+    @apply bg-slate-500;
   }
   &__busy {
-    background: var(--y-500);
+    @apply bg-yellow-500;
   }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="conversation"
+    class="conversation group border-t border-transparent"
     :class="{
       active: isActiveChat,
       'unread-chat': hasUnread,
@@ -30,7 +30,9 @@
       :status="currentContact.availability_status"
       size="40px"
     />
-    <div class="conversation--details columns">
+    <div
+      class="conversation--details border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800 columns"
+    >
       <div class="conversation--metadata">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
         <div class="conversation-metadata-attributes">