Merge branch 'develop' into design-updates

<img width="1440" alt="Screenshot 2024-11-26 at 8 38 57 PM"
src="https://github.com/user-attachments/assets/f752157c-6134-42cb-8211-ce636ea9e4d6">
<img width="1439" alt="Screenshot 2024-11-26 at 8 40 47 PM"
src="https://github.com/user-attachments/assets/580b1f61-68bc-489b-9081-b0aeb402f31d">

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -18,7 +18,7 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+    @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
 
     .multiselect__select {
       @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
@@ -44,7 +44,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-white dark:bg-slate-900 border border-solid border-n-weak text-slate-800 dark:text-slate-100;
   }
 
   .multiselect__content {
@@ -96,7 +96,7 @@
   }
 
   .multiselect__tags {
-    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
+    @apply bg-n-slate-1 border border-solid border-n-weak m-0 min-h-[2.875rem] pt-0;
 
     input {
       @apply border-0 border-none;
@@ -121,7 +121,7 @@
 
   .multiselect__input {
     @include ghost-input;
-    @apply text-sm h-[2.875rem] mb-0 p-0;
+    @apply text-sm !h-[2.375rem] mb-0 !py-0 ;
   }
 
   .multiselect__single {
@@ -179,7 +179,7 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-lg text-sm  min-h-[2.5rem];
   }
 
   .multiselect__input {

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

@@ -74,7 +74,10 @@ input[type='password']:not(.reset-base),
 input[type='date']:not(.reset-base),
 input[type='email']:not(.reset-base),
 input[type='url']:not(.reset-base) {
-  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+  @apply block box-border w-full transition-colors;
+  @apply focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out];
+  @apply h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md font-normal text-sm;
+  @apply bg-n-slate-1 text-n-slate-12 border border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 focus:border-n-brand dark:focus:border-n-brand;
 
   &[disabled] {
     @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
@@ -90,7 +93,9 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-position: right -1rem center;
   background-size: 9px 6px;
-  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2;
+  @apply rounded-md w-full text-base font-normal appearance-none transition-colors;
+  @apply text-sm duration-[0.25s] ease-[ease-in-out] bg-n-slate-1 text-n-slate-12 border border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 focus:border-n-brand dark:focus:border-n-brand;
 }
 
 // Textarea

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;
     }
   }
 }

app/javascript/dashboard/components/Modal.vue

@@ -75,9 +75,9 @@ onMounted(() => {
       @mousedown="handleMouseDown"
     >
       <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        class="relative max-h-full overflow-auto shadow-xl modal-container rtl:text-right bg-n-alpha-3 backdrop-blur-[100px] skip-context-menu"
         :class="{
-          'rounded-xl w-[37.5rem]': !fullWidth,
+          'rounded-xl w-[36rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
             fullWidth,
           [size]: true,
@@ -102,38 +102,44 @@ onMounted(() => {
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+
   .modal-container {
     &.medium {
       @apply max-w-[80%] w-[56.25rem];
     }
-    // .content-box {
+
-    //   @apply h-auto p-0;
-    // }
     .content {
-      @apply p-8;
+      @apply p-6;
     }
+
     form,
     .modal-content {
       @apply pt-4 pb-8 px-8 self-center;
+
       a {
         @apply p-4;
       }
     }
   }
 }
+
 .modal-big {
   @apply w-full;
 }
+
 .modal-mask.right-aligned {
   @apply justify-end;
+
   .modal-container {
     @apply rounded-none h-full w-[30rem];
   }
 }
+
 .modal-enter,
 .modal-leave {
   @apply opacity-0;
 }
+
 .modal-enter .modal-container,
 .modal-leave .modal-container {
   transform: scale(1.1);

app/javascript/dashboard/components/SettingsSection.vue

@@ -23,13 +23,13 @@ export default {
 
 <template>
   <div
-    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
+    class="ml-0 mr-0 flex py-8 w-full flex-col xl:flex-row"
     :class="{
       'border-b border-solid border-slate-50 dark:border-slate-700/30':
         showBorder,
     }"
   >
-    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
+    <div class="w-full xl:w-1/3 min-w-0 xl:max-w-[40%] pr-12">
       <p
         v-if="title"
         class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
@@ -48,7 +48,7 @@ export default {
         {{ note }}
       </p>
     </div>
-    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
+    <div class="w-full xl:w-2/3 min-w-0 xl:max-w-[50%]">
       <slot />
     </div>
   </div>

app/javascript/dashboard/components/ui/Wizard.vue

@@ -89,7 +89,7 @@ export default {
         @apply bg-woot-500 dark:bg-woot-500;
       }
 
-      & + .item {
+      &+.item {
         &::before {
           @apply bg-woot-500 dark:bg-woot-500;
         }

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -201,10 +201,10 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
+  @apply p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
 
   &.is-a-macro {
-    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
+    @apply mb-0 p-0 border-0 rounded-none;
   }
 }
 
@@ -244,6 +244,7 @@ export default {
     @apply mb-0;
   }
 }
+
 .filter__answer {
   &.answer--text-input {
     @apply mb-0;
@@ -270,9 +271,11 @@ export default {
 .multiselect {
   @apply mb-0;
 }
+
 .action-message {
   @apply mt-2 mx-0 mb-0;
 }
+
 // Prosemirror does not have a native way of hiding the menu bar, hence
 ::v-deep .ProseMirror-menubar {
   @apply hidden;

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -23,14 +23,12 @@ const goBack = () => {
   }
 };
 
-const buttonStyleClass = props.compact
+const buttonStyleClass = props.compact ? 'text-sm' : 'text-base';
-  ? 'text-sm text-slate-600 dark:text-slate-300'
-  : 'text-base text-woot-500 dark:text-woot-500';
 </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"
   >

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>

app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -14,16 +14,11 @@ export default {
 </script>
 
 <template>
-  <div
+  <div class="pb-0 px-8 border-b border-n-weak">
-    class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
+    <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
-  >
-    <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
       {{ headerTitle }}
     </h2>
-    <p
+    <p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
-      v-if="headerContent"
-      class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
-    >
       {{ headerContent }}
     </p>
     <slot />

app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue

@@ -36,7 +36,7 @@ defineProps({
     </div>
     <div class="mt-auto">
       <p
-        class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
+        class="text-base text-slate-800 dark:text-slate-100  font-semibold tracking-[0.3px]"
       >
         {{ title }}
       </p>

app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue

@@ -32,7 +32,7 @@ const greetingMessage = computed(() => {
   >
     <div class="col-span-full self-start">
       <p
-        class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
+        class="text-xl font-semibold text-slate-900 dark:text-white  tracking-[0.3px]"
       >
         {{ greetingMessage }}
       </p>

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

@@ -54,11 +54,9 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
+    class="flex justify-between items-center h-20 min-h-[3.5rem] py-2 max-w-[960px] mx-auto w-full"
-  >
-    <h1
-      class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
   >
+    <h1 class="flex items-center mb-0 text-xl font-medium text-n-slate-12">
       <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <BackButton
         v-if="showBackButton"
@@ -66,23 +64,20 @@ export default {
         :back-url="backUrl"
         class="ml-2 mr-4"
       />
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClass"
-        class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
-      />
       <slot />
-      <span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
+      <span
+        class="text-xl font-medium text-n-slate-12 font-interDisplay tracking-[0.3px]"
+      >
         {{ headerTitle }}
       </span>
     </h1>
+    <slot name="action-button" />
     <router-link
       v-if="showNewButton && isAdmin"
       :to="buttonRoute"
-      class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
+      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>

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

@@ -20,10 +20,10 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full gap-8 font-inter">
+  <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>
+    <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" />

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

@@ -8,9 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div
+  <div class="flex flex-col w-full h-full m-0 overflow-auto bg-n-background">
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-white dark:bg-slate-900 font-inter"
-  >
     <div class="flex items-start w-full max-w-6xl mx-auto">
       <router-view v-slot="{ Component }">
         <keep-alive v-if="keepAlive">

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

@@ -22,9 +22,7 @@ const showNewButton = computed(
 </script>
 
 <template>
-  <div
+  <div class="w-full h-full bg-n-background overflow-auto">
-    class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
-  >
     <SettingsHeader
       button-route="new"
       :icon="icon"

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

@@ -161,15 +161,16 @@ export default {
 </script>
 
 <template>
-  <div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
-    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
   <div
-        class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
+    class="flex-grow flex-shrink min-w-0 p-6 overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 max-w-[960px] w-full mx-auto mb-10"
   >
+    <div v-if="!uiFlags.isFetchingItem">
+      <form @submit.prevent="updateAccount">
+        <div class="flex flex-row p-4 border-n-weak border-b">
           <div
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
+            class="flex-grow-0 flex-shrink-0 flex-[30%] min-w-0 py-4 pr-6 pl-0"
           >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
+            <h4 class="text-lg font-medium text-n-slate-12">
               {{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
             </h4>
             <p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
@@ -223,8 +224,7 @@ export default {
               <input
                 v-model="supportEmail"
                 type="text"
-              :placeholder="
+                :placeholder="$t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
-                $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
                   "
               />
             </label>
@@ -236,8 +236,7 @@ export default {
               <input
                 v-model="autoResolveDuration"
                 type="number"
-              :placeholder="
+                :placeholder="$t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
-                $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
                   "
                 @blur="v$.autoResolveDuration.$touch"
               />
@@ -245,16 +244,21 @@ export default {
                 {{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
               </span>
             </label>
-        </div>
-      </div>
 
+            <woot-submit-button
+              class="button nice"
+              :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
+              :loading="isUpdating"
+            />
+          </div>
+        </div>
+      </form>
+
+      <div class="flex flex-row p-4 text-n-slate-12">
         <div
-        class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
+          class="flex-grow-0 flex-shrink-0 flex-[30%] min-w-0 py-4 pr-6 pl-0"
         >
-        <div
+          <h4 class="text-lg font-medium text-n-slate-12">
-          class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
-        >
-          <h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
             {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
           </h4>
           <p>
@@ -265,7 +269,7 @@ export default {
           <woot-code :script="getAccountId" />
         </div>
       </div>
-      <div class="p-4 text-sm text-center">
+      <div class="p-4 text-sm text-center text-n-slate-11">
         <div>{{ `v${globalConfig.appVersion}` }}</div>
         <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
           {{
@@ -278,14 +282,7 @@ export default {
           <div>{{ `Build ${globalConfig.gitSha}` }}</div>
         </div>
       </div>
-
+    </div>
-      <woot-submit-button
+    <woot-loading-state v-else />
-        class="button nice success button--fixed-top"
-        :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
-        :loading="isUpdating"
-      />
-    </form>
-
-    <woot-loading-state v-if="uiFlags.isFetchingItem" />
   </div>
 </template>

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

@@ -45,7 +45,9 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <div
+    class="flex-1 p-4 max-w-[960px] w-full mx-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5"
+  >
     <div class="flex flex-row gap-4">
       <div class="w-full lg:w-3/5">
         <woot-loading-state
@@ -76,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') }}

app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue

@@ -46,11 +46,16 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col h-auto overflow-auto">
+  <div
+    class="max-w-[960px] mx-auto w-full shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 mb-10"
+  >
     <div class="flex flex-row">
       <div class="w-[68%]">
         <div class="h-[calc(100vh-56px)] relative">
-          <CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
+          <CsmlMonacoEditor
+            v-model="bot.csmlContent"
+            class="w-full h-full rounded-tl-xl"
+          />
           <div
             v-if="v$.bot.csmlContent.$error"
             class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"

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
+          <Button
-            class="rounded-md button nice"
+            :label="$t('AGENT_MGMT.HEADER_BTN_TXT')"
-            icon="add-circle"
+            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">

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

@@ -158,7 +158,6 @@ 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')" />
 
@@ -229,9 +228,7 @@ export default {
           <multiselect
             ref="tagInput"
             v-model="values"
-              :placeholder="
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
-                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
-              "
             label="name"
             track-by="name"
             :class="{ invalid: isMultiselectInvalid }"
@@ -281,7 +278,6 @@ export default {
       </div>
     </form>
   </div>
-  </woot-modal>
 </template>
 
 <style lang="scss" scoped>

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
+          <Button
-            class="button nice rounded-md"
+            :label="$t('ATTRIBUTES_MGMT.HEADER_BTN_TXT')"
-            icon="add-circle"
+            icon="i-lucide-plus"
+            size="sm"
             @click="openAddPopup"
-          >
+          />
-            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
         </template>
       </BaseSettingsHeader>
     </template>

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

@@ -83,7 +83,9 @@ 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 w-full max-w-[960px] mx-auto text-slate-700 dark:text-slate-300"
+    >
       <woot-loading-state
         v-if="uiFlags.fetchingList"
         :message="$t('AUDIT_LOGS.LOADING')"
@@ -95,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"
@@ -106,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">

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
+          <Button
-            class="button nice rounded-md"
+            :label="$t('AUTOMATION.HEADER_BTN_TXT')"
-            icon="add-circle"
+            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"

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

@@ -58,17 +58,18 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
+  <div class="flex-1 py-6 overflow-auto mx-auto max-w-[960px] w-full p-1">
     <woot-loading-state v-if="uiFlags.isFetchingItem" />
     <div v-else-if="!hasABillingPlan">
       <p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
     </div>
-    <div v-else class="w-full">
+    <div v-else class="w-full flex flex-col gap-5">
-      <div class="current-plan--details">
+      <div class="border-b border-n-weak pb-4">
-        <h6>{{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}</h6>
+        <h6 class="text-n-slate-12">
+          {{ $t('BILLING_SETTINGS.CURRENT_PLAN.TITLE') }}
+        </h6>
         <div
-          v-dompurify-html="
+          v-dompurify-html="formatMessage(
-            formatMessage(
             $t('BILLING_SETTINGS.CURRENT_PLAN.PLAN_NOTE', {
               plan: planName,
               quantity: subscribedQuantity,
@@ -93,31 +94,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style lang="scss">
-.manage-subscription {
-  @apply bg-white dark:bg-slate-800 flex justify-between mb-2 py-6 px-4 items-center rounded-md border border-solid border-slate-75 dark:border-slate-700;
-}
-
-.current-plan--details {
-  @apply border-b border-solid border-slate-75 dark:border-slate-800 mb-4 pb-4;
-
-  h6 {
-    @apply text-slate-800 dark:text-slate-100;
-  }
-
-  p {
-    @apply text-slate-600 dark:text-slate-200;
-  }
-}
-
-.manage-subscription {
-  .manage-subscription--description {
-    @apply mb-0 text-slate-600 dark:text-slate-200;
-  }
-
-  h6 {
-    @apply text-slate-800 dark:text-slate-100;
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingItem.vue

@@ -1,6 +1,6 @@
-<script>
+<script setup>
-export default {
+import Button from 'dashboard/components-next/button/Button.vue';
-  props: {
+defineProps({
   title: {
     type: String,
     default: '',
@@ -18,23 +18,27 @@ export default {
     type: String,
     default: 'edit',
   },
-  },
+});
-  emits: ['open'],
+defineEmits(['open']);
-};
 </script>
 
 <template>
-  <div class="manage-subscription">
+  <div
+    class="flex justify-between items-center shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5"
+  >
     <div>
-      <h6>{{ title }}</h6>
+      <h6 class="text-n-slate-12">{{ title }}</h6>
-      <p class="manage-subscription--description">
+      <p class="mb-0 text-n-slate-11">
         {{ description }}
       </p>
     </div>
     <div>
-      <woot-button variant="smooth" :icon="buttonIcon" @click="$emit('open')">
+      <Button
-        {{ buttonLabel }}
+        :label="buttonLabel"
-      </woot-button>
+        variant="faded"
+        size="sm"
+        @click="$emit('open')"
+      />
     </div>
   </div>
 </template>

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,7 +80,6 @@ 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')"
@@ -133,7 +130,6 @@ export default {
       </div>
     </form>
   </div>
-  </Modal>
 </template>
 
 <style scoped lang="scss">

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,17 +125,15 @@ const tableHeaders = computed(() => {
       feature-name="canned_responses"
     >
       <template #actions>
-        <woot-button
+        <Button
-          class="button nice rounded-md"
+          :label="$t('CANNED_MGMT.HEADER_BTN_TXT')"
-          icon="add-circle"
+          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">
-    <div class="mt-6 flex-1">
       <woot-loading-state
         v-if="uiFlags.fetchingList"
         :message="$t('CANNED_MGMT.LOADING')"
@@ -145,10 +144,7 @@ const tableHeaders = computed(() => {
       >
         {{ $t('CANNED_MGMT.LIST.404') }}
       </p>
-      <table
+      <table v-else class="min-w-full overflow-x-auto divide-y divide-n-weak">
-        v-else
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
         <thead>
           <th
             v-for="thHeader in tableHeaders"
@@ -174,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"
@@ -213,7 +209,6 @@ const tableHeaders = computed(() => {
         </tbody>
       </table>
     </div>
-
     <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
       <AddCanned :on-close="hideAddPopup" />
     </woot-modal>

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

@@ -38,31 +38,14 @@ const openInNewTab = url => {
 </script>
 
 <template>
-  <div class="flex flex-col items-start w-full gap-2 pt-4">
+  <div class="flex flex-col items-start w-full gap-2 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 justify-between w-full gap-4 h-20 border-b border-n-weak"
-          class="flex items-center w-10 h-10 p-1 rounded-full bg-woot-25/60 dark:bg-woot-900/60"
     >
-          <div
+      <div class="flex gap-3">
-            class="flex items-center justify-center w-full h-full rounded-full bg-woot-75/70 dark:bg-woot-800/40"
+        <BackButton v-if="backButtonLabel" compact />
-          >
-            <fluent-icon
-              size="14"
-              :icon="iconName"
-              type="outline"
-              class="flex-shrink-0 text-woot-500 dark:text-woot-500"
-            />
-          </div>
-        </div>
         <h1
-          class="text-2xl font-semibold font-interDisplay 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>
@@ -72,9 +55,9 @@ const openInNewTab = url => {
         <slot name="actions" />
       </div>
     </div>
-    <div class="flex flex-col gap-3 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-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
+        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>
@@ -84,14 +67,14 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
+          class="sm:inline-flex hidden gap-1 w-fit items-center text-n-brand text-sm font-medium hover:underline"
         >
           {{ linkText }}
           <fluent-icon
             size="16"
             icon="chevron-right"
             type="outline"
-            class="flex-shrink-0 text-woot-500 dark:text-woot-500"
+            class="flex-shrink-0 text-n-brand"
           />
         </a>
       </CustomBrandPolicyWrapper>
@@ -105,7 +88,7 @@ const openInNewTab = url => {
           v-if="helpURL && linkText"
           color-scheme="secondary"
           icon="arrow-outwards"
-          class="flex-row-reverse rounded-md min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
+          class="flex-row-reverse rounded-md text-sm min-w-0 !bg-slate-50 !text-slate-900 dark:!text-white dark:!bg-slate-800"
           @click="openInNewTab(helpURL)"
         >
           {{ linkText }}

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

@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <div
-    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 w-full"
+    class="flex relative flex-col sm:flex-row px-4 py-4 gap-4 sm:px-6 sm:py-5 justify-between shadow group bg-n-solid-2 rounded-xl outline-1 outline outline-n-container w-full"
   >
     <slot name="leftSection">
       <div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">

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
+          <Button
-            class="rounded-md button nice"
+            :label="$t('CUSTOM_ROLE.HEADER_BTN_TXT')"
-            icon="add-circle"
+            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

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

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

@@ -62,7 +62,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="h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
       <div class="w-full">

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

@@ -62,13 +62,12 @@ 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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       class="max-w-4xl"
       :header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
-      :header-content="
+      :header-content="useInstallationName(
-        useInstallationName(
         $t('INBOX_MGMT.ADD.AUTH.DESC'),
         globalConfig.installationName
       )

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

@@ -70,7 +70,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"

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

@@ -40,8 +40,9 @@ export default {
 </script>
 
 <template>
+  <div class="max-w-[960px] mx-auto w-full flex">
     <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+      class="flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
     >
       <woot-wizard
         class="hidden md:block w-1/4"
@@ -50,4 +51,5 @@ export default {
       />
       <router-view />
     </div>
+  </div>
 </template>

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"
+            :label="$t('SETTINGS.INBOXES.NEW_INBOX')"
-            :to="{ name: 'settings_inbox_new' }"
+            icon="i-lucide-plus"
-          >
+            size="sm"
-            <fluent-icon icon="add-circle" />
+            @click="onClickNewInbox"
-            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
+          />
-          </router-link>
         </template>
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table
+      <table class="min-w-full overflow-x-auto divide-y divide-n-weak">
-        class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
-      >
         <tbody
           class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
         >

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

@@ -161,8 +161,7 @@ export default {
 
     inboxName() {
       if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
-        return `${this.inbox.name} (${
+        return `${this.inbox.name} (${this.inbox.messaging_service_sid || this.inbox.phone_number
-          this.inbox.messaging_service_sid || this.inbox.phone_number
           })`;
       }
       if (this.isAWhatsAppChannel) {
@@ -362,7 +361,7 @@ export default {
 
 <template>
   <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 max-w-[960px] mx-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
   >
     <SettingIntroBanner
       :header-image="inbox.avatarUrl"
@@ -407,8 +406,7 @@ export default {
           :class="{ error: v$.selectedInboxName.$error }"
           :label="inboxNameLabel"
           :placeholder="inboxNamePlaceHolder"
-          :error="
+          :error="v$.selectedInboxName.$error
-            v$.selectedInboxName.$error
               ? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
               : ''
             "
@@ -419,14 +417,11 @@ export default {
           v-model="webhookUrl"
           class="w-3/4 pb-4"
           :class="{ error: v$.webhookUrl.$error }"
-          :label="
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
             "
-          :placeholder="
+          :placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
             "
-          :error="
+          :error="v$.webhookUrl.$error
-            v$.webhookUrl.$error
               ? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
               : ''
             "
@@ -437,19 +432,16 @@ export default {
           v-model="channelWebsiteUrl"
           class="w-3/4 pb-4"
           :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
-          :placeholder="
+          :placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
             "
         />
         <woot-input
           v-if="isAWebWidgetInbox"
           v-model="channelWelcomeTitle"
           class="w-3/4 pb-4"
-          :label="
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
             "
-          :placeholder="
+          :placeholder="$t(
-            $t(
             'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
           )
             "
@@ -459,11 +451,9 @@ export default {
           v-if="isAWebWidgetInbox"
           v-model="channelWelcomeTagline"
           class="w-3/4 pb-4"
-          :label="
+          :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
             "
-          :placeholder="
+          :placeholder="$t(
-            $t(
             'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
           )
             "
@@ -510,13 +500,11 @@ export default {
         <div v-if="greetingEnabled" class="pb-4">
           <GreetingsEditor
             v-model="greetingMessage"
-            :label="
+            :label="$t(
-              $t(
               'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
             )
               "
-            :placeholder="
+            :placeholder="$t(
-              $t(
               'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
             )
               "
@@ -726,8 +714,7 @@ export default {
               <input
                 ref="businessNameInput"
                 v-model="businessName"
-                :placeholder="
+                :placeholder="$t(
-                  $t(
                   'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
                 )
                   "

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

@@ -64,7 +64,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
@@ -77,8 +77,7 @@ export default {
           <input
             v-model="channelName"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
               "
             @blur="v$.channelName.$touch"
           />
@@ -94,8 +93,7 @@ export default {
           <input
             v-model="webhookUrl"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
               "
             @blur="v$.webhookUrl.$touch"
           />

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

@@ -55,7 +55,7 @@ function onClick(emailProvider) {
 <template>
   <div
     v-if="!provider"
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class=" h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       class="max-w-4xl"

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

@@ -207,7 +207,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <div
       v-if="!hasLoginStarted"
@@ -246,8 +246,7 @@ export default {
         <div class="w-full">
           <PageHeader
             :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
-            :header-content="
+            :header-content="useInstallationName(
-              useInstallationName(
               $t('INBOX_MGMT.ADD.DETAILS.DESC'),
               globalConfig.installationName
             )

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

@@ -70,7 +70,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
@@ -83,8 +83,7 @@ export default {
           <input
             v-model="channelName"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
               "
             @blur="v$.channelName.$touch"
           />
@@ -100,8 +99,7 @@ export default {
           <input
             v-model="lineChannelId"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
               "
             @blur="v$.lineChannelId.$touch"
           />
@@ -114,8 +112,7 @@ export default {
           <input
             v-model="lineChannelSecret"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
               "
             @blur="v$.lineChannelSecret.$touch"
           />
@@ -128,8 +125,7 @@ export default {
           <input
             v-model="lineChannelToken"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
               "
             @blur="v$.lineChannelToken.$touch"
           />

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

@@ -19,7 +19,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"

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

@@ -64,7 +64,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
@@ -77,8 +77,7 @@ export default {
           <input
             v-model="botToken"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
               "
             @blur="v$.botToken.$touch"
           />

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

@@ -27,7 +27,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=" 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="login-init h-full text-center">
       <form @submit.prevent="requestAuthorization">
@@ -46,10 +46,12 @@ export default {
 <style scoped lang="scss">
 .login-init {
   @apply pt-[30%] text-center;
+
   p {
     @apply p-6;
   }
-  > a > img {
+
+  >a>img {
     @apply w-60;
   }
 }

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

@@ -73,7 +73,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
@@ -104,8 +104,7 @@ export default {
           <input
             v-model="channelWebsiteUrl"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
               "
           />
         </label>
@@ -124,8 +123,7 @@ export default {
           <input
             v-model="channelWelcomeTitle"
             type="text"
-            :placeholder="
+            :placeholder="$t(
-              $t(
               'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
             )
               "
@@ -140,8 +138,7 @@ export default {
           <input
             v-model="channelWelcomeTagline"
             type="text"
-            :placeholder="
+            :placeholder="$t(
-              $t(
               'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
             )
               "
@@ -178,11 +175,9 @@ export default {
         v-if="greetingEnabled"
         v-model="greetingMessage"
         class="w-full"
-        :label="
+        :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
-          $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
           "
-        :placeholder="
+        :placeholder="$t(
-          $t(
           'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
         )
           "

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

@@ -21,7 +21,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue

@@ -69,7 +69,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
@@ -82,8 +82,7 @@ export default {
           <input
             v-model="channelName"
             type="text"
-            :placeholder="
+            :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
-              $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
               "
             @blur="v$.channelName.$touch"
           />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue

@@ -67,7 +67,7 @@ async function requestAuthorization() {
 
 <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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <SettingsSubPageHeader
       :header-title="title"

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
+        <NextButton
-          class="rounded-md button nice"
+          :label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT')"
-          icon="add-circle"
+          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,13 +153,11 @@ export default {
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.TITLE')"
-      :message="
+      :message="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.MESSAGE', {
         appName: selectedApp.title,
       })
         "
-      :confirm-text="
+      :confirm-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
-        $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_YES')
         "
       :reject-text="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.DELETE.CONFIRM_NO')"
     />

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

@@ -34,7 +34,9 @@ onMounted(() => {
     </template>
     <template #body>
       <div class="flex-grow flex-shrink overflow-auto">
-        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <div
+          class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-1 mb-10"
+        >
           <IntegrationItem
             v-for="item in integrationList"
             :id="item.id"

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') }}

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

@@ -47,7 +47,7 @@ const actionURL = computed(() =>
 
 <template>
   <div
-    class="flex flex-col flex-1 p-6 bg-white border border-solid rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-700/50"
+    class="flex flex-col flex-1 p-6 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2 px-6 py-5"
   >
     <div class="flex items-start justify-between">
       <div class="flex h-12 w-12 mb-4">

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
+            <h3 class="text-xl font-medium mb-1 text-n-slate-12">
-              class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100"
-            >
               {{ integration.name }}
             </h3>
-            <p class="text-slate-700 dark:text-slate-200">
+            <p class="text-n-slate-11">
               {{ integration.description }}
             </p>
           </div>

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"

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

@@ -60,28 +60,21 @@ 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
+        <fluent-icon icon="alert" class="text-n-amber-12" size="24" />
-          icon="alert"
-          class="text-yellow-500 dark:text-yellow-400"
-          size="24"
-        />
       </div>
       <div class="ml-3">
-        <p
+        <p class="mb-1 text-base font-semibold text-n-slate-12">
-          class="mb-1 text-base font-semibold text-yellow-900 dark:text-yellow-500"
-        >
           {{
             $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="
+            v-dompurify-html="formatMessage(
-              formatMessage(
               useInstallationName(
                 errorDescription,
                 globalConfig.installationName
@@ -98,8 +91,7 @@ export default {
         v-if="!availableChannels.length"
         button-class="smooth small warning"
         :loading="uiFlags.isFetchingSlackChannels"
-        :button-text="
+        :button-text="$t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
-          $t('INTEGRATION_SETTINGS.SLACK.SELECT_CHANNEL.BUTTON_TEXT')
           "
         spinner-class="warning"
         @click="fetchChannels"
@@ -107,7 +99,7 @@ export default {
       <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') }}

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

@@ -18,16 +18,15 @@ 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">
+    <div class="prose-lg max-w-5xl text-n-slate-11">
-      <h5 class="dark:text-slate-100">
+      <h5>
         {{ $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.TITLE') }}
       </h5>
       <p>
         <span
-          v-dompurify-html="
+          v-dompurify-html="formatMessage(
-            formatMessage(
             $t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY', {
               selectedChannelName: selectedChannelName,
             }),

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,8 +155,7 @@ export default {
       :on-close="closeDeletePopup"
       :on-confirm="confirmDeletion"
       :title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
-      :message="
+      :message="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
-        $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE', {
         webhookURL: selectedWebHook.url,
       })
         "

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
+          <Button
-            class="rounded-md button nice"
+            :label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
-            icon="add-circle"
+            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

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
+          <Button
-            :to="{ name: 'macros_new' }"
+            :label="$t('MACROS.HEADER_BTN_TXT')"
-            class="button rounded-md primary"
+            icon="i-lucide-plus"
-          >
+            size="sm"
-            <fluent-icon icon="add-circle" />
+            @click="onClickNewMacro"
-            <span class="button__content">
+          />
-              {{ $t('MACROS.HEADER_BTN_TXT') }}
-            </span>
-          </router-link>
         </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"

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

@@ -8,6 +8,7 @@ import { MACRO_ACTION_TYPES } from './constants';
 import { useAlert } from 'dashboard/composables';
 import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
 import { useMacros } from 'dashboard/composables/useMacros';
+import SettingsHeader from '../SettingsHeader.vue';
 
 const store = useStore();
 const getters = useStoreGetters();
@@ -122,11 +123,16 @@ const saveMacro = async macroData => {
 </script>
 
 <template>
-  <div class="flex flex-col flex-1 h-full overflow-auto">
+  <div class="overflow-auto flex-1 px-4 lg:px-0">
+    <SettingsHeader :header-title="t('MACROS.HEADER')" show-back-button />
+    <div
+      class="max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
+    >
       <woot-loading-state
         v-if="uiFlags.isFetchingItem"
         :message="t('MACROS.EDITOR.LOADING')"
       />
+
       <MacroForm
         v-if="macro && !uiFlags.isFetchingItem"
         :macro-data="macro"
@@ -134,4 +140,31 @@ const saveMacro = async macroData => {
         @submit="saveMacro"
       />
     </div>
+  </div>
 </template>
+
+<style scoped>
+@tailwind components;
+
+@layer components {
+  .macro-gradient-radial {
+    background-image: radial-gradient(ellipse at center,
+        transparent 0%,
+        #fdfdfd 80%),
+      radial-gradient(#cbe5ff 1.2px, transparent 0);
+  }
+
+  .macro-dark-gradient-radial {
+    background-image: radial-gradient(circle at center,
+        transparent 0%,
+        #121213 70%),
+      radial-gradient(#293f51 1.2px, transparent 0);
+  }
+
+  .macro-gradient-radial-size {
+    background-size:
+      100% 100%,
+      1rem 1rem;
+  }
+}
+</style>

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

@@ -110,7 +110,7 @@ export default {
 <template>
   <div class="flex flex-col w-full h-auto md:flex-row md:h-full">
     <div
-      class="flex-1 w-full h-full max-h-full px-12 py-4 overflow-y-auto md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
+      class="flex-1 w-full h-full max-h-full px-6 py-4 overflow-y-auto md:w-auto"
     >
       <MacroNodes
         v-model="macro.actions"
@@ -121,7 +121,7 @@ export default {
         @reset-action="resetNode"
       />
     </div>
-    <div class="w-full md:w-1/3">
+    <div class="w-96 p-4">
       <MacroProperties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"
@@ -132,21 +132,3 @@ export default {
     </div>
   </div>
 </template>
-
-<style scoped>
-@tailwind components;
-
-@layer components {
-  .macro-gradient-radial {
-    background-image: radial-gradient(#ebf0f5 1.2px, transparent 0);
-  }
-
-  .macro-dark-gradient-radial {
-    background-image: radial-gradient(#293f51 1.2px, transparent 0);
-  }
-
-  .macro-gradient-radial-size {
-    background-size: 1rem 1rem;
-  }
-}
-</style>

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

@@ -63,11 +63,9 @@ const dropdownValues = () => {
       class="absolute cursor-move -left-8 macros__node-drag-handle"
     />
     <div
-      class="flex-grow p-2 mr-2 rounded-md shadow-sm"
+      class="flex-grow p-2 mr-2 rounded-md shadow outline outline-1 outline-n-container"
       :class="
-        errorKey
+        errorKey ? 'bg-red-50 animate-shake dark:bg-red-800' : 'bg-n-solid-2'
-          ? 'bg-red-50 animate-shake dark:bg-red-800'
-          : 'bg-white dark:bg-slate-700'
       "
     >
       <ActionInput
@@ -87,6 +85,7 @@ const dropdownValues = () => {
       v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
       icon="delete"
       size="small"
+      class="min-w-8"
       variant="smooth"
       color-scheme="alert"
       @click="$emit('deleteNode')"

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

@@ -44,11 +44,12 @@ export default {
 <template>
   <div class="macros__nodes">
     <div class="macro__node">
-      <div>
+      <div class="relative z-10">
-        <woot-label
+        <div
-          :title="$t('MACROS.EDITOR.START_FLOW')"
+          class="bg-n-solid-2 rounded-lg inline mt-2 text-sm p-2 border-n-weak border"
-          color-scheme="primary"
+        >
-        />
+          {{ $t('MACROS.EDITOR.START_FLOW') }}
+        </div>
       </div>
     </div>
     <Draggable
@@ -68,8 +69,7 @@ export default {
             type="add"
             :index="i"
             :error-key="errors[`action_${i}`]"
-            :file-name="
+            :file-name="fileName(
-              fileName(
               actionData[i].action_params[0],
               actionData[i].action_name,
               files
@@ -89,19 +89,18 @@ 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') }}
         </woot-button>
       </div>
     </div>
-    <div class="macro__node">
+    <div class="macro__node relative">
-      <div>
+      <div
-        <woot-label
+        class="bg-n-solid-2 rounded-lg inline mt-2 text-sm p-2 border-n-weak border"
-          :title="$t('MACROS.EDITOR.END_FLOW')"
+      >
-          color-scheme="primary"
+        {{ $t('MACROS.EDITOR.END_FLOW') }}
-        />
       </div>
     </div>
   </div>
@@ -139,6 +138,7 @@ export default {
 
 .macros__node-action-container {
   position: relative;
+
   .drag-handle {
     position: absolute;
     left: var(--space-minus-medium);

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

@@ -15,8 +15,8 @@ export default {
   methods: {
     isActive(key) {
       return this.macroVisibility === key
-        ? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
+        ? ' !border-n-brand'
-        : 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
+        : ' !border-n-strong';
     },
     onUpdateName(value) {
       this.$emit('update:name', value);
@@ -30,7 +30,7 @@ export default {
 
 <template>
   <div
-    class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
+    class="px-6 py-5 bg-n-solid-2 outline-1 outline outline-n-container rounded-xl flex flex-col gap-3 text-n-slate-11"
   >
     <div>
       <woot-input
@@ -43,14 +43,12 @@ export default {
       />
     </div>
     <div class="mt-2">
-      <p
+      <p class="block m-0 text-sm font-medium text-n-slate-12 mb-2">
-        class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
-      >
         {{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}
       </p>
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+      <div class="grid gap-3 pb-4">
         <button
-          class="p-2 relative rounded-md border border-solid text-left cursor-default"
+          class="p-4 relative rounded-md border text-left cursor-default bg-n-alpha-3"
           :class="isActive('global')"
           @click="onUpdateVisibility('global')"
         >
@@ -58,19 +56,17 @@ 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
+          <p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
-          >
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-sm text-n-slate-11 mb-0">
             {{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
           </p>
         </button>
         <button
-          class="p-2 relative rounded-md border border-solid text-left cursor-default"
+          class="p-4 relative rounded-md border text-left cursor-default bg-n-alpha-3"
           :class="isActive('personal')"
           @click="onUpdateVisibility('personal')"
         >
@@ -78,25 +74,18 @@ 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
+          <p class="block m-0 text-sm text-n-slate-12 font-medium mb-1">
-            class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
-          >
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
           </p>
-          <p class="text-xs text-slate-500 dark:text-slate-200">
+          <p class="text-sm text-n-slate-11 mb-0">
             {{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
           </p>
         </button>
       </div>
-      <div
+      <div class="mt-2 flex items-start border-t border-n-weak pt-4">
-        class="mt-2 flex items-start p-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+        <p class="text-n-slate-11">
-      >
-        <fluent-icon icon="info" size="20" class="flex-shrink" />
-        <p
-          class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
-        >
           {{ $t('MACROS.ORDER_INFO') }}
         </p>
       </div>

app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js

@@ -4,7 +4,6 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-import SettingsContent from '../Wrapper.vue';
 import SettingsWrapper from '../SettingsWrapper.vue';
 import Macros from './Index.vue';
 import MacroEditor from './MacroEditor.vue';
@@ -26,18 +25,7 @@ export default {
       ],
     },
     {
-      path: frontendURL('accounts/:accountId/settings/macros'),
+      path: frontendURL('accounts/:accountId/settings/macros/:macroId/edit'),
-      component: SettingsContent,
-      props: () => {
-        return {
-          headerTitle: 'MACROS.HEADER',
-          icon: 'flash-settings',
-          showBackButton: true,
-        };
-      },
-      children: [
-        {
-          path: ':macroId/edit',
       name: 'macros_edit',
       component: MacroEditor,
       meta: {
@@ -45,7 +33,7 @@ export default {
       },
     },
     {
-          path: 'new',
+      path: frontendURL('accounts/:accountId/settings/macros/new'),
       name: 'macros_new',
       component: MacroEditor,
       meta: {
@@ -53,6 +41,4 @@ export default {
       },
     },
   ],
-    },
-  ],
 };

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

@@ -132,11 +132,7 @@ export default {
         class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
       >
         <MetricCard
-          :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
+          :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')"
-          :is-loading="uiFlags.isFetchingAccountConversationMetric"
-          :loading-message="
-            $t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
-          "
         >
           <div
             v-for="(metric, name, index) in conversationMetrics"

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

@@ -137,11 +137,7 @@ export default {
   <div
     class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 px-6 py-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
-    <div
+    <div v-for="metric in metrics" :key="metric.KEY">
-      v-for="metric in metrics"
-      :key="metric.KEY"
-      class="p-4 mb-3 rounded-md"
-    >
       <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
       <div class="mt-4 h-72">
         <woot-loading-state

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue

@@ -28,7 +28,7 @@ export default {
     class="flex flex-col m-0.5 px-6 py-5 overflow-hidden rounded-xl flex-grow text-n-slate-12 shadow outline-1 outline outline-n-container bg-n-solid-2 min-h-[10rem]"
   >
     <div
-      class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
+      class="card-header grid w-full mb-4 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
     >
       <slot name="header">
         <div class="flex items-center gap-2 flex-row">

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
+      <Button
-        color-scheme="primary"
+        :label="$t('SLA.ADD_ACTION')"
-        icon="plus-sign"
+        icon="i-lucide-plus"
-        class="rounded-xl"
+        size="sm"
         @click="$emit('add')"
-      >
+      />
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
     </template>
   </BaseSettingsHeader>
 </template>

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" />

app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue

@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto 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="overflow-x-auto h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"

app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue

@@ -38,7 +38,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue

@@ -23,10 +23,12 @@ export default {
 </script>
 
 <template>
+  <div class="overflow-auto p-4 h-full w-full">
     <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+      class="mx-auto max-w-[960px] flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
     >
       <woot-wizard class="hidden md:block w-1/4" :items="items" />
       <router-view />
     </div>
+  </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue

@@ -104,7 +104,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 overflow-x-auto 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="overflow-x-auto h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"
@@ -129,8 +129,7 @@ export default {
           :selected-agents="selectedAgents"
           :update-selected-agents="updateSelectedAgents"
           :is-working="isCreating"
-          :submit-button-text="
+          :submit-button-text="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
-            $t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
             "
         />
         <Spinner v-else />

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue

@@ -58,7 +58,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue

@@ -27,10 +27,12 @@ export default {
 </script>
 
 <template>
+  <div class="overflow-auto p-4 h-full w-full">
     <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
+      class="mx-auto max-w-[960px] flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
     >
       <woot-wizard class="hidden md:block w-1/4" :items="items" />
       <router-view />
     </div>
+  </div>
 </template>

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

@@ -10,7 +10,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=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"

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,19 +81,18 @@ const confirmPlaceHolderText = computed(() =>
       feature-name="team_management"
     >
       <template #actions>
-        <router-link
+        <Button
           v-if="isAdmin"
-          :to="{ name: 'settings_teams_new' }"
+          :label="$t('TEAMS_SETTINGS.NEW_TEAM')"
-          class="button rounded-md primary"
+          icon="i-lucide-plus"
-        >
+          size="sm"
-          <fluent-icon icon="add-circle" />
+          @click="onClickNewTeam"
-          <span class="button__content">
+        />
-            {{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
-          </span>
-        </router-link>
       </template>
     </BaseSettingsHeader>
-    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+    <div
+      class="mt-6 flex-1 w-full max-w-[960px] mx-auto text-slate-700 dark:text-slate-300"
+    >
       <woot-loading-state
         v-if="uiFlags.isFetching"
         :message="$t('TEAMS_SETTINGS.LOADING')"
@@ -98,11 +104,8 @@ const confirmPlaceHolderText = computed(() =>
         {{ $t('TEAMS_SETTINGS.LIST.404') }}
       </p>
 
-      <table
+      <table v-else class="min-w-full divide-y divide-n-weak">
-        v-else
+        <tbody class="divide-y divide-n-weak">
-        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
-      >
-        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
           <tr v-for="team in teamsList" :key="team.id">
             <td class="py-4 pr-4">
               <span class="block font-medium capitalize">{{ team.name }}</span>