From 226d0db11cb42468a0f78654818d3b199bc84381 Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Wed, 20 Nov 2024 18:31:24 -0800
Subject: [PATCH] Update design

---
 .../dashboard/assets/scss/widgets/_tabs.scss  |  22 +-
 .../components/widgets/BackButton.vue         |   6 +-
 .../components/widgets/ChatTypeTabs.vue       |  12 +-
 .../dashboard/settings/SettingsHeader.vue     |   6 +-
 .../dashboard/settings/SettingsLayout.vue     |   2 +-
 .../dashboard/settings/agentBots/Index.vue    |   2 +-
 .../dashboard/settings/agents/Index.vue       |  16 +-
 .../settings/attributes/AddAttribute.vue      | 234 +++++++++---------
 .../dashboard/settings/attributes/Index.vue   |  13 +-
 .../dashboard/settings/auditlogs/Index.vue    |   4 +-
 .../dashboard/settings/automation/Index.vue   |  17 +-
 .../dashboard/settings/canned/AddCanned.vue   |  98 ++++----
 .../dashboard/settings/canned/Index.vue       |  19 +-
 .../components/BaseSettingsHeader.vue         |  37 +--
 .../dashboard/settings/customRoles/Index.vue  |  14 +-
 .../component/CustomRoleTableBody.vue         |   2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  24 +-
 .../integrations/DashboardApps/Index.vue      |  35 ++-
 .../integrations/IntegrationHooks.vue         |   4 +-
 .../integrations/SingleIntegrationHooks.vue   |  10 +-
 .../dashboard/settings/integrations/Slack.vue |   6 +-
 .../Slack/SelectChannelWarning.vue            |  38 ++-
 .../Slack/SlackIntegrationHelpText.vue        |  21 +-
 .../settings/integrations/Webhooks/Index.vue  |  13 +-
 .../dashboard/settings/labels/Index.vue       |  14 +-
 .../dashboard/settings/macros/Index.vue       |  26 +-
 .../dashboard/settings/macros/MacroNodes.vue  |  15 +-
 .../settings/sla/components/SLAHeader.vue     |  13 +-
 .../settings/sla/components/SLAListItem.vue   |   2 +-
 .../routes/dashboard/settings/teams/Index.vue |  29 +--
 30 files changed, 350 insertions(+), 404 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index b9999fac9..3ef0e59b7 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-slate-50 dark:border-slate-800/50;
+  @apply border-b border-n-weak;
 }
 
 .tabs {
@@ -19,22 +19,12 @@
   @apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
 }
 
-// Tab chat type
-.tab--chat-type {
-  @apply flex;
-
-  .tabs-title {
-    a {
-      @apply text-base font-medium py-3;
-    }
-  }
-}
 
 .tabs-title {
   @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @apply bg-n-slate-3 rounded-xl text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
   }
 
   &:first-child {
@@ -48,22 +38,22 @@
   &:hover,
   &:focus {
     a {
-      @apply text-slate-800 dark:text-slate-100;
+      @apply text-n-slate-11;
     }
   }
 
   a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-10 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {
     a {
-      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
+      @apply border-b border-n-brand text-n-brand;
     }
 
     .badge {
-      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
+      @apply bg-n-slate-3 text-n-brand;
     }
   }
 }
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 5051b2599..ae41cbc2f 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -23,14 +23,12 @@ const goBack = () => {
   }
 };
 
-const buttonStyleClass = props.compact
-  ? 'text-sm text-slate-600 dark:text-slate-300'
-  : 'text-base text-woot-500 dark:text-woot-500';
+const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
 </script>
 
 <template>
   <button
-    class="flex items-center p-0 font-normal cursor-pointer"
+    class="flex items-center p-0 font-normal cursor-pointer text-n-slate-11"
     :class="buttonStyleClass"
     @click.capture="goBack"
   >
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 01fb46187..050eb5506 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-4 py-0 tab--chat-type"
+    class="w-full px-4 py-0 font-medium [&_a]:text-base [&_.tabs]:p-0"
     @change="onTabChange"
   >
     <woot-tabs-item
@@ -60,13 +60,3 @@ useKeyboardEvents(keyboardEvents);
     />
   </woot-tabs>
 </template>
-
-<style scoped lang="scss">
-.tab--chat-type {
-  ::v-deep {
-    .tabs {
-      @apply p-0;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index c45a8aade..3016a5d02 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -65,7 +65,9 @@ export default {
         class="ml-2 mr-4"
       />
       <slot />
-      <span class="text-xl font-medium text-n-slate-12">
+      <span
+        class="text-xl font-medium text-n-slate-12 font-interDisplay tracking-[0.3px]"
+      >
         {{ headerTitle }}
       </span>
     </h1>
@@ -75,7 +77,7 @@ export default {
       :to="buttonRoute"
       class="button success px-3.5 py-1 rounded-[5px] flex gap-2"
     >
-      <fluent-icon icon="add-circle" />
+      <fluent-icon icon="add" />
       <span class="button__content">
         {{ buttonText }}
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
index cba8fb7d0..f66fdb1fd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
@@ -23,7 +23,7 @@ defineProps({
   <div class="flex flex-col w-full h-full gap-8">
     <slot name="header" />
     <!-- Added to render any templates that should be rendered before body -->
-    <div class="mx-auto max-w-[960px] w-full">
+    <div class="mx-auto max-w-[960px] w-full pb-10">
       <slot name="preBody" />
       <slot v-if="isLoading" name="loading">
         <woot-loading-state :message="loadingMessage" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
index 802c760a4..18fc11a23 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
@@ -78,7 +78,7 @@ export default {
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
-      icon="add-circle"
+      icon="add"
     >
       <router-link :to="newAgentBotsURL" class="white-text">
         {{ $t('AGENT_BOTS.ADD.TITLE') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 2799923f6..ec981e98c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -2,6 +2,7 @@
 import { useAlert } from 'dashboard/composables';
 import { computed, onMounted, ref } from 'vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { useI18n } from 'vue-i18n';
 import {
   useStoreGetters,
@@ -149,20 +150,19 @@ const confirmDeletion = () => {
         feature-name="agents"
       >
         <template #actions>
-          <woot-button
-            class="inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 !bg-n-brand text-white hover:brightness-110 outline-transparent px-3 !text-sm"
-            icon="add"
+          <Button
+            :label="$t('AGENT_MGMT.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
             @click="openAddPopup"
-          >
-            {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </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-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+          class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
         >
           <tr v-for="(agent, index) in agentList" :key="agent.email">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 0cff0c448..ec4606e92 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -158,130 +158,126 @@ export default {
 </script>
 
 <template>
-  <woot-modal v-model:show="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header :header-title="$t('ATTRIBUTES_MGMT.ADD.TITLE')" />
 
-      <form class="flex w-full" @submit.prevent="addAttributes">
-        <div class="w-full">
-          <label :class="{ error: v$.attributeModel.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
-            <select v-model="attributeModel">
-              <option v-for="model in models" :key="model.id" :value="model.id">
-                {{ model.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeModel.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
-            </span>
+    <form class="flex w-full" @submit.prevent="addAttributes">
+      <div class="w-full">
+        <label :class="{ error: v$.attributeModel.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
+          <select v-model="attributeModel">
+            <option v-for="model in models" :key="model.id" :value="model.id">
+              {{ model.option }}
+            </option>
+          </select>
+          <span v-if="v$.attributeModel.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
+          </span>
+        </label>
+        <woot-input
+          v-model="displayName"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: v$.displayName.$error }"
+          :error="
+            v$.displayName.$error
+              ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
+              : ''
+          "
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
+          @update:model-value="onDisplayNameChange"
+          @blur="v$.displayName.$touch"
+        />
+        <woot-input
+          v-model="attributeKey"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+          type="text"
+          :class="{ error: v$.attributeKey.$error }"
+          :error="v$.attributeKey.$error ? keyErrorMessage : ''"
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+          @blur="v$.attributeKey.$touch"
+        />
+        <label :class="{ error: v$.description.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
+          <textarea
+            v-model="description"
+            rows="3"
+            type="text"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
+            @blur="v$.description.$touch"
+          />
+          <span v-if="v$.description.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
+          </span>
+        </label>
+        <label :class="{ error: v$.attributeType.$error }">
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
+          <select v-model="attributeType">
+            <option v-for="type in types" :key="type.id" :value="type.id">
+              {{ type.option }}
+            </option>
+          </select>
+          <span v-if="v$.attributeType.$error" class="message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
+          </span>
+        </label>
+        <div v-if="isAttributeTypeList" class="multiselect--wrap">
+          <label>
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
           </label>
-          <woot-input
-            v-model="displayName"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
-            type="text"
-            :class="{ error: v$.displayName.$error }"
-            :error="
-              v$.displayName.$error
-                ? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
-                : ''
-            "
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
-            @update:model-value="onDisplayNameChange"
-            @blur="v$.displayName.$touch"
+          <multiselect
+            ref="tagInput"
+            v-model="values"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
+            label="name"
+            track-by="name"
+            :class="{ invalid: isMultiselectInvalid }"
+            :options="options"
+            multiple
+            taggable
+            @close="onTouch"
+            @tag="addTagValue"
           />
-          <woot-input
-            v-model="attributeKey"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-            type="text"
-            :class="{ error: v$.attributeKey.$error }"
-            :error="v$.attributeKey.$error ? keyErrorMessage : ''"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-            @blur="v$.attributeKey.$touch"
-          />
-          <label :class="{ error: v$.description.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
-            <textarea
-              v-model="description"
-              rows="3"
-              type="text"
-              :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
-              @blur="v$.description.$touch"
-            />
-            <span v-if="v$.description.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
-            </span>
+          <label v-show="isMultiselectInvalid" class="error-message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
           </label>
-          <label :class="{ error: v$.attributeType.$error }">
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
-            <select v-model="attributeType">
-              <option v-for="type in types" :key="type.id" :value="type.id">
-                {{ type.option }}
-              </option>
-            </select>
-            <span v-if="v$.attributeType.$error" class="message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
-            </span>
-          </label>
-          <div v-if="isAttributeTypeList" class="multiselect--wrap">
-            <label>
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
-            </label>
-            <multiselect
-              ref="tagInput"
-              v-model="values"
-              :placeholder="
-                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
-              "
-              label="name"
-              track-by="name"
-              :class="{ invalid: isMultiselectInvalid }"
-              :options="options"
-              multiple
-              taggable
-              @close="onTouch"
-              @tag="addTagValue"
-            />
-            <label v-show="isMultiselectInvalid" class="error-message">
-              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
-            </label>
-          </div>
-          <div v-if="isAttributeTypeText">
-            <input
-              v-model="regexEnabled"
-              type="checkbox"
-              @input="toggleRegexEnabled"
-            />
-            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
-          </div>
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexPattern"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
-            type="text"
-            :placeholder="
-              $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
-            "
-          />
-          <woot-input
-            v-if="isAttributeTypeText && isRegexEnabled"
-            v-model="regexCue"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
-            type="text"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
-          />
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-submit-button
-              :disabled="isButtonDisabled"
-              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
-            />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
-          </div>
         </div>
-      </form>
-    </div>
-  </woot-modal>
+        <div v-if="isAttributeTypeText">
+          <input
+            v-model="regexEnabled"
+            type="checkbox"
+            @input="toggleRegexEnabled"
+          />
+          {{ $t('ATTRIBUTES_MGMT.ADD.FORM.ENABLE_REGEX.LABEL') }}
+        </div>
+        <woot-input
+          v-if="isAttributeTypeText && isRegexEnabled"
+          v-model="regexPattern"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.LABEL')"
+          type="text"
+          :placeholder="
+            $t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_PATTERN.PLACEHOLDER')
+          "
+        />
+        <woot-input
+          v-if="isAttributeTypeText && isRegexEnabled"
+          v-model="regexCue"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.LABEL')"
+          type="text"
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
+        />
+        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+          <woot-submit-button
+            :disabled="isButtonDisabled"
+            :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
+          />
+          <button class="button clear" @click.prevent="onClose">
+            {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 24ff3ec1b..1c153969b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
 import SettingsLayout from '../SettingsLayout.vue';
@@ -68,13 +70,12 @@ const onClickTabChange = index => {
         feature-name="custom_attributes"
       >
         <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
+          <Button
+            :label="$t('ATTRIBUTES_MGMT.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
             @click="openAddPopup"
-          >
-            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 525fc6c39..ac3e9fbe5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -97,7 +97,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"
@@ -108,7 +108,7 @@ const tableHeaders = computed(() => {
             </th>
           </thead>
           <tbody
-            class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+            class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
           >
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
               <td class="py-4 pr-4 break-all whitespace-nowrap">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 476ca04c3..a84909b57 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -3,6 +3,8 @@ import { useAlert } from 'dashboard/composables';
 import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 import SettingsLayout from '../SettingsLayout.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -185,18 +187,17 @@ const tableHeaders = computed(() => {
         feature-name="automation"
       >
         <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
+          <Button
+            :label="$t('AUTOMATION.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
             @click="openAddPopup"
-          >
-            {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </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"
@@ -207,7 +208,7 @@ const tableHeaders = computed(() => {
           </th>
         </thead>
         <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+          class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
         >
           <AutomationRuleRow
             v-for="automation in records"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index b710275c4..6bba9c3e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -4,14 +4,12 @@ import { required, minLength } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
-import Modal from '../../../../components/Modal.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 export default {
   name: 'AddCanned',
   components: {
     WootSubmitButton,
-    Modal,
     WootMessageEditor,
   },
   props: {
@@ -82,58 +80,56 @@ export default {
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="onClose">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CANNED_MGMT.ADD.TITLE')"
-        :header-content="$t('CANNED_MGMT.ADD.DESC')"
-      />
-      <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
-        <div class="w-full">
-          <label :class="{ error: v$.shortCode.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
-            <input
-              v-model="shortCode"
-              type="text"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
-              @blur="v$.shortCode.$touch"
-            />
-          </label>
-        </div>
+  <div class="flex flex-col h-auto overflow-auto">
+    <woot-modal-header
+      :header-title="$t('CANNED_MGMT.ADD.TITLE')"
+      :header-content="$t('CANNED_MGMT.ADD.DESC')"
+    />
+    <form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
+      <div class="w-full">
+        <label :class="{ error: v$.shortCode.$error }">
+          {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
+          <input
+            v-model="shortCode"
+            type="text"
+            :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
+            @blur="v$.shortCode.$touch"
+          />
+        </label>
+      </div>
 
-        <div class="w-full">
-          <label :class="{ error: v$.content.$error }">
-            {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
-          </label>
-          <div class="editor-wrap">
-            <WootMessageEditor
-              v-model="content"
-              class="message-editor [&>div]:px-1"
-              :class="{ editor_warning: v$.content.$error }"
-              enable-variables
-              :enable-canned-responses="false"
-              :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
-              @blur="v$.content.$touch"
-            />
-          </div>
-        </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-          <WootSubmitButton
-            :disabled="
-              v$.content.$invalid ||
-              v$.shortCode.$invalid ||
-              addCanned.showLoading
-            "
-            :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
-            :loading="addCanned.showLoading"
+      <div class="w-full">
+        <label :class="{ error: v$.content.$error }">
+          {{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
+        </label>
+        <div class="editor-wrap">
+          <WootMessageEditor
+            v-model="content"
+            class="message-editor [&>div]:px-1"
+            :class="{ editor_warning: v$.content.$error }"
+            enable-variables
+            :enable-canned-responses="false"
+            :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
+            @blur="v$.content.$touch"
           />
-          <button class="button clear" @click.prevent="onClose">
-            {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-          </button>
         </div>
-      </form>
-    </div>
-  </Modal>
+      </div>
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <WootSubmitButton
+          :disabled="
+            v$.content.$invalid ||
+            v$.shortCode.$invalid ||
+            addCanned.showLoading
+          "
+          :button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
+          :loading="addCanned.showLoading"
+        />
+        <button class="button clear" @click.prevent="onClose">
+          {{ $t('CANNED_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
+        </button>
+      </div>
+    </form>
+  </div>
 </template>
 
 <style scoped lang="scss">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 81b4da331..1f2690539 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -3,6 +3,7 @@ import { useAlert } from 'dashboard/composables';
 import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { computed, onMounted, ref, defineOptions } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
@@ -124,13 +125,12 @@ const tableHeaders = computed(() => {
       feature-name="canned_responses"
     >
       <template #actions>
-        <woot-button
-          class="button nice rounded-md"
-          icon="add-circle"
+        <Button
+          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
+          icon="i-lucide-plus"
+          size="sm"
           @click="openAddPopup"
-        >
-          {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
-        </woot-button>
+        />
       </template>
     </BaseSettingsHeader>
     <div class="mt-6 flex-1 w-full max-w-[960px] mx-auto">
@@ -144,10 +144,7 @@ const tableHeaders = computed(() => {
       >
         {{ $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"
@@ -173,7 +170,7 @@ const tableHeaders = computed(() => {
           </th>
         </thead>
         <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+          class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
         >
           <tr
             v-for="(cannedItem, index) in records"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index c72cdd1cb..f8d50d081 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -38,33 +38,14 @@ const openInNewTab = url => {
 </script>
 
 <template>
-  <div
-    class="flex flex-col items-start w-full gap-2 pt-4 max-w-[960px] mx-auto"
-  >
-    <BackButton
-      v-if="backButtonLabel"
-      compact
-      :button-label="backButtonLabel"
-    />
-    <div class="flex items-center justify-between w-full gap-4">
-      <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"
-        >
-          <div
-            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
-          >
-            <fluent-icon
-              size="14"
-              :icon="iconName"
-              type="outline"
-              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
-            />
-          </div>
-        </div>
+  <div class="flex flex-col items-start w-full gap-2 max-w-[960px] mx-auto">
+    <div
+      class="flex items-center justify-between w-full gap-4 h-20 border-b border-n-weak"
+    >
+      <div class="flex gap-3">
+        <BackButton v-if="backButtonLabel" compact />
         <h1
-          class="text-xl font-interDisplay font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
+          class="text-xl font-interDisplay tracking-[0.3px] font-medium text-n-slate-12"
         >
           {{ title }}
         </h1>
@@ -74,9 +55,9 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col gap-2 text-slate-600 dark:text-slate-300 w-full">
+    <div class="flex flex-col gap-4 text-n-slate-11 w-full pt-3">
       <p
-        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-5"
+        class="mb-0 text-sm font-normal line-clamp-5 sm:line-clamp-none max-w-3xl leading-6"
       >
         <slot name="description">{{ description }}</slot>
       </p>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
index a9715418e..6f53a03b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
@@ -8,6 +8,7 @@ import CustomRolePaywall from './component/CustomRolePaywall.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const store = useStore();
 const { t } = useI18n();
@@ -134,14 +135,13 @@ const confirmDeletion = () => {
         feature-name="canned_responses"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
             :disabled="isBehindAPaywall"
             @click="openAddModal"
-          >
-            {{ $t('CUSTOM_ROLE.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
@@ -150,7 +150,7 @@ const confirmDeletion = () => {
       <CustomRolePaywall v-if="isBehindAPaywall" />
       <table
         v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+        class="min-w-full overflow-x-auto divide-y divide-n-weak"
       >
         <thead>
           <th
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
index 95e0b770c..54f8d8c0a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
@@ -26,7 +26,7 @@ const getFormattedPermissions = role => {
 
 <template>
   <tbody
-    class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+    class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
   >
     <tr v-for="(customRole, index) in roles" :key="index">
       <td
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 461ec9f3a..6d4efcee8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -8,9 +8,12 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import ChannelName from './components/ChannelName.vue';
+import { useRouter } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
+const router = useRouter();
 const { t } = useI18n();
 const { isAdmin } = useAdmin();
 
@@ -59,6 +62,10 @@ const openDelete = inbox => {
   showDeletePopup.value = true;
   selectedInbox.value = inbox;
 };
+
+const onClickNewInbox = () => {
+  router.push({ name: 'settings_inbox_new' });
+};
 </script>
 
 <template>
@@ -75,21 +82,18 @@ const openDelete = inbox => {
         feature-name="inboxes"
       >
         <template #actions>
-          <router-link
+          <Button
             v-if="isAdmin"
-            class="button nice rounded-md"
-            :to="{ name: 'settings_inbox_new' }"
-          >
-            <fluent-icon icon="add-circle" />
-            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
-          </router-link>
+            :label="$t('SETTINGS.INBOXES.NEW_INBOX')"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="onClickNewInbox"
+          />
         </template>
       </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">
         <tbody
           class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
         >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
index 19b8e01a3..d427647bd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
@@ -5,9 +5,11 @@ import DashboardAppModal from './DashboardAppModal.vue';
 import DashboardAppsRow from './DashboardAppsRow.vue';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
+    NextButton,
     BaseSettingsHeader,
     DashboardAppModal,
     DashboardAppsRow,
@@ -93,16 +95,15 @@ export default {
       :back-button-label="$t('INTEGRATION_SETTINGS.HEADER')"
     >
       <template #actions>
-        <woot-button
-          class="rounded-md button nice"
-          icon="add-circle"
+        <NextButton
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
+          icon="i-lucide-plus"
+          size="sm"
           @click="openCreatePopup"
-        >
-          {{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
-        </woot-button>
+        />
       </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-12 max-w-[960px] mx-auto">
       <p
         v-if="!uiFlags.isFetching && !records.length"
         class="flex flex-col items-center justify-center h-full"
@@ -115,18 +116,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 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
+            class="py-4 pr-4 font-semibold text-left text-n-slate-12"
           >
             {{ 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"
@@ -152,14 +153,12 @@ export default {
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
-      :message="
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
-          appName: selectedApp.title,
-        })
-      "
-      :confirm-text="
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
-      "
+      :message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
+        appName: selectedApp.title,
+      })
+        "
+      :confirm-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
+        "
       :reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index 46a1dacef..2f3443d0a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -108,12 +108,12 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-auto p-4 max-w-full my-auto flex flex-wrap h-full">
+  <div class="overflow-auto max-w-[960px] mx-auto my-auto flex flex-wrap">
     <woot-button
       v-if="showAddButton"
       color-scheme="success"
       class-names="button--fixed-top"
-      icon="add-circle"
+      icon="add"
       @click="openAddHookModal"
     >
       {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index a27cdc084..5fc3f4e45 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -18,10 +18,10 @@ export default {
 </script>
 
 <template>
-  <div class="flex-shrink flex-grow overflow-auto p-4">
+  <div class="flex-shrink flex-grow overflow-auto p-1">
     <div class="flex flex-col">
       <div
-        class="bg-white dark:bg-slate-800 border border-solid border-slate-75 dark:border-slate-700/50 rounded-xl mb-4 p-4"
+        class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
       >
         <div class="flex">
           <div class="flex h-[6.25rem] w-[6.25rem]">
@@ -35,12 +35,10 @@ export default {
             />
           </div>
           <div class="flex flex-col justify-center m-0 mx-4 flex-1">
-            <h3
-              class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100"
-            >
+            <h3 class="text-xl font-medium mb-1 text-n-slate-12">
               {{ integration.name }}
             </h3>
-            <p class="text-slate-700 dark:text-slate-200">
+            <p class="text-n-slate-11">
               {{ integration.description }}
             </p>
           </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
index d82adda9d..763ab22a9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue
@@ -77,10 +77,10 @@ export default {
 <template>
   <div
     v-if="integrationLoaded && !uiFlags.isCreatingSlack"
-    class="flex flex-col flex-1 overflow-auto"
+    class="flex flex-col flex-1 overflow-auto max-w-[960px] mx-auto p-1 gap-4 pb-10"
   >
     <div
-      class="p-4 bg-white border-b border-solid rounded-sm dark:bg-slate-800 border-slate-75 dark:border-slate-700/50"
+      class="rounded-2xl shadow outline-1 outline outline-n-container bg-n-solid-2 px-6 py-5"
     >
       <Integration
         :integration-id="integration.id"
@@ -96,7 +96,7 @@ export default {
         }"
       />
     </div>
-    <div v-if="areHooksAvailable" class="flex-1 p-6">
+    <div v-if="areHooksAvailable" class="flex-1 flex flex-col gap-4">
       <SelectChannelWarning
         v-if="!isIntegrationHookEnabled"
         :has-connected-a-channel="hasConnectedAChannel"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index 8267a6c52..88f14f11d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -60,35 +60,28 @@ export default {
 
 <template>
   <div
-    class="px-6 py-4 mb-4 border border-yellow-200 rounded-md bg-yellow-50 dark:border-slate-700 dark:bg-slate-800"
+    class="px-6 py-5 border border-n-amber-6 rounded-2xl bg-n-solid-2 shadow"
   >
     <div class="flex">
       <div class="flex-shrink-0 mt-0.5">
-        <fluent-icon
-          icon="alert"
-          class="text-yellow-500 dark:text-yellow-400"
-          size="24"
-        />
+        <fluent-icon icon="alert" class="text-n-amber-12" size="24" />
       </div>
       <div class="ml-3">
-        <p
-          class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
-        >
+        <p class="mb-1 text-base font-semibold text-n-slate-12">
           {{
             $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.ATTENTION_REQUIRED')
           }}
         </p>
-        <div class="mt-2 text-sm text-yellow-800 dark:text-yellow-600">
+        <div class="mt-2 text-sm text-n-slate-11">
           <p
-            v-dompurify-html="
-              formatMessage(
-                useInstallationName(
-                  errorDescription,
-                  globalConfig.installationName
-                ),
-                false
-              )
-            "
+            v-dompurify-html="formatMessage(
+              useInstallationName(
+                errorDescription,
+                globalConfig.installationName
+              ),
+              false
+            )
+              "
           />
         </div>
       </div>
@@ -98,16 +91,15 @@ export default {
         v-if="!availableChannels.length"
         button-class="smooth small warning"
         :loading="uiFlags.isFetchingSlackChannels"
-        :button-text="
-          $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
-        "
+        :button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
+          "
         spinner-class="warning"
         @click="fetchChannels"
       />
       <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"
         >
           <option value="">
             {{ $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.OPTION_LABEL') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
index ee6cad7e2..4d7626e16 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue
@@ -18,22 +18,21 @@ export default {
 
 <template>
   <div
-    class="flex-1 w-full p-6 bg-white rounded-md border border-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"
+    class="flex-1 w-full p-6 shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5"
   >
-    <div class="prose-lg max-w-5xl">
-      <h5 class="dark:text-slate-100">
+    <div class="prose-lg max-w-5xl text-n-slate-11">
+      <h5>
         {{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
       </h5>
       <p>
         <span
-          v-dompurify-html="
-            formatMessage(
-              $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
-                selectedChannelName: selectedChannelName,
-              }),
-              false
-            )
-          "
+          v-dompurify-html="formatMessage(
+            $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
+              selectedChannelName: selectedChannelName,
+            }),
+            false
+          )
+            "
         />
       </p>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index ea76dc3bf..47136e87a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -105,7 +105,7 @@ export default {
         <template #actions>
           <woot-button
             class="button nice rounded-md"
-            icon="add-circle"
+            icon="add"
             @click="openAddPopup"
           >
             {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
@@ -114,7 +114,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"
@@ -155,11 +155,10 @@ export default {
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
-      :message="
-        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
-          webhookURL: selectedWebHook.url,
-        })
-      "
+      :message="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
+        webhookURL: selectedWebHook.url,
+      })
+        "
       :confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
       :reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 834cc3865..95563662f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -8,6 +8,7 @@ import AddLabel from './AddLabel.vue';
 import EditLabel from './EditLabel.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -94,19 +95,18 @@ onBeforeMount(() => {
         feature-name="labels"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            :label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
             @click="openAddPopup"
-          >
-            {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
       <table
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
+        class="min-w-full overflow-x-auto divide-y divide-n-weak"
       >
         <thead>
           <th
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
index 15a529641..3d81e7813 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
@@ -6,9 +6,12 @@ import SettingsLayout from '../SettingsLayout.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRouter } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
+const router = useRouter();
 const { t } = useI18n();
 
 const showDeleteConfirmationPopup = ref(false);
@@ -54,6 +57,10 @@ const tableHeaders = computed(() => {
     t('MACROS.LIST.TABLE_HEADER.VISIBILITY'),
   ];
 });
+
+const onClickNewMacro = () => {
+  router.push({ name: 'macros_new' });
+};
 </script>
 
 <template>
@@ -72,20 +79,17 @@ const tableHeaders = computed(() => {
         feature-name="macros"
       >
         <template #actions>
-          <router-link
-            :to="{ name: 'macros_new' }"
-            class="button rounded-md primary"
-          >
-            <fluent-icon icon="add-circle" />
-            <span class="button__content">
-              {{ $t('MACROS.HEADER_BTN_TXT') }}
-            </span>
-          </router-link>
+          <Button
+            :label="$t('MACROS.HEADER_BTN_TXT')"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="onClickNewMacro"
+          />
         </template>
       </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"
@@ -96,7 +100,7 @@ const tableHeaders = computed(() => {
           </th>
         </thead>
         <tbody
-          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
+          class="divide-y divide-n-weak text-slate-700 dark:text-slate-300"
         >
           <MacrosTableRow
             v-for="(macro, index) in records"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index cdd519c53..0e7c5ba12 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -69,13 +69,12 @@ export default {
             type="add"
             :index="i"
             :error-key="errors[`action_${i}`]"
-            :file-name="
-              fileName(
-                actionData[i].action_params[0],
-                actionData[i].action_name,
-                files
-              )
-            "
+            :file-name="fileName(
+              actionData[i].action_params[0],
+              actionData[i].action_name,
+              files
+            )
+              "
             :single-node="actionData.length === 1"
             @reset-action="$emit('resetAction', i)"
             @delete-node="$emit('deleteNode', i)"
@@ -90,7 +89,7 @@ export default {
           class="macros__action-button"
           color-scheme="success"
           variant="smooth"
-          icon="add-circle"
+          icon="add"
           @click="$emit('addNewNode')"
         >
           {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
index a81eed361..9aa7a6d16 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
@@ -1,5 +1,6 @@
 <script setup>
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   showActions: {
@@ -19,14 +20,12 @@ defineEmits(['add']);
     feature-name="sla"
   >
     <template v-if="showActions" #actions>
-      <woot-button
-        color-scheme="primary"
-        icon="plus-sign"
-        class="rounded-xl"
+      <Button
+        :label="$t('SLA.ADD_ACTION')"
+        icon="i-lucide-plus"
+        size="sm"
         @click="$emit('add')"
-      >
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
+      />
     </template>
   </BaseSettingsHeader>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
index d44f133cb..7f4fbc4e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAListItem.vue
@@ -48,7 +48,7 @@ const emit = defineEmits(['delete']);
     </template>
     <template #rightSection>
       <div
-        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-slate-75 dark:divide-slate-700/50"
+        class="flex items-center divide-x rtl:divide-x-reverse sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between divide-n-weak/50"
       >
         <SLAResponseTime response-type="FRT" :response-time="firstResponse" />
         <SLAResponseTime response-type="NRT" :response-time="nextResponse" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index b54dd336c..4331c50d3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -3,10 +3,13 @@ import { useAlert } from 'dashboard/composables';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 
+const router = useRouter();
 const store = useStore();
 const { t } = useI18n();
 const getters = useStoreGetters();
@@ -63,6 +66,10 @@ const confirmPlaceHolderText = computed(() =>
     teamName: selectedTeam.value.name,
   })
 );
+
+const onClickNewTeam = () => {
+  router.push({ name: 'settings_teams_new' });
+};
 </script>
 
 <template>
@@ -74,16 +81,13 @@ const confirmPlaceHolderText = computed(() =>
       feature-name="team_management"
     >
       <template #actions>
-        <router-link
+        <Button
           v-if="isAdmin"
-          :to="{ name: 'settings_teams_new' }"
-          class="button rounded-md primary"
-        >
-          <fluent-icon icon="add-circle" />
-          <span class="button__content">
-            {{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
-          </span>
-        </router-link>
+          :label="$t('TEAMS_SETTINGS.NEW_TEAM')"
+          icon="i-lucide-plus"
+          size="sm"
+          @click="onClickNewTeam"
+        />
       </template>
     </BaseSettingsHeader>
     <div
@@ -100,11 +104,8 @@ const confirmPlaceHolderText = computed(() =>
         {{ $t('TEAMS_SETTINGS.LIST.404') }}
       </p>
 
-      <table
-        v-else
-        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
-      >
-        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+      <table v-else class="min-w-full divide-y divide-n-weak">
+        <tbody class="divide-y divide-n-weak">
           <tr v-for="team in teamsList" :key="team.id">
             <td class="py-4 pr-4">
               <span class="block font-medium capitalize">{{ team.name }}</span>