Move buttons to separate component (#380)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/home/contentLinkShare.vue

@@ -14,12 +14,12 @@
 				</h1>
 				<div class="box has-text-left view">
 					<div class="logout">
-						<a @click="logout()" class="button">
+						<x-button @click="logout()" type="secondary">
 							<span>Logout</span>
 							<span class="icon is-small">
-									<icon icon="sign-out-alt"/>
-								</span>
-						</a>
+								<icon icon="sign-out-alt"/>
+							</span>
+						</x-button>
 					</div>
 					<router-view/>
 					<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">
@@ -49,7 +49,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/home/topNavigation.vue

@@ -44,12 +44,15 @@
 				<img :src="userAvatar" alt="" class="avatar"/>
 				<div class="dropdown is-right is-active">
 					<div class="dropdown-trigger">
-						<button @click.stop="userMenuActive = !userMenuActive" class="button has-no-shadow">
+						<x-button 
+							@click.stop="userMenuActive = !userMenuActive"
+							type="secondary" 
+							:shadow="false">
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">
-									<icon icon="chevron-down"/>
-								</span>
-						</button>
+								<icon icon="chevron-down"/>
+							</span>
+						</x-button>
 					</div>
 					<transition name="fade">
 						<div class="dropdown-menu" v-if="userMenuActive">

src/components/home/update.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="update-notification" v-if="updateAvailable">
 		<p>There is an update for Vikunja available!</p>
-		<a @click="refreshApp()" class="button is-primary has-no-shadow">Update Now</a>
+		<x-button @click="refreshApp()" :shadow="false">
+			Update Now
+		</x-button>
 	</div>
 </template>