chore: Remove older UI (#11720)

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -1,43 +1,29 @@
 <script>
 import { defineAsyncComponent, ref } from 'vue';
-import { mapGetters } from 'vuex';
 
 import NextSidebar from 'next/sidebar/Sidebar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
-import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
-import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+import AddAccountModal from 'dashboard/components/app/AddAccountModal.vue';
 import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
 
 import wootConstants from 'dashboard/constants/globals';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 const CommandBar = defineAsyncComponent(
   () => import('./commands/commandbar.vue')
 );
 
-const Sidebar = defineAsyncComponent(
-  () => import('../../components/layout/Sidebar.vue')
-);
-import { emitter } from 'shared/helpers/mitt';
 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
 export default {
   components: {
     NextSidebar,
-    Sidebar,
     CommandBar,
     WootKeyShortcutModal,
     AddAccountModal,
-    AccountSelector,
-    AddLabelModal,
-    NotificationPanel,
     UpgradePage,
     CopilotLauncher,
     CopilotContainer,
@@ -58,20 +44,11 @@ export default {
     return {
       showAccountModal: false,
       showCreateAccountModal: false,
-      showAddLabelModal: false,
       showShortcutModal: false,
-      isNotificationPanel: false,
       displayLayoutType: '',
-      hasBanner: '',
     };
   },
   computed: {
-    ...mapGetters({
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-    currentRoute() {
-      return ' ';
-    },
     showUpgradePage() {
       return this.upgradePageRef?.shouldShowUpgradePage;
     },
@@ -82,10 +59,6 @@ export default {
         'agent_list',
       ].includes(this.$route.name);
     },
-    isSidebarOpen() {
-      const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
-      return showSecondarySidebar;
-    },
     previouslyUsedDisplayType() {
       const {
         previously_used_conversation_display_type: conversationDisplayType,
@@ -97,12 +70,6 @@ export default {
         this.uiSettings;
       return showSecondarySidebar;
     },
-    showNextSidebar() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
   },
   watch: {
     displayLayoutType() {
@@ -121,22 +88,13 @@ export default {
   },
   mounted() {
     this.handleResize();
-    this.$nextTick(this.checkBanner);
     window.addEventListener('resize', this.handleResize);
-    window.addEventListener('resize', this.checkBanner);
-    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   unmounted() {
     window.removeEventListener('resize', this.handleResize);
-    window.removeEventListener('resize', this.checkBanner);
-    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
 
   methods: {
-    checkBanner() {
-      this.hasBanner =
-        document.getElementsByClassName('woot-banner').length > 0;
-    },
     handleResize() {
       const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
       let throttled = false;
@@ -156,12 +114,6 @@ export default {
         }
       }, delay);
     },
-    toggleSidebar() {
-      this.updateUISettings({
-        show_secondary_sidebar: !this.isSidebarOpen,
-        previously_used_sidebar_view: !this.isSidebarOpen,
-      });
-    },
     openCreateAccountModal() {
       this.showAccountModal = false;
       this.showCreateAccountModal = true;
@@ -178,42 +130,18 @@ export default {
     closeKeyShortcutModal() {
       this.showShortcutModal = false;
     },
-    showAddLabelPopup() {
-      this.showAddLabelModal = true;
-    },
-    hideAddLabelPopup() {
-      this.showAddLabelModal = false;
-    },
-    openNotificationPanel() {
-      this.isNotificationPanel = true;
-    },
-    closeNotificationPanel() {
-      this.isNotificationPanel = false;
-    },
   },
 };
 </script>
 
 <template>
-  <div class="flex flex-wrap app-wrapper dark:text-slate-300">
+  <div class="flex flex-wrap app-wrapper text-n-slate-12">
     <NextSidebar
-      v-if="showNextSidebar"
       @toggle-account-modal="toggleAccountModal"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-create-account-modal="openCreateAccountModal"
     />
-    <Sidebar
-      v-else
-      :route="currentRoute"
-      :has-banner="hasBanner"
-      :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
-    />
     <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <UpgradePage
         v-show="showUpgradePage"
@@ -225,23 +153,7 @@ export default {
         <CommandBar />
         <CopilotLauncher />
         <CopilotContainer />
-
-        <NotificationPanel
-          v-if="isNotificationPanel"
-          @close="closeNotificationPanel"
-        />
-        <woot-modal
-          v-model:show="showAddLabelModal"
-          :on-close="hideAddLabelPopup"
-        >
-          <AddLabelModal @close="hideAddLabelPopup" />
-        </woot-modal>
       </template>
-      <AccountSelector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
-      />
       <AddAccountModal
         :show="showCreateAccountModal"
         @close-account-create-modal="closeCreateAccountModal"

app/javascript/dashboard/routes/dashboard/commands/commandbar.vue

@@ -95,7 +95,7 @@ onMounted(setCommandBarData);
 
 <style lang="scss">
 ninja-keys {
-  --ninja-accent-color: var(--w-500);
+  --ninja-accent-color: rgba(39, 129, 246, 1);
   --ninja-font-family: 'Inter';
   z-index: 9999;
 }

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

@@ -71,7 +71,7 @@ export default {
 
 <style lang="scss" scoped>
 .no-label-message {
-  @apply text-slate-500 dark:text-slate-400 mb-4;
+  @apply text-n-slate-11 mb-4;
 }
 
 ::v-deep .conversation {

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

@@ -11,7 +11,7 @@ export default {
 <template>
   <div class="overflow-auto" :class="compact ? 'py-0 px-0' : 'py-3 px-4'">
     <div class="items-center flex justify-between mb-1.5">
-      <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
+      <span class="text-sm font-medium text-n-slate-12">
         {{ title }}
       </span>
       <slot name="button" />

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

@@ -304,7 +304,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 ::v-deep {
   .contact--profile {
-    @apply pb-3 border-b border-solid border-slate-75 dark:border-slate-700;
+    @apply pb-3 border-b border-solid border-n-weak;
   }
 
   .conversation--actions .multiselect-wrap--small {

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

@@ -207,7 +207,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-white dark:bg-slate-900">
+  <div class="bg-n-background">
     <div class="multiselect-wrap--small">
       <ContactDetailsItem
         compact

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

@@ -155,7 +155,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative bg-white dark:bg-slate-900">
+  <div class="relative bg-n-background">
     <div class="flex justify-between">
       <div class="flex justify-between w-full mb-1">
         <div>
@@ -163,7 +163,7 @@ export default {
             <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
-          <p v-else class="m-0 text-sm text-slate-400 dark:text-slate-700">
+          <p v-else class="m-0 text-sm text-n-slate-10">
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
@@ -185,10 +185,7 @@ export default {
         :show-more-thumbnails-count="showMoreThumbs"
         :users-list="thumbnailList"
       />
-      <p
-        v-if="isUserWatching"
-        class="m-0 text-sm text-slate-300 dark:text-slate-300"
-      >
+      <p v-if="isUserWatching" class="m-0 text-sm text-n-slate-10">
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
       <NextButton
@@ -207,12 +204,15 @@ export default {
           onCloseDropdown();
         }
       "
-      :class="{ 'dropdown-pane--open': showDropDown }"
-      class="dropdown-pane"
+      :class="{
+        'block visible': showDropDown,
+        'hidden invisible': !showDropDown,
+      }"
+      class="border rounded-lg shadow-lg bg-n-alpha-3 absolute backdrop-blur-[100px] border-n-strong dark:border-n-strong p-2 z-[9999] box-border top-8 w-full"
     >
       <div class="flex items-center justify-between mb-1">
         <h4
-          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-n-slate-12"
         >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
@@ -227,9 +227,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.dropdown-pane {
-  @apply box-border top-8 w-full;
-}
-</style>

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

@@ -4,12 +4,10 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
-import PopOverSearch from './search/PopOverSearch.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
 import { emitter } from 'shared/helpers/mitt';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import SidepanelSwitch from 'dashboard/components-next/Conversation/SidepanelSwitch.vue';
 import ConversationSidebar from 'dashboard/components/widgets/conversation/ConversationSidebar.vue';
 
@@ -17,7 +15,6 @@ export default {
   components: {
     ChatList,
     ConversationBox,
-    PopOverSearch,
     CmdBarConversationSnooze,
     SidepanelSwitch,
     ConversationSidebar,
@@ -75,7 +72,6 @@ export default {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -100,12 +96,6 @@ export default {
       const { is_contact_sidebar_open: isContactSidebarOpen } = this.uiSettings;
       return isContactSidebarOpen;
     },
-    showPopOverSearch() {
-      return !this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.CHATWOOT_V4
-      );
-    },
   },
   watch: {
     conversationId() {
@@ -215,13 +205,7 @@ export default {
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
       @conversation-load="onConversationLoad"
-    >
-      <PopOverSearch
-        v-if="showPopOverSearch"
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
-      />
-    </ChatList>
+    />
     <ConversationBox
       v-if="showMessageView"
       :inbox-id="inboxId"

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -59,10 +59,10 @@ const resolvedMacro = computed(() => {
     >
       <div
         v-if="i !== macro.actions.length - 1"
-        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-slate-75 dark:bg-slate-600"
+        class="top-[0.390625rem] absolute -bottom-1 left-0 w-px bg-n-slate-6"
       />
       <div
-        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-slate-600"
+        class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-n-solid-1 border-2 border-solid border-n-weak dark:border-n-slate-6"
       />
       <p class="mb-1 text-xs text-n-slate-11">
         {{ $t(`MACROS.ACTIONS.${action.actionName}`) }}

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -346,7 +346,7 @@ export default {
         </label>
         <div
           v-if="isPhoneNumberNotValid || !phoneNumber"
-          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
+          class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-n-amber-5 text-n-amber-12 bg-n-amber-3"
         >
           {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
         </div>
@@ -394,13 +394,13 @@ export default {
         class="flex items-stretch w-full mb-4"
       >
         <span
-          class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
+          class="flex items-center h-10 px-2 text-sm border-solid border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md bg-n-solid-3 text-n-slate-11 border-n-weak"
         >
           {{ socialProfile.prefixURL }}
         </span>
         <input
           v-model="socialProfileUserNames[socialProfile.key]"
-          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
+          class="input-group-field ltr:!rounded-l-none rtl:!rounded-r-none !mb-0"
           type="text"
         />
       </div>

app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue

@@ -41,7 +41,7 @@ export default {
       <fluent-icon
         :icon="`brand-${profile.key}`"
         size="16"
-        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+        class="text-n-slate-11 hover:text-n-slate-10"
       />
     </a>
   </div>

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -102,20 +102,21 @@ export default {
           @remove="removeLabelFromConversation"
         />
 
-        <div class="dropdown-wrap">
-          <div
-            :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-            class="dropdown-pane"
-          >
-            <LabelDropdown
-              v-if="showSearchDropdownLabel"
-              :account-labels="accountLabels"
-              :selected-labels="savedLabels"
-              :allow-creation="isAdmin"
-              @add="addLabelToConversation"
-              @remove="removeLabelFromConversation"
-            />
-          </div>
+        <div
+          :class="{
+            'block visible': showSearchDropdownLabel,
+            'hidden invisible': !showSearchDropdownLabel,
+          }"
+          class="border rounded-lg bg-n-alpha-3 top-6 backdrop-blur-[100px] absolute w-full shadow-lg border-n-strong dark:border-n-strong p-2 box-border z-[9999]"
+        >
+          <LabelDropdown
+            v-if="showSearchDropdownLabel"
+            :account-labels="accountLabels"
+            :selected-labels="savedLabels"
+            :allow-creation="isAdmin"
+            @add="addLabelToConversation"
+            @remove="removeLabelFromConversation"
+          />
         </div>
       </div>
     </div>
@@ -131,28 +132,8 @@ export default {
   width: 100%;
 
   .label-wrap {
-    line-height: var(--space-medium);
+    line-height: 1.5rem;
     position: relative;
-
-    .dropdown-wrap {
-      display: flex;
-      left: -1px;
-      margin-right: var(--space-medium);
-      position: absolute;
-      top: var(--space-medium);
-      width: 100%;
-
-      .dropdown-pane {
-        width: 100%;
-        box-sizing: border-box;
-      }
-    }
   }
 }
-
-.error {
-  color: var(--r-500);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-medium);
-}
 </style>

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,78 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import SwitchLayout from './SwitchLayout.vue';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-
-export default {
-  components: {
-    SwitchLayout,
-  },
-  directives: {
-    focus: {
-      inserted(el) {
-        el.focus();
-      },
-    },
-  },
-  props: {
-    isOnExpandedLayout: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['toggleConversationLayout'],
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-    searchUrl() {
-      return frontendURL(`accounts/${this.accountId}/search`);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative">
-    <div
-      class="flex px-4 pb-1 justify-between items-center flex-row gap-1 pt-2.5 border-b border-transparent"
-    >
-      <woot-sidemenu-icon
-        size="xs"
-        class="relative top-0 ltr:-ml-1.5 rtl:-mr-1.5 flex-shrink-0 focus:!bg-n-solid-3 dark:!hover:bg-n-solid-2 hover:!bg-n-alpha-2"
-      />
-      <router-link
-        :to="searchUrl"
-        class="inline-flex items-center flex-1 h-6 min-w-0 gap-1 px-2 py-0 text-left rounded-md rtl:mr-2.5 search-link rtl:text-right bg-n-slate-9/10 hover:bg-n-slate-3"
-      >
-        <div class="flex flex-shrink-0">
-          <fluent-icon
-            icon="search"
-            class="search--icon text-n-slate-11"
-            size="16"
-          />
-        </div>
-        <p
-          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-n-slate-11"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </p>
-      </router-link>
-      <SwitchLayout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggleConversationLayout')"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-link {
-  &:hover {
-    .search--icon,
-    .search--label {
-      @apply hover:text-woot-500 dark:hover:text-woot-500;
-    }
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue

@@ -50,18 +50,18 @@ const handleCopy = async e => {
 
 <template>
   <button
-    class="flex flex-col w-full gap-1 px-2 py-1 bg-white border border-transparent border-solid rounded-md cursor-pointer dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 group focus:outline-none focus:bg-slate-25 focus:border-slate-500 dark:focus:border-slate-400 dark:focus:bg-slate-800"
+    class="flex flex-col w-full gap-1 px-2 py-1 border border-transparent border-solid rounded-md cursor-pointer hover:bg-n-slate-3 group focus:outline-none focus:bg-n-slate-3"
     @click="handlePreview"
   >
     <h4
-      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-slate-900 dark:text-slate-25 hover:underline group-hover:underline"
+      class="w-full mb-0 -mx-1 text-sm rounded-sm ltr:text-left rtl:text-right text-n-slate-12 hover:underline group-hover:underline"
     >
       {{ title }}
     </h4>
 
     <div class="flex content-between items-center gap-0.5 w-full">
       <p
-        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300"
+        class="w-full mb-0 text-sm ltr:text-left rtl:text-right text-n-slate-11"
       >
         {{ locale }}
         {{ ` / ` }}

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue

@@ -47,7 +47,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div class="flex flex-col py-1">
     <div class="flex items-center justify-between py-2 mb-1">
-      <h3 class="text-base text-slate-900 dark:text-slate-25">
+      <h3 class="text-base text-n-slate-12">
         {{ title }}
       </h3>
       <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
@@ -63,7 +63,7 @@ useKeyboardEvents(keyboardEvents);
         ref="searchInputRef"
         type="text"
         :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-n-slate-2 !border-n-weak !bg-n-slate-2 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-n-slate-2 !border-n-weak !bg-n-slate-2 text-sm rounded-md leading-8 text-n-slate-12 shadow-sm ring-2 ring-transparent ring-n-weak border border-solid placeholder:text-n-slate-10 focus:border-n-brand focus:ring-n-brand !mb-0"
         :value="searchQuery"
         @input="onInput"
       />

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue

@@ -137,7 +137,7 @@ export default {
   >
     <div
       v-on-clickaway="onClose"
-      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-900 z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
+      class="flex flex-col px-4 pb-4 rounded-md shadow-md border border-solid border-n-weak bg-n-background z-[1000] max-w-[720px] md:w-[20rem] lg:w-[24rem] xl:w-[28rem] 2xl:w-[32rem] h-[calc(100vh-20rem)] max-h-[40rem]"
     >
       <SearchHeader
         :title="$t('HELP_CENTER.ARTICLE_SEARCH.TITLE')"

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue

@@ -39,13 +39,19 @@ export default {
 
 <template>
   <div
-    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-white dark:bg-slate-900"
+    class="flex justify-end h-full gap-1 py-4 overflow-y-auto bg-n-background"
   >
     <div class="flex flex-col w-full gap-1">
-      <div v-if="isLoading" class="empty-state-message">
+      <div
+        v-if="isLoading"
+        class="text-center flex items-center justify-center px-4 py-8 text-n-slate-10 text-sm"
+      >
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
       </div>
-      <div v-else-if="showNoResults" class="empty-state-message">
+      <div
+        v-else-if="showNoResults"
+        class="text-center flex items-center justify-center px-4 py-8 text-n-slate-10 text-sm"
+      >
         {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
       </div>
       <template v-else>
@@ -65,9 +71,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-.empty-state-message {
-  @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
-}
-</style>

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

@@ -68,17 +68,17 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-white dark:bg-slate-900"
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-n-background"
   >
     <div class="flex flex-col justify-start sm:justify-center gap-6">
       <div class="flex flex-col gap-1.5 items-start sm:items-center">
         <h1
-          class="text-slate-900 dark:text-white text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
+          class="text-n-slate-12 text-left sm:text-center text-4xl sm:text-5xl mb-6 font-semibold"
         >
           {{ $t('HELP_CENTER.UPGRADE_PAGE.TITLE') }}
         </h1>
         <p
-          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-slate-700 dark:text-slate-200"
+          class="max-w-2xl text-base font-normal leading-6 text-left sm:text-center text-n-slate-11"
         >
           {{
             isOnChatwootCloud
@@ -116,14 +116,14 @@ export default {
               :icon="feature.icon"
               icon-lib="lucide"
               :size="26"
-              class="mt-px text-slate-800 dark:text-slate-25"
+              class="mt-px text-n-slate-12"
             />
           </div>
           <div>
-            <h5 class="font-semibold text-lg text-slate-800 dark:text-slate-25">
+            <h5 class="font-semibold text-lg text-n-slate-12">
               {{ feature.title }}
             </h5>
-            <p class="text-sm leading-6 text-slate-700 dark:text-slate-100">
+            <p class="text-sm leading-6 text-n-slate-12">
               {{ feature.description }}
             </p>
           </div>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue

@@ -67,7 +67,7 @@ watch(
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
     <section
       v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
+      class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
     >
       <router-view />
     </section>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue

@@ -69,7 +69,7 @@ onMounted(() => performRouting());
 
 <template>
   <div
-    class="flex items-center justify-center w-full bg-n-background text-slate-600 dark:text-slate-200"
+    class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
   >
     <Spinner />
   </div>

app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue

@@ -1,6 +1,11 @@
 <script>
 import { mapGetters } from 'vuex';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
 export default {
+  components: {
+    Spinner,
+  },
   props: {
     emptyStateMessage: {
       type: String,
@@ -25,14 +30,12 @@ export default {
   <div
     class="items-center justify-center hidden w-full h-full text-center bg-n-background lg:flex"
   >
-    <span v-if="uiFlags.isFetching" class="my-4 spinner" />
+    <div v-if="uiFlags.isFetching" class="flex justify-center my-4">
+      <Spinner class="text-n-brand" />
+    </div>
     <div v-else class="flex flex-col items-center gap-2">
-      <fluent-icon
-        icon="mail-inbox"
-        size="40"
-        class="text-slate-600 dark:text-slate-400"
-      />
-      <span class="text-sm font-medium text-slate-500 dark:text-slate-300">
+      <fluent-icon icon="mail-inbox" size="40" class="text-n-slate-11" />
+      <span class="text-sm font-medium text-n-slate-11">
         {{ emptyMessage }}
       </span>
     </div>

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -9,6 +9,7 @@ import InboxListHeader from './components/InboxListHeader.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import CmdBarConversationSnooze from 'dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 export default {
   components: {
@@ -16,6 +17,7 @@ export default {
     InboxListHeader,
     IntersectionObserver,
     CmdBarConversationSnooze,
+    Spinner,
   },
   setup() {
     const { uiSettings } = useUISettings();
@@ -242,12 +244,12 @@ export default {
           @context-menu-close="isInboxContextMenuOpen = false"
           @click="openConversation(notificationItem)"
         />
-        <div v-if="uiFlags.isFetching" class="text-center">
-          <span class="mt-4 mb-4 spinner" />
+        <div v-if="uiFlags.isFetching" class="flex justify-center my-4">
+          <Spinner class="text-n-brand" />
         </div>
         <p
           v-if="showEmptyState"
-          class="p-4 text-sm font-medium text-center text-slate-400 dark:text-slate-400"
+          class="p-4 text-sm font-medium text-center text-n-slate-10"
         >
           {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
         </p>

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -4,6 +4,7 @@ import { useTrack } from 'dashboard/composables';
 import InboxItemHeader from './components/InboxItemHeader.vue';
 import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -14,6 +15,7 @@ export default {
     InboxItemHeader,
     InboxEmptyState,
     ConversationBox,
+    Spinner,
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
@@ -191,9 +193,9 @@ export default {
       />
       <div
         v-if="isConversationLoading"
-        class="flex items-center h-[calc(100%-56px)] justify-center bg-slate-25 dark:bg-slate-800"
+        class="flex items-center h-[calc(100%-56px)] my-4 justify-center bg-n-solid-1"
       >
-        <span class="my-4 spinner" />
+        <Spinner class="text-n-brand" />
       </div>
       <ConversationBox
         v-else

app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue

@@ -182,12 +182,12 @@ export default {
             type="checkbox"
             :name="option.key"
             :checked="option.selected"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-n-brand dark:checked:bg-n-brand after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            class="m-0 border-[1.5px] shadow border-n-weak appearance-none rounded-[4px] w-4 h-4 dark:bg-n-background focus:ring-1 focus:ring-n-weak dark:focus:ring-n-strong checked:bg-n-brand dark:checked:bg-n-brand after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-n-blue-10 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
             @change="updateDisplayOption(option)"
           />
           <label
             :for="option.key"
-            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
+            class="text-xs font-medium text-n-slate-12 !ml-0 !mr-0 dark:text-n-slate-12"
           >
             {{ option.name }}
           </label>

app/javascript/dashboard/routes/dashboard/inbox/routes.js

@@ -7,8 +7,6 @@ import {
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/inbox-view'),
@@ -20,7 +18,6 @@ export const routes = [
         component: InboxEmptyStateView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
       {
@@ -29,7 +26,6 @@ export const routes = [
         component: InboxDetailView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
-          featureFlag: FEATURE_FLAGS.CHATWOOT_V4,
         },
       },
     ],

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

@@ -1,230 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import NotificationPanelList from './NotificationPanelList.vue';
-import { useTrack } from 'dashboard/composables';
-import { ACCOUNT_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NotificationPanelList,
-    NextButton,
-  },
-  emits: ['close'],
-  data() {
-    return {
-      pageSize: 15,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      meta: 'notifications/getMeta',
-      records: 'notifications/getNotifications',
-      uiFlags: 'notifications/getUIFlags',
-    }),
-    totalUnreadNotifications() {
-      return this.meta.unreadCount;
-    },
-    noUnreadNotificationAvailable() {
-      return this.meta.unreadCount === 0;
-    },
-    getUnreadNotifications() {
-      return this.records.filter(notification => notification.read_at === null);
-    },
-    currentPage() {
-      return Number(this.meta.currentPage);
-    },
-    lastPage() {
-      if (this.totalUnreadNotifications > 15) {
-        return Math.ceil(this.totalUnreadNotifications / this.pageSize);
-      }
-      return 1;
-    },
-    inFirstPage() {
-      const page = Number(this.meta.currentPage);
-      return page === 1;
-    },
-    inLastPage() {
-      return this.currentPage === this.lastPage;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('notifications/get', { page: 1 });
-  },
-  methods: {
-    onPageChange(page) {
-      this.$store.dispatch('notifications/get', { page });
-    },
-    openConversation(notification) {
-      const {
-        primary_actor_id: primaryActorId,
-        primary_actor_type: primaryActorType,
-        primary_actor: { id: conversationId },
-        notification_type: notificationType,
-      } = notification;
-
-      useTrack(ACCOUNT_EVENTS.OPEN_CONVERSATION_VIA_NOTIFICATION, {
-        notificationType,
-      });
-      this.$store.dispatch('notifications/read', {
-        id: notification.id,
-        primaryActorId,
-        primaryActorType,
-        unreadCount: this.meta.unreadCount,
-      });
-      this.$router.push({
-        name: 'inbox_conversation',
-        params: { conversation_id: conversationId },
-      });
-      this.$emit('close');
-    },
-    onClickNextPage() {
-      if (!this.inLastPage) {
-        const page = this.currentPage + 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickPreviousPage() {
-      if (!this.inFirstPage) {
-        const page = this.currentPage - 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickFirstPage() {
-      if (!this.inFirstPage) {
-        const page = 1;
-        this.onPageChange(page);
-      }
-    },
-    onClickLastPage() {
-      if (!this.inLastPage) {
-        const page = this.lastPage;
-        this.onPageChange(page);
-      }
-    },
-    onMarkAllDoneClick() {
-      useTrack(ACCOUNT_EVENTS.MARK_AS_READ_NOTIFICATIONS);
-      this.$store.dispatch('notifications/readAll');
-    },
-    openAudioNotificationSettings() {
-      this.$router.push({ name: 'profile_settings_index' });
-      this.closeNotificationPanel();
-      this.$nextTick(() => {
-        const audioSettings = document.getElementById(
-          'profile-settings-notifications'
-        );
-        if (audioSettings) {
-          // TODO [ref](https://github.com/chatwoot/chatwoot/pull/6233#discussion_r1069636890)
-          audioSettings.scrollIntoView(
-            { behavior: 'smooth', block: 'start' },
-            150
-          );
-        }
-      });
-    },
-    closeNotificationPanel() {
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="modal-mask">
-    <div
-      v-on-clickaway="closeNotificationPanel"
-      class="flex-col h-[90vh] w-[32.5rem] 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="flex flex-row items-center justify-between w-full px-6 pt-5 pb-3 border-b border-solid border-slate-50 dark:border-slate-700"
-      >
-        <div class="flex items-center">
-          <span class="text-xl font-bold text-slate-800 dark:text-slate-100">
-            {{ $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.TITLE') }}
-          </span>
-          <span
-            v-if="totalUnreadNotifications"
-            class="px-2 py-1 ml-2 mr-2 font-semibold rounded-md text-slate-700 dark:text-slate-200 text-xxs bg-slate-50 dark:bg-slate-700"
-          >
-            {{ totalUnreadNotifications }}
-          </span>
-        </div>
-        <div class="flex gap-2">
-          <NextButton
-            v-if="!noUnreadNotificationAvailable"
-            faded
-            xs
-            icon="i-lucide-list-check"
-            :is-loading="uiFlags.isUpdating"
-            :label="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
-            @click="onMarkAllDoneClick"
-          />
-          <NextButton
-            faded
-            xs
-            slate
-            icon="i-lucide-settings"
-            @click="openAudioNotificationSettings"
-          />
-          <NextButton
-            ghost
-            xs
-            slate
-            icon="i-lucide-x"
-            @click="closeNotificationPanel"
-          />
-        </div>
-      </div>
-      <NotificationPanelList
-        :notifications="getUnreadNotifications"
-        :is-loading="uiFlags.isFetching"
-        :on-click-notification="openConversation"
-        :in-last-page="inLastPage"
-        @close="closeNotificationPanel"
-      />
-      <div
-        v-if="records.length !== 0"
-        class="flex items-center justify-between px-5 py-1"
-      >
-        <div class="flex">
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevrons-left"
-            :disabled="inFirstPage"
-            @click="onClickFirstPage"
-          />
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevron-left"
-            class="ltr:-ml-3 rtl:-mr-3"
-            :disabled="inFirstPage"
-            @click="onClickPreviousPage"
-          />
-        </div>
-        <span class="font-semibold text-xxs text-slate-500 dark:text-slate-400">
-          {{ currentPage }} - {{ lastPage }}
-        </span>
-        <div class="flex">
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevron-right"
-            class="ltr:-mr-3 rtl:-ml-3"
-            :disabled="inLastPage"
-            @click="onClickNextPage"
-          />
-          <NextButton
-            ghost
-            slate
-            icon="i-lucide-chevrons-right"
-            :disabled="inLastPage"
-            @click="onClickLastPage"
-          />
-        </div>
-      </div>
-      <div v-else />
-    </div>
-  </div>
-</template>

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

@@ -1,106 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    Thumbnail,
-    NextButton,
-  },
-  props: {
-    notificationItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['openNotification'],
-  computed: {
-    notificationAssignee() {
-      const { primary_actor: primaryActor } = this.notificationItem;
-      return primaryActor?.meta?.assignee;
-    },
-    hasNotificationAssignee() {
-      return !!this.notificationAssignee;
-    },
-    notificationAssigneeName() {
-      return this.notificationAssignee?.name || '';
-    },
-    notificationAssigneeThumbnail() {
-      return this.notificationAssignee?.thumbnail || '';
-    },
-  },
-  methods: {
-    dynamicTime,
-    onClickOpenNotification() {
-      this.$emit('openNotification', this.notificationItem);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="w-full">
-    <NextButton
-      link
-      slate
-      class="!w-full !h-auto"
-      @click="onClickOpenNotification()"
-    >
-      <div
-        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
-      >
-        <div
-          v-if="!notificationItem.read_at"
-          class="w-2 h-2 rounded-full bg-woot-500"
-        />
-        <div v-else class="flex w-2" />
-        <div
-          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
-        >
-          <div class="flex justify-between">
-            <div class="flex items-center">
-              <span class="font-bold text-slate-800 dark:text-slate-100">
-                {{
-                  `#${
-                    notificationItem.primary_actor
-                      ? notificationItem.primary_actor.id
-                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
-                  }`
-                }}
-              </span>
-              <span
-                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
-              >
-                {{
-                  $t(
-                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
-                  )
-                }}
-              </span>
-            </div>
-            <div v-if="hasNotificationAssignee">
-              <Thumbnail
-                :src="notificationAssigneeThumbnail"
-                size="16px"
-                :username="notificationAssigneeName"
-              />
-            </div>
-          </div>
-          <div class="flex w-full">
-            <span
-              class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
-            >
-              {{ notificationItem.push_message_title }}
-            </span>
-          </div>
-          <span
-            class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
-          >
-            {{ dynamicTime(notificationItem.last_activity_at) }}
-          </span>
-        </div>
-      </div>
-    </NextButton>
-  </div>
-</template>

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

@@ -1,81 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import NotificationPanelItem from './NotificationPanelItem.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NotificationPanelItem,
-    Spinner,
-    EmptyState,
-    NextButton,
-  },
-  props: {
-    notifications: {
-      type: Array,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: true,
-    },
-    onClickNotification: {
-      type: Function,
-      default: () => {},
-    },
-    inLastPage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['close'],
-  computed: {
-    showEmptyResult() {
-      return !this.isLoading && this.notifications.length === 0;
-    },
-  },
-  methods: {
-    openNotificationPage() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$router.push({
-          name: 'notifications_index',
-        });
-      }
-      this.$emit('close');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <NotificationPanelItem
-      v-for="notificationItem in notifications"
-      v-show="!isLoading"
-      :key="notificationItem.id"
-      :notification-item="notificationItem"
-      @open-notification="onClickNotification"
-    />
-    <EmptyState
-      v-if="showEmptyResult"
-      :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
-    />
-    <NextButton
-      v-if="!isLoading && inLastPage"
-      ghost
-      class="!w-full mt-3"
-      :label="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.ALL_NOTIFICATIONS')"
-      @click="openNotificationPage"
-    />
-    <div
-      v-if="isLoading"
-      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
-    >
-      <Spinner />
-      <span>{{
-        $t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.LOADING_UNREAD_MESSAGE')
-      }}</span>
-    </div>
-  </div>
-</template>

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

@@ -66,7 +66,7 @@ export default {
         @click="onMarkAllDoneClick"
       />
     </div>
-    <table class="woot-table notifications-table overflow-auto">
+    <table class="notifications-table overflow-auto">
       <tbody v-show="!isLoading">
         <tr
           v-for="notificationItem in notifications"
@@ -74,9 +74,10 @@ export default {
           :class="{
             'is-unread': notificationItem.read_at === null,
           }"
+          class="border-b border-n-weak"
           @click="() => onClickNotification(notificationItem)"
         >
-          <td>
+          <td class="p-2.5 text-n-slate-12">
             <div
               class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
             >
@@ -109,12 +110,12 @@ export default {
             <Thumbnail
               v-if="notificationItem.primary_actor.meta.assignee"
               :src="notificationItem.primary_actor.meta.assignee.thumbnail"
-              size="36px"
+              size="28px"
               :username="notificationItem.primary_actor.meta.assignee.name"
             />
           </td>
           <td>
-            <div class="text-right timestamp--column">
+            <div class="text-right timestamp--column ltr:mr-2 rtl:ml-2">
               <span class="notification--created-at">
                 {{ dynamicTime(notificationItem.last_activity_at) }}
               </span>
@@ -141,10 +142,8 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'dashboard/assets/scss/mixins';
-
 .notification--title {
-  @apply text-sm m-0 text-slate-800 dark:text-slate-100;
+  @apply text-sm m-0 text-n-slate-12;
 }
 
 .notifications-table {
@@ -153,11 +152,11 @@ export default {
       @apply cursor-pointer;
 
       &:hover {
-        @apply bg-slate-50 dark:bg-slate-800;
+        @apply bg-n-slate-3;
       }
 
       &.is-active {
-        @apply bg-slate-100 dark:bg-slate-700;
+        @apply bg-n-slate-4 dark:bg-n-slate-6;
       }
 
       > td {
@@ -182,11 +181,11 @@ export default {
 }
 
 .notification--unread-indicator {
-  @apply w-2.5 h-2.5 rounded-full bg-woot-500 dark:bg-woot-500;
+  @apply w-2.5 h-2.5 rounded-full bg-n-brand;
 }
 
 .notification--created-at {
-  @apply text-slate-700 dark:text-slate-200 text-xs;
+  @apply text-n-slate-11 text-xs;
 }
 
 .notification--type {
@@ -206,6 +205,6 @@ export default {
 }
 
 .notification--message-title {
-  @apply text-slate-700 dark:text-slate-100;
+  @apply text-n-slate-12;
 }
 </style>

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

@@ -68,7 +68,7 @@ export default {
         :on-mark-all-done-click="onMarkAllDoneClick"
       />
       <TableFooter
-        class="border-t border-slate-75 dark:border-slate-700/50"
+        class="border-t border-n-weak"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
@@ -77,17 +77,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.notification--page {
-  background: var(--white);
-  overflow-y: auto;
-  width: 100%;
-}
-
-.notification--content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-</style>

app/javascript/dashboard/routes/dashboard/notifications/routes.js

@@ -11,7 +11,6 @@ export const routes = [
       headerTitle: '',
       icon: '',
       showNewButton: false,
-      showSidemenuIcon: false,
     },
     children: [
       {

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

@@ -35,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    showSidemenuIcon: {
-      type: Boolean,
-      default: true,
-    },
   },
   setup() {
     const { isAdmin } = useAdmin();
@@ -59,7 +55,6 @@ export default {
     class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
   >
     <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
-      <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <BackButton
         v-if="showBackButton"
         :button-label="backButtonLabel"
@@ -68,7 +63,7 @@ export default {
       />
 
       <slot />
-      <span class="text-xl font-medium text-slate-900 dark:text-slate-100">
+      <span class="text-xl font-medium text-n-slate-12">
         {{ headerTitle }}
       </span>
     </h1>

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

@@ -30,7 +30,7 @@ defineProps({
       </slot>
       <p
         v-else-if="noRecordsFound"
-        class="flex-1 py-20 text-slate-700 dark:text-slate-100 flex items-center justify-center text-base"
+        class="flex-1 py-20 text-n-slate-12 flex items-center justify-center text-base"
       >
         {{ noRecordsMessage }}
       </p>

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

@@ -9,14 +9,12 @@ export default {
 
 <template>
   <div class="flex flex-col w-full items-start mb-4">
-    <h2
-      class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100 break-words"
-    >
+    <h2 class="text-xl font-medium mb-1 text-n-slate-12 break-words">
       {{ headerTitle }}
     </h2>
     <p
       v-dompurify-html="headerContent"
-      class="text-sm w-full text-slate-600 dark:text-slate-300"
+      class="text-sm w-full text-n-slate-11"
     />
   </div>
 </template>

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

@@ -11,7 +11,6 @@ const props = defineProps({
   newButtonRoutes: { type: Array, default: () => [] },
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
-  showSidemenuIcon: { type: Boolean, default: true },
   fullWidth: { type: Boolean, default: false },
 });
 
@@ -45,7 +44,6 @@ const showSettingsHeader = computed(
         :show-back-button="showBackButton"
         :back-url="backUrl"
         :show-new-button="showNewButton"
-        :show-sidemenu-icon="showSidemenuIcon"
         class="sticky top-0 z-20"
         :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
       />

app/javascript/dashboard/routes/dashboard/settings/account/components/AccountDelete.vue

@@ -106,9 +106,7 @@ async function clearDeletionMark() {
     with-border
   >
     <div v-if="isMarkedForDeletion">
-      <div
-        class="p-4 flex-grow-0 flex-shrink-0 flex-[50%] bg-red-50 dark:bg-red-900 rounded"
-      >
+      <div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%] bg-n-ruby-4 rounded">
         <p class="mb-4">
           {{ markedForDeletionMessage }}
         </p>

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

@@ -159,7 +159,7 @@ const confirmDeletion = () => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="divide-y divide-n-weak">
         <tbody class="divide-y divide-n-weak text-n-slate-11">
           <tr v-for="(agent, index) in agentList" :key="agent.email">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
@@ -190,7 +190,7 @@ const confirmDeletion = () => {
                 {{ getAgentRoleName(agent) }}
 
                 <div
-                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-slate-50 shadow-lg top-14 md:top-12 dark:bg-slate-800 dark:border-slate-700"
+                  class="absolute left-0 z-10 hidden max-w-[300px] w-auto bg-white rounded-xl border border-n-weak shadow-lg top-14 md:top-12 dark:bg-n-solid-2"
                   :class="{ 'group-hover:block': agent.custom_role_id }"
                 >
                   <div class="flex flex-col gap-1 p-4">

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -246,7 +246,10 @@ export default {
               @close="onTouch"
               @tag="addTagValue"
             />
-            <label v-show="isMultiselectInvalid" class="error-message">
+            <label
+              v-show="isMultiselectInvalid"
+              class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
+            >
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
             </label>
           </div>
@@ -296,26 +299,12 @@ export default {
 
 <style lang="scss" scoped>
 .key-value {
-  padding: 0 var(--space-small) var(--space-small) 0;
+  padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
 
 .multiselect--wrap {
-  margin-bottom: var(--space-normal);
-
-  .error-message {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-normal);
-  }
-
-  .invalid {
-    ::v-deep {
-      .multiselect__tags {
-        border: 1px solid var(--r-400);
-      }
-    }
-  }
+  margin-bottom: 1rem;
 }
 
 ::v-deep {
@@ -328,7 +317,7 @@ export default {
   }
 
   .multiselect--active .multiselect__tags {
-    border-radius: var(--border-radius-normal);
+    border-radius: 0.3125rem;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -100,9 +100,7 @@ const tableHeaders = computed(() => {
           {{ tableHeader }}
         </th>
       </thead>
-      <tbody
-        class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-      >
+      <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
         <tr v-for="attribute in attributes" :key="attribute.attribute_key">
           <td
             class="py-4 ltr:pr-4 rtl:pl-4 overflow-hidden whitespace-nowrap text-ellipsis"

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -236,7 +236,10 @@ export default {
             taggable
             @tag="addTagValue"
           />
-          <label v-show="isMultiselectInvalid" class="error-message">
+          <label
+            v-show="isMultiselectInvalid"
+            class="text-n-ruby-9 dark:text-n-ruby-9 text-sm font-normal mt-1"
+          >
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
           </label>
         </div>
@@ -286,26 +289,12 @@ export default {
 
 <style lang="scss" scoped>
 .key-value {
-  padding: 0 var(--space-small) var(--space-small) 0;
+  padding: 0 0.5rem 0.5rem 0;
   font-family: monospace;
 }
 
 .multiselect--wrap {
-  margin-bottom: var(--space-normal);
-
-  .error-message {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-normal);
-  }
-
-  .invalid {
-    ::v-deep {
-      .multiselect__tags {
-        border: 1px solid var(--r-400);
-      }
-    }
-  }
+  margin-bottom: 1rem;
 }
 
 ::v-deep {
@@ -318,7 +307,7 @@ export default {
   }
 
   .multiselect--active .multiselect__tags {
-    border-radius: var(--border-radius-normal);
+    border-radius: 0.3125rem;
   }
 }
 </style>

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

@@ -79,7 +79,7 @@ const onClickTabChange = index => {
     </template>
     <template #preBody>
       <woot-tabs
-        class="font-medium [&_.tabs]:p-0 mb-4"
+        class="font-medium [&_ul]:p-0 mb-4"
         :index="selectedTabIndex"
         @change="onClickTabChange"
       >
@@ -89,6 +89,7 @@ const onClickTabChange = index => {
           :index="index"
           :name="tab.name"
           :show-badge="false"
+          is-compact
         />
       </woot-tabs>
     </template>

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

@@ -83,7 +83,7 @@ const tableHeaders = computed(() => {
       feature-name="audit_logs"
     />
 
-    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+    <div class="mt-6 flex-1 text-n-slate-11">
       <woot-loading-state
         v-if="uiFlags.fetchingList"
         :message="$t('AUDIT_LOGS.LOADING')"
@@ -95,7 +95,7 @@ const tableHeaders = computed(() => {
         {{ $t('AUDIT_LOGS.LIST.404') }}
       </p>
       <div v-else class="min-w-full overflow-x-auto">
-        <table class="divide-y divide-slate-75 dark:divide-slate-700">
+        <table class="divide-y divide-n-weak">
           <thead>
             <th
               v-for="thHeader in tableHeaders"
@@ -128,7 +128,7 @@ const tableHeaders = computed(() => {
           :current-page="Number(meta.currentPage)"
           :total-count="meta.totalEntries"
           :page-size="meta.perPage"
-          class="border-slate-50 dark:border-slate-800 border-t !px-0 py-4"
+          class="border-n-weak border-t !px-0 py-4"
           @page-change="onPageChange"
         />
       </div>

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -215,7 +215,7 @@ export default {
           </label>
           <p
             v-if="hasAutomationMutated"
-            class="text-xs text-right text-green-500 pt-1 dark:text-green-500"
+            class="text-xs text-right text-n-teal-10 pt-1"
           >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -337,7 +337,7 @@ export default {
     @apply m-0;
   }
   .info-message {
-    @apply text-xs text-green-500 dark:text-green-500 text-right;
+    @apply text-xs text-n-teal-10  text-right;
   }
 
   @apply mb-6;

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

@@ -196,7 +196,7 @@ const tableHeaders = computed(() => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"

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

@@ -141,14 +141,11 @@ const tableHeaders = computed(() => {
       />
       <p
         v-else-if="!records.length"
-        class="flex flex-col items-center justify-center h-full text-base text-slate-600 dark:text-slate-300 py-8"
+        class="flex flex-col items-center justify-center h-full text-base text-n-slate-11 py-8"
       >
         {{ $t('CANNED_MGMT.LIST.404') }}
       </p>
-      <table
-        v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -51,10 +51,10 @@ const openInNewTab = url => {
       <div class="flex items-center gap-3">
         <div
           v-if="iconName"
-          class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
+          class="flex items-center w-10 h-10 p-1 rounded-full bg-n-blue-2"
         >
           <div
-            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+            class="flex items-center justify-center w-full h-full rounded-full bg-n-blue-3"
           >
             <fluent-icon
               size="14"

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue

@@ -21,7 +21,7 @@ defineProps({
           class="flex items-center justify-between w-full gap-3 sm:justify-normal whitespace-nowrap"
         >
           <h3
-            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-slate-900 dark:text-slate-25"
+            class="justify-between tracking-tight font-medium truncate w-fit sm:justify-normal text-n-slate-12"
           >
             <slot name="title">
               {{ title }}
@@ -29,9 +29,7 @@ defineProps({
           </h3>
           <slot name="label" />
         </div>
-        <p
-          class="text-base text-slate-600 dark:text-slate-300 max-w-[25rem] w-full line-clamp-2"
-        >
+        <p class="text-base text-n-slate-11 max-w-[25rem] w-full line-clamp-2">
           <slot name="description">
             {{ description }}
           </slot>

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

@@ -147,15 +147,12 @@ const confirmDeletion = () => {
 
     <template #body>
       <CustomRolePaywall v-if="isBehindAPaywall" />
-      <table
-        v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
           >
             <span class="mb-0">
               {{ thHeader }}

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue

@@ -186,7 +186,7 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.selectedPermissions.$error }">
+        <label :class="{ 'text-n-ruby-9': v$.selectedPermissions.$error }">
           {{ $t('CUSTOM_ROLE.FORM.PERMISSIONS.LABEL') }}
         </label>
         <div class="flex flex-col gap-2.5 mb-4 mt-2">

app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue

@@ -79,7 +79,7 @@ const tableHeaders = computed(() => {
         <th
           v-for="thHeader in tableHeaders"
           :key="thHeader"
-          class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+          class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
         >
           <span class="mb-0">
             {{ thHeader }}

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

@@ -114,11 +114,11 @@ export default {
           />
         </div>
         <div v-if="isWhatsAppCloudInbox" class="w-[50%] max-w-[50%] ml-[25%]">
-          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
+          <p class="mt-8 font-medium text-n-slate-11">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
           </p>
           <woot-code lang="html" :script="currentInbox.callback_webhook_url" />
-          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
+          <p class="mt-8 font-medium text-n-slate-11">
             {{
               $t(
                 'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_VERIFICATION_TOKEN'

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

@@ -88,9 +88,7 @@ const openDelete = inbox => {
     </template>
     <template #body>
       <table class="min-w-full overflow-x-auto">
-        <tbody
-          class="divide-y divide-n-weak flex-1 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
           <tr v-for="inbox in inboxesList" :key="inbox.id">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
               <div class="flex items-center flex-row gap-4">

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue

@@ -42,7 +42,7 @@ export default {
     @end="onDragEnd"
   >
     <template #item="{ element: item }">
-      <tr>
+      <tr class="border-b border-n-weak">
         <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
         <td class="pre-chat-field">
           <woot-switch
@@ -98,14 +98,14 @@ export default {
 
 <style scoped lang="scss">
 .pre-chat-field {
-  @apply py-4 px-2 text-slate-700 dark:text-slate-100;
+  @apply py-4 px-2 text-n-slate-12;
 
   svg {
     @apply flex items-center;
   }
 }
 .disabled-text {
-  @apply text-slate-500 dark:text-slate-400;
+  @apply text-n-slate-11;
 }
 
 table {

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue

@@ -127,9 +127,11 @@ export default {
         </div>
         <div class="mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
-          <table class="table w-full table-striped woot-table">
+          <table class="table w-full table-striped mt-4">
             <thead class="thead-dark">
-              <tr>
+              <tr
+                class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
+              >
                 <th scope="col" />
                 <th scope="col" />
                 <th scope="col">

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

@@ -390,7 +390,7 @@ export default {
       :header-title="inboxName"
     >
       <woot-tabs
-        class="settings--tabs"
+        class="[&_ul]:p-0"
         :index="selectedTabIndex"
         :border="false"
         @change="onTabChange"
@@ -401,6 +401,7 @@ export default {
           :index="index"
           :name="tab.name"
           :show-badge="false"
+          is-compact
         />
       </woot-tabs>
     </SettingIntroBanner>
@@ -814,11 +815,3 @@ export default {
     </section>
   </div>
 </template>
-
-<style scoped lang="scss">
-.settings--tabs {
-  ::v-deep .tabs {
-    @apply p-0;
-  }
-}
-</style>

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

@@ -408,7 +408,7 @@ export default {
         />
         <div
           v-if="isWidgetPreview"
-          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-slate-50 dark:bg-slate-900/50 rounded-lg"
+          class="flex flex-col items-center justify-end min-h-[40.625rem] mx-5 mb-5 p-2.5 bg-n-slate-3 rounded-lg"
         >
           <Widget
             :welcome-heading="welcomeHeading"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue

@@ -65,7 +65,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <div class="flex flex-col items-center justify-start h-full text-center">
       <div v-if="hasError" class="max-w-lg mx-auto text-center">

app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue

@@ -193,14 +193,14 @@ export default {
         />
       </div>
       <div v-if="hasError" class="date-error pt-1">
-        <span class="error text-xs text-red-300 dark:text-red-500">{{
+        <span class="error text-xs text-n-ruby-9">{{
           $t('INBOX_MGMT.BUSINESS_HOURS.DAY.VALIDATION_ERROR')
         }}</span>
       </div>
     </div>
     <div
       v-else
-      class="flex items-center flex-shrink-0 flex-grow text-sm text-slate-500 dark:text-slate-300"
+      class="flex items-center flex-shrink-0 flex-grow text-sm text-n-slate-11"
     >
       <span>
         {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.UNAVAILABLE') }}

app/javascript/dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue

@@ -43,22 +43,22 @@ export default {
 
 <style lang="scss" scoped>
 .radio-group-label {
-  margin-bottom: var(--space-smaller);
+  margin-bottom: 0.25rem;
 }
 .radio-group {
   display: inline-block;
-  margin-bottom: var(--space-small);
+  margin-bottom: 0.5rem;
 }
 .radio-group-item {
   float: left;
-  margin-right: var(--space-one);
+  margin-right: 0.625rem;
   .radio-group-item-label {
     display: flex;
     align-items: center;
     cursor: pointer;
 
     .radio-input {
-      margin: 0 var(--space-one) 0 0;
+      margin: 0 0.625rem 0 0;
     }
   }
 }

app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue

@@ -73,7 +73,7 @@ export default {
     <button
       v-for="keyOption in senderNameKeyOptions"
       :key="keyOption.key"
-      class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
+      class="text-n-slate-12 cursor-pointer p-0"
       @click="toggleSenderNameType(keyOption.key)"
     >
       <PreviewCard

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue

@@ -136,7 +136,7 @@ export default {
           />
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
         </label>
-        <p class="mb-4 text-slate-700 dark:text-slate-300">
+        <p class="mb-4 text-n-slate-11">
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">

app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue

@@ -103,12 +103,10 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-@import 'dashboard/assets/scss/variables';
-
 .fb--login {
   img {
     max-width: 240px;
-    padding: $space-normal 0;
+    padding: 1rem 0;
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue

@@ -170,10 +170,7 @@ export default {
         </p>
       </label>
 
-      <div
-        v-if="enableAutoAssignment && isEnterprise"
-        class="max-assignment-container"
-      >
+      <div v-if="enableAutoAssignment && isEnterprise" class="py-3">
         <woot-input
           v-model="maxAssignmentLimit"
           type="number"
@@ -196,13 +193,3 @@ export default {
     </SettingsSection>
   </div>
 </template>
-
-<style scoped lang="scss">
-@import 'dashboard/assets/scss/variables';
-@import 'dashboard/assets/scss/mixins';
-
-.max-assignment-container {
-  padding-top: var(--space-slab);
-  padding-bottom: var(--space-slab);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue

@@ -102,7 +102,7 @@ export default {
         />
       </template>
     </BaseSettingsHeader>
-    <div class="w-full overflow-x-auto text-slate-700 dark:text-slate-200">
+    <div class="w-full overflow-x-auto text-n-slate-11">
       <p
         v-if="!uiFlags.isFetching && !records.length"
         class="flex flex-col items-center justify-center h-full"
@@ -115,18 +115,18 @@ export default {
       />
       <table
         v-if="!uiFlags.isFetching && records.length"
-        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
+        class="min-w-full divide-y divide-n-weak"
       >
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+            class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+        <tbody class="divide-y divide-n-weak">
           <DashboardAppsRow
             v-for="(dashboardAppItem, index) in records"
             :key="dashboardAppItem.id"

app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue

@@ -78,8 +78,10 @@ export default {
       </template>
     </BaseSettingsHeader>
     <div class="w-full">
-      <table v-if="hasConnectedHooks" class="woot-table">
-        <thead>
+      <table v-if="hasConnectedHooks">
+        <thead
+          class="[&>th]:font-semibold [&>th]:tracking-[1px] ltr:[&>th]:text-left rtl:[&>th]:text-right [&>th]:px-2.5 [&>th]:uppercase [&>th]:text-n-slate-12"
+        >
           <th
             v-for="hookHeader in hookHeaders"
             :key="hookHeader"
@@ -92,7 +94,11 @@ export default {
           </th>
         </thead>
         <tbody>
-          <tr v-for="hook in hooks" :key="hook.id">
+          <tr
+            v-for="hook in hooks"
+            :key="hook.id"
+            class="border-b border-n-weak [&>td]:p-2.5 [&>td]:text-n-slate-12"
+          >
             <td
               v-for="property in hook.properties"
               :key="property"

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -179,7 +179,7 @@ export default {
 }
 
 [data-invalid] .formkit-message {
-  @apply text-red-500 block text-xs font-normal my-1 w-full;
+  @apply text-n-ruby-9 block text-xs font-normal my-1 w-full;
 }
 
 .formkit-outer[data-type='checkbox'] .formkit-wrapper {

app/javascript/dashboard/routes/dashboard/settings/integrations/Shopify.vue

@@ -117,7 +117,7 @@ onMounted(() => {
         v-if="error"
         class="flex items-center justify-center flex-1 outline outline-n-container outline-1 bg-n-alpha-3 rounded-md shadow p-6"
       >
-        <p class="text-red-500">
+        <p class="text-n-ruby-9">
           {{ $t('INTEGRATION_SETTINGS.SHOPIFY.ERROR') }}
         </p>
       </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue

@@ -97,7 +97,7 @@ const updateIntegration = async () => {
       <div v-else class="inline-flex">
         <select
           v-model="selectedChannelId"
-          class="h-8 py-1 mr-4 text-xs leading-4 border border-yellow-300"
+          class="h-8 py-1 mr-4 text-xs leading-4 border border-n-amber-10"
         >
           <option value="">
             {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue

@@ -115,7 +115,7 @@ export default {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
@@ -125,9 +125,7 @@ export default {
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="divide-y divide-n-weak flex-1 text-n-slate-12">
           <WebhookRow
             v-for="(webHookItem, index) in records"
             :key="webHookItem.id"

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue

@@ -37,10 +37,10 @@ const subscribedEvents = computed(() => {
 <template>
   <tr>
     <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <div class="font-medium break-words text-slate-700 dark:text-slate-100">
+      <div class="font-medium break-words text-n-slate-12">
         {{ webhook.url }}
       </div>
-      <div class="block mt-1 text-sm text-slate-500 dark:text-slate-400">
+      <div class="block mt-1 text-sm text-n-slate-11">
         <span class="font-medium">
           {{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
         </span>

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

@@ -104,26 +104,20 @@ onBeforeMount(() => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
+      <table class="min-w-full overflow-x-auto divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-slate-700 dark:text-slate-300"
+            class="py-4 font-semibold text-left ltr:pr-4 rtl:pl-4 text-n-slate-11"
           >
             {{ thHeader }}
           </th>
         </thead>
-        <tbody
-          class="flex-1 divide-y divide-slate-25 dark:divide-slate-800 text-slate-700 dark:text-slate-100"
-        >
+        <tbody class="flex-1 divide-y divide-n-weak text-n-slate-12">
           <tr v-for="(label, index) in records" :key="label.title">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
-              <span
-                class="mb-1 font-medium break-words text-slate-700 dark:text-slate-100"
-              >
+              <span class="mb-1 font-medium break-words text-n-slate-12">
                 {{ label.title }}
               </span>
             </td>
@@ -131,7 +125,7 @@ onBeforeMount(() => {
             <td class="py-4 leading-6 ltr:pr-4 rtl:pl-4">
               <div class="flex items-center">
                 <span
-                  class="w-4 h-4 mr-1 border border-solid rounded rtl:mr-0 rtl:ml-1 border-slate-50 dark:border-slate-700"
+                  class="w-4 h-4 mr-1 border border-solid rounded rtl:mr-0 rtl:ml-1 border-n-weak"
                   :style="{ backgroundColor: label.color }"
                 />
                 {{ label.color }}

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

@@ -83,7 +83,7 @@ const tableHeaders = computed(() => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table class="min-w-full divide-y divide-slate-75 dark:divide-slate-700">
+      <table class="min-w-full divide-y divide-n-weak">
         <thead>
           <th
             v-for="thHeader in tableHeaders"

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -61,10 +61,10 @@ const dropdownValues = () => {
       sm
       slate
       icon="i-lucide-menu"
-      class="absolute cursor-move -left-10 mr-2 macros__node-drag-handle"
+      class="absolute cursor-move ltr:-left-10 rtl:-right-10 ltr:mr-2 rtl:ml-2 macros__node-drag-handle"
     />
     <div
-      class="flex-grow p-2 mr-2 rounded-md shadow-sm outline outline-1 outline-n-weak"
+      class="flex-grow p-2 ltr:mr-2 rtl:ml-2 rounded-md shadow-sm outline outline-1 outline-n-weak"
       :class="
         errorKey
           ? 'animate-shake bg-n-ruby-8/20 outline-n-ruby-5 dark:outline-n-ruby-5'

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue

@@ -118,33 +118,26 @@ export default {
 
 .macro__node:not(:last-child) {
   position: relative;
-  padding-bottom: var(--space-large);
+  padding-bottom: 2rem;
 }
 
 .macro__node:not(:last-child):not(.sortable-chosen):after,
 .macros__nodes-draggable:after {
-  content: '';
-  position: absolute;
-  height: var(--space-large);
-  width: var(--space-smaller);
-  margin-left: var(--space-medium);
-
-  border-left: 1px dashed var(--s-500);
+  @apply border-l dark:border-n-blue-11 border-n-blue-7 border-dashed ltr:ml-6 rtl:mr-6 absolute h-8 w-1 content-[""];
 }
 
 .macros__nodes-draggable {
   position: relative;
-  padding-bottom: var(--space-large);
+  padding-bottom: 2rem;
 }
 
 .macros__node-action-container {
   position: relative;
   .drag-handle {
     position: absolute;
-    left: var(--space-minus-medium);
-    top: var(--space-smaller);
+    left: -1.5rem;
+    top: 0.25rem;
     cursor: move;
-    color: var(--s-400);
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue

@@ -20,8 +20,8 @@ export default {
   methods: {
     isActive(key) {
       return this.macroVisibility === key
-        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
-        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+        ? 'bg-n-blue-2 dark:bg-n-blue-1 border-n-blue-3 dark:border-n-blue-4'
+        : 'bg-white dark:bg-n-solid-2 border-n-weak dark:border-n-strong';
     },
     onUpdateName(value) {
       this.$emit('update:name', value);
@@ -48,9 +48,7 @@ export default {
       />
     </div>
     <div class="mt-2">
-      <p
-        class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
-      >
+      <p class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12">
         {{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}
       </p>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
@@ -63,14 +61,14 @@ export default {
             v-if="macroVisibility === 'global'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
           <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
           >
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-xs text-n-slate-11">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
@@ -83,14 +81,14 @@ export default {
             v-if="macroVisibility === 'personal'"
             icon="checkmark-circle"
             type="solid"
-            class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
+            class="absolute text-n-brand top-2 right-2"
           />
           <p
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
+            class="block m-0 text-sm font-medium leading-[1.8] text-n-slate-12"
           >
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-xs text-n-slate-11">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
@@ -99,9 +97,7 @@ export default {
         class="mt-2 flex items-start p-2 bg-n-slate-3 dark:bg-n-solid-3 rounded-md"
       >
         <fluent-icon icon="info" size="16" class="flex-shrink-0 mt-0.5" />
-        <p
-          class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
-        >
+        <p class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-n-slate-11">
           {{ $t('MACROS.ORDER_INFO') }}
         </p>
       </div>

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

@@ -33,7 +33,7 @@ const onReset = () => {
   <div class="flex flex-row justify-between gap-4">
     <woot-input
       name="access_token"
-      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-slate-200 focus:[&>input]:dark:!border-slate-600 [&>input]:cursor-not-allowed relative"
+      class="flex-1 [&>input]:!py-1.5 ltr:[&>input]:!pr-9 ltr:[&>input]:!pl-3 rtl:[&>input]:!pl-9 rtl:[&>input]:!pr-3 focus:[&>input]:!border-n-weak [&>input]:cursor-not-allowed relative"
       :styles="{
         borderRadius: '12px',
         fontSize: '14px',

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

@@ -20,7 +20,7 @@ const onChange = (id, value) => {
 <template>
   <div>
     <label
-      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -37,7 +37,7 @@ const onChange = (id, value) => {
           @update="onChange"
         />
         <label
-          class="text-sm font-normal text-ash-900"
+          class="text-sm font-normal text-n-slate-12"
           :for="`checkbox-condition-${item.value}`"
         >
           {{ item.label }}

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

@@ -70,7 +70,7 @@ const alertDescription = computed(() => {
 
 <template>
   <div>
-    <label class="pb-1 text-sm font-medium leading-6 text-ash-900">
+    <label class="pb-1 text-sm font-medium leading-6 text-n-slate-12">
       {{ label }}
     </label>
     <div class="grid gap-3 mt-2">
@@ -86,7 +86,7 @@ const alertDescription = computed(() => {
         />
         <label
           :for="`checkbox-${option.value}`"
-          class="text-sm text-ash-900 font-normal"
+          class="text-sm text-n-slate-12 font-normal"
         >
           {{
             $t(

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

@@ -86,7 +86,7 @@ const playAudio = async () => {
       v-tooltip.top="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
       "
-      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[1.75rem]"
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-n-weak ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-n-brand flex-shrink-0 mt-[1.75rem]"
       @click="playAudio"
     >
       <Icon icon="i-lucide-volume-2" />

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

@@ -3,11 +3,11 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    FormButton,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -130,15 +130,13 @@ export default {
         @blur="v$.passwordConfirmation.$touch"
       />
 
-      <FormButton
-        type="submit"
-        color-scheme="primary"
-        variant="solid"
-        size="large"
-        :disabled="isButtonDisabled"
-      >
-        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
-      </FormButton>
+      <div>
+        <NextButton
+          type="submit"
+          :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT')"
+          :disabled="isButtonDisabled"
+        />
+      </div>
     </div>
   </form>
 </template>

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

@@ -27,13 +27,13 @@ defineProps({
   <button
     class="flex flex-col gap-4 w-full h-fit p-4 rounded-md border border-n-weak dark:border-n-weak"
     :class="{
-      'border-primary-300 ': active,
+      'border-n-brand ': active,
     }"
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
       <div class="grid grid-cols-[1fr_auto] items-center w-full gap-1">
         <div
-          class="overflow-hidden text-base font-medium text-ash-900 text-left"
+          class="overflow-hidden text-base font-medium text-n-slate-12 text-left"
         >
           <span class="block truncate">{{ title }}</span>
         </div>
@@ -41,10 +41,12 @@ defineProps({
           :checked="active"
           type="radio"
           :name="`hotkey-${title}`"
-          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
+          class="shadow cursor-pointer grid place-items-center border-2 border-n-strong appearance-none rounded-full w-5 h-5 checked:bg-n-brand before:content-[''] before:bg-n-brand before:border-4 before:rounded-full before:border-n-strong checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-n-brand"
         />
       </div>
-      <span class="text-ash-900 text-sm line-clamp-2 leading-[1.4] text-start">
+      <span
+        class="text-n-slate-12 text-sm line-clamp-2 leading-[1.4] text-start"
+      >
         {{ description }}
       </span>
     </div>

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

@@ -196,7 +196,7 @@ export default {
 <template>
   <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md">
     <div class="flex flex-col gap-6">
-      <h2 class="text-2xl font-medium text-ash-900">
+      <h2 class="text-2xl font-medium text-n-slate-12">
         {{ $t('PROFILE_SETTINGS.TITLE') }}
       </h2>
       <UserProfilePicture

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

@@ -2,7 +2,7 @@
 import { ref, watch } from 'vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   messageSignature: {
@@ -38,13 +38,11 @@ const updateSignature = () => {
       :enable-suggestions="false"
       show-image-resize-toolbar
     />
-    <FormButton
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
-    </FormButton>
+    <div>
+      <NextButton
+        type="submit"
+        :label="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT')"
+      />
+    </div>
   </form>
 </template>

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

@@ -45,7 +45,7 @@ const handleInput = e => {
   >
     <input
       v-model="localFlags"
-      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      class="mt-1 flex-shrink-0 border-n-weak border checked:border-none checked:bg-n-brand shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
       type="checkbox"
       :value="localValue"
       @input="handleInput"

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

@@ -167,7 +167,7 @@ export default {
           :span="7"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
         >
-          <span class="text-sm font-normal normal-case text-ash-800">
+          <span class="text-sm font-normal normal-case text-n-slate-11">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
           </span>
         </TableHeaderCell>
@@ -175,7 +175,7 @@ export default {
           :span="2"
           label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
         >
-          <span class="text-sm font-medium normal-case text-ash-900">
+          <span class="text-sm font-medium normal-case text-n-slate-12">
             {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
           </span>
         </TableHeaderCell>
@@ -185,7 +185,7 @@ export default {
         >
           <div class="flex items-center justify-between gap-1">
             <span
-              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
+              class="text-sm font-medium normal-case text-n-slate-12 whitespace-nowrap"
             >
               {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
             </span>
@@ -202,7 +202,7 @@ export default {
           <div
             class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
           >
-            <span class="text-sm text-ash-900">
+            <span class="text-sm text-n-slate-12">
               {{ $t(notification.label) }}
             </span>
           </div>
@@ -225,7 +225,7 @@ export default {
     </div>
     <!--  Layout for mobile devices -->
     <div class="flex flex-col gap-6 sm:hidden">
-      <span class="text-sm font-medium normal-case text-ash-900">
+      <span class="text-sm font-medium normal-case text-n-slate-12">
         {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
       </span>
       <div class="flex flex-col gap-4">
@@ -240,12 +240,14 @@ export default {
             :is-checked="checkFlagStatus('email', notification.value)"
             @update="handleEmailInput"
           />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+          <span class="text-sm text-n-slate-12">{{
+            $t(notification.label)
+          }}</span>
         </div>
       </div>
 
       <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium normal-case text-ash-900">
+        <span class="text-sm font-medium normal-case text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
         </span>
       </div>
@@ -262,21 +264,23 @@ export default {
             :is-checked="checkFlagStatus('push', notification.value)"
             @update="handlePushInput"
           />
-          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+          <span class="text-sm text-n-slate-12">{{
+            $t(notification.label)
+          }}</span>
         </div>
       </div>
     </div>
 
     <div
-      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-ash-200 rounded-xl"
+      class="flex items-center justify-between w-full gap-2 p-4 border border-solid border-n-weak rounded-xl"
     >
       <div class="flex flex-row items-center gap-2">
         <fluent-icon
           icon="alert"
-          class="flex-shrink-0 text-ash-900"
+          class="flex-shrink-0 text-n-slate-12"
           size="18"
         />
-        <span class="text-sm text-ash-900">
+        <span class="text-sm text-n-slate-12">
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>

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

@@ -1,11 +1,11 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import FormButton from 'v3/components/Form/Button.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 export default {
   components: {
-    FormButton,
+    NextButton,
   },
   props: {
     name: {
@@ -131,13 +131,8 @@ export default {
       @input="v$.userEmail.$touch"
       @blur="v$.userEmail.$touch"
     />
-    <FormButton
-      type="submit"
-      color-scheme="primary"
-      variant="solid"
-      size="large"
-    >
-      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
-    </FormButton>
+    <div>
+      <NextButton type="submit" :label="$t('PROFILE_SETTINGS.BTN_TEXT')" />
+    </div>
   </form>
 </template>

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

@@ -24,7 +24,7 @@ const deleteProfilePicture = () => {
 
 <template>
   <div class="flex flex-col gap-2">
-    <span class="text-sm font-medium text-ash-900">
+    <span class="text-sm font-medium text-n-slate-12">
       {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
     </span>
     <Avatar

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

@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-white dark:bg-slate-900"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -169,7 +169,7 @@ export default {
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
           />
-          <span v-else class="text-sm text-slate-600">
+          <span v-else class="text-sm text-n-slate-10">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}
           </span>
         </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue

@@ -27,12 +27,12 @@ const { calculateTrend, displayMetric, isAverageMetricType, fetchingStatus } =
 const trendColor = (value, key) => {
   if (isAverageMetricType(key)) {
     return value > 0
-      ? 'border-red-500 text-red-500'
-      : 'border-green-500 text-green-500';
+      ? 'border-n-ruby-9 text-n-ruby-9'
+      : 'border-n-teal-10 text-n-teal-10';
   }
   return value < 0
-    ? 'border-red-500 text-red-500'
-    : 'border-green-500 text-green-500';
+    ? 'border-n-ruby-9 text-n-ruby-9'
+    : 'border-n-teal-10 text-n-teal-10';
 };
 </script>
 

app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue

@@ -19,10 +19,7 @@ const routerParams = computed(() => ({
     <router-link :to="routerParams" class="hover:underline">
       {{ `#${row.original.conversationId}` }}
     </router-link>
-    <div
-      v-tooltip="row.original.createdAt"
-      class="text-slate-600 dark:text-slate-200 text-sm"
-    >
+    <div v-tooltip="row.original.createdAt" class="text-n-slate-11 text-sm">
       {{ row.original.createdAgo }}
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -105,7 +105,7 @@ const columns = computed(() => [
         {
           class: ratingObject.emoji
             ? 'emoji-response text-lg'
-            : 'text-slate-300 dark:text-slate-700',
+            : 'text-n-slate-10',
         },
         ratingObject.emoji || '---'
       );

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue

@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
+    <p aria-hidden="true" class="hidden">
       {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
     </p>
     <multiselect

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue

@@ -44,7 +44,7 @@ export default {
             :style="{ backgroundColor: props.option.color }"
             class="w-5 h-5 rounded-full"
           />
-          <span class="my-0 text-slate-800 dark:text-slate-75">
+          <span class="my-0 text-n-slate-12">
             {{ props.option.title }}
           </span>
         </div>
@@ -53,10 +53,10 @@ export default {
         <div class="flex items-center gap-2">
           <div
             :style="{ backgroundColor: props.option.color }"
-            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+            class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
           />
 
-          <span class="my-0 text-slate-800 truncate min-w-0 dark:text-slate-75">
+          <span class="my-0 text-n-slate-12 truncate min-w-0">
             {{ props.option.title }}
           </span>
         </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue

@@ -67,7 +67,7 @@ function getDayOfTheWeek(date) {
   return days[dayIndex];
 }
 function getHeatmapLevelClass(value) {
-  if (!value) return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
+  if (!value) return 'outline-n-container bg-n-slate-2 dark:bg-n-slate-5/50';
 
   let level = [...quantileRange.value, Infinity].findIndex(
     range => value <= range && value > 0
@@ -76,16 +76,16 @@ function getHeatmapLevelClass(value) {
   if (level > 6) level = 5;
 
   if (level === 0) {
-    return 'outline-n-container dark:bg-slate-700/40 bg-slate-50/50';
+    return 'outline-n-container bg-n-slate-2 dark:bg-n-slate-5/50';
   }
 
   const classes = [
-    'bg-woot-50 dark:bg-woot-800/40 dark:outline-woot-800/80',
-    'bg-woot-100 dark:bg-woot-800/30 dark:outline-woot-800/80',
-    'bg-woot-200 dark:bg-woot-500/40 dark:outline-woot-700/80',
-    'bg-woot-300 dark:bg-woot-500/60 dark:outline-woot-600/80',
-    'bg-woot-600 dark:bg-woot-500/80 dark:outline-woot-500/80',
-    'bg-woot-800 dark:bg-woot-500 dark:outline-woot-400/80',
+    'bg-n-blue-3 dark:outline-n-blue-4',
+    'bg-n-blue-5 dark:outline-n-blue-6',
+    'bg-n-blue-7 dark:outline-n-blue-8',
+    'bg-n-blue-8 dark:outline-n-blue-9',
+    'bg-n-blue-10 dark:outline-n-blue-8',
+    'bg-n-blue-11 dark:outline-n-blue-10',
   ];
 
   return classes[level - 1];
@@ -101,7 +101,7 @@ function getHeatmapLevelClass(value) {
         <div
           v-for="ii in numberOfRows"
           :key="ii"
-          class="w-full rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse h-8 min-w-[70px]"
+          class="w-full rounded-sm bg-n-slate-3 dark:bg-n-slate-1 animate-loader-pulse h-8 min-w-[70px]"
         />
       </div>
       <div class="grid gap-[5px] w-full min-w-[700px]">
@@ -113,13 +113,13 @@ function getHeatmapLevelClass(value) {
           <div
             v-for="jj in 24"
             :key="jj"
-            class="w-full h-8 rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse"
+            class="w-full h-8 rounded-sm bg-n-slate-3 dark:bg-n-slate-1 animate-loader-pulse"
           />
         </div>
       </div>
       <div />
       <div
-        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-n-slate-11"
       >
         <div
           v-for="ii in 24"
@@ -135,10 +135,10 @@ function getHeatmapLevelClass(value) {
         <div
           v-for="dateKey in processedData.keys()"
           :key="dateKey"
-          class="h-8 min-w-[70px] text-slate-800 dark:text-slate-200 text-[10px] font-semibold flex flex-col items-end justify-center"
+          class="h-8 min-w-[70px] text-n-slate-12 text-[10px] font-semibold flex flex-col items-end justify-center"
         >
           {{ getDayOfTheWeek(new Date(dateKey)) }}
-          <time class="font-normal text-slate-700 dark:text-slate-200">
+          <time class="font-normal text-n-slate-11">
             {{ formatDate(dateKey) }}
           </time>
         </div>
@@ -153,14 +153,14 @@ function getHeatmapLevelClass(value) {
             v-for="data in processedData.get(dateKey)"
             :key="data.timestamp"
             v-tooltip.top="getCountTooltip(data.value)"
-            class="h-8 rounded-sm shadow-inner dark:outline dark:outline-1 shadow-black"
+            class="h-8 rounded-sm shadow-inner dark:outline dark:outline-1"
             :class="getHeatmapLevelClass(data.value)"
           />
         </div>
       </div>
       <div />
       <div
-        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-n-slate-12"
       >
         <div
           v-for="ii in 24"

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -188,7 +188,7 @@ export default {
               :username="props.option.name"
               size="22px"
             />
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
+            <span class="my-0 text-n-slate-12 truncate">{{
               props.option.name
             }}</span>
           </div>
@@ -201,7 +201,7 @@ export default {
               :username="props.option.name"
               size="22px"
             />
-            <p class="my-0 text-slate-800 dark:text-slate-75">
+            <p class="my-0 text-n-slate-12">
               {{ props.option.name }}
             </p>
           </div>
@@ -230,7 +230,7 @@ export default {
               class="w-5 h-5 rounded-full"
             />
 
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+            <span class="my-0 text-n-slate-12 truncate">
               {{ props.option.title }}
             </span>
           </div>
@@ -239,10 +239,10 @@ export default {
           <div class="flex items-center min-w-0 gap-2">
             <div
               :style="{ backgroundColor: props.option.color }"
-              class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
+              class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-n-weak"
             />
 
-            <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+            <span class="my-0 text-n-slate-12 truncate">
               {{ props.option.title }}
             </span>
           </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAFilter.vue

@@ -179,7 +179,7 @@ export default {
     <!-- Dividing line between Active filters and Add filter button -->
     <div
       v-if="hasActiveFilters && !isAllFilterSelected"
-      class="w-full h-px border md:w-px md:h-5 border-slate-75 dark:border-slate-800"
+      class="w-full h-px border md:w-px md:h-5 border-n-weak"
     />
     <!-- Add filter and clear filter button -->
     <div class="flex items-center gap-2">
@@ -196,10 +196,7 @@ export default {
       />
 
       <!-- Dividing line between Add filter and Clear all filter button -->
-      <div
-        v-if="hasActiveFilters"
-        class="w-px h-5 border border-slate-75 dark:border-slate-800"
-      />
+      <div v-if="hasActiveFilters" class="w-px h-5 border border-n-weak" />
       <!-- Clear all filter button -->
       <FilterButton
         v-if="hasActiveFilters"

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -34,12 +34,12 @@ const conversationLabels = computed(() => {
     class="grid items-center content-center w-full h-16 grid-cols-12 gap-4 px-6 py-0 border-b last:border-b-0 last:rounded-b-xl border-n-weak"
   >
     <div
-      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-n-slate-12 rtl:text-right"
     >
       <span class="text-n-slate-12">
         {{ `#${conversationId} ` }}
       </span>
-      <span class="text-slate-11">
+      <span class="text-n-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>
       <span class="capitalize truncate text-n-slate-12">{{
@@ -53,7 +53,7 @@ const conversationLabels = computed(() => {
       />
     </div>
     <div
-      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-n-slate-12 text-left rtl:text-right col-span-2"
     >
       {{ slaName }}
     </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue

@@ -34,7 +34,7 @@ export default {
 <template>
   <div
     v-on-clickaway="closeSlaEvents"
-    class="flex items-center col-span-2 text-slate-11 justify-end"
+    class="flex items-center col-span-2 text-n-slate-11 justify-end"
   >
     <div class="relative">
       <NextButton