chore: Update buttons in teams page (#11128)

# Pull Request Template

<img width="1188" alt="image"
src="https://github.com/user-attachments/assets/604fe991-3896-4e32-b227-7506b9939102"
/>
<img width="181" alt="image"
src="https://github.com/user-attachments/assets/557c01ed-e91b-45ce-a658-008ec27aa5ff"
/>
<img width="175" alt="image"
src="https://github.com/user-attachments/assets/5ecfb742-983a-44f1-8c94-143335318bc8"
/>
<img width="328" alt="image"
src="https://github.com/user-attachments/assets/4a05f942-3afc-45d1-8005-129245b52cef"
/>
<img width="344" alt="image"
src="https://github.com/user-attachments/assets/a3e5c85d-cd42-4368-b7aa-0422cdfe1c75"
/>
<img width="263" alt="image"
src="https://github.com/user-attachments/assets/85821352-b8c2-407a-9808-c426b8dd7bfb"
/>
<img width="263" alt="image"
src="https://github.com/user-attachments/assets/65fc0b98-c8a0-4f27-a648-3d250cd1c66d"
/>

app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue

@@ -1,8 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   components: {
+    NextButton,
     Thumbnail,
   },
   props: {
@@ -136,10 +138,11 @@ export default {
           })
         }}
       </p>
-      <woot-submit-button
-        :button-text="submitButtonText"
-        :loading="isWorking"
+      <NextButton
+        type="submit"
+        :label="submitButtonText"
         :disabled="disableSubmitButton"
+        :is-loading="isWorking"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue

@@ -1,8 +1,10 @@
 <script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
 
 export default {
   components: {
+    NextButton,
     EmptyState,
   },
 };
@@ -19,12 +21,11 @@ export default {
     >
       <div class="w-full text-center">
         <router-link
-          class="button success nice rounded"
           :to="{
             name: 'settings_teams_list',
           }"
         >
-          {{ $t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT') }}
+          <NextButton teal :label="$t('TEAMS_SETTINGS.FINISH.BUTTON_TEXT')" />
         </router-link>
       </div>
     </EmptyState>

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

@@ -7,6 +7,8 @@ import { computed, ref } from 'vue';
 import { useStoreGetters, useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const store = useStore();
 const { t } = useI18n();
 const getters = useStoreGetters();
@@ -74,15 +76,11 @@ const confirmPlaceHolderText = computed(() =>
       feature-name="team_management"
     >
       <template #actions>
-        <router-link
-          v-if="isAdmin"
-          :to="{ name: 'settings_teams_new' }"
-          class="button rounded-md primary"
-        >
-          <fluent-icon icon="add-circle" />
-          <span class="button__content">
-            {{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
-          </span>
+        <router-link v-if="isAdmin" :to="{ name: 'settings_teams_new' }">
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('TEAMS_SETTINGS.NEW_TEAM')"
+          />
         </router-link>
       </template>
     </BaseSettingsHeader>
@@ -116,24 +114,23 @@ const confirmPlaceHolderText = computed(() =>
                   params: { teamId: team.id },
                 }"
               >
-                <woot-button
+                <Button
                   v-if="isAdmin"
                   v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
-                  variant="smooth"
-                  size="tiny"
-                  color-scheme="secondary"
-                  class-names="grey-btn"
-                  icon="settings"
+                  icon="i-lucide-settings"
+                  slate
+                  xs
+                  faded
                 />
               </router-link>
-              <woot-button
+
+              <Button
                 v-if="isAdmin"
                 v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
-                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[team.id]"
                 @click="openDelete(team)"
               />

app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue

@@ -1,13 +1,14 @@
 <script>
-import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
 import validations from './helpers/validations';
 import FormInput from 'v3/components/Form/Input.vue';
 import { reactive } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
   components: {
-    WootSubmitButton,
+    NextButton,
     FormInput,
   },
   props: {
@@ -95,10 +96,11 @@ export default {
       </div>
       <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <div class="w-full">
-          <WootSubmitButton
+          <NextButton
+            type="submit"
+            :label="submitButtonText"
             :disabled="v$.title.$invalid || submitInProgress"
-            :button-text="submitButtonText"
-            :loading="submitInProgress"
+            :is-loading="submitInProgress"
           />
         </div>
       </div>