Replace more buttons with the component

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>
 

src/components/input/colorPicker.vue

@@ -16,9 +16,9 @@
 			model="hex"
 			picker="square"
 			v-model="color"/>
-		<a @click="reset" class="button has-no-shadow is-small ml-2">
+		<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
 			Reset Color
-		</a>
+		</x-button>
 	</div>
 </template>
 

src/components/input/datepicker.vue

@@ -97,12 +97,13 @@
 					v-model="flatPickrDate"
 				/>
 
-				<a
-					class="button is-primary has-no-shadow is-fullwidth"
+				<x-button
+					class="is-fullwidth"
+					:shadow="false"
 					@click="close"
 				>
 					Confirm
-				</a>
+				</x-button>
 			</div>
 		</transition>
 	</div>

src/components/input/editor.vue

@@ -1,12 +1,22 @@
 <template>
 	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
 		<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
-			<a v-if="!isEditActive" @click="toggleEdit" class="button has-no-shadow">
+			<x-button 
+				v-if="!isEditActive"
+				@click="toggleEdit"
+				:shadow="false"
+				type="secondary"
+			>
 				<icon icon="pen"/>
-			</a>
-			<a v-else @click="toggleEdit" class="button has-no-shadow">
+			</x-button>
+			<x-button 
+				v-else 
+				@click="toggleEdit"
+				:shadow="false"
+				type="secondary"
+			>
 				Done
-			</a>
+			</x-button>
 		</div>
 
 		<div class="clear"></div>

src/components/input/multiselect.vue

@@ -35,7 +35,7 @@
 			<div class="search-results" v-if="searchResultsVisible">
 				<button
 					v-if="creatableAvailable"
-					class="button is-ghost is-fullwidth"
+					class="is-fullwidth"
 					ref="result--1"
 					@keydown.up.prevent="() => preSelect(-2)"
 					@keydown.down.prevent="() => preSelect(0)"
@@ -55,7 +55,7 @@
 				</button>
 
 				<button
-					class="button is-ghost is-fullwidth"
+					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
 					:key="key"
 					:ref="`result-${key}`"

src/styles/components/base/multiselect.scss

@@ -82,6 +82,8 @@
 			font-family: $family-sans-serif;
 			font-weight: normal;
 			padding: 0;
+			border: none;
+			cursor: pointer;
 
 			display: flex;
 			justify-content: space-between;