chore: Update buttons in SLA page (#11118)

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

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     SlaTimeInput,
+    NextButton,
   },
   props: {
     selectedResponse: {
@@ -205,19 +207,19 @@ export default {
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 mt-8">
-        <woot-button
-          class="px-4 rounded-xl button clear outline-woot-200/50 outline"
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('SLA.FORM.CANCEL')"
           @click.prevent="onClose"
-        >
-          {{ $t('SLA.FORM.CANCEL') }}
-        </woot-button>
-        <woot-button
-          :is-disabled="isSubmitDisabled"
-          class="px-4 rounded-xl"
+        />
+        <NextButton
+          type="submit"
+          :label="submitLabel"
+          :disabled="isSubmitDisabled"
           :is-loading="uiFlags.isUpdating"
-        >
-          {{ submitLabel }}
-        </woot-button>
+        />
       </div>
     </form>
   </div>

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

@@ -1,4 +1,5 @@
 <script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
 import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
 
 defineProps({
@@ -19,14 +20,11 @@ defineEmits(['add']);
     feature-name="sla"
   >
     <template v-if="showActions" #actions>
-      <woot-button
-        color-scheme="primary"
-        icon="plus-sign"
-        class="rounded-md"
+      <Button
+        :label="$t('SLA.ADD_ACTION')"
+        icon="i-lucide-circle-plus"
         @click="$emit('add')"
-      >
-        {{ $t('SLA.ADD_ACTION') }}
-      </woot-button>
+      />
     </template>
   </BaseSettingsHeader>
 </template>

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

@@ -2,6 +2,7 @@
 import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
 import SLAResponseTime from './SLAResponseTime.vue';
 import SLABusinessHoursLabel from './SLABusinessHoursLabel.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
   slaName: {
@@ -56,13 +57,12 @@ const emit = defineEmits(['delete']);
       </div>
     </template>
     <template #actions>
-      <woot-button
+      <Button
         v-tooltip.top="$t('SLA.FORM.DELETE')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="delete"
-        class-names="grey-btn"
+        faded
+        ruby
+        xs
+        icon="i-lucide-trash-2"
         :is-loading="isLoading"
         @click="emit('delete')"
       />