From 0cbcb8b80cf320fab7d093b6855b9f64b6c3b799 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 20 Mar 2025 21:19:44 +0530
Subject: [PATCH] chore: Update buttons in labels page (#11126)

---
 .../dashboard/settings/labels/AddLabel.vue    | 27 ++++++++++-----
 .../dashboard/settings/labels/EditLabel.vue   | 25 +++++++++-----
 .../dashboard/settings/labels/Index.vue       | 33 +++++++++----------
 3 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
index 63ea64e7d..c49537d35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
@@ -5,7 +5,12 @@ import validations, { getLabelTitleErrorMessage } from './validations';
 import { getRandomColor } from 'dashboard/helper/labelColor';
 import { useVuelidate } from '@vuelidate/core';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     prefillTitle: {
       type: String,
@@ -105,16 +110,20 @@ export default {
         </label>
       </div>
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isCreating"
-          :is-loading="uiFlags.isCreating"
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('LABEL_MGMT.FORM.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
           data-testid="label-submit"
-        >
-          {{ $t('LABEL_MGMT.FORM.CREATE') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
+          :label="$t('LABEL_MGMT.FORM.CREATE')"
+          :disabled="v$.title.$invalid || uiFlags.isCreating"
+          :is-loading="uiFlags.isCreating"
+        />
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
index 67b6ef5e4..ccc1685be 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
@@ -4,7 +4,12 @@ import { useAlert } from 'dashboard/composables';
 import validations, { getLabelTitleErrorMessage } from './validations';
 import { useVuelidate } from '@vuelidate/core';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     selectedResponse: {
       type: Object,
@@ -109,15 +114,19 @@ export default {
         </label>
       </div>
       <div class="flex items-center justify-end w-full gap-2 px-0 py-2">
-        <woot-button
-          :is-disabled="v$.title.$invalid || uiFlags.isUpdating"
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('LABEL_MGMT.FORM.CANCEL')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('LABEL_MGMT.FORM.EDIT')"
+          :disabled="v$.title.$invalid || uiFlags.isUpdating"
           :is-loading="uiFlags.isUpdating"
-        >
-          {{ $t('LABEL_MGMT.FORM.EDIT') }}
-        </woot-button>
-        <woot-button class="button clear" @click.prevent="onClose">
-          {{ $t('LABEL_MGMT.FORM.CANCEL') }}
-        </woot-button>
+        />
       </div>
     </form>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 834cc3865..9f7faa889 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -8,6 +8,7 @@ import AddLabel from './AddLabel.vue';
 import EditLabel from './EditLabel.vue';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -94,13 +95,11 @@ onBeforeMount(() => {
         feature-name="labels"
       >
         <template #actions>
-          <woot-button
-            class="rounded-md button nice"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('LABEL_MGMT.HEADER_BTN_TXT')"
             @click="openAddPopup"
-          >
-            {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>
@@ -140,23 +139,21 @@ onBeforeMount(() => {
             </td>
             <td class="py-4 min-w-xs">
               <div class="flex gap-1 justify-end">
-                <woot-button
+                <Button
                   v-tooltip.top="$t('LABEL_MGMT.FORM.EDIT')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
+                  icon="i-lucide-pen"
+                  slate
+                  xs
+                  faded
                   :is-loading="loading[label.id]"
-                  icon="edit"
                   @click="openEditPopup(label)"
                 />
-                <woot-button
+                <Button
                   v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
-                  variant="smooth"
-                  color-scheme="alert"
-                  size="tiny"
-                  icon="dismiss-circle"
-                  class-names="grey-btn"
+                  icon="i-lucide-trash-2"
+                  xs
+                  ruby
+                  faded
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
                 />