chore: Update buttons in custom attributes page (#11125)

app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue

@@ -6,7 +6,12 @@ import { useAlert } from 'dashboard/composables';
 import { convertToAttributeSlug } from 'dashboard/helper/commons.js';
 import { ATTRIBUTE_MODELS, ATTRIBUTE_TYPES } from './constants';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   props: {
     onClose: {
       type: Function,
@@ -270,13 +275,18 @@ export default {
             :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.REGEX_CUE.PLACEHOLDER')"
           />
           <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-submit-button
-              :disabled="isButtonDisabled"
-              :button-text="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
+            <NextButton
+              faded
+              slate
+              type="reset"
+              :label="$t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+              @click.prevent="onClose"
+            />
+            <NextButton
+              type="submit"
+              :label="$t('ATTRIBUTES_MGMT.ADD.SUBMIT')"
+              :disabled="isButtonDisabled"
             />
-            <button class="button clear" @click.prevent="onClose">
-              {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-            </button>
           </div>
         </div>
       </form>

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -4,6 +4,8 @@ import EditAttribute from './EditAttribute.vue';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   attributeModel: {
     type: String,
@@ -122,22 +124,20 @@ const tableHeaders = computed(() => {
           </td>
           <td class="py-4 min-w-xs">
             <div class="flex gap-1 justify-end">
-              <woot-button
+              <Button
                 v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT')"
-                variant="smooth"
-                size="tiny"
-                color-scheme="secondary"
-                class-names="grey-btn"
-                icon="edit"
+                icon="i-lucide-pen"
+                slate
+                xs
+                faded
                 @click="openEditPopup(attribute)"
               />
-              <woot-button
+              <Button
                 v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
-                variant="smooth"
-                color-scheme="alert"
-                size="tiny"
-                icon="dismiss-circle"
-                class-names="grey-btn"
+                icon="i-lucide-trash-2"
+                xs
+                ruby
+                faded
                 @click="openDelete(attribute)"
               />
             </div>

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -4,8 +4,12 @@ import { useAlert } from 'dashboard/composables';
 import { required, minLength } from '@vuelidate/validators';
 import { getRegexp } from 'shared/helpers/Validators';
 import { ATTRIBUTE_TYPES } from './constants';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
-  components: {},
+  components: {
+    NextButton,
+  },
   props: {
     selectedAttribute: {
       type: Object,
@@ -262,12 +266,19 @@ export default {
         />
       </div>
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
-          {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
+        <NextButton
+          faded
+          slate
+          type="reset"
+          :label="$t('ATTRIBUTES_MGMT.ADD.CANCEL_BUTTON_TEXT')"
+          @click.prevent="onClose"
+        />
+        <NextButton
+          type="submit"
+          :label="$t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT')"
+          :is-loading="isUpdating"
+          :disabled="isButtonDisabled"
+        />
       </div>
     </form>
   </div>

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

@@ -4,6 +4,7 @@ import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import AddAttribute from './AddAttribute.vue';
 import CustomAttribute from './CustomAttribute.vue';
 import SettingsLayout from '../SettingsLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 
@@ -68,13 +69,11 @@ const onClickTabChange = index => {
         feature-name="custom_attributes"
       >
         <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('ATTRIBUTES_MGMT.HEADER_BTN_TXT')"
             @click="openAddPopup"
-          >
-            {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>