chore: Update buttons in automation page (#11124)

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -1,6 +1,11 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   name: 'FilterInput',
+  components: {
+    NextButton,
+  },
   props: {
     modelValue: {
       type: Object,
@@ -242,12 +247,7 @@ export default {
             :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
           />
         </div>
-        <woot-button
-          icon="dismiss"
-          variant="clear"
-          color-scheme="secondary"
-          @click="removeFilter"
-        />
+        <NextButton icon="i-lucide-x" slate ghost @click="removeFilter" />
       </div>
       <p v-if="errorMessage" class="filter-error">
         {{ errorMessage }}

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -250,10 +250,9 @@ export default {
                 blue
                 faded
                 sm
+                :label="$t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL')"
                 @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </NextButton>
+              />
             </div>
           </div>
         </section>
@@ -294,22 +293,29 @@ export default {
                 blue
                 faded
                 sm
+                :label="$t('AUTOMATION.ADD.ACTION_BUTTON_LABEL')"
                 @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </NextButton>
+              />
             </div>
           </div>
         </section>
         <!-- // Actions End -->
         <div class="w-full">
           <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <NextButton ghost blue @click.prevent="onClose">
-              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
-            </NextButton>
-            <NextButton solid blue @click="emitSaveAutomation">
-              {{ $t('AUTOMATION.ADD.SUBMIT') }}
-            </NextButton>
+            <NextButton
+              faded
+              slate
+              type="reset"
+              :label="$t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT')"
+              @click.prevent="onClose"
+            />
+            <NextButton
+              solid
+              blue
+              type="submit"
+              :label="$t('AUTOMATION.ADD.SUBMIT')"
+              @click="emitSaveAutomation"
+            />
           </div>
         </div>
       </div>

app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { messageStamp } from 'shared/helpers/timeHelper';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   automation: {
@@ -43,34 +44,30 @@ const toggle = () => {
     </td>
     <td class="py-4 min-w-xs">
       <div class="flex gap-1 justify-end flex-shrink-0">
-        <woot-button
+        <Button
           v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
-          variant="smooth"
-          size="tiny"
-          color-scheme="secondary"
-          class-names="grey-btn"
-          icon="edit"
+          icon="i-lucide-pen"
+          slate
+          xs
+          faded
           :is-loading="loading"
           @click="$emit('edit', automation)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
-          variant="smooth"
-          size="tiny"
+          icon="i-lucide-copy-plus"
+          xs
+          faded
           :is-loading="loading"
-          color-scheme="primary"
-          class-names="grey-btn"
-          icon="copy"
           @click="$emit('clone', automation)"
         />
-        <woot-button
+        <Button
           v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
-          variant="smooth"
           :is-loading="loading"
-          color-scheme="alert"
-          size="tiny"
-          icon="dismiss-circle"
-          class-names="grey-btn"
+          icon="i-lucide-trash-2"
+          xs
+          ruby
+          faded
           @click="$emit('delete', automation)"
         />
       </div>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import { useAutomation } from 'dashboard/composables/useAutomation';
 import { useEditableAutomation } from 'dashboard/composables/useEditableAutomation';
 import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
 import {
   getFileName,
@@ -20,6 +21,7 @@ import { AUTOMATION_RULE_EVENTS, AUTOMATION_ACTION_TYPES } from './constants';
 export default {
   components: {
     FilterInputBox,
+    NextButton,
     AutomationActionInput,
   },
   props: {
@@ -226,15 +228,14 @@ export default {
               @remove-filter="removeFilter(i)"
             />
             <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
+              <NextButton
+                icon="i-lucide-plus"
+                blue
+                faded
+                sm
+                :label="$t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL')"
                 @click="appendNewCondition"
-              >
-                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
-              </woot-button>
+              />
             </div>
           </div>
         </section>
@@ -266,31 +267,34 @@ export default {
               @remove-action="removeAction(i)"
             />
             <div class="mt-4">
-              <woot-button
-                icon="add"
-                color-scheme="success"
-                variant="smooth"
-                size="small"
+              <NextButton
+                icon="i-lucide-plus"
+                blue
+                faded
+                sm
+                :label="$t('AUTOMATION.ADD.ACTION_BUTTON_LABEL')"
                 @click="appendNewAction"
-              >
-                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
-              </woot-button>
+              />
             </div>
           </div>
         </section>
         <!-- // Actions End -->
         <div class="w-full">
           <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button
-              class="button"
-              variant="clear"
+            <NextButton
+              faded
+              slate
+              type="reset"
+              :label="$t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT')"
               @click.prevent="onClose"
-            >
-              {{ $t('AUTOMATION.EDIT.CANCEL_BUTTON_TEXT') }}
-            </woot-button>
-            <woot-button @click="emitSaveAutomation">
-              {{ $t('AUTOMATION.EDIT.SUBMIT') }}
-            </woot-button>
+            />
+            <NextButton
+              solid
+              blue
+              type="submit"
+              :label="$t('AUTOMATION.EDIT.SUBMIT')"
+              @click="emitSaveAutomation"
+            />
           </div>
         </div>
       </div>

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

@@ -8,6 +8,8 @@ import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import AutomationRuleRow from './AutomationRuleRow.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const getters = useStoreGetters();
 const store = useStore();
 const { t } = useI18n();
@@ -185,13 +187,11 @@ const tableHeaders = computed(() => {
         feature-name="automation"
       >
         <template #actions>
-          <woot-button
-            class="button nice rounded-md"
-            icon="add-circle"
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('AUTOMATION.HEADER_BTN_TXT')"
             @click="openAddPopup"
-          >
-            {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
-          </woot-button>
+          />
         </template>
       </BaseSettingsHeader>
     </template>