chore: Update buttons in Inbox and its settings page (#11127)

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -68,7 +68,7 @@ const getStatusText = computed(() => {
         :placeholder="
           $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
         "
-        class="flex-grow !bg-white border-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
+        class="flex-grow !bg-white border-0 outline-none !outline-0 border-none h-8 text-sm dark:!bg-slate-700 pb-0 !pt-1.5 resize-none px-3 !mb-0 focus:outline-none rounded-md"
         @focus="isInputFocused = true"
         @blur="isInputFocused = false"
       />

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

@@ -9,6 +9,7 @@ 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';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -76,13 +77,11 @@ const openDelete = inbox => {
         feature-name="inboxes"
       >
         <template #actions>
-          <router-link
-            v-if="isAdmin"
-            class="button nice rounded-md"
-            :to="{ name: 'settings_inbox_new' }"
-          >
-            <fluent-icon icon="add-circle" />
-            {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
+          <router-link v-if="isAdmin" :to="{ name: 'settings_inbox_new' }">
+            <Button
+              icon="i-lucide-circle-plus"
+              :label="$t('SETTINGS.INBOXES.NEW_INBOX')"
+            />
           </router-link>
         </template>
       </BaseSettingsHeader>
@@ -128,25 +127,22 @@ const openDelete = inbox => {
                     params: { inboxId: inbox.id },
                   }"
                 >
-                  <woot-button
+                  <Button
                     v-if="isAdmin"
                     v-tooltip.top="$t('INBOX_MGMT.SETTINGS')"
-                    variant="smooth"
-                    size="tiny"
-                    icon="settings"
-                    color-scheme="secondary"
-                    class-names="grey-btn"
+                    icon="i-lucide-settings"
+                    slate
+                    xs
+                    faded
                   />
                 </router-link>
-
-                <woot-button
+                <Button
                   v-if="isAdmin"
                   v-tooltip.top="$t('INBOX_MGMT.DELETE.BUTTON_TEXT')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  class-names="grey-btn"
-                  icon="dismiss-circle"
+                  icon="i-lucide-trash-2"
+                  xs
+                  ruby
+                  faded
                   @click="openDelete(inbox)"
                 />
               </div>

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

@@ -721,17 +721,16 @@ export default {
               @update="toggleSenderNameType"
             />
             <div class="flex flex-col items-start gap-2 mt-2">
-              <woot-button
-                variant="clear"
-                color-scheme="primary"
-                @click="onClickShowBusinessNameInput"
-              >
-                {{
+              <NextButton
+                ghost
+                blue
+                :label="
                   $t(
                     'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
                   )
-                }}
-              </woot-button>
+                "
+                @click="onClickShowBusinessNameInput"
+              />
               <div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
                 <input
                   ref="businessNameInput"
@@ -744,13 +743,15 @@ export default {
                   class="mb-0"
                   type="text"
                 />
-                <woot-button color-scheme="primary" @click="updateInbox">
-                  {{
+                <NextButton
+                  :label="
                     $t(
                       'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
                     )
-                  }}
-                </woot-button>
+                  "
+                  class="flex-shrink-0"
+                  @click="updateInbox"
+                />
               </div>
             </div>
           </div>

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

@@ -209,7 +209,7 @@ export default {
     <div>
       <span
         v-if="isDayEnabled && !hasError"
-        class="label bg-woot-50 dark:bg-woot-600 text-woot-700 dark:text-woot-100 text-xs inline-block px-2 py-1 rounded-sm cursor-default whitespace-nowrap"
+        class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
       >
         {{ totalHours }} {{ $t('INBOX_MGMT.BUSINESS_HOURS.DAY.HOURS') }}
       </span>