feat: Add support for dark mode in more pages

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

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="row app-wrapper">
+  <div class="h-full flex">
     <sidebar
       :route="currentRoute"
       @toggle-account-modal="toggleAccountModal"
@@ -7,19 +7,17 @@
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
-    <div class="secondary-sidebar">
-      <help-center-sidebar
-        v-if="showHelpCenterSidebar"
-        :header-title="headerTitle"
-        :portal-slug="selectedPortalSlug"
-        :locale-slug="selectedLocaleInPortal"
-        :sub-title="localeName(selectedLocaleInPortal)"
-        :accessible-menu-items="accessibleMenuItems"
-        :additional-secondary-menu-items="additionalSecondaryMenuItems"
-        @open-popover="openPortalPopover"
-        @open-modal="onClickOpenAddCategoryModal"
-      />
-    </div>
+    <help-center-sidebar
+      v-if="showHelpCenterSidebar"
+      :header-title="headerTitle"
+      :portal-slug="selectedPortalSlug"
+      :locale-slug="selectedLocaleInPortal"
+      :sub-title="localeName(selectedLocaleInPortal)"
+      :accessible-menu-items="accessibleMenuItems"
+      :additional-secondary-menu-items="additionalSecondaryMenuItems"
+      @open-popover="openPortalPopover"
+      @open-modal="onClickOpenAddCategoryModal"
+    />
     <section class="app-content columns">
       <router-view />
       <command-bar />

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

@@ -1,5 +1,7 @@
 <template>
-  <div class="main-nav secondary-menu">
+  <div
+    class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+  >
     <sidebar-header
       :thumbnail-src="thumbnailSrc"
       :header-title="headerTitle"
@@ -7,7 +9,11 @@
       :portal-link="portalLink"
       @open-popover="openPortalPopover"
     />
-    <transition-group name="menu-list" tag="ul" class="menu vertical">
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 list-none ml-0 mb-0"
+    >
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
         :key="menuItem.toState"
@@ -22,7 +28,7 @@
       <p
         v-if="!hasCategory"
         key="empty-category-nessage"
-        class="empty-text text-muted"
+        class="p-1.5 px-4 text-slate-300"
       >
         {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
       </p>
@@ -96,32 +102,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-.secondary-menu {
-  display: flex;
-  flex-direction: column;
-  background: var(--white);
-  border-right: 1px solid var(--s-50);
-  height: 100%;
-  width: var(--space-giga);
-  flex-shrink: 0;
-  overflow: hidden;
-  padding: var(--space-small);
-  position: unset;
-
-  &:hover {
-    overflow: auto;
-  }
-
-  .menu {
-    padding: var(--space-small);
-    overflow-y: auto;
-  }
-}
-
-.empty-text {
-  padding: var(--space-smaller) var(--space-normal);
-}
-</style>

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

@@ -1,20 +1,26 @@
 <template>
-  <div class="sidebar-header--wrap">
-    <div class="header-left--side">
+  <div
+    class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
+  >
+    <div class="flex items-center">
       <thumbnail
         size="32px"
         :src="thumbnailSrc"
         :username="headerTitle"
         variant="square"
       />
-      <div class="header-title--wrap">
-        <h4 class="text-block-title title-view text-truncate">
+      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
+        <h4
+          class="text-sm w-28 h-4 mb-0 leading-4 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+        >
           {{ headerTitle }}
         </h4>
-        <span class="sub-title--view">{{ subTitle }}</span>
+        <span class="h-4 leading-4 text-slate-600 dark:text-slate-200 text-xs">
+          {{ subTitle }}
+        </span>
       </div>
     </div>
-    <div class="header-right--side">
+    <div class="flex items-end">
       <woot-button
         variant="clear"
         color-scheme="secondary"
@@ -67,47 +73,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.sidebar-header--wrap {
-  display: flex;
-  height: var(--space-jumbo);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-normal);
-  margin: var(--space-minus-small);
-  margin-bottom: var(--space-smaller);
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.header-title--wrap {
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  margin-left: var(--space-small);
-}
-
-.title-view {
-  width: var(--space-mega);
-  margin-bottom: var(--space-zero);
-  height: var(--space-normal);
-  line-height: var(--space-normal);
-}
-
-.sub-title--view {
-  font-size: var(--font-size-mini);
-  color: var(--s-600);
-  height: var(--space-normal);
-  line-height: var(--space-normal);
-}
-
-.header-left--side {
-  display: flex;
-  align-items: center;
-}
-
-.header-right--side {
-  display: flex;
-  align-items: flex-end;
-}
-</style>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -2,10 +2,10 @@
   <div class="modal-mask">
     <div
       v-on-clickaway="closeNotificationPanel"
-      class="notification-wrap flex-space-between"
+      class="notification-wrap flex justify-between z-10 rounded-md shadow-md absolute bg-white dark:bg-slate-800 left-14 rtl:left-auto rtl:right-14 m-4"
     >
-      <div class="header-wrap w-full flex-space-between">
-        <div class="header-title--wrap flex-view">
+      <div class="header-wrap w-full flex justify-between">
+        <div class="header-title--wrap flex">
           <span class="header-title">
             {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
           </span>
@@ -13,7 +13,7 @@
             {{ totalUnreadNotifications }}
           </span>
         </div>
-        <div class="flex-view">
+        <div class="flex">
           <woot-button
             v-if="!noUnreadNotificationAvailable"
             color-scheme="primary"
@@ -48,8 +48,8 @@
         :on-click-notification="openConversation"
         :in-last-page="inLastPage"
       />
-      <div v-if="records.length !== 0" class="footer-wrap flex-space-between">
-        <div class="flex-view">
+      <div v-if="records.length !== 0" class="footer-wrap flex justify-between">
+        <div class="flex">
           <woot-button
             size="medium"
             variant="clear"
@@ -75,7 +75,7 @@
           />
         </div>
         <span class="page-count"> {{ currentPage }} - {{ lastPage }} </span>
-        <div class="flex-view">
+        <div class="flex">
           <woot-button
             color-scheme="secondary"
             variant="clear"
@@ -236,24 +236,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.flex-view {
-  display: flex;
-}
-
-.flex-space-between {
-  display: flex;
-  justify-content: space-between;
-}
-
 .notification-wrap {
   flex-direction: column;
   height: 90vh;
   width: 32.5rem;
-  background-color: var(--white);
-  border-radius: var(--border-radius-medium);
-  position: absolute;
-  left: var(--space-jumbo);
-  margin: var(--space-small);
 }
 
 .header-wrap {