chore: Update styles in settings pages (#11070)

---------

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

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -9,7 +9,7 @@ input[type='submit']:not(.reset-base),
   border-radius: $base-border-radius;
   color: $white;
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
   font-size: $font-size-small;
   -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-medium;

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -10,7 +10,7 @@
 
   &.no-margin {
     .mx-input {
-      @apply mb-0;
+      margin-bottom: 0 !important;
     }
   }
 

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

@@ -1,13 +1,13 @@
 @mixin label-multiselect-hover {
   &::after {
-    @apply text-woot-600 dark:text-woot-600;
+    @apply text-n-brand;
   }
 
   &:hover {
-    @apply bg-slate-50 dark:bg-slate-700;
+    @apply bg-n-slate-3;
 
     &::after {
-      @apply text-woot-500 dark:text-woot-500;
+      @apply text-n-blue-text;
     }
   }
 }
@@ -18,20 +18,16 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
 
     .multiselect__select {
-      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
+      @apply cursor-not-allowed bg-transparent rounded-lg;
-    }
-
-    .multiselect__tags {
-      @apply border-0;
     }
   }
 
   .multiselect--active {
     > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
     }
   }
 
@@ -44,7 +40,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-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
   }
 
   .multiselect__content {
@@ -61,15 +57,19 @@
         @apply mb-0;
       }
 
+      &::after {
+        @apply bottom-0 flex items-center justify-center text-center;
+      }
+
       &.multiselect__option--highlight {
-        @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
+        @apply bg-n-alpha-black2 text-n-slate-12;
       }
 
       &.multiselect__option--highlight:hover {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/10 text-n-slate-12;
 
         &::after {
-          @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
+          @apply bg-transparent text-center text-n-slate-12;
         }
       }
 
@@ -78,17 +78,17 @@
       }
 
       &.multiselect__option--selected {
-        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
+        @apply bg-n-brand/20 text-n-slate-12;
-
-        &.multiselect__option--highlight:hover {
-          @apply bg-woot-75 dark:bg-woot-600;
 
         &::after {
           @apply bg-transparent;
         }
 
+        &.multiselect__option--highlight:hover {
+          @apply bg-transparent;
+
           &::after:hover {
-            @apply text-slate-800 dark:text-slate-100;
+            @apply text-n-slate-12 bg-transparent;
           }
         }
       }
@@ -96,23 +96,27 @@
   }
 
   .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-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
 
     input {
-      @apply border-0 border-none;
+      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
     }
   }
 
+  .multiselect__spinner {
+    background-color: transparent;
+  }
+
   .multiselect__tags-wrap {
     @apply inline-block leading-none mt-1;
   }
 
   .multiselect__placeholder {
-    @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
+    @apply text-n-slate-10 font-normal pt-3;
   }
 
   .multiselect__tag {
-    @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
+    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
   }
 
   .multiselect__tag-icon {
@@ -125,7 +129,7 @@
   }
 
   .multiselect__single {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
   }
 }
 
@@ -143,11 +147,11 @@
     }
 
     > .multiselect__tags {
-      @apply border-transparent;
+      @apply outline-transparent;
     }
 
     &.multiselect--active > .multiselect__tags {
-      @apply border-woot-500 dark:border-woot-500;
+      @apply outline-n-blue-border;
     }
   }
 }
@@ -179,7 +183,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 text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
   }
 
   .multiselect__input {
@@ -187,7 +191,7 @@
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
   }
 
   .multiselect__placeholder {
@@ -208,6 +212,24 @@
   }
 }
 
+.multiselect--disabled {
+  background-color: rgba(var(--black-alpha-2)) !important;
+
+  .multiselect__tags {
+    @apply hover:outline-n-weak;
+  }
+}
+
+.multiselect--active {
+  .multiselect__select::before {
+    @apply top-[62%];
+  }
+}
+
+.multiselect__select::before {
+  top: 60% !important;
+}
+
 .multiselect-wrap--medium {
   .multiselect__tags,
   .multiselect__input {
@@ -217,16 +239,16 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
+    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
   }
 
   .multiselect__input {
     @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
+    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
   }
 
   .multiselect__placeholder {

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

@@ -1,22 +1,22 @@
 // scss-lint:disable QualifyingElement
 
 // Base typography
+// -------------------------
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply font-medium text-slate-800 dark:text-slate-50;
+  @apply font-medium text-n-slate-12;
 }
 
 p {
   text-rendering: optimizeLegibility;
-
   @apply mb-2 leading-[1.65] text-sm;
 
   a {
-    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
+    @apply text-n-brand dark:text-n-brand cursor-pointer;
   }
 }
 
@@ -41,64 +41,82 @@ dl:not(.reset-base) {
 }
 
 // Form elements
+// -------------------------
 label {
-  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
+  @apply text-n-slate-12 block m-0 leading-7 text-sm font-medium;
-
-  &.error {
-    input {
-      @apply mb-1;
-    }
-  }
 }
 
 .input-wrap,
 .help-text {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
+  @apply text-n-slate-11 text-sm font-medium;
-
-  .help-text {
-    @apply font-normal text-slate-600 dark:text-slate-400;
-  }
 }
 
 // Focus outline removal
 .button,
-textarea,
+textarea {
-input:focus {
   outline: none;
 }
 
-// Inputs
+// Field base styles (Input, TextArea, Select)
-input[type='text']:not(.reset-base),
+@layer components {
-input[type='number']:not(.reset-base),
+  .field-base {
-input[type='password']:not(.reset-base),
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
-input[type='date']:not(.reset-base),
+  }
-input[type='email']:not(.reset-base),
+
-input[type='url']:not(.reset-base) {
+  .field-disabled {
-  @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 opacity-50 outline-n-weak dark:outline-n-weak cursor-not-allowed;
+  }
+
+  .field-error {
+    @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
+  }
+}
+
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
+
+#{$form-input-selector} {
+  @apply field-base h-10;
 
   &[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;
+    @apply field-disabled;
+  }
+
+  &.error {
+    @apply field-error mb-1;
   }
 }
 
-input[type='file'] {
+input[type='file']:not(.multiselect__input) {
-  @apply bg-n-background leading-[1.15] mb-4;
+  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }
 
 // Select
 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 field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+
+  &[disabled] {
+    @apply field-disabled;
+  }
 }
 
 // Textarea
 textarea {
-  @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-16 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 field-base h-16;
 
   &[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;
+    @apply field-disabled;
+  }
+}
+
+// Add mb-1 when .help-text exists within the same label container
+label:has(.help-text) {
+  input,
+  textarea,
+  select {
+    margin-bottom: 0.25rem !important;
   }
 }
 
@@ -109,18 +127,41 @@ textarea {
   }
 }
 
+// FormKit support
+.formkit-outer[data-invalid='true'] {
+  #{$form-input-selector},
+  textarea,
+  select {
+    @apply field-error;
+  }
+
+  .formkit-message {
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
+  }
+}
+
 .error {
-  input,
+  #{$form-input-selector},
   input:not([type]),
   textarea,
   select,
   .multiselect > .multiselect__tags,
   .multiselect:not(.no-margin) {
-    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
+    @apply field-error;
+  }
+
+  // Only add mb-1 when .message exists within the same .error container
+  // And exclude no-margin from the margin-bottom
+  &:has(.message) {
+    input:not(.no-margin),
+    textarea,
+    select {
+      margin-bottom: 0.25rem !important;
+    }
   }
 
   .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
   }
 }
 
@@ -130,7 +171,7 @@ textarea {
   }
 
   .error {
-    @apply border-red-400 dark:border-red-400;
+    @apply text-n-ruby-9 dark:text-n-ruby-9;
   }
 }
 
@@ -141,11 +182,11 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
-      @apply text-red-800 dark:text-red-400;
+      @apply text-n-ruby-9 dark:text-n-ruby-9;
     }
 
     .hljs-name,

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

@@ -42,7 +42,7 @@ button {
     }
   }
 
-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
+  &:hover:not(:disabled):not(.success):not(.alert):not(.warning):not(
       .clear
     ):not(.smooth):not(.hollow) {
     @apply bg-n-brand/80 dark:bg-n-brand/80;
@@ -117,63 +117,63 @@ button {
   }
 
   &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:enabled:bg-n-brand/20;
 
     &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
+      @apply text-n-slate-12 border-n-slate-5 hover:enabled:bg-n-slate-5;
     }
 
     &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
+      @apply text-n-teal-9 border-n-teal-8 hover:enabled:bg-n-teal-5;
     }
 
     &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:enabled:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
+      @apply text-n-amber-9 border-n-amber-8 hover:enabled:bg-n-amber-5;
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;
 
     &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
+      @apply bg-n-slate-4 text-n-slate-11 hover:enabled:text-n-slate-11 hover:enabled:bg-n-slate-5;
     }
 
     &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
+      @apply bg-n-teal-4 text-n-teal-11 hover:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
     }
 
     &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
+      @apply bg-n-amber-4 text-n-amber-11 hover:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
     }
   }
 
   &.clear {
-    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
+    @apply text-n-blue-text hover:enabled:bg-n-brand/10 dark:hover:enabled:bg-n-brand/30;
 
     &.secondary {
-      @apply text-n-slate-12 hover:bg-n-slate-4;
+      @apply text-n-slate-12 hover:enabled:bg-n-slate-4;
     }
 
     &.success {
-      @apply text-n-teal-10 hover:bg-n-teal-4;
+      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-n-ruby-11 hover:bg-n-ruby-4;
+      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-n-amber-11 hover:bg-n-amber-4;
+      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
     }
 
     &:active {

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -247,10 +247,9 @@ defineExpose({
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"
             :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
                 !isDetailsView,
-              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
+              '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
-                isDetailsView,
             }"
             @update:model-value="handleCountrySelection"
           />
@@ -266,7 +265,9 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
+              !isDetailsView
+                ? '[&:not(.error,.focus)]:!outline-transparent'
+                : ''
             }`"
             class="w-full"
             @input="
@@ -303,7 +304,7 @@ defineExpose({
             v-model="
               state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
             "
-            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            class="w-auto min-w-[100px] text-sm bg-transparent outline-none reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
             :placeholder="item.placeholder"
             :size="item.placeholder.length"
             @input="emit('update', state)"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
           :placeholder="
             t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue

@@ -75,7 +75,7 @@ onMounted(() => {
       <div>
         <div class="flex justify-between w-full gap-4 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
           >
             {{
               t(
@@ -113,7 +113,7 @@ onMounted(() => {
         </div>
         <div class="flex justify-between w-full gap-3 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
           >
             {{
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue

@@ -95,7 +95,7 @@ defineExpose({ dialogRef });
         :placeholder="
           t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
         "
-        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
       />
     </div>
   </Dialog>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -303,7 +303,7 @@ const handleAvatarDelete = () => {
           :message="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
           "
-          class="[&>div>button]:!outline-n-weak"
+          class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
       <div class="flex items-start justify-between w-full gap-2">

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -96,7 +96,7 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -30,11 +30,11 @@ const bannerClass = computed(() => {
 
 const buttonClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-4 text-n-slate-11',
+    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
-    amber: 'bg-n-amber-4 text-n-amber-11',
+    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
-    teal: 'bg-n-teal-4 text-n-teal-11',
+    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 text-n-ruby-11',
+    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
-    blue: 'bg-n-blue-4 text-n-blue-11',
+    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
   };
 
   return classMap[props.color];

app/javascript/dashboard/components-next/button/Button.vue

@@ -100,49 +100,57 @@ const STYLE_CONFIG = {
   colors: {
     blue: {
       solid:
-        'bg-n-brand text-white hover:enabled:brightness-110 outline-transparent',
+        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-blue-border',
+      outline: 'text-n-blue-text outline-n-brand',
-      ghost: 'text-n-blue-text hover:enabled:bg-n-alpha-2 outline-transparent',
+      ghost:
-      link: 'text-n-blue-text hover:enabled:underline outline-transparent',
+        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
     },
     ruby: {
       solid:
-        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 outline-transparent',
+        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 focus-visible:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 outline-transparent',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 focus-visible:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 outline-n-ruby-8',
+      outline:
-      ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
-      link: 'text-n-ruby-9 hover:enabled:underline outline-transparent',
+      ghost:
+        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
     },
     amber: {
       solid:
-        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 outline-transparent',
+        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 focus-visible:bg-n-amber-10 outline-transparent',
       faded:
-        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 outline-transparent',
+        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 focus-visible:bg-n-amber-9/20 outline-transparent',
       outline:
-        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 outline-n-amber-9',
+        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 focus-visible:bg-n-amber-9/10 outline-n-amber-9',
-      link: 'text-n-amber-9 hover:enabled:underline outline-transparent',
+      link: 'text-n-amber-9 hover:enabled:underline focus-visible:underline outline-transparent',
-      ghost: 'text-n-amber-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+      ghost:
+        'text-n-amber-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 hover:enabled:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
-        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 outline-transparent',
+        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
-      outline: 'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10',
+      outline:
-      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 hover:enabled:underline outline-transparent',
+        'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10 focus-visible:bg-n-slate-9/10',
-      ghost: 'text-n-slate-12 hover:enabled:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 focus-visible:text-n-slate-12 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-slate-12 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
     teal: {
       solid:
-        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 outline-transparent',
+        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',
       faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 outline-transparent',
+        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
-      outline: 'text-n-teal-11 hover:enabled:bg-n-teal-9/10 outline-n-teal-9',
+      outline:
-      link: 'text-n-teal-9 hover:enabled:underline outline-transparent',
+        'text-n-teal-11 hover:enabled:bg-n-teal-9/10 focus-visible:bg-n-teal-9/10 outline-n-teal-9',
-      ghost: 'text-n-teal-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-teal-9 hover:enabled:underline focus-visible:underline outline-transparent',
+      ghost:
+        'text-n-teal-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -96,7 +96,7 @@ watch(
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
         :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"

app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue

@@ -69,7 +69,7 @@ defineExpose({
         :value="searchValue"
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
         @input="onInputSearch"
       />
     </div>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -75,7 +75,7 @@ onMounted(() => {
         :placeholder="
           searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
         "
-        class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
       />
     </div>
     <button

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -83,7 +83,7 @@ defineExpose({
       v-if="label"
       :for="id"
       :class="customLabelClass"
-      class="mb-0.5 text-sm font-medium text-n-slate-11"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -97,7 +97,7 @@ defineExpose({
       :placeholder="placeholder"
       :disabled="disabled"
       :class="customInputClass"
-      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"

app/javascript/dashboard/components-next/input/Input.vue

@@ -70,12 +70,12 @@ const messageClass = computed(() => {
   }
 });
 
-const inputBorderClass = computed(() => {
+const inputOutlineClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+      return 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
     default:
-      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak focus:border-n-brand dark:focus:border-n-brand';
+      return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
   }
 });
 
@@ -124,7 +124,7 @@ onMounted(() => {
       :value="modelValue"
       :class="[
         customInputClass,
-        inputBorderClass,
+        inputOutlineClass,
         {
           error: messageType === 'error',
           focus: isFocused,
@@ -134,7 +134,7 @@ onMounted(() => {
       :placeholder="placeholder"
       :disabled="disabled"
       :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -90,19 +90,19 @@ const activeCountry = computed(() =>
 
 const inputBorderClass = computed(() => {
   const errorClass =
-    'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
+    'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
   const focusClass =
-    'has-[:focus]:border-n-brand dark:has-[:focus]:border-n-brand';
+    'has-[:focus]:outline-n-brand dark:has-[:focus]:outline-n-brand';
 
   if (!props.showBorder) {
     if (hasError.value) return errorClass;
-    return `border-transparent ${focusClass}`;
+    return `outline-transparent ${focusClass}`;
   }
 
   if (hasError.value) {
     return errorClass;
   }
-  return `${focusClass} border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak`;
+  return `${focusClass} outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak`;
 });
 
 const phoneNumberError = computed(() => {
@@ -163,7 +163,7 @@ watch(
   <div>
     <div
       v-on-clickaway="() => closeCountryDropdown()"
-      class="relative flex items-center h-8 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] rounded-lg bg-n-alpha-black2"
       :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <Input
@@ -171,7 +171,7 @@ watch(
         type="tel"
         :placeholder="placeholder"
         :disabled="disabled"
-        custom-input-class="!border-0 h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
+        custom-input-class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
         class="w-full !flex-row"
       >
         <template #prefix>
@@ -185,7 +185,7 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
-              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span

app/javascript/dashboard/components-next/textarea/TextArea.vue

@@ -179,7 +179,7 @@ onMounted(() => {
         }"
         :disabled="disabled"
         rows="1"
-        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

app/javascript/dashboard/components/SettingsSection.vue

@@ -28,8 +28,8 @@ export default {
       'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
     }"
   >
-    <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
+    <div class="grid grid-cols-1 lg:grid-cols-8 gap-6">
-      <div class="col-span-2 xl:col-span-1">
+      <div class="col-span-2">
         <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="col-span-4 lg:col-span-4 2xl:col-span-3">
+      <div class="col-span-6 xl:col-span-5">
         <slot />
       </div>
     </div>

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

@@ -68,7 +68,7 @@ export default {
 <style lang="scss" scoped>
 .wizard-box {
   .item {
-    @apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 pr-4 pl-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5;
+    @apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
 
     &.active {
       h3 {

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

@@ -177,6 +177,7 @@ export default {
         icon="dismiss"
         variant="clear"
         color-scheme="secondary"
+        class="flex-shrink-0"
         @click="removeAction"
       />
     </div>
@@ -201,10 +202,10 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  @apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
+  @apply bg-n-background p-2 border border-solid border-n-strong dark:border-n-strong rounded-lg mb-2;
 
   &.is-a-macro {
-    @apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
+    @apply mb-0 bg-n-background dark:bg-n-solid-1 p-0 border-0 rounded-none;
   }
 }
 
@@ -213,15 +214,19 @@ export default {
 }
 
 .filter.has-error {
-  @apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
+  @apply bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5;
+
+  &.is-a-macro {
+    @apply bg-transparent;
+  }
 }
 
 .filter-inputs {
-  @apply flex;
+  @apply flex gap-1;
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
 }
 
 .action__question,

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

@@ -29,7 +29,7 @@ export default {
 
 <template>
   <div>
-    <div class="multiselect-wrap--small">
+    <div class="multiselect-wrap--small flex flex-col gap-1 mt-1">
       <multiselect
         v-model="selectedTeams"
         track-by="id"

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

@@ -11,13 +11,13 @@ export default {
   <div class="empty-state py-16 px-1 ml-0 mr-0">
     <h3
       v-if="title"
-      class="text-slate-700 dark:text-slate-200 block text-center w-full text-xl font-thin"
+      class="text-n-slate-12 block text-center w-full text-xl font-medium"
     >
       {{ title }}
     </h3>
     <p
       v-if="message"
-      class="block text-center text-slate-500 dark:text-slate-400 my-4 mx-auto w-[90%]"
+      class="block text-center text-n-slate-11 dark:text-slate-400 my-4 mx-auto w-[90%]"
     >
       {{ message }}
     </p>

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -127,8 +127,8 @@ export default {
     },
     getInputErrorClass(errorMessage) {
       return errorMessage
-        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
+        ? 'bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5'
-        : 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
+        : 'bg-n-background border-n-weak dark:border-n-weak';
     },
   },
 };
@@ -138,14 +138,14 @@ export default {
 <template>
   <div>
     <div
-      class="p-2 border border-solid rounded-md"
+      class="p-2 border border-solid rounded-lg"
       :class="getInputErrorClass(errorMessage)"
     >
-      <div class="flex">
+      <div class="flex gap-1">
         <select
           v-if="groupedFilters"
           v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          class="max-w-[30%] mb-0 mr-1"
           @change="resetFilter()"
         >
           <optgroup
@@ -166,7 +166,7 @@ export default {
         <select
           v-else
           v-model="attributeKey"
-          class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
+          class="max-w-[30%] mb-0 mr-1"
           @change="resetFilter()"
         >
           <option
@@ -179,10 +179,7 @@ export default {
           </option>
         </select>
 
-        <select
+        <select v-model="filterOperator" class="max-w-[20%] mb-0 mr-1">
-          v-model="filterOperator"
-          class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
-        >
           <option
             v-for="(operator, o) in operators"
             :key="o"
@@ -234,14 +231,14 @@ export default {
               v-model="values"
               type="date"
               :editable="false"
-              class="mb-0 datepicker"
+              class="!mb-0 datepicker"
             />
           </div>
           <input
             v-else
             v-model="values"
             type="text"
-            class="mb-0"
+            class="!mb-0"
             :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
@@ -287,7 +284,7 @@ export default {
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
 }
 
 .multiselect {

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

@@ -1,90 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-
-const props = defineProps({
-  allLabels: {
-    type: Array,
-    default: () => [],
-  },
-  savedLabels: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['add', 'remove']);
-
-const { isAdmin } = useAdmin();
-
-const showSearchDropdownLabel = ref(false);
-
-const selectedLabels = computed(() => {
-  return props.savedLabels.map(label => label.title);
-});
-
-const addItem = label => {
-  emit('add', label);
-};
-
-const removeItem = label => {
-  emit('remove', label);
-};
-
-const toggleLabels = () => {
-  showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
-};
-
-const closeDropdownLabel = () => {
-  showSearchDropdownLabel.value = false;
-};
-
-const keyboardEvents = {
-  KeyL: {
-    action: e => {
-      toggleLabels();
-      e.preventDefault();
-    },
-  },
-  Escape: {
-    action: () => closeDropdownLabel(),
-    allowOnFocusedInput: true,
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
-</script>
-
-<template>
-  <div v-on-clickaway="closeDropdownLabel" class="relative leading-6">
-    <AddLabel @add="toggleLabels" />
-    <woot-label
-      v-for="label in savedLabels"
-      :key="label.id"
-      :title="label.title"
-      :description="label.description"
-      show-close
-      :color="label.color"
-      variant="smooth"
-      @remove="removeItem"
-    />
-    <div class="absolute w-full top-7">
-      <div
-        :class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
-        class="!box-border !w-full dropdown-pane"
-      >
-        <LabelDropdown
-          v-if="showSearchDropdownLabel"
-          :account-labels="allLabels"
-          :selected-labels="selectedLabels"
-          :allow-creation="isAdmin"
-          @add="addItem"
-          @remove="removeItem"
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -14,7 +14,8 @@ export default {
 </script>
 
 <template>
-  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
+  <div class="border-b border-solid border-n-weak/60">
+    <div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-8">
       <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
         {{ headerTitle }}
       </h2>
@@ -26,4 +27,5 @@ export default {
       </p>
       <slot />
     </div>
+  </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -783,15 +783,15 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 
 .is-private {
   .prosemirror-mention-node {
-    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-slate-900 dark:text-slate-25 py-0 px-1;
+    @apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-n-slate-12 py-0 px-1;
   }
 
   .ProseMirror-menubar-wrapper {
     > .ProseMirror {
-      @apply text-slate-800 dark:text-slate-25;
+      @apply text-n-slate-12;
 
       p {
-        @apply text-slate-800 dark:text-slate-25;
+        @apply text-n-slate-12;
       }
     }
   }
@@ -802,11 +802,11 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .message-editor {
-  @apply border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md py-0 px-1 mb-0;
+  @apply rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2 py-0 px-1 mb-0;
 }
 
 .editor_warning {
-  @apply border border-solid border-red-400 dark:border-red-400;
+  @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
 }
 
 .editor-warning__message {

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

@@ -1253,7 +1253,7 @@ export default {
   @apply relative py-0 px-4 -mt-px;
 
   textarea {
-    @apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
+    @apply shadow-none outline-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
   }
 }
 

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

@@ -97,7 +97,7 @@ export default {
           <woot-input
             v-model="v$.toEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             :class="{ error: v$.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -113,7 +113,7 @@ export default {
         <div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
           <woot-input
             v-model="v$.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             type="text"
             :class="{ error: v$.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -142,7 +142,7 @@ export default {
           <woot-input
             v-model="v$.bccEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
             :class="{ error: v$.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -63,7 +63,6 @@ export default {
   <label class="input-container">
     <span v-if="label">{{ label }}</span>
     <input
-      class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
       :value="modelValue"
       :type="type"
       :placeholder="placeholder"
@@ -82,7 +81,7 @@ export default {
 
 <style scoped lang="scss">
 .help-text {
-  @apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
+  @apply mt-0.5 text-xs not-italic text-n-slate-11;
 }
 
 .message {

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -175,15 +175,15 @@ export default {
 <template>
   <div class="relative phone-input--wrap">
     <div
-      class="flex items-center justify-start border border-solid rounded-md dark:bg-slate-900"
+      class="flex items-center justify-start border-none outline outline-1 rounded-lg bg-n-alpha-black2"
       :class="
         error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
+          ? 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
+          : 'mb-4 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6'
       "
     >
       <div
-        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-lg rounded-bl-lg flex items-center justify-center gap-1.5 bg-n-solid-3 h-10 w-14"
         @click.prevent="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry" class="mb-0">
@@ -194,7 +194,7 @@ export default {
       </div>
       <span
         v-if="activeDialCode"
-        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
+        class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal text-n-slate-12"
       >
         {{ activeDialCode }}
       </span>
@@ -202,7 +202,7 @@ export default {
         ref="phoneNumberInput"
         :value="phoneNumber"
         type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        class="no-margin !rounded-tl-none !rounded-bl-none !outline-none !border-0 font-normal !w-full !bg-transparent text-base !px-1.5 placeholder:font-normal"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -215,20 +215,22 @@ export default {
       ref="dropdown"
       v-on-clickaway="onOutsideClick"
       tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded-lg px-0 pt-0 pb-1 bg-n-alpha-3 backdrop-blur-[100px]"
       @keydown.prevent.up="moveUp"
       @keydown.prevent.down="moveDown"
       @keydown.prevent.enter="
         onSelectCountry(filteredCountriesBySearch[selectedIndex])
       "
     >
-      <div class="sticky top-0 p-1 bg-white dark:bg-slate-900">
+      <div
+        class="sticky top-0 p-1 bg-white dark:bg-transparent backdrop-blur-[100px]"
+      >
         <input
           ref="searchbar"
           v-model="searchCountry"
           type="text"
           :placeholder="$t('GENERAL.PHONE_INPUT.PLACEHOLDER')"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-2000 dark:!border-slate-6000"
+          class="!h-8 !mb-0 !text-sm !outline-n-brand dark:!outline-n-brand"
           @input="onSearchCountry"
         />
       </div>
@@ -236,10 +238,10 @@ export default {
         v-for="(country, index) in filteredCountriesBySearch"
         ref="dropdownItem"
         :key="index"
-        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2"
         :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
+          'bg-n-alpha-1 dark:bg-n-alpha-2': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+          'bg-n-alpha-1 dark:bg-n-alpha-2': index === selectedIndex,
         }"
         @click="onSelectCountry(country)"
       >
@@ -250,13 +252,13 @@ export default {
         >
           {{ country.name }}
         </span>
-        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
+        <span class="ml-1 text-xs text-n-slate-11">
-          country.dial_code
+          {{ country.dial_code }}
-        }}</span>
+        </span>
       </div>
       <div v-if="filteredCountriesBySearch.length === 0">
         <span
-          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
+          class="flex items-center justify-center mt-4 text-sm text-n-slate-10"
         >
           {{ $t('GENERAL.PHONE_INPUT.EMPTY_STATE') }}
         </span>

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

@@ -8,7 +8,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col w-full items-start">
+  <div class="flex flex-col w-full items-start mb-4">
     <h2
       class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100 break-words"
     >

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

@@ -12,6 +12,7 @@ const props = defineProps({
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
   showSidemenuIcon: { type: Boolean, default: true },
+  fullWidth: { type: Boolean, default: false },
 });
 
 const { t } = useI18n();
@@ -31,7 +32,10 @@ const showSettingsHeader = computed(
 
 <template>
   <div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
-    <div class="max-w-6xl mx-auto w-full flex flex-col flex-1">
+    <div
+      class="mx-auto w-full flex flex-col flex-1"
+      :class="{ 'max-w-6xl': !fullWidth }"
+    >
       <SettingsHeader
         v-if="showSettingsHeader"
         button-route="new"
@@ -43,6 +47,7 @@ const showSettingsHeader = computed(
         :show-new-button="showNewButton"
         :show-sidemenu-icon="showSidemenuIcon"
         class="sticky top-0 z-20"
+        :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
       />
 
       <router-view v-slot="{ Component }" class="px-5 flex-1 overflow-hidden">

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

@@ -100,17 +100,17 @@ const tableHeaders = computed(() => {
             <th
               v-for="thHeader in tableHeaders"
               :key="thHeader"
-              class="py-4 pr-4 text-left font-semibold text-n-slate-11"
+              class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
             >
               {{ thHeader }}
             </th>
           </thead>
           <tbody class="divide-y divide-n-weak text-n-slate-11">
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="py-4 pr-4 break-all whitespace-nowrap">
+              <td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
                 {{ generateLogText(auditLogItem) }}
               </td>
-              <td class="py-4 pr-4 break-all whitespace-nowrap">
+              <td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
                 {{
                   messageTimestamp(
                     auditLogItem.created_at,

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

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useAutomation } from 'dashboard/composables/useAutomation';
 import { validateAutomation } from 'dashboard/helper/validations';
 import {
@@ -39,6 +40,7 @@ export default {
   components: {
     FilterInputBox,
     AutomationActionInput,
+    NextButton,
   },
   props: {
     onClose: {
@@ -184,7 +186,7 @@ export default {
           </label>
           <p
             v-if="hasAutomationMutated"
-            class="text-xs text-right text-green-500 dark:text-green-500"
+            class="text-xs text-right text-green-500 pt-1 dark:text-green-500"
           >
             {{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
           </p>
@@ -243,15 +245,15 @@ export default {
               @remove-filter="removeFilter(i)"
             />
             <div class="mt-4">
-              <woot-button
+              <NextButton
-                icon="add"
+                icon="i-lucide-plus"
-                color-scheme="success"
+                blue
-                variant="smooth"
+                faded
-                size="small"
+                sm
                 @click="appendNewCondition"
               >
                 {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
+              </NextButton>
             </div>
           </div>
         </section>
@@ -287,27 +289,27 @@ export default {
               @remove-action="removeAction(i)"
             />
             <div class="mt-4">
-              <woot-button
+              <NextButton
-                icon="add"
+                icon="i-lucide-plus"
-                color-scheme="success"
+                blue
-                variant="smooth"
+                faded
-                size="small"
+                sm
                 @click="appendNewAction"
               >
                 {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
+              </NextButton>
             </div>
           </div>
         </section>
         <!-- // Actions End -->
         <div class="w-full">
           <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
+            <NextButton ghost blue @click.prevent="onClose">
               {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
+            </NextButton>
-            <woot-button @click="emitSaveAutomation">
+            <NextButton solid blue @click="emitSaveAutomation">
               {{ $t('AUTOMATION.ADD.SUBMIT') }}
-            </woot-button>
+            </NextButton>
           </div>
         </div>
       </div>

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

@@ -201,7 +201,7 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11"
+            class="py-4 ltr:pr-4 rtl:pl-4 rtl:text-right ltr:text-left font-semibold text-n-slate-11"
           >
             {{ thHeader }}
           </th>

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

@@ -153,7 +153,7 @@ const tableHeaders = computed(() => {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right"
           >
             <span v-if="thHeader !== tableHeaders[0]">
               {{ thHeader }}
@@ -179,12 +179,12 @@ const tableHeaders = computed(() => {
             :key="cannedItem.short_code"
           >
             <td
-              class="py-4 pr-4 truncate max-w-xs font-medium"
+              class="py-4 ltr:pr-4 rtl:pl-4 truncate max-w-xs font-medium"
               :title="cannedItem.short_code"
             >
               {{ cannedItem.short_code }}
             </td>
-            <td class="py-4 pr-4 md:break-all whitespace-normal">
+            <td class="py-4 ltr:pr-4 rtl:pl-4 md:break-all whitespace-normal">
               {{ cannedItem.content }}
             </td>
             <td class="py-4 flex justify-end gap-1">

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 group outline outline-n-container outline-1 bg-n-alpha-3 rounded-2xl shadow w-full"
+    class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-solid-2 rounded-2xl shadow 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

@@ -156,7 +156,7 @@ const confirmDeletion = () => {
           <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 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
           >
             <span class="mb-0">
               {{ thHeader }}

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

@@ -160,13 +160,13 @@ const isSubmitDisabled = computed(
     />
     <form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.name.$error }">
+        <label>
           {{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
           <input
             ref="nameInput"
             v-model.trim="name"
             type="text"
-            :class="{ '!border-red-500': v$.name.$error }"
+            :class="{ error: v$.name.$error }"
             :placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
             @blur="v$.name.$touch"
           />
@@ -174,7 +174,7 @@ const isSubmitDisabled = computed(
       </div>
 
       <div class="w-full">
-        <label :class="{ 'text-red-500': v$.description.$error }">
+        <label>
           {{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
 
           <textarea

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

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

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

@@ -28,15 +28,19 @@ const getFormattedPermissions = role => {
   <tbody class="divide-y divide-n-weak text-n-slate-11">
     <tr v-for="(customRole, index) in roles" :key="index">
       <td
-        class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
+        class="max-w-xs py-4 ltr:pr-4 rtl:pl-4 font-medium truncate align-baseline"
         :title="customRole.name"
       >
         {{ customRole.name }}
       </td>
-      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+      <td
+        class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
+      >
         {{ customRole.description }}
       </td>
-      <td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
+      <td
+        class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
+      >
         {{ getFormattedPermissions(customRole) }}
       </td>
       <td class="flex justify-end gap-1 py-4">

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

@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 
 import InboxMembersAPI from '../../../../api/inboxMembers';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -11,6 +12,7 @@ import { useVuelidate } from '@vuelidate/core';
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   validations: {
     selectedAgents: {
@@ -62,16 +64,16 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
-    <form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
+    <form class="flex flex-wrap flex-col mx-0" @submit.prevent="addAgents()">
       <div class="w-full">
         <PageHeader
           :header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
           :header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
         />
       </div>
-      <div class="w-3/5">
+      <div>
         <div class="w-full">
           <label :class="{ error: v$.selectedAgents.$error }">
             {{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
@@ -96,9 +98,12 @@ export default {
           </label>
         </div>
         <div class="w-full">
-          <woot-submit-button
+          <NextButton
-            :button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
+            type="submit"
-            :loading="isCreating"
+            :is-loading="isCreating"
+            solid
+            blue
+            :label="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
           />
         </div>
       </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       class="max-w-4xl"

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

@@ -1,9 +1,11 @@
 <script>
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     EmptyState,
+    NextButton,
   },
   computed: {
     currentInbox() {
@@ -70,7 +72,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('INBOX_MGMT.FINISH.TITLE')"
@@ -130,22 +132,28 @@ export default {
         </div>
         <div class="flex justify-center gap-2 mt-4">
           <router-link
-            class="rounded button hollow primary"
             :to="{
               name: 'settings_inbox_show',
               params: { inboxId: $route.params.inbox_id },
             }"
           >
-            {{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
+            <NextButton
+              outline
+              slate
+              :label="$t('INBOX_MGMT.FINISH.MORE_SETTINGS')"
+            />
           </router-link>
           <router-link
-            class="rounded button success"
             :to="{
               name: 'inbox_dashboard',
               params: { inboxId: $route.params.inbox_id },
             }"
           >
-            {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
+            <NextButton
+              solid
+              teal
+              :label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+            />
           </router-link>
         </div>
       </div>

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

@@ -4,10 +4,12 @@ import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -155,9 +157,10 @@ export default {
             {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
           </label>
         </div>
-        <woot-submit-button
+        <NextButton
-          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
+          type="submit"
-          :loading="uiFlags.isUpdatingIMAP"
+          :label="$t('INBOX_MGMT.IMAP.UPDATE')"
+          :is-loading="uiFlags.isUpdatingIMAP"
           :disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
         />
       </form>

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

@@ -40,12 +40,14 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-row overflow-auto h-full">
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full">
     <woot-wizard
-      class="hidden md:block w-1/4"
+      class="hidden md:block col-span-2"
       :global-config="globalConfig"
       :items="items"
     />
+    <div class="col-span-6">
       <router-view />
     </div>
+  </div>
 </template>

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

@@ -8,6 +8,7 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import ChannelName from './components/ChannelName.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -87,43 +88,25 @@ const openDelete = inbox => {
       </BaseSettingsHeader>
     </template>
     <template #body>
-      <table
+      <table class="min-w-full overflow-x-auto">
-        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"
+          class="divide-y divide-n-weak flex-1 text-slate-700 dark:text-slate-100"
         >
           <tr v-for="inbox in inboxesList" :key="inbox.id">
             <td class="py-4 ltr:pr-4 rtl:pl-4">
               <div class="flex items-center flex-row gap-4">
                 <Thumbnail
                   v-if="inbox.avatar_url"
-                  class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  class="bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
                   :src="inbox.avatar_url"
                   :username="inbox.name"
                   size="48px"
                 />
                 <div
                   v-else
-                  class="w-[48px] h-[48px] flex justify-center items-center bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
+                  class="w-[48px] h-[48px] flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
                 >
-                  <svg
+                  <ChannelIcon class="size-5" :inbox="inbox" />
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="32"
-                    height="32"
-                    viewBox="0 0 24 24"
-                    class="opacity-80 p-1 flex-shrink-0"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
-                      opacity=".35"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
-                    />
-                  </svg>
                 </div>
                 <div>
                   <span class="block font-medium capitalize">

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

@@ -4,10 +4,13 @@ import { useAlert } from 'dashboard/composables';
 import PreChatFields from './PreChatFields.vue';
 import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
     PreChatFields,
     WootMessageEditor,
+    NextButton,
   },
   props: {
     inbox: {
@@ -110,7 +113,7 @@ export default {
         </select>
       </label>
       <div v-if="preChatFormEnabled">
-        <div class="w-[70%]">
+        <div>
           <label>
             {{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
           </label>
@@ -122,7 +125,7 @@ export default {
             "
           />
         </div>
-        <div class="w-[70%] mt-4">
+        <div class="mt-4">
           <label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
           <table class="table w-full table-striped woot-table">
             <thead class="thead-dark">
@@ -161,11 +164,10 @@ export default {
         </div>
       </div>
       <div class="w-auto my-4">
-        <woot-submit-button
+        <NextButton
-          :button-text="
+          type="submit"
-            $t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')"
-          "
+          :is-loading="uiFlags.isUpdating"
-          :loading="uiFlags.isUpdating"
         />
       </div>
     </form>

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

@@ -18,6 +18,7 @@ import WidgetBuilder from './WidgetBuilder.vue';
 import BotConfiguration from './components/BotConfiguration.vue';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
@@ -34,6 +35,7 @@ export default {
     SenderNameExamplePreview,
     MicrosoftReauthorize,
     GoogleReauthorize,
+    NextButton,
   },
   mixins: [inboxMixin],
   setup() {
@@ -381,10 +383,10 @@ export default {
         />
       </woot-tabs>
     </SettingIntroBanner>
+    <section class="max-w-6xl mx-auto w-full">
       <MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
       <FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
       <GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
-
       <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
         <SettingsSection
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
@@ -401,7 +403,7 @@ export default {
           />
           <woot-input
             v-model="selectedInboxName"
-          class="w-3/4 pb-4"
+            class="pb-4"
             :class="{ error: v$.selectedInboxName.$error }"
             :label="inboxNameLabel"
             :placeholder="inboxNamePlaceHolder"
@@ -415,13 +417,15 @@ export default {
           <woot-input
             v-if="isAPIInbox"
             v-model="webhookUrl"
-          class="w-3/4 pb-4"
+            class="pb-4"
             :class="{ error: v$.webhookUrl.$error }"
             :label="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
             "
             :placeholder="
-            $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
+              $t(
+                'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER'
+              )
             "
             :error="
               v$.webhookUrl.$error
@@ -433,7 +437,7 @@ export default {
           <woot-input
             v-if="isAWebWidgetInbox"
             v-model="channelWebsiteUrl"
-          class="w-3/4 pb-4"
+            class="pb-4"
             :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
             :placeholder="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
@@ -442,7 +446,7 @@ export default {
           <woot-input
             v-if="isAWebWidgetInbox"
             v-model="channelWelcomeTitle"
-          class="w-3/4 pb-4"
+            class="pb-4"
             :label="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
             "
@@ -456,7 +460,7 @@ export default {
           <woot-input
             v-if="isAWebWidgetInbox"
             v-model="channelWelcomeTagline"
-          class="w-3/4 pb-4"
+            class="pb-4"
             :label="
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
             "
@@ -467,17 +471,17 @@ export default {
             "
           />
 
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          <label v-if="isAWebWidgetInbox" class="pb-4">
             {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
             <woot-color-picker v-model="inbox.widget_color" />
           </label>
 
-        <label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
+          <label v-if="isAWhatsAppChannel" class="pb-4">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
             <input v-model="whatsAppAPIProviderName" type="text" disabled />
           </label>
 
-        <label class="w-3/4 pb-4">
+          <label class="pb-4">
             {{
               $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
             }}
@@ -497,7 +501,7 @@ export default {
                 }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{
                 $t(
                   'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
@@ -521,12 +525,14 @@ export default {
               :richtext="!textAreaChannels"
             />
           </div>
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          <label v-if="isAWebWidgetInbox" class="pb-4">
             {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
             <select v-model="replyTime">
               <option key="in_a_few_minutes" value="in_a_few_minutes">
                 {{
-                $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
+                  $t(
+                    'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
+                  )
                 }}
               </option>
               <option key="in_a_few_hours" value="in_a_few_hours">
@@ -539,12 +545,12 @@ export default {
               </option>
             </select>
 
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
             </p>
           </label>
 
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          <label v-if="isAWebWidgetInbox" class="pb-4">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
             <select v-model="emailCollectEnabled">
               <option :value="true">
@@ -554,14 +560,16 @@ export default {
                 {{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{
-              $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
+                $t(
+                  'INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT'
+                )
               }}
             </p>
           </label>
 
-        <label class="w-3/4 pb-4">
+          <label class="pb-4">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
             <select v-model="csatSurveyEnabled">
               <option :value="true">
@@ -571,22 +579,26 @@ export default {
                 {{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
             </p>
           </label>
 
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          <label v-if="isAWebWidgetInbox" class="pb-4">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
             <select v-model="allowMessagesAfterResolved">
               <option :value="true">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
+                {{
+                  $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED')
+                }}
               </option>
               <option :value="false">
-              {{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
+                {{
+                  $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED')
+                }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{
                 $t(
                   'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
@@ -595,7 +607,7 @@ export default {
             </p>
           </label>
 
-        <label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
+          <label v-if="isAWebWidgetInbox" class="pb-4">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
             <select v-model="continuityViaEmail">
               <option :value="true">
@@ -605,7 +617,7 @@ export default {
                 {{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{
                 $t(
                   'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
@@ -613,7 +625,7 @@ export default {
               }}
             </p>
           </label>
-        <div class="w-3/4 pb-4">
+          <div class="pb-4">
             <label>
               {{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
             </label>
@@ -625,11 +637,11 @@ export default {
                 {{ p.name }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
             </p>
           </div>
-        <label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
+          <label v-if="canLocktoSingleConversation" class="pb-4">
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
             <select v-model="locktoSingleConversation">
               <option :value="true">
@@ -639,7 +651,7 @@ export default {
                 {{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
               </option>
             </select>
-          <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+            <p class="pb-1 text-sm not-italic text-n-slate-11">
               {{
                 $t(
                   'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
@@ -702,7 +714,7 @@ export default {
           :sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
           :show-border="false"
         >
-        <div class="w-3/4 pb-4">
+          <div class="pb-4">
             <SenderNameExamplePreview
               :sender-name-type="senderNameType"
               :business-name="businessName"
@@ -744,20 +756,20 @@ export default {
           </div>
         </SettingsSection>
         <SettingsSection :show-border="false">
-        <woot-submit-button
+          <NextButton
             v-if="isAPIInbox"
             type="submit"
             :disabled="v$.webhookUrl.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
+            :is-loading="uiFlags.isUpdating"
             @click="updateInbox"
           />
-        <woot-submit-button
+          <NextButton
             v-else
             type="submit"
             :disabled="v$.$invalid"
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+            :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-          :loading="uiFlags.isUpdating"
+            :is-loading="uiFlags.isUpdating"
             @click="updateInbox"
           />
         </SettingsSection>
@@ -781,6 +793,7 @@ export default {
       <div v-if="selectedTabKey === 'botConfiguration'">
         <BotConfiguration :inbox="inbox" />
       </div>
+    </section>
   </div>
 </template>
 

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

@@ -6,12 +6,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import InputRadioGroup from './components/InputRadioGroup.vue';
 import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
     InputRadioGroup,
     SingleSelectDropdown,
+    NextButton,
   },
   props: {
     inbox: {
@@ -231,9 +233,10 @@ export default {
             :action="handleAuthMechanismChange"
           />
         </div>
-        <woot-submit-button
+        <NextButton
-          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
+          type="submit"
-          :loading="uiFlags.isUpdatingSMTP"
+          :label="$t('INBOX_MGMT.SMTP.UPDATE')"
+          :is-loading="uiFlags.isUpdatingSMTP"
           :disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
         />
       </form>

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

@@ -7,11 +7,13 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     Widget,
     InputRadioGroup,
+    NextButton,
   },
   props: {
     inbox: {
@@ -268,7 +270,7 @@ export default {
   <div class="mx-8">
     <div class="flex p-2.5">
       <div class="w-100 lg:w-[40%]">
-        <div class="min-h-full py-4 overflow-y-scroll">
+        <div class="min-h-full py-4 overflow-y-scroll px-px">
           <form @submit.prevent="updateWidget">
             <woot-avatar-uploader
               :label="
@@ -376,14 +378,15 @@ export default {
                 )
               "
             />
-            <woot-submit-button
+            <NextButton
+              type="submit"
               class="mt-4"
-              :button-text="
+              :label="
                 $t(
                   'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
                 )
               "
-              :loading="uiFlags.isUpdating"
+              :is-loading="uiFlags.isUpdating"
               :disabled="v$.$invalid || uiFlags.isUpdating"
             />
           </form>

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue

@@ -66,8 +66,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -82,7 +82,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -97,7 +97,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}

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

@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const shouldBeWebhookUrl = (value = '') =>
   value ? value.startsWith('http') : true;
@@ -12,6 +13,7 @@ const shouldBeWebhookUrl = (value = '') =>
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <form
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -88,7 +93,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.webhookUrl.$error }">
           {{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
           <input
@@ -105,10 +110,13 @@ export default {
         </p>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mt-4">
-        <woot-submit-button
+        <NextButton
-          :loading="uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>

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

@@ -5,9 +5,14 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
 
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -72,8 +77,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
         <input
@@ -90,7 +95,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
         <input
@@ -107,7 +112,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.accountId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
         <input
@@ -124,7 +129,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.applicationId.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
         <input
@@ -141,7 +146,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
         <input
@@ -156,7 +161,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiSecret.$error }">
         {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
         <input
@@ -173,10 +178,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
+    <div class="w-full mt-4">
-      <woot-submit-button
+      <NextButton
-        :loading="uiFlags.isCreating"
+        :is-loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
       />
     </div>
   </form>

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

@@ -6,7 +6,12 @@ import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -72,8 +77,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.inboxName.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
         <input
@@ -88,7 +93,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
         <input
@@ -103,7 +108,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.phoneNumberId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
@@ -122,7 +127,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.businessAccountId.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
@@ -141,7 +146,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKey.$error }">
         <span>
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
@@ -158,10 +163,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
+    <div class="w-full mt-4">
-      <woot-submit-button
+      <NextButton
-        :loading="uiFlags.isCreating"
+        :is-loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
       />
     </div>
   </form>

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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <div
       v-if="!hasLoginStarted"
@@ -240,7 +240,7 @@ export default {
       <LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
       <form
         v-else
-        class="flex flex-wrap mx-0"
+        class="flex flex-wrap flex-col mx-0"
         @submit.prevent="createChannel()"
       >
         <div class="w-full">

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

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -70,14 +72,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <form
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -94,7 +99,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelId.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
           <input
@@ -108,7 +113,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelSecret.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
           <input
@@ -122,7 +127,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.lineChannelToken.$error }">
           {{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
           <input
@@ -136,10 +141,13 @@ export default {
         </label>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mt-4">
-        <woot-submit-button
+        <NextButton
-          :loading="uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>

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

@@ -19,13 +19,13 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label>
         {{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
         <select v-model="provider">

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

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <form
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.botToken.$error }">
           {{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
           <input
@@ -88,10 +93,13 @@ export default {
         </p>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mt-4">
-        <woot-submit-button
+        <NextButton
-          :loading="uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>

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

@@ -5,10 +5,14 @@ import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
 import { required } from '@vuelidate/validators';
 import router from '../../../../index';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     type: {
       type: String,
@@ -113,8 +117,8 @@ export default {
 </script>
 
 <template>
-  <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+  <form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.channelName.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
         <input
@@ -129,7 +133,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label
         v-if="useMessagingService"
         :class="{ error: v$.messagingServiceSID.$error }"
@@ -149,10 +153,7 @@ export default {
       </label>
     </div>
 
-    <div
+    <div v-if="!useMessagingService" class="flex-shrink-0 flex-grow-0">
-      v-if="!useMessagingService"
-      class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
-    >
       <label :class="{ error: v$.phoneNumber.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
         <input
@@ -183,7 +184,7 @@ export default {
       </label>
     </div>
 
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.accountSID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
         <input
@@ -208,7 +209,7 @@ export default {
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
       </label>
     </div>
-    <div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div v-if="useAPIKey" class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.apiKeySID.$error }">
         {{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
         <input
@@ -222,7 +223,7 @@ export default {
         }}</span>
       </label>
     </div>
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label :class="{ error: v$.authToken.$error }">
         {{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
         <input
@@ -239,10 +240,13 @@ export default {
       </label>
     </div>
 
-    <div class="w-full">
+    <div class="w-full mt-4">
-      <woot-submit-button
+      <NextButton
-        :loading="uiFlags.isCreating"
+        :is-loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
       />
     </div>
   </form>

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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <div class="login-init h-full text-center">
       <form @submit.prevent="requestAuthorization">

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

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import router from '../../../../index';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
 
@@ -9,6 +10,7 @@ export default {
   components: {
     PageHeader,
     GreetingsEditor,
+    NextButton,
   },
   data() {
     return {
@@ -73,7 +75,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
@@ -85,7 +87,7 @@ export default {
     />
     <form
       v-if="!uiFlags.isCreating"
-      class="flex flex-wrap mx-0"
+      class="flex flex-wrap flex-col mx-0"
       @submit.prevent="createChannel"
     >
       <div class="w-full">
@@ -188,12 +190,15 @@ export default {
         "
         :richtext="!textAreaChannels"
       />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2 mt-4">
         <div class="w-full">
-          <woot-submit-button
+          <NextButton
-            :loading="uiFlags.isCreating"
+            type="submit"
+            :is-loading="uiFlags.isCreating"
             :disabled="!channelWebsiteUrl || !inboxName"
-            :button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
+            solid
+            blue
+            :label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
           />
         </div>
       </div>

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

@@ -21,13 +21,13 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
     />
-    <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+    <div class="flex-shrink-0 flex-grow-0">
       <label>
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
         <select v-model="provider">

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

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
 import { required, email } from '@vuelidate/validators';
 import router from '../../../../../index';
 import PageHeader from '../../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     PageHeader,
+    NextButton,
   },
   setup() {
     return { v$: useVuelidate() };
@@ -69,14 +71,17 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
     />
-    <form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
+    <form
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
         <label :class="{ error: v$.channelName.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
           <input
@@ -93,7 +98,7 @@ export default {
         </label>
       </div>
 
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
+      <div class="flex-shrink-0 flex-grow-0 mb-4">
         <label :class="{ error: v$.email.$error }">
           {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
           <input
@@ -102,16 +107,19 @@ export default {
             :placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
             @blur="v$.email.$touch"
           />
-        </label>
           <p class="help-text">
             {{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
           </p>
+        </label>
       </div>
 
-      <div class="w-full">
+      <div class="w-full mt-4">
-        <woot-submit-button
+        <NextButton
-          :loading="uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
-          :button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
         />
       </div>
     </form>

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

@@ -4,6 +4,7 @@ import { ref, computed } from 'vue';
 import microsoftClient from 'dashboard/api/channel/microsoftClient';
 import googleClient from 'dashboard/api/channel/googleClient';
 import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 import { useAlert } from 'dashboard/composables';
 
@@ -67,7 +68,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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <SettingsSubPageHeader
       :header-title="title"
@@ -79,11 +80,12 @@ async function requestAuthorization() {
         type="email"
         :placeholder="inputPlaceholder"
       />
-      <woot-submit-button
+      <NextButton
-        icon="brand-twitter"
+        :is-loading="isRequestingAuthorization"
         type="submit"
-        :button-text="submitButtonText"
+        solid
-        :loading="isRequestingAuthorization"
+        blue
+        :label="submitButtonText"
       />
     </form>
   </div>

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

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import SettingsSection from 'dashboard/components/SettingsSection.vue';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     LoadingState,
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -83,7 +85,7 @@ export default {
         :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
         :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
       >
-        <div class="w-3/5">
+        <div>
           <label>
             <select v-model="selectedAgentBotId">
               <option value="" disabled selected>
@@ -98,31 +100,25 @@ export default {
               </option>
             </select>
           </label>
-          <div class="button-container">
+          <div class="button-container space-x-2">
-            <woot-submit-button
+            <NextButton
-              :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+              type="submit"
-              :loading="uiFlags.isSettingAgentBot"
+              :label="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+              :is-loading="uiFlags.isSettingAgentBot"
             />
-            <woot-button
+            <NextButton
               type="button"
               :disabled="!selectedAgentBotId"
-              :loading="uiFlags.isDisconnecting"
+              :is-loading="uiFlags.isDisconnecting"
-              variant="smooth"
+              faded
-              color-scheme="alert"
+              ruby
-              class="button--disconnect"
               @click="disconnectBot"
             >
               {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
-            </woot-button>
+            </NextButton>
           </div>
         </div>
       </SettingsSection>
     </form>
   </div>
 </template>
-
-<style scoped lang="scss">
-.button--disconnect {
-  @apply ml-2;
-}
-</style>

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

@@ -135,7 +135,7 @@ export default {
 
 <template>
   <div
-    class="day-wrap flex py-2 px-0 min-h-[3rem] box-content border-b border-solid border-slate-50 dark:border-slate-600"
+    class="day-wrap flex py-2 gap-1 items-center px-0 min-h-[3rem] box-content border-b border-solid border-n-weak"
   >
     <div class="checkbox-wrap flex items-center">
       <input

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

@@ -1,16 +1,15 @@
 <script setup>
-import Banner from 'dashboard/components/ui/Banner.vue';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
 
 const emit = defineEmits(['reauthorize']);
 </script>
 
 <template>
   <Banner
-    color-scheme="alert"
+    color="ruby"
-    class="justify-start rounded-md"
+    :action-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
-    :banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
+    @action="emit('reauthorize')"
-    :action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
+  >
-    has-action-button
+    {{ $t('INBOX_MGMT.RECONNECTION_REQUIRED') }}
-    @primary-action="emit('reauthorize')"
+  </Banner>
-  />
 </template>

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

@@ -11,6 +11,7 @@ import {
   defaultTimeSlot,
   timeZoneOptions,
 } from '../helpers/businessHour';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const DEFAULT_TIMEZONE = {
   label: 'Pacific Time (US & Canada) (GMT-07:00)',
@@ -21,6 +22,7 @@ export default {
   components: {
     SettingsSection,
     BusinessDay,
+    NextButton,
     WootMessageEditor,
   },
   mixins: [inboxMixin],
@@ -138,19 +140,18 @@ export default {
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">
-          <div class="max-w-[37.5rem]">
+          <div>
             <label class="unavailable-input-wrap">
               {{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
             </label>
             <div
               v-if="isRichEditorEnabled"
-              class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+              class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
             >
               <WootMessageEditor
                 v-model="unavailableMessage"
                 enable-variables
                 is-format-mode
-                class="message-editor"
                 :min-height="4"
               />
             </div>
@@ -185,9 +186,10 @@ export default {
             @update="data => onSlotUpdate(timeSlot.day, data)"
           />
         </div>
-        <woot-submit-button
+        <NextButton
-          :button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
+          type="submit"
-          :loading="uiFlags.isUpdating"
+          :label="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
+          :is-loading="uiFlags.isUpdating"
           :disabled="hasError"
         />
       </form>
@@ -197,8 +199,6 @@ export default {
 
 <style lang="scss" scoped>
 .timezone-input-wrap {
-  @apply max-w-[37.5rem];
-
   &::v-deep .multiselect {
     @apply mt-2;
   }
@@ -209,8 +209,6 @@ export default {
 }
 
 .unavailable-input-wrap {
-  @apply max-w-[37.5rem];
-
   textarea {
     @apply min-h-[4rem] mt-2;
   }

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

@@ -39,12 +39,14 @@ export default {
       component: SettingsContent,
       props: params => {
         const showBackButton = params.name !== 'settings_inbox_list';
+        const fullWidth = params.name === 'settings_inbox_show';
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
           headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
           icon: 'mail-inbox-all',
           newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
+          fullWidth,
         };
       },
       children: [

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

@@ -5,10 +5,12 @@ import { minValue } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
 import { useConfig } from 'dashboard/composables/useConfig';
 import SettingsSection from '../../../../../components/SettingsSection.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
+    NextButton,
   },
   props: {
     inbox: {
@@ -139,9 +141,9 @@ export default {
         @select="v$.selectedAgents.$touch"
       />
 
-      <woot-submit-button
+      <NextButton
-        :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+        :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
-        :loading="isAgentListUpdating"
+        :is-loading="isAgentListUpdating"
         @click="updateAgents"
       />
     </SettingsSection>
@@ -163,7 +165,7 @@ export default {
           </label>
         </div>
 
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
         </p>
       </label>
@@ -181,12 +183,12 @@ export default {
           @blur="v$.maxAssignmentLimit.$touch"
         />
 
-        <p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
+        <p class="pb-1 text-sm not-italic text-n-slate-11">
           {{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
         </p>
 
-        <woot-submit-button
+        <NextButton
-          :button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
+          :label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
           :disabled="v$.maxAssignmentLimit.$invalid"
           @click="updateInbox"
         />

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

@@ -6,12 +6,14 @@ import ImapSettings from '../ImapSettings.vue';
 import SmtpSettings from '../SmtpSettings.vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     SettingsSection,
     ImapSettings,
     SmtpSettings,
+    NextButton,
   },
   mixins: [inboxMixin],
   props: {
@@ -225,12 +227,12 @@ export default {
               )
             "
           />
-          <woot-button
+          <NextButton
             :disabled="v$.whatsAppInboxAPIKey.$invalid"
             @click="updateWhatsAppInboxAPIKey"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
+          </NextButton>
         </div>
       </SettingsSection>
     </div>

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

@@ -12,15 +12,18 @@ defineEmits(['edit', 'delete']);
 <template>
   <tr class="max-w-full py-1">
     <td
-      class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
+      class="py-4 ltr:pr-4 rtl:pl-4 text-sm w-40 max-w-[10rem] truncate"
       :title="app.title"
     >
       {{ app.title }}
     </td>
-    <td class="max-w-lg py-4 pr-4 text-sm truncate" :title="app.content[0].url">
+    <td
+      class="max-w-lg py-4 ltr:pr-4 rtl:pl-4 text-sm truncate"
+      :title="app.content[0].url"
+    >
       {{ app.content[0].url }}
     </td>
-    <td class="flex gap-1 py-4 pr-4 text-sm sm:pr-0 justify-end">
+    <td class="flex gap-1 py-4 ltr:pr-4 rtl:pl-4 text-sm sm:pr-0 justify-end">
       <woot-button
         v-tooltip.top="
           $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')

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

@@ -121,7 +121,7 @@ export default {
           <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 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
           >
             {{ thHeader }}
           </th>

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

@@ -2,9 +2,11 @@
 import { ref, computed } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { frontendURL } from '../../../../helper/URLHelper';
 import { useAlert } from 'dashboard/composables';
 import { useInstallationName } from 'shared/mixins/globalConfigMixin';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   integrationId: {
@@ -19,6 +21,7 @@ const props = defineProps({
   deleteConfirmationText: { type: Object, default: () => ({}) },
 });
 
+const { t } = useI18n();
 const store = useStore();
 const router = useRouter();
 
@@ -38,9 +41,9 @@ const closeDeletePopup = () => {
 const deleteIntegration = async () => {
   try {
     await store.dispatch('integrations/deleteIntegration', props.integrationId);
-    useAlert('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE');
+    useAlert(t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
   } catch (error) {
-    useAlert('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE');
+    useAlert(t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE'));
   }
 };
 
@@ -90,26 +93,28 @@ const confirmDeletion = () => {
       >
         <div v-if="integrationEnabled">
           <div v-if="integrationAction === 'disconnect'">
-            <div @click="openDeletePopup">
+            <NextButton
-              <woot-submit-button
+              :label="
-                :button-text="
                 actionButtonText ||
                 $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
               "
-                button-class="smooth alert"
+              faded
+              ruby
+              @click="openDeletePopup"
             />
           </div>
-          </div>
           <div v-else>
-            <button class="button nice">
+            <NextButton faded blue>
               {{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
-            </button>
+            </NextButton>
           </div>
         </div>
       </router-link>
       <div v-if="!integrationEnabled">
-        <a :href="integrationAction" class="rounded button success nice">
+        <a :href="integrationAction">
+          <NextButton faded blue>
             {{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
+          </NextButton>
         </a>
       </div>
     </div>

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

@@ -119,7 +119,7 @@ export default {
           <th
             v-for="thHeader in tableHeaders"
             :key="thHeader"
-            class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
           >
             {{ thHeader }}
           </th>

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

@@ -121,7 +121,7 @@ export default {
         @reset-action="resetNode"
       />
     </div>
-    <div class="w-full md:w-1/3">
+    <div class="w-full md:w-1/3 pb-4">
       <MacroProperties
         :macro-name="macro.name"
         :macro-visibility="macro.visibility"

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

@@ -3,6 +3,7 @@ import { computed, inject, defineModel } from 'vue';
 import { useMacros } from 'dashboard/composables/useMacros';
 import { useI18n } from 'vue-i18n';
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   singleNode: {
@@ -53,21 +54,21 @@ const dropdownValues = () => {
 </script>
 
 <template>
-  <div class="relative flex items-center w-full min-w-0 basis-full">
+  <div class="relative flex items-start w-full min-w-0 basis-full">
-    <woot-button
+    <NextButton
       v-if="!singleNode"
-      size="small"
+      ghost
-      variant="clear"
+      sm
-      color-scheme="secondary"
+      slate
-      icon="navigation"
+      icon="i-lucide-menu"
-      class="absolute cursor-move -left-8 macros__node-drag-handle"
+      class="absolute cursor-move -left-10 mr-2 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-sm outline outline-1 outline-n-weak"
       :class="
         errorKey
-          ? 'bg-red-50 animate-shake dark:bg-red-800'
+          ? 'animate-shake bg-n-ruby-8/20 outline-n-ruby-5 dark:outline-n-ruby-5'
-          : 'bg-n-slate-2 dark:bg-n-solid-3'
+          : 'bg-n-background dark:bg-n-solid-1'
       "
     >
       <ActionInput
@@ -82,13 +83,13 @@ const dropdownValues = () => {
         @reset-action="$emit('resetAction')"
       />
     </div>
-    <woot-button
+    <NextButton
       v-if="!singleNode"
       v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
-      icon="delete"
+      icon="i-lucide-trash-2"
-      size="small"
+      sm
-      variant="smooth"
+      faded
-      color-scheme="alert"
+      ruby
       class="flex-shrink-0"
       @click="$emit('deleteNode')"
     />

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

@@ -1,12 +1,14 @@
 <script>
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { getFileName } from './macroHelper';
 
 export default {
   components: {
     Draggable,
     MacroNode,
+    NextButton,
   },
   props: {
     errors: {
@@ -45,10 +47,11 @@ export default {
   <div class="macros__nodes">
     <div class="macro__node">
       <div>
-        <woot-label
+        <span
-          :title="$t('MACROS.EDITOR.START_FLOW')"
+          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
-          color-scheme="primary"
+        >
-        />
+          {{ $t('MACROS.EDITOR.START_FLOW') }}
+        </span>
       </div>
     </div>
     <Draggable
@@ -84,24 +87,25 @@ export default {
     </Draggable>
     <div class="macro__node">
       <div>
-        <woot-button
+        <NextButton
           :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
-          class="macros__action-button"
+          class="shadow-sm"
-          color-scheme="success"
+          solid
-          variant="smooth"
+          teal
-          icon="add-circle"
+          icon="i-lucide-plus-circle"
           @click="$emit('addNewNode')"
         >
           {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
-        </woot-button>
+        </NextButton>
       </div>
     </div>
     <div class="macro__node">
       <div>
-        <woot-label
+        <span
-          :title="$t('MACROS.EDITOR.END_FLOW')"
+          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
-          color-scheme="primary"
+        >
-        />
+          {{ $t('MACROS.EDITOR.END_FLOW') }}
+        </span>
       </div>
     </div>
   </div>
@@ -133,10 +137,6 @@ export default {
   padding-bottom: var(--space-large);
 }
 
-.macros__action-button {
-  box-shadow: var(--shadow);
-}
-
 .macros__node-action-container {
   position: relative;
   .drag-handle {

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

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   inject: ['v$'],
   props: {
     macroName: {
@@ -29,7 +34,9 @@ export default {
 </script>
 
 <template>
-  <div class="p-3 bg-n-background h-full flex flex-col">
+  <div
+    class="p-4 bg-n-solid-2 border border-n-weak rounded-lg shadow-sm h-full flex flex-col"
+  >
     <div>
       <woot-input
         :model-value="macroName"
@@ -100,14 +107,9 @@ export default {
       </div>
     </div>
     <div class="mt-auto w-full">
-      <woot-button
+      <NextButton blue solid class="w-full" @click="$emit('submit')">
-        size="expanded"
-        color-scheme="success"
-        class="w-full"
-        @click="$emit('submit')"
-      >
         {{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
-      </woot-button>
+      </NextButton>
     </div>
   </div>
 </template>

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

@@ -165,12 +165,8 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-col md:flex-row">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-y-0.5 gap-x-2">
-    <div class="flex flex-col items-center w-full md:flex-row">
+    <div v-if="type === 'agent'" class="multiselect-wrap--small">
-      <div
-        v-if="type === 'agent'"
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
       <p class="mb-2 text-xs font-medium">
         {{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
@@ -212,10 +208,8 @@ export default {
         </template>
       </multiselect>
     </div>
-      <div
+
-        v-else-if="type === 'label'"
+    <div v-else-if="type === 'label'" class="multiselect-wrap--small">
-        class="md:w-[240px] w-full multiselect-wrap--small"
-      >
       <p class="mb-2 text-xs font-medium">
         {{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
       </p>
@@ -255,7 +249,8 @@ export default {
         </template>
       </multiselect>
     </div>
-      <div v-else class="md:w-[240px] w-full multiselect-wrap--small">
+
+    <div v-else class="multiselect-wrap--small">
       <p class="mb-2 text-xs font-medium">
         <template v-if="type === 'inbox'">
           {{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
@@ -263,7 +258,6 @@ export default {
         <template v-else-if="type === 'team'">
           {{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
         </template>
-          <!-- handle default condition because the prop is not limited to the given 4 values -->
         <template v-else>
           {{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
         </template>
@@ -282,7 +276,8 @@ export default {
         @update:model-value="changeFilterSelection"
       />
     </div>
-      <div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
+
+    <div class="multiselect-wrap--small">
       <p class="mb-2 text-xs font-medium">
         {{ $t('REPORT.DURATION_FILTER_LABEL') }}
       </p>
@@ -300,7 +295,19 @@ export default {
         @select="changeDateSelection"
       />
     </div>
-      <div v-if="isDateRangeSelected" class="">
+
+    <div
+      class="flex items-center h-10 self-center order-5 md:order-2 md:justify-self-end"
+    >
+      <span class="mr-2 text-sm whitespace-nowrap">
+        {{ $t('REPORT.BUSINESS_HOURS') }}
+      </span>
+      <span>
+        <woot-switch v-model="businessHoursSelected" />
+      </span>
+    </div>
+
+    <div v-if="isDateRangeSelected" class="order-3 md:order-4">
       <p class="mb-2 text-xs font-medium">
         {{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
       </p>
@@ -309,13 +316,12 @@ export default {
         :value="customDateRange"
         :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
         :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        class="auto-width"
         @change="onChange"
       />
     </div>
-      <div
+
-        v-if="notLast7Days"
+    <div v-if="notLast7Days" class="multiselect-wrap--small order-4 md:order-5">
-        class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
-      >
       <p class="mb-2 text-xs font-medium">
         {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
       </p>
@@ -331,13 +337,4 @@ export default {
       />
     </div>
   </div>
-    <div class="flex items-center my-2">
-      <span class="mx-2 text-sm whitespace-nowrap">
-        {{ $t('REPORT.BUSINESS_HOURS') }}
-      </span>
-      <span>
-        <woot-switch v-model="businessHoursSelected" />
-      </span>
-    </div>
-  </div>
 </template>

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

@@ -63,7 +63,7 @@
 
     .mx-datepicker {
       .mx-input {
-        @apply bg-n-alpha-3;
+        background-color: transparent !important;
       }
 
       .mx-input-wrapper input::placeholder {

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -196,7 +196,7 @@ export default {
       />
 
       <div
-        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
+        class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-n-strong px-3 py-1.5 rounded-xl justify-between"
       >
         <span for="sla_bh" class="text-slate-700 dark:text-slate-200">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}

app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue

@@ -104,7 +104,7 @@ export default {
     <div class="mt-7">
       <select
         v-model="thresholdUnitValue"
-        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
+        class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 rounded-xl hover:cursor-pointer pr-7"
         @change="onThresholdUnitChange"
       >
         <option

app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue

@@ -22,7 +22,7 @@ defineEmits(['add']);
       <woot-button
         color-scheme="primary"
         icon="plus-sign"
-        class="rounded-xl"
+        class="rounded-md"
         @click="$emit('add')"
       >
         {{ $t('SLA.ADD_ACTION') }}

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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"

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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"

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="border border-slate-25 dark:border-slate-800/60 bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"

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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"

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

@@ -104,7 +104,7 @@ const confirmPlaceHolderText = computed(() =>
       >
         <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">
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
               <span class="block font-medium capitalize">{{ team.name }}</span>
               <p class="mb-0">{{ team.description }}</p>
             </td>

app/javascript/shared/components/GreetingsEditor.vue

@@ -19,16 +19,15 @@ const greetingsMessage = computed({
 </script>
 
 <template>
-  <section class="w-3/4">
+  <section>
     <div
       v-if="richtext"
-      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
+      class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
     >
       <WootMessageEditor
         v-model="greetingsMessage"
         is-format-mode
         enable-variables
-        class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
       />

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -3,6 +3,7 @@ import { computed, defineEmits } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useToggle } from '@vueuse/core';
 
+import Button from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
 
@@ -57,22 +58,18 @@ const hasValue = computed(() => {
 <template>
   <OnClickOutside @trigger="onCloseDropdown">
     <div class="relative w-full mb-2" @keyup.esc="onCloseDropdown">
-      <woot-button
+      <Button
-        variant="hollow"
+        slate
-        color-scheme="secondary"
+        outline
-        class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
+        trailing-icon
+        :icon="
+          showSearchDropdown ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'
+        "
+        class="w-full !px-2"
         @click="
           () => toggleDropdown() // ensure that the event is not passed to the button
         "
       >
-        <div class="flex gap-1">
-          <Thumbnail
-            v-if="hasValue && hasThumbnail"
-            :src="selectedItem.thumbnail"
-            size="24px"
-            :status="selectedItem.availability_status"
-            :username="selectedItem.name"
-          />
         <div class="flex items-center justify-between w-full min-w-0">
           <h4 v-if="!hasValue" class="text-sm text-ellipsis text-n-slate-12">
             {{ multiselectorPlaceholder }}
@@ -84,14 +81,15 @@ const hasValue = computed(() => {
           >
             {{ selectedItem.name }}
           </h4>
-            <i
+        </div>
-              v-if="showSearchDropdown"
+        <Thumbnail
-              class="mr-1 icon i-lucide-chevron-up text-n-slate-10"
+          v-if="hasValue && hasThumbnail"
+          :src="selectedItem.thumbnail"
+          size="24px"
+          :status="selectedItem.availability_status"
+          :username="selectedItem.name"
         />
-            <i v-else class="mr-1 icon i-lucide-chevron-down text-n-slate-10" />
+      </Button>
-          </div>
-        </div>
-      </woot-button>
       <div
         :class="{ 'dropdown-pane--open': showSearchDropdown }"
         class="dropdown-pane"
@@ -102,13 +100,7 @@ const hasValue = computed(() => {
           >
             {{ multiselectorTitle }}
           </h4>
-          <woot-button
+          <Button ghost slate xs icon="i-lucide-x" @click="onCloseDropdown" />
-            icon="dismiss"
-            size="tiny"
-            color-scheme="secondary"
-            variant="clear"
-            @click="onCloseDropdown"
-          />
         </div>
         <MultiselectDropdownItems
           v-if="showSearchDropdown"

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -2,12 +2,14 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
     Thumbnail,
+    NextButton,
   },
 
   props: {
@@ -85,24 +87,14 @@ export default {
       <div class="w-full max-h-[10rem]">
         <WootDropdownMenu>
           <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
-            <woot-button
+            <NextButton
-              class="multiselect-dropdown--item"
+              slate
-              :variant="isActive(option) ? 'hollow' : 'clear'"
+              :variant="isActive(option) ? 'faded' : 'ghost'"
-              color-scheme="secondary"
+              trailing-icon
-              :class="{
+              :icon="isActive(option) ? 'i-lucide-check' : ''"
-                active: isActive(option),
+              class="w-full !px-2.5"
-              }"
               @click="() => onclick(option)"
             >
-              <div class="flex items-center gap-1.5">
-                <Thumbnail
-                  v-if="hasThumbnail"
-                  :src="option.thumbnail"
-                  size="24px"
-                  :username="option.name"
-                  :status="option.availability_status"
-                  has-border
-                />
               <div
                 class="flex items-center justify-between w-full min-w-0 gap-2"
               >
@@ -112,10 +104,16 @@ export default {
                 >
                   {{ option.name }}
                 </span>
-                  <fluent-icon v-if="isActive(option)" icon="checkmark" />
               </div>
-              </div>
+              <Thumbnail
-            </woot-button>
+                v-if="hasThumbnail"
+                :src="option.thumbnail"
+                size="24px"
+                :username="option.name"
+                :status="option.availability_status"
+                has-border
+              />
+            </NextButton>
           </WootDropdownItem>
         </WootDropdownMenu>
         <h4

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -135,7 +135,7 @@ export default {
     <div
       class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
     >
-      <div class="w-full">
+      <div class="w-full my-1">
         <woot-dropdown-menu>
           <LabelDropdownItem
             v-for="label in filteredActiveLabels"

app/javascript/shared/components/ui/label/LabelDropdownItem.vue

@@ -1,5 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     title: {
       type: String,
@@ -26,60 +31,29 @@ export default {
 
 <template>
   <woot-dropdown-item>
-    <div class="item-wrap">
+    <NextButton
-      <woot-button variant="clear" @click="onClick">
+      slate
-        <div class="button-wrap">
+      ghost
-          <div class="name-label-wrap">
+      blue
+      trailing-icon
+      :icon="selected ? 'i-lucide-circle-check' : ''"
+      class="w-full !px-2.5 justify-between"
+      :class="{ '!flex-row': !selected }"
+      @click="onClick"
+    >
+      <div class="flex items-center min-w-0 gap-2">
         <div
           v-if="color"
-              class="label-color--display"
+          class="size-3 flex-shrink-0 rounded-full outline outline-1 outline-n-weak"
           :style="{ backgroundColor: color }"
         />
-            <span class="label-text" :title="title">{{ title }}</span>
+        <span
-          </div>
+          class="overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1]"
-          <div>
+          :title="title"
-            <i v-if="selected" class="i-lucide-circle-check" />
+        >
-          </div>
+          {{ title }}
-        </div>
+        </span>
-      </woot-button>
       </div>
+    </NextButton>
   </woot-dropdown-item>
 </template>
-
-<style lang="scss" scoped>
-.item-wrap {
-  @apply flex;
-
-  ::v-deep .button__content {
-    @apply w-full;
-  }
-
-  .button-wrap {
-    @apply flex justify-between w-full;
-
-    &.active {
-      @apply flex font-semibold text-woot-700 dark:text-woot-600;
-    }
-
-    .name-label-wrap {
-      @apply flex min-w-0 w-full;
-
-      .label-color--display {
-        @apply mr-2 rtl:mr-0 rtl:ml-2;
-      }
-
-      .label-text {
-        @apply overflow-hidden text-ellipsis whitespace-nowrap leading-[1.1] pr-2;
-      }
-
-      .icon {
-        @apply text-sm;
-      }
-    }
-  }
-
-  .label-color--display {
-    @apply rounded-md h-3 mr-1 rtl:mr-0 rtl:ml-1 mt-0.5 min-w-[0.75rem] w-3 border border-solid border-slate-50 dark:border-slate-600;
-  }
-}
-</style>

app/javascript/v3/components/Form/Input.vue

@@ -51,11 +51,9 @@ const model = defineModel({
     <input
       v-bind="$attrs"
       v-model="model"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-1 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      type="text"
       :class="{
-        'focus:outline-red-600 outline-red-600': hasError,
+        error: hasError,
-        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
-          !hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,