From 7e1aa5807d82c8bcc0317f65878468b484eb06d1 Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Wed, 28 May 2025 11:44:16 +0200
Subject: [PATCH] Feat: variants (#1885)

add primary & secondary button & actionfield
---
 src/app/components/Admin/CidrDialog.vue       |  6 ++---
 .../Admin/RestartInterfaceDialog.vue          |  6 ++---
 src/app/components/Admin/SuggestDialog.vue    |  6 ++---
 src/app/components/Base/PrimaryButton.vue     | 26 +++++++++++++++++++
 .../Base/{Button.vue => SecondaryButton.vue}  |  4 +--
 src/app/components/Clients/CreateDialog.vue   |  6 +++--
 src/app/components/Clients/DeleteDialog.vue   |  8 +++---
 src/app/components/Clients/Empty.vue          |  4 +--
 src/app/components/Clients/New.vue            |  4 +--
 src/app/components/Clients/QRCodeDialog.vue   |  2 +-
 src/app/components/Clients/Sort.vue           |  4 +--
 src/app/components/Form/ArrayField.vue        |  4 +--
 src/app/components/Form/HostField.vue         |  6 ++---
 src/app/components/Form/NullArrayField.vue    |  4 +--
 .../components/Form/PrimaryActionField.vue    | 16 ++++++++++++
 ...tionField.vue => SecondaryActionField.vue} |  0
 src/app/pages/admin.vue                       |  4 +--
 src/app/pages/admin/config.vue                |  4 +--
 src/app/pages/admin/general.vue               |  4 +--
 src/app/pages/admin/hooks.vue                 |  4 +--
 src/app/pages/admin/interface.vue             |  8 +++---
 src/app/pages/clients/[id].vue                |  9 ++++---
 src/app/pages/me.vue                          | 13 ++++++----
 src/app/pages/setup/1.vue                     |  4 ++-
 src/app/pages/setup/2.vue                     |  4 ++-
 src/app/pages/setup/3.vue                     |  8 +++---
 src/app/pages/setup/4.vue                     |  4 ++-
 src/app/pages/setup/migrate.vue               |  4 ++-
 src/app/pages/setup/success.vue               |  2 +-
 29 files changed, 118 insertions(+), 60 deletions(-)
 create mode 100644 src/app/components/Base/PrimaryButton.vue
 rename src/app/components/Base/{Button.vue => SecondaryButton.vue} (91%)
 create mode 100644 src/app/components/Form/PrimaryActionField.vue
 rename src/app/components/Form/{ActionField.vue => SecondaryActionField.vue} (100%)

diff --git a/src/app/components/Admin/CidrDialog.vue b/src/app/components/Admin/CidrDialog.vue
index d9635009..a74b0d30 100644
--- a/src/app/components/Admin/CidrDialog.vue
+++ b/src/app/components/Admin/CidrDialog.vue
@@ -10,12 +10,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
+        <BasePrimaryButton @click="$emit('change', ipv4Cidr, ipv6Cidr)">
           {{ $t('dialog.change') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Admin/RestartInterfaceDialog.vue b/src/app/components/Admin/RestartInterfaceDialog.vue
index e6c92473..a255b710 100644
--- a/src/app/components/Admin/RestartInterfaceDialog.vue
+++ b/src/app/components/Admin/RestartInterfaceDialog.vue
@@ -7,12 +7,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('restart')">
+        <BasePrimaryButton @click="$emit('restart')">
           {{ $t('admin.interface.restart') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Admin/SuggestDialog.vue b/src/app/components/Admin/SuggestDialog.vue
index b0a7410e..71556a33 100644
--- a/src/app/components/Admin/SuggestDialog.vue
+++ b/src/app/components/Admin/SuggestDialog.vue
@@ -13,12 +13,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('change', selected)">
+        <BasePrimaryButton @click="$emit('change', selected)">
           {{ $t('dialog.change') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Base/PrimaryButton.vue b/src/app/components/Base/PrimaryButton.vue
new file mode 100644
index 00000000..04bdc850
--- /dev/null
+++ b/src/app/components/Base/PrimaryButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <component
+    :is="elementType"
+    role="button"
+    class="inline-flex items-center rounded border-2 border-red-800 bg-red-800 px-4 py-2 text-white transition hover:border-red-600 hover:bg-red-600"
+    v-bind="attrs"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'button',
+  },
+});
+
+const elementType = computed(() => props.as);
+
+const attrs = computed(() => {
+  const { as, ...attrs } = props;
+  return attrs;
+});
+</script>
diff --git a/src/app/components/Base/Button.vue b/src/app/components/Base/SecondaryButton.vue
similarity index 91%
rename from src/app/components/Base/Button.vue
rename to src/app/components/Base/SecondaryButton.vue
index a6c52a26..d6af315e 100644
--- a/src/app/components/Base/Button.vue
+++ b/src/app/components/Base/SecondaryButton.vue
@@ -20,7 +20,7 @@ const props = defineProps({
 const elementType = computed(() => props.as);
 
 const attrs = computed(() => {
-  const { as, ...attrs } = props;
-  return attrs;
+  const { as, ...rest } = props;
+  return rest;
 });
 </script>
diff --git a/src/app/components/Clients/CreateDialog.vue b/src/app/components/Clients/CreateDialog.vue
index 3d34a7f3..be5aa27f 100644
--- a/src/app/components/Clients/CreateDialog.vue
+++ b/src/app/components/Clients/CreateDialog.vue
@@ -18,10 +18,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="createClient">{{ $t('client.create') }}</BaseButton>
+        <BasePrimaryButton @click="createClient">
+          {{ $t('client.create') }}
+        </BasePrimaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Clients/DeleteDialog.vue b/src/app/components/Clients/DeleteDialog.vue
index 974eb7c4..651b17ce 100644
--- a/src/app/components/Clients/DeleteDialog.vue
+++ b/src/app/components/Clients/DeleteDialog.vue
@@ -9,12 +9,12 @@
     </template>
     <template #actions>
       <DialogClose as-child>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BasePrimaryButton>{{ $t('dialog.cancel') }}</BasePrimaryButton>
       </DialogClose>
       <DialogClose as-child>
-        <BaseButton @click="$emit('delete')">{{
-          $t('client.deleteClient')
-        }}</BaseButton>
+        <BaseSecondaryButton @click="$emit('delete')">
+          {{ $t('client.deleteClient') }}
+        </BaseSecondaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Clients/Empty.vue b/src/app/components/Clients/Empty.vue
index 004fa6be..e5f38da2 100644
--- a/src/app/components/Clients/Empty.vue
+++ b/src/app/components/Clients/Empty.vue
@@ -2,10 +2,10 @@
   <p class="m-10 text-center text-sm text-gray-400 dark:text-neutral-400">
     {{ $t('client.empty') }}<br /><br />
     <ClientsCreateDialog>
-      <BaseButton as="span">
+      <BaseSecondaryButton as="span">
         <IconsPlus class="w-4 md:mr-2" />
         <span class="text-sm">{{ $t('client.new') }}</span>
-      </BaseButton>
+      </BaseSecondaryButton>
     </ClientsCreateDialog>
   </p>
 </template>
diff --git a/src/app/components/Clients/New.vue b/src/app/components/Clients/New.vue
index 87b6a071..9fa45d0d 100644
--- a/src/app/components/Clients/New.vue
+++ b/src/app/components/Clients/New.vue
@@ -1,8 +1,8 @@
 <template>
   <ClientsCreateDialog>
-    <BaseButton as="span">
+    <BaseSecondaryButton as="span">
       <IconsPlus class="w-4 md:mr-2" />
       <span class="text-sm max-md:hidden">{{ $t('client.newShort') }}</span>
-    </BaseButton>
+    </BaseSecondaryButton>
   </ClientsCreateDialog>
 </template>
diff --git a/src/app/components/Clients/QRCodeDialog.vue b/src/app/components/Clients/QRCodeDialog.vue
index 9212619b..9905c354 100644
--- a/src/app/components/Clients/QRCodeDialog.vue
+++ b/src/app/components/Clients/QRCodeDialog.vue
@@ -10,7 +10,7 @@
     </template>
     <template #actions>
       <DialogClose>
-        <BaseButton>{{ $t('dialog.cancel') }}</BaseButton>
+        <BaseSecondaryButton>{{ $t('dialog.cancel') }}</BaseSecondaryButton>
       </DialogClose>
     </template>
   </BaseDialog>
diff --git a/src/app/components/Clients/Sort.vue b/src/app/components/Clients/Sort.vue
index a3aaaf79..82e89f2a 100644
--- a/src/app/components/Clients/Sort.vue
+++ b/src/app/components/Clients/Sort.vue
@@ -1,12 +1,12 @@
 <template>
-  <BaseButton @click="toggleSort">
+  <BasePrimaryButton @click="toggleSort">
     <IconsArrowDown
       v-if="globalStore.sortClient === true"
       class="w-4 md:mr-2"
     />
     <IconsArrowUp v-else class="w-4 md:mr-2" />
     <span class="text-sm max-md:hidden"> {{ $t('client.sort') }}</span>
-  </BaseButton>
+  </BasePrimaryButton>
 </template>
 
 <script setup lang="ts">
diff --git a/src/app/components/Form/ArrayField.vue b/src/app/components/Form/ArrayField.vue
index d3676900..497949ca 100644
--- a/src/app/components/Form/ArrayField.vue
+++ b/src/app/components/Form/ArrayField.vue
@@ -12,7 +12,7 @@
           class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
           @input="update($event, i)"
         />
-        <BaseButton
+        <BaseSecondaryButton
           as="input"
           type="button"
           class="rounded-lg"
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="mt-2">
-      <BaseButton
+      <BasePrimaryButton
         as="input"
         type="button"
         class="rounded-lg"
diff --git a/src/app/components/Form/HostField.vue b/src/app/components/Form/HostField.vue
index 849b34d6..47793be2 100644
--- a/src/app/components/Form/HostField.vue
+++ b/src/app/components/Form/HostField.vue
@@ -7,7 +7,7 @@
       <IconsInfo class="size-4" />
     </BaseTooltip>
   </div>
-  <div class="flex">
+  <div class="flex gap-1">
     <BaseInput
       :id="id"
       v-model.trim="data"
@@ -18,12 +18,12 @@
     />
     <ClientOnly>
       <AdminSuggestDialog :url="url" @change="data = $event">
-        <BaseButton as="span">
+        <BasePrimaryButton as="span">
           <div class="flex items-center gap-3">
             <IconsSparkles class="w-4" />
             <span>{{ $t('admin.config.suggest') }}</span>
           </div>
-        </BaseButton>
+        </BasePrimaryButton>
       </AdminSuggestDialog>
     </ClientOnly>
   </div>
diff --git a/src/app/components/Form/NullArrayField.vue b/src/app/components/Form/NullArrayField.vue
index 79d137c2..5061e9f9 100644
--- a/src/app/components/Form/NullArrayField.vue
+++ b/src/app/components/Form/NullArrayField.vue
@@ -12,7 +12,7 @@
           class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
           @input="update($event, i)"
         />
-        <BaseButton
+        <BaseSecondaryButton
           as="input"
           type="button"
           class="rounded-lg"
@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="mt-2">
-      <BaseButton
+      <BasePrimaryButton
         as="input"
         type="button"
         class="rounded-lg"
diff --git a/src/app/components/Form/PrimaryActionField.vue b/src/app/components/Form/PrimaryActionField.vue
new file mode 100644
index 00000000..8e2d8c6e
--- /dev/null
+++ b/src/app/components/Form/PrimaryActionField.vue
@@ -0,0 +1,16 @@
+<template>
+  <input
+    :value="label"
+    :type="type ?? 'button'"
+    class="col-span-2 rounded-lg border-2 border-red-800 bg-red-800 py-2 text-white hover:border-red-600 hover:bg-red-600 focus:border-red-800 focus:outline-0 focus:ring-0"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { InputTypeHTMLAttribute } from 'vue';
+
+defineProps<{
+  label: string;
+  type?: InputTypeHTMLAttribute;
+}>();
+</script>
diff --git a/src/app/components/Form/ActionField.vue b/src/app/components/Form/SecondaryActionField.vue
similarity index 100%
rename from src/app/components/Form/ActionField.vue
rename to src/app/components/Form/SecondaryActionField.vue
diff --git a/src/app/pages/admin.vue b/src/app/pages/admin.vue
index 9cf4a4fd..b75819d8 100644
--- a/src/app/pages/admin.vue
+++ b/src/app/pages/admin.vue
@@ -15,12 +15,12 @@
               :to="`/admin/${item.id}`"
               active-class="bg-red-800 rounded"
             >
-              <BaseButton
+              <BaseSecondaryButton
                 as="span"
                 class="w-full cursor-pointer rounded p-2 font-medium transition-colors duration-200 hover:bg-red-800 dark:text-neutral-200"
               >
                 {{ item.name }}
-              </BaseButton>
+              </BaseSecondaryButton>
             </NuxtLink>
           </div>
         </div>
diff --git a/src/app/pages/admin/config.vue b/src/app/pages/admin/config.vue
index 30b4fd14..f321e533 100644
--- a/src/app/pages/admin/config.vue
+++ b/src/app/pages/admin/config.vue
@@ -49,8 +49,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>
diff --git a/src/app/pages/admin/general.vue b/src/app/pages/admin/general.vue
index 701664e3..9515e456 100644
--- a/src/app/pages/admin/general.vue
+++ b/src/app/pages/admin/general.vue
@@ -32,8 +32,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>
diff --git a/src/app/pages/admin/hooks.vue b/src/app/pages/admin/hooks.vue
index 9330c822..b8dda4b6 100644
--- a/src/app/pages/admin/hooks.vue
+++ b/src/app/pages/admin/hooks.vue
@@ -25,8 +25,8 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
       </FormGroup>
     </FormElement>
   </main>
diff --git a/src/app/pages/admin/interface.vue b/src/app/pages/admin/interface.vue
index 55e7d283..f926ddf0 100644
--- a/src/app/pages/admin/interface.vue
+++ b/src/app/pages/admin/interface.vue
@@ -23,15 +23,15 @@
       </FormGroup>
       <FormGroup>
         <FormHeading>{{ $t('form.actions') }}</FormHeading>
-        <FormActionField type="submit" :label="$t('form.save')" />
-        <FormActionField :label="$t('form.revert')" @click="revert" />
+        <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+        <FormSecondaryActionField :label="$t('form.revert')" @click="revert" />
         <AdminCidrDialog
           trigger-class="col-span-2"
           :ipv4-cidr="data.ipv4Cidr"
           :ipv6-cidr="data.ipv6Cidr"
           @change="changeCidr"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.changeCidr')"
             class="w-full"
             tabindex="-1"
@@ -41,7 +41,7 @@
           trigger-class="col-span-2"
           @restart="restartInterface"
         >
-          <FormActionField
+          <FormSecondaryActionField
             :label="$t('admin.interface.restart')"
             class="w-full"
             tabindex="-1"
diff --git a/src/app/pages/clients/[id].vue b/src/app/pages/clients/[id].vue
index 21daa9e9..70d836d6 100644
--- a/src/app/pages/clients/[id].vue
+++ b/src/app/pages/clients/[id].vue
@@ -107,14 +107,17 @@
           </FormGroup>
           <FormGroup>
             <FormHeading>{{ $t('form.actions') }}</FormHeading>
-            <FormActionField type="submit" :label="$t('form.save')" />
-            <FormActionField :label="$t('form.revert')" @click="revert" />
+            <FormPrimaryActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField
+              :label="$t('form.revert')"
+              @click="revert"
+            />
             <ClientsDeleteDialog
               trigger-class="col-span-2"
               :client-name="data.name"
               @delete="deleteClient"
             >
-              <FormActionField
+              <FormSecondaryActionField
                 label="Delete"
                 class="w-full"
                 type="button"
diff --git a/src/app/pages/me.vue b/src/app/pages/me.vue
index 021853a7..db2dc1b8 100644
--- a/src/app/pages/me.vue
+++ b/src/app/pages/me.vue
@@ -18,7 +18,7 @@
               v-model="email"
               :label="$t('user.email')"
             />
-            <FormActionField type="submit" :label="$t('form.save')" />
+            <FormSecondaryActionField type="submit" :label="$t('form.save')" />
           </FormGroup>
         </FormElement>
         <FormElement @submit.prevent="updatePassword">
@@ -42,7 +42,7 @@
               autocomplete="new-password"
               :label="$t('general.confirmPassword')"
             />
-            <FormActionField
+            <FormSecondaryActionField
               type="submit"
               :label="$t('general.updatePassword')"
             />
@@ -55,7 +55,10 @@
               v-if="!authStore.userData?.totpVerified && !twofa"
               class="col-span-2 flex flex-col"
             >
-              <FormActionField :label="$t('me.enable2fa')" @click="setup2fa" />
+              <FormSecondaryActionField
+                :label="$t('me.enable2fa')"
+                @click="setup2fa"
+              />
             </div>
             <div
               v-if="!authStore.userData?.totpVerified && twofa"
@@ -81,7 +84,7 @@
                   v-model="code"
                   :label="$t('general.2faCode')"
                 />
-                <FormActionField
+                <FormSecondaryActionField
                   :label="$t('me.enable2fa')"
                   @click="enable2fa"
                 />
@@ -101,7 +104,7 @@
                 type="password"
                 autocomplete="current-password"
               />
-              <FormActionField
+              <FormSecondaryActionField
                 :label="$t('me.disable2fa')"
                 @click="disable2fa"
               />
diff --git a/src/app/pages/setup/1.vue b/src/app/pages/setup/1.vue
index 8bb5a063..1f2d7796 100644
--- a/src/app/pages/setup/1.vue
+++ b/src/app/pages/setup/1.vue
@@ -4,7 +4,9 @@
       {{ $t('setup.welcomeDesc') }}
     </p>
     <NuxtLink to="/setup/2" class="mt-8">
-      <BaseButton as="span">{{ $t('general.continue') }}</BaseButton>
+      <BasePrimaryButton as="span">
+        {{ $t('general.continue') }}
+      </BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>
diff --git a/src/app/pages/setup/2.vue b/src/app/pages/setup/2.vue
index 9b6a1b4a..7c32e89c 100644
--- a/src/app/pages/setup/2.vue
+++ b/src/app/pages/setup/2.vue
@@ -29,7 +29,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('setup.createAccount') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('setup.createAccount') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/setup/3.vue b/src/app/pages/setup/3.vue
index 2b4312e7..c4b77a62 100644
--- a/src/app/pages/setup/3.vue
+++ b/src/app/pages/setup/3.vue
@@ -5,14 +5,14 @@
     </p>
     <div class="mt-4 flex justify-center gap-3">
       <NuxtLink to="/setup/4" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BasePrimaryButton as="span" class="w-full justify-center">
           {{ $t('general.no') }}
-        </BaseButton>
+        </BasePrimaryButton>
       </NuxtLink>
       <NuxtLink to="/setup/migrate" class="w-20">
-        <BaseButton as="span" class="w-full justify-center">
+        <BaseSecondaryButton as="span" class="w-full justify-center">
           {{ $t('general.yes') }}
-        </BaseButton>
+        </BaseSecondaryButton>
       </NuxtLink>
     </div>
   </div>
diff --git a/src/app/pages/setup/4.vue b/src/app/pages/setup/4.vue
index 18ce6e6a..887fc968 100644
--- a/src/app/pages/setup/4.vue
+++ b/src/app/pages/setup/4.vue
@@ -23,7 +23,9 @@
         />
       </div>
       <div class="mt-4 flex justify-center">
-        <BaseButton @click="submit">{{ $t('general.continue') }}</BaseButton>
+        <BasePrimaryButton @click="submit">
+          {{ $t('general.continue') }}
+        </BasePrimaryButton>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/setup/migrate.vue b/src/app/pages/setup/migrate.vue
index 95e0fa24..f706b84c 100644
--- a/src/app/pages/setup/migrate.vue
+++ b/src/app/pages/setup/migrate.vue
@@ -8,7 +8,9 @@
       <input id="migration" type="file" @change="onChangeFile" />
     </div>
     <div class="mt-4">
-      <BaseButton @click="submit">{{ $t('setup.upload') }}</BaseButton>
+      <BasePrimaryButton @click="submit">
+        {{ $t('setup.upload') }}
+      </BasePrimaryButton>
     </div>
   </div>
 </template>
diff --git a/src/app/pages/setup/success.vue b/src/app/pages/setup/success.vue
index 8792fe9f..a3aec290 100644
--- a/src/app/pages/setup/success.vue
+++ b/src/app/pages/setup/success.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col items-center">
     <p>{{ $t('setup.successful') }}</p>
     <NuxtLink to="/login" class="mt-4">
-      <BaseButton as="span">{{ $t('login.signIn') }}</BaseButton>
+      <BasePrimaryButton as="span">{{ $t('login.signIn') }}</BasePrimaryButton>
     </NuxtLink>
   </div>
 </template>