feat: Add support for dark mode in more pages

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

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -17,54 +17,6 @@
     }
   }
 
-  // Secondary sidebar
-  .secondary-sidebar {
-    .secondary-menu {
-      border-left: 1px solid var(--s-50);
-      border-right: 0;
-
-      .nested.vertical.menu {
-        .badge--icon {
-          margin-left: var(--space-smaller);
-          margin-right: unset;
-        }
-
-        .menu-label {
-          text-align: right;
-        }
-      }
-
-      .secondary-menu--icon {
-        margin-left: var(--space-smaller);
-        margin-right: unset;
-      }
-
-      // Help center sidebar
-      .sidebar-header--wrap .header-title--wrap {
-        margin-left: unset;
-        margin-right: var(--space-small);
-      }
-    }
-  }
-
-  // Woot button
-  .button {
-    .icon--emoji + .button__content {
-      padding-left: 0;
-      padding-right: var(--space-small);
-    }
-
-    .icon--font + .button__content {
-      padding-left: 0;
-      padding-right: var(--space-small);
-    }
-
-    .icon + .button__content {
-      padding-left: 0;
-      padding-right: var(--space-small);
-    }
-  }
-
   // Settings header
   .settings-header {
     .header--icon {

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -25,7 +25,7 @@
 
 .wizard-box {
   .item {
-    @include background-light;
+    // @include background-light;
 
     cursor: pointer;
     padding: $space-normal $space-normal $space-normal $space-medium;

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -1,212 +1,201 @@
-$default-button-height: 2.5rem;
-
 .button {
-  align-items: center;
+  @apply items-center inline-flex h-10 mb-0;
-  display: inline-flex;
-  height: $default-button-height;
-  margin-bottom: 0;
 
   .button__content {
-    width: 100%;
+    @apply w-full;
 
     img,
     svg {
-      display: inline-block;
+      @apply inline-block;
     }
   }
 
   .spinner {
-    padding: 0 var(--space-small);
+    @apply px-2 py-0;
   }
 
-  .icon--emoji+.button__content {
+  .icon--emoji + .button__content {
-    padding-left: var(--space-small);
+    @apply pl-2 rtl:pr-2 rtl:pl-0;
   }
 
-  .icon--font+.button__content {
+  .icon--font + .button__content {
-    padding-left: var(--space-small);
+    @apply pl-2 rtl:pr-2 rtl:pl-0;
   }
 
   // @TODDO - Remove after moving all buttons to woot-button
-  .icon+.button__content {
+  .icon + .button__content {
-    padding-left: var(--space-small);
+    @apply pl-2 w-auto rtl:pr-2 rtl:pl-0;
-    width: auto;
   }
 
   &.expanded {
-    display: flex;
+    @apply flex justify-center text-center;
-    justify-content: center;
   }
 
   &.round {
-    border-radius: $space-larger;
+    @apply rounded-full;
   }
 
   // @TODO Use with link
 
   &.compact {
-    padding-bottom: 0;
+    @apply pb-0 pt-0;
-    padding-top: 0;
   }
 
   &.hollow {
-    border-color: var(--s-200);
+    @apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
-    color: var(--w-700);
 
     &.secondary {
-      border-color: var(--s-200);
+      @apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
-      color: var(--s-700);
     }
 
     &.success {
-      border-color: var(--s-200);
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
-      color: var(--g-700);
     }
 
     &.alert {
-      border-color: var(--s-200);
+      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
-      color: var(--r-700);
     }
 
     &.warning {
-      border-color: var(--s-200);
+      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
-      color: var(--y-700);
     }
 
     &:hover {
-      background: var(--s-75);
+      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
-      border-color: var(--s-100);
 
       &.secondary {
-        border-color: var(--s-100);
+        @apply border-slate-100 dark:border-slate-700;
       }
 
       &.success {
-        border-color: var(--s-100);
+        @apply border-slate-100 dark:border-slate-700;
       }
 
       &.alert {
-        border-color: var(--s-100);
+        @apply border-slate-100 dark:border-slate-700;
       }
 
       &.warning {
-        border-color: var(--s-100);
+        @apply border-slate-100 dark:border-slate-700;
       }
     }
   }
 
   // Smooth style
   &.smooth {
-    @include button-style(var(--w-50), var(--w-100), var(--w-700));
+    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
-
 
     &.secondary {
-      @include button-style(var(--s-50), var(--s-100), var(--s-700));
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
     }
 
     &.success {
-      @include button-style(var(--g-50), var(--g-100), var(--g-700));
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
     }
 
     &.alert {
-      @include button-style(var(--r-50), var(--r-100), var(--r-700));
+      @apply bg-red-50 dark:bg-red-700 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800;
     }
 
     &.warning {
-      @include button-style(var(--y-100), var(--y-200), var(--y-700));
+      @apply bg-yellow-50 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-800;
     }
   }
 
   &.clear {
-    color: var(--w-700);
+    @apply text-woot-500 dark:text-woot-500;
 
     &.secondary {
-      color: var(--s-700);
+      @apply text-slate-700 dark:text-slate-100;
     }
 
     &.success {
-      color: var(--g-700);
+      @apply text-green-700 dark:text-green-100;
     }
 
     &.alert {
-      color: var(--r-700);
+      @apply text-red-700 dark:text-red-100;
     }
 
     &.warning {
-      color: var(--y-700);
+      @apply text-yellow-700 dark:text-yellow-100;
     }
 
     &:hover {
-      background: var(--w-50);
+      @apply hover:bg-woot-50 dark:hover:bg-woot-300;
 
       &.secondary {
-        background: var(--s-50);
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700;
       }
 
       &.success {
-        background: var(--g-50);
+        @apply hover:bg-green-50 dark:hover:bg-green-800;
       }
 
       &.alert {
-        background: var(--r-50);
+        @apply hover:bg-red-50 dark:hover:bg-red-800;
       }
 
       &.warning {
-        background: var(--y-50);
+        @apply hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      }
+    }
+
+    &:active {
+      &.secondary {
+        @apply active:bg-slate-100 dark:active:bg-slate-900;
+      }
+    }
+
+    &:focus {
+      &.secondary {
+        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
       }
     }
   }
 
   // Sizes
   &.tiny {
-    height: var(--space-medium);
+    @apply h-6;
 
-    .icon+.button__content {
+    .icon + .button__content {
-      padding-left: var(--space-micro);
+      @apply pl-1 rtl:pr-1 rtl:pl-0;
     }
   }
 
   &.small {
-    height: var(--space-large);
+    @apply h-8 pb-1 pt-1;
-    padding-bottom: var(--space-smaller);
-    padding-top: var(--space-smaller);
 
-    .icon+.button__content {
+    .icon + .button__content {
-      padding-left: var(--space-smaller);
+      @apply pl-1 rtl:pr-1 rtl:pl-0;
     }
   }
 
   &.large {
-    height: var(--space-larger);
+    @apply h-12;
   }
 
   &.button--only-icon {
-    justify-content: center;
+    @apply justify-center pl-0 pr-0 w-10;
-    padding-left: 0;
-    padding-right: 0;
-    width: $default-button-height;
 
     &.tiny {
-      width: var(--space-medium);
+      @apply w-6;
     }
 
     &.small {
-      width: var(--space-large);
+      @apply w-8;
     }
 
     &.large {
-      width: var(--space-larger);
+      @apply w-12;
     }
   }
 
   &.link {
-    height: auto;
+    @apply h-auto m-0 p-0;
-    margin: 0;
-    padding: 0;
 
     &:hover {
-      text-decoration: underline;
+      @apply underline;
     }
   }
-
 }

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -12,9 +12,7 @@
 .conversation {
   @include flex;
   @include flex-shrink;
-  border-bottom: 1px solid transparent;
   border-left: var(--space-micro) solid transparent;
-  border-top: 1px solid transparent;
   cursor: pointer;
   padding: 0 var(--space-normal);
   position: relative;
@@ -22,35 +20,11 @@
   &.active {
     animation: left-shift-animation 0.25s $swift-ease-out-function;
     background: var(--color-background);
-    border-bottom-color: var(--color-border-light);
     border-left-color: var(--color-woot);
-    border-top-color: var(--color-border-light);
-
-    .conversation--details {
-      border-top-color: transparent;
-    }
-
-    + .conversation .conversation--details {
-      border-top-color: transparent;
-    }
   }
 
-  &:first-child {
-    .conversation--details {
-      border-top-color: transparent;
-    }
-  }
-
-  &:last-child {
-    .conversation--details {
-      border-bottom-color: var(--color-border-light);
-    }
-  }
 
   .conversation--details {
-    @include border-light-bottom;
-    @include border-light-top;
-    border-bottom-color: transparent;
     padding: var(--space-slab) 0;
   }
 

app/javascript/dashboard/components/ChatList.vue

@@ -126,27 +126,28 @@
       class="conversations-list"
       :class="{ 'is-context-menu-open': isContextMenuOpen }"
     >
-      <conversation-card
+      <div>
-        v-for="chat in conversationList"
+        <conversation-card
-        :key="chat.id"
+          v-for="chat in conversationList"
-        :active-label="label"
+          :key="chat.id"
-        :team-id="teamId"
+          :active-label="label"
-        :folders-id="foldersId"
+          :team-id="teamId"
-        :chat="chat"
+          :folders-id="foldersId"
-        :conversation-type="conversationType"
+          :chat="chat"
-        :show-assignee="showAssigneeInConversationCard"
+          :conversation-type="conversationType"
-        :selected="isConversationSelected(chat.id)"
+          :show-assignee="showAssigneeInConversationCard"
-        @select-conversation="selectConversation"
+          :selected="isConversationSelected(chat.id)"
-        @de-select-conversation="deSelectConversation"
+          @select-conversation="selectConversation"
-        @assign-agent="onAssignAgent"
+          @de-select-conversation="deSelectConversation"
-        @assign-team="onAssignTeam"
+          @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabels"
+          @assign-team="onAssignTeam"
-        @update-conversation-status="toggleConversationStatus"
+          @assign-label="onAssignLabels"
-        @context-menu-toggle="onContextMenuToggle"
+          @update-conversation-status="toggleConversationStatus"
-        @mark-as-unread="markAsUnread"
+          @context-menu-toggle="onContextMenuToggle"
-        @assign-priority="assignPriority"
+          @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">
+    <woot-dropdown-item class="m-0 flex items-center justify-between p-2">
-      <div class="info-wrap">
+      <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="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="{ 'dropdown-pane--open': show }"
+      :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">

app/javascript/dashboard/modules/search/components/MessageContent.vue

@@ -1,5 +1,8 @@
 <template>
-  <blockquote ref="messageContainer" class="message">
+  <blockquote
+    ref="messageContainer"
+    class="message border-l-2 border-slate-100"
+  >
     <p class="header">
       <strong class="author">
         {{ author }}
@@ -80,8 +83,6 @@ export default {
 
 <style scoped lang="scss">
 .message {
-  border-color: var(--s-100);
-  border-width: var(--space-micro);
   padding: 0 var(--space-small);
   margin-top: var(--space-small);
 }

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
-      <help-center-sidebar
+      v-if="showHelpCenterSidebar"
-        v-if="showHelpCenterSidebar"
+      :header-title="headerTitle"
-        :header-title="headerTitle"
+      :portal-slug="selectedPortalSlug"
-        :portal-slug="selectedPortalSlug"
+      :locale-slug="selectedLocaleInPortal"
-        :locale-slug="selectedLocaleInPortal"
+      :sub-title="localeName(selectedLocaleInPortal)"
-        :sub-title="localeName(selectedLocaleInPortal)"
+      :accessible-menu-items="accessibleMenuItems"
-        :accessible-menu-items="accessibleMenuItems"
+      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-        :additional-secondary-menu-items="additionalSecondaryMenuItems"
+      @open-popover="openPortalPopover"
-        @open-popover="openPortalPopover"
+      @open-modal="onClickOpenAddCategoryModal"
-        @open-modal="onClickOpenAddCategoryModal"
+    />
-      />
-    </div>
     <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
-    <div class="header-left--side">
+    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">
+      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
-        <h4 class="text-block-title title-view text-truncate">
+        <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-wrap w-full flex justify-between">
-        <div class="header-title--wrap flex-view">
+        <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 v-if="records.length !== 0" class="footer-wrap flex justify-between">
-        <div class="flex-view">
+        <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 {

app/javascript/shared/components/ui/dropdown/DropdownDivider.vue

@@ -1,13 +1,10 @@
 <template>
-  <li class="dropdown-menu--divider" :tabindex="null" :aria-disabled="true" />
+  <li
+    class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
+    :tabindex="null"
+    :aria-disabled="true"
+  />
 </template>
 <script>
 export default {};
 </script>
-<style lang="scss" scoped>
-.dropdown-menu--divider {
-  list-style: none;
-  margin: var(--space-small) 0;
-  border-bottom: 1px solid var(--s-50);
-}
-</style>

app/javascript/shared/components/ui/dropdown/DropdownHeader.vue

@@ -1,6 +1,10 @@
 <template>
-  <li class="dropdown-menu--header" :tabindex="null" :aria-disabled="true">
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
-    <span class="title">{{ title }}</span>
+    <span
+      class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
+    >
+      {{ title }}
+    </span>
     <slot />
   </li>
 </template>
@@ -15,22 +19,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.dropdown-menu--header {
-  display: inline-flex;
-  list-style: none;
-
-  .title {
-    width: 100%;
-    display: block;
-    text-align: left;
-    white-space: nowrap;
-    padding: var(--space-small) var(--space-small);
-    margin-top: var(--space-smaller);
-    font-size: var(--font-size-mini);
-    color: var(--s-600);
-    font-weight: var(--font-weight-medium);
-    border-radius: var(--border-radius-normal);
-  }
-}
-</style>

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="dropdown-menu__item"
+    class="dropdown-menu__item list-none mb-1"
     :class="{
       'is-disabled': disabled,
     }"
@@ -28,26 +28,21 @@ export default {
 </script>
 <style lang="scss" scoped>
 .dropdown-menu__item {
-  list-style: none;
-  margin-bottom: var(--space-micro);
-
   ::v-deep {
     a,
     .button {
-      display: inline-flex;
+      @apply inline-flex whitespace-nowrap w-full text-left rtl:text-right;
-      white-space: nowrap;
-      width: 100%;
-      text-align: left;
-      color: var(--s-700);
-
-      &:hover {
-        background: var(--color-background);
-      }
-
-      &:focus {
-        background: var(--color-background);
-      }
     }
   }
 }
+
+// A hacky fix to remove the background that came from the foundation styles node module file
+// Can be removed once we remove the foundation styles node module
+.dropdown.menu {
+  // Top-level item
+  > li > a {
+    background: transparent;
+    padding: 4px 10.8px;
+  }
+}
 </style>

app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue

@@ -1,55 +0,0 @@
-<template>
-  <woot-button
-    size="expanded"
-    color-scheme="primary"
-    class-names="submit--button"
-    :is-disabled="isDisabled"
-    :is-loading="isLoading"
-    @click="onClick"
-  >
-    {{ label }}
-    <fluent-icon :icon="icon" size="18" />
-  </woot-button>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.submit--button {
-  align-items: center;
-  display: flex;
-  margin: 0 0 var(--space-normal) 0;
-
-  &::v-deep .button__content {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-  }
-}
-</style>