Use Button tag for action controls

resources/js/views/settings/OAuth.vue

@@ -18,8 +18,8 @@
                         <font-awesome-icon v-if="token.value" class="has-text-success" :icon="['fas', 'check']" /> {{ token.name }}
                         <!-- revoke link -->
                         <div class="tags is-pulled-right">
-                            <a v-if="token.value" class="tag" v-clipboard="() => token.value" v-clipboard:success="clipboardSuccessHandler">{{ $t('commons.copy') }}</a>
-                            <a class="tag is-dark " @click="revokeToken(token.id)" :title="$t('settings.revoke')">{{ $t('settings.revoke') }}</a>
+                            <button v-if="token.value" class="button tag" v-clipboard="() => token.value" v-clipboard:success="clipboardSuccessHandler">{{ $t('commons.copy') }}</button>
+                            <button class="button tag is-dark " @click="revokeToken(token.id)" :title="$t('settings.revoke')">{{ $t('settings.revoke') }}</button>
                         </div>
                         <!-- edit link -->
                         <!-- <router-link :to="{ name: 'settings.oauth.editPAT' }" class="has-text-grey pl-1" :title="$t('commons.edit')">

resources/js/views/settings/WebAuthn.vue

@@ -18,9 +18,9 @@
                     <div v-for="credential in credentials" :key="credential.id" class="group-item has-text-light is-size-5 is-size-6-mobile">
                         {{ displayName(credential) }}
                         <!-- revoke link -->
-                        <a class="tag is-dark is-pulled-right" @click="revokeCredential(credential.id)" :title="$t('settings.revoke')">
+                        <button class="button tag is-dark is-pulled-right" @click="revokeCredential(credential.id)" :title="$t('settings.revoke')">
                             {{ $t('settings.revoke') }}
-                        </a>
+                        </button>
                         <!-- edit link -->
                         <!-- <router-link :to="{ name: '' }" class="has-text-grey pl-1" :title="$t('commons.rename')">
                             <font-awesome-icon :icon="['fas', 'pen-square']" />

resources/js/views/twofaccounts/Import.vue

@@ -31,13 +31,13 @@
                                 <!-- buttons -->
                                 <div v-if="account.imported === -1" class="tags is-flex-wrap-nowrap">
                                     <!-- discard button -->
-                                    <a class="tag is-dark has-text-grey-light" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
+                                    <button class="button tag is-dark has-text-grey-light" @click="discardAccount(index)"  :title="$t('twofaccounts.import.discard_this_account')">
                                         <font-awesome-icon :icon="['fas', 'trash']" />
-                                    </a>
+                                    </button>
                                     <!-- import button -->
-                                    <a v-if="account.id > -2" class="tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
+                                    <button v-if="account.id > -2" class="button tag is-link" @click="createAccount(index)"  :title="$t('twofaccounts.import.import_this_account')">
                                         {{ $t('twofaccounts.import.to_import') }}
-                                    </a>
+                                    </button>
                                 </div>
                                 <!-- result label -->
                                 <div v-else class="has-nowrap">
@@ -68,10 +68,8 @@
                         </div>
                         <!-- discard links -->
                         <div v-if="importableCount > 0" class="mt-2 is-size-7 is-pulled-right">
-                            <span v-if="duplicateCount">
-                                <a @click="discardDuplicates()" class="has-text-grey">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</a> - 
-                            </span>
-                            <a @click="discardAccounts()" class="has-text-grey">{{ $t('twofaccounts.import.discard_all') }}</a>
+                            <button v-if="duplicateCount" @click="discardDuplicates()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_duplicates') }} ({{duplicateCount}})</button>
+                            <button @click="discardAccounts()" class="has-text-grey button is-small is-ghost">{{ $t('twofaccounts.import.discard_all') }}</button>
                         </div>
                     </div>
                     <div v-if="isFetching && exportedAccounts.length === 0" class="has-text-centered">