feat: Add support for dark mode in more pages

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
2025-11-02 03:57:52 +00:00 · 2023-07-06 07:56:24 +05:30
parent 4e8d17f017
commit 528da1d2cf
21 changed files with 211 additions and 502 deletions
--- a/app/javascript/dashboard/assets/scss/_rtl.scss
+++ b/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 {
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/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;
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -1,212 +1,201 @@
-$default-button-height: 2.5rem;
-
 .button {
-  align-items: center;
-  display: inline-flex;
-  height: $default-button-height;
-  margin-bottom: 0;
+  @apply items-center inline-flex h-10 mb-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 {
-    padding-left: var(--space-small);
+  .icon--emoji + .button__content {
+    @apply pl-2 rtl:pr-2 rtl:pl-0;
  }

-  .icon--font+.button__content {
-    padding-left: var(--space-small);
+  .icon--font + .button__content {
+    @apply pl-2 rtl:pr-2 rtl:pl-0;
  }

  // @TODDO - Remove after moving all buttons to woot-button
-  .icon+.button__content {
-    padding-left: var(--space-small);
-    width: auto;
+  .icon + .button__content {
+    @apply pl-2 w-auto rtl:pr-2 rtl:pl-0;
  }

  &.expanded {
-    display: flex;
-    justify-content: center;
+    @apply flex justify-center text-center;
  }

  &.round {
-    border-radius: $space-larger;
+    @apply rounded-full;
  }

  // @TODO Use with link

  &.compact {
-    padding-bottom: 0;
-    padding-top: 0;
+    @apply pb-0 pt-0;
  }

  &.hollow {
-    border-color: var(--s-200);
-    color: var(--w-700);
+    @apply border border-slate-200 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
-      border-color: var(--s-200);
-      color: var(--s-700);
+      @apply text-slate-700 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
-      border-color: var(--s-200);
-      color: var(--g-700);
+      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
    }

    &.alert {
-      border-color: var(--s-200);
-      color: var(--r-700);
+      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
    }

    &.warning {
-      border-color: var(--s-200);
-      color: var(--y-700);
+      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
    }

    &:hover {
-      background: var(--s-75);
-      border-color: var(--s-100);
+      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;

      &.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 {
-      padding-left: var(--space-micro);
+    .icon + .button__content {
+      @apply pl-1 rtl:pr-1 rtl:pl-0;
    }
  }

  &.small {
-    height: var(--space-large);
-    padding-bottom: var(--space-smaller);
-    padding-top: var(--space-smaller);
+    @apply h-8 pb-1 pt-1;

-    .icon+.button__content {
-      padding-left: var(--space-smaller);
+    .icon + .button__content {
+      @apply pl-1 rtl:pr-1 rtl:pl-0;
    }
  }

  &.large {
-    height: var(--space-larger);
+    @apply h-12;
  }

  &.button--only-icon {
-    justify-content: center;
-    padding-left: 0;
-    padding-right: 0;
-    width: $default-button-height;
+    @apply justify-center pl-0 pr-0 w-10;

    &.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;
-    margin: 0;
-    padding: 0;
+    @apply h-auto m-0 p-0;

    &:hover {
-      text-decoration: underline;
+      @apply underline;
    }
  }
-
 }
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/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;
  }

--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -126,6 +126,7 @@
      class="conversations-list"
      :class="{ 'is-context-menu-open': isContextMenuOpen }"
    >
+      <div>
        <conversation-card
          v-for="chat in conversationList"
          :key="chat.id"
@@ -146,7 +147,7 @@
          @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') }}
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/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;
  }
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/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>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/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>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/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';
      }
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/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>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/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">
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/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);
 }
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ b/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,7 +7,6 @@
      @open-key-shortcut-modal="toggleKeyShortcutModal"
      @close-key-shortcut-modal="closeKeyShortcutModal"
    />
-    <div class="secondary-sidebar">
    <help-center-sidebar
      v-if="showHelpCenterSidebar"
      :header-title="headerTitle"
@@ -19,7 +18,6 @@
      @open-popover="openPortalPopover"
      @open-modal="onClickOpenAddCategoryModal"
    />
-    </div>
    <section class="app-content columns">
      <router-view />
      <command-bar />
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/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>
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/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 {
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/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>
--- a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -1,6 +1,10 @@
 <template>
-  <li class="dropdown-menu--header" :tabindex="null" :aria-disabled="true">
-    <span class="title">{{ title }}</span>
+  <li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
+    <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>
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/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;
-      white-space: nowrap;
-      width: 100%;
-      text-align: left;
-      color: var(--s-700);
-
-      &:hover {
-        background: var(--color-background);
-      }
-
-      &:focus {
-        background: var(--color-background);
-      }
+      @apply inline-flex whitespace-nowrap w-full text-left rtl:text-right;
    }
  }
 }
+
+// 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>
--- a/app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
+++ b/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>