From fa2ee15742cd3360bc5eb4dff051a09cd8e80c91 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Thu, 25 Dec 2025 08:39:44 -0500
Subject: [PATCH] refactor(onboarding): replace UButton with Button component
 for consistency

- Updated `OnboardingAdminPanel` and `OnboardingTestHarness` components to use the new `Button` component from `@unraid/ui` instead of the deprecated `UButton`.
- Adjusted button properties to align with the new component's API, including changes to color and variant attributes.
- This refactor enhances consistency across the onboarding UI components and improves maintainability.
---
 .../OnboardingAdminPanel.standalone.vue       | 10 ++---
 .../OnboardingTestHarness.standalone.vue      | 39 +++++++------------
 2 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/web/src/components/Activation/OnboardingAdminPanel.standalone.vue b/web/src/components/Activation/OnboardingAdminPanel.standalone.vue
index 7b69ccab3..af381ad16 100644
--- a/web/src/components/Activation/OnboardingAdminPanel.standalone.vue
+++ b/web/src/components/Activation/OnboardingAdminPanel.standalone.vue
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useApolloClient } from '@vue/apollo-composable';
 
+import { Button } from '@unraid/ui';
 import { parse } from 'graphql';
 
 import { DEFAULT_ACTIVATION_STEPS } from '~/components/Activation/onboardingTestDefaults';
@@ -153,15 +154,14 @@ const resetOnboarding = async () => {
               Review the current onboarding state and reset progress if needed.
             </p>
           </div>
-          <UButton
-            color="error"
-            variant="solid"
+          <Button
+            variant="destructive"
             size="sm"
-            :loading="resetStatus === 'loading'"
+            :disabled="resetStatus === 'loading'"
             @click="resetOnboarding"
           >
             Reset Onboarding
-          </UButton>
+          </Button>
         </div>
       </template>
 
diff --git a/web/src/components/Activation/OnboardingTestHarness.standalone.vue b/web/src/components/Activation/OnboardingTestHarness.standalone.vue
index 6dffa34af..ba6f6a6c5 100644
--- a/web/src/components/Activation/OnboardingTestHarness.standalone.vue
+++ b/web/src/components/Activation/OnboardingTestHarness.standalone.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useApolloClient } from '@vue/apollo-composable';
 
+import { Button } from '@unraid/ui';
 import { parse } from 'graphql';
 
 import { DEFAULT_ACTIVATION_STEPS } from '~/components/Activation/onboardingTestDefaults';
@@ -471,13 +472,9 @@ onMounted(() => {
           class="mt-4"
         />
         <div class="mt-4 flex flex-wrap gap-2">
-          <UButton color="primary" size="sm" @click="applyOverrides">Apply Overrides</UButton>
-          <UButton color="neutral" variant="outline" size="sm" @click="loadDraftFromOverrides">
-            Reload
-          </UButton>
-          <UButton color="error" variant="outline" size="sm" @click="clearOverrides">
-            Clear Overrides
-          </UButton>
+          <Button variant="primary" size="sm" @click="applyOverrides">Apply Overrides</Button>
+          <Button variant="outline" size="sm" @click="loadDraftFromOverrides"> Reload </Button>
+          <Button variant="destructive" size="sm" @click="clearOverrides"> Clear Overrides </Button>
         </div>
       </UCard>
 
@@ -495,9 +492,7 @@ onMounted(() => {
               placeholder="Select a preset"
             />
           </UFormField>
-          <UButton color="neutral" variant="outline" size="sm" class="mt-3" @click="applyPreset">
-            Load preset
-          </UButton>
+          <Button variant="outline" size="sm" class="mt-3" @click="applyPreset"> Load preset </Button>
         </UCard>
 
         <UCard>
@@ -505,21 +500,17 @@ onMounted(() => {
             <div class="font-medium">Modal Actions</div>
           </template>
           <div class="flex flex-col gap-2">
-            <UButton color="primary" variant="soft" size="sm" @click="showActivationModal">
+            <Button variant="primary" size="sm" @click="showActivationModal">
               Show Activation Modal
-            </UButton>
-            <UButton color="neutral" variant="outline" size="sm" @click="resetActivationModal">
+            </Button>
+            <Button variant="outline" size="sm" @click="resetActivationModal">
               Reset Activation Modal
-            </UButton>
-            <UButton color="neutral" variant="outline" size="sm" @click="hideActivationModal">
+            </Button>
+            <Button variant="outline" size="sm" @click="hideActivationModal">
               Hide Activation Modal
-            </UButton>
-            <UButton color="primary" variant="soft" size="sm" @click="showWelcomeModal">
-              Show Welcome Modal
-            </UButton>
-            <UButton color="neutral" variant="outline" size="sm" @click="hideWelcomeModal">
-              Hide Welcome Modal
-            </UButton>
+            </Button>
+            <Button variant="primary" size="sm" @click="showWelcomeModal"> Show Welcome Modal </Button>
+            <Button variant="outline" size="sm" @click="hideWelcomeModal"> Hide Welcome Modal </Button>
           </div>
         </UCard>
 
@@ -527,9 +518,9 @@ onMounted(() => {
           <template #header>
             <div class="font-medium">Data Actions</div>
           </template>
-          <UButton color="neutral" variant="outline" size="sm" @click="refetchOnboarding">
+          <Button variant="outline" size="sm" @click="refetchOnboarding">
             Refetch Onboarding Query
-          </UButton>
+          </Button>
         </UCard>
 
         <UAlert