chore: Update buttons in macros page (#11122)

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

@@ -6,6 +6,7 @@ import SettingsLayout from '../SettingsLayout.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const getters = useStoreGetters();
 const store = useStore();
@@ -72,14 +73,11 @@ const tableHeaders = computed(() => {
         feature-name="macros"
       >
         <template #actions>
-          <router-link
-            :to="{ name: 'macros_new' }"
-            class="button rounded-md primary"
-          >
-            <fluent-icon icon="add-circle" />
-            <span class="button__content">
-              {{ $t('MACROS.HEADER_BTN_TXT') }}
-            </span>
+          <router-link :to="{ name: 'macros_new' }">
+            <Button
+              icon="i-lucide-circle-plus"
+              :label="$t('MACROS.HEADER_BTN_TXT')"
+            />
           </router-link>
         </template>
       </BaseSettingsHeader>

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

@@ -107,9 +107,13 @@ export default {
       </div>
     </div>
     <div class="mt-auto w-full">
-      <NextButton blue solid class="w-full" @click="$emit('submit')">
-        {{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
-      </NextButton>
+      <NextButton
+        blue
+        solid
+        :label="$t('MACROS.HEADER_BTN_TXT_SAVE')"
+        class="w-full"
+        @click="$emit('submit')"
+      />
     </div>
   </div>
 </template>

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

@@ -3,6 +3,8 @@ import { computed } from 'vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { useI18n } from 'vue-i18n';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   macro: {
     type: Object,
@@ -51,22 +53,20 @@ const visibilityLabel = computed(() => {
     <td class="py-4 ltr:pr-4 rtl:pl-4">{{ visibilityLabel }}</td>
     <td class="py-4 flex justify-end gap-1">
       <router-link :to="{ name: 'macros_edit', params: { macroId: macro.id } }">
-        <woot-button
+        <Button
           v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
         />
       </router-link>
-      <woot-button
+      <Button
         v-tooltip.top="$t('MACROS.DELETE.TOOLTIP')"
-        variant="smooth"
-        color-scheme="alert"
-        size="tiny"
-        icon="dismiss-circle"
-        class-names="grey-btn"
+        icon="i-lucide-trash-2"
+        xs
+        ruby
+        faded
         @click="$emit('delete')"
       />
     </td>