Move all other buttons to new button component

2021-01-17 17:41:07 +01:00 · 2021-01-17 17:41:07 +01:00 · c98c7406ef
parent 54ec4aa5ce
commit c98c7406ef
41 changed files with 1382 additions and 854 deletions
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@ -13,7 +13,10 @@
 		@click="click"
 		:href="href !== '' ? href : false"
 	>
-		<icon :icon="icon" v-if="icon !== ''" />
+		<icon :icon="icon" v-if="showIconOnly"/>
+		<span class="icon is-small" v-else-if="icon !== ''">
+			<icon :icon="icon"/>
+		</span>
 		<slot></slot>
 	</a>
 </template>
@ -50,14 +53,23 @@ export default {
 			default: false,
 		},
 	},
+	computed: {
+		showIconOnly() {
+			return this.icon !== '' && typeof this.$slots.default === 'undefined'
+		}
+	},
 	methods: {
 		click(e) {
-			if (this.to !== false) {
-				this.$router.push(this.to);
+			if (this.disabled) {
+				return
 			}

-			this.$emit('click', e);
+			if (this.to !== false) {
+				this.$router.push(this.to)
+			}
+
+			this.$emit('click', e)
 		},
 	},
-};
+}
 </script>
--- a/src/components/list/partials/background-settings.vue
+++ b/src/components/list/partials/background-settings.vue
@ -47,10 +47,12 @@
 						</a>
 					</a>
 				</div>
-				<a
+				<x-button
 					:disabled="backgroundService.loading"
 					@click="() => searchBackgrounds(currentPage + 1)"
-					class="button is-centered is-load-more-button has-no-shadow mt-4"
+					class="is-load-more-button mt-4"
+					:shadow="false"
+					type="secondary"
 					v-if="backgroundSearchResult.length > 0"
 				>
 					<template v-if="backgroundService.loading">
@ -59,7 +61,7 @@
 					<template v-else>
 						Load more photos
 					</template>
-				</a>
+				</x-button>
 			</div>
 		</div>
 	</div>
--- a/src/components/migrator/migration.vue
+++ b/src/components/migrator/migration.vue
@ -4,13 +4,13 @@
 		<p>Vikunja will import all lists, tasks, notes, reminders and files you have access to.</p>
 		<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
 			<p>To authorize Vikunja to access your {{ name }} Account, click the button below.</p>
-			<a
-				:class="{'is-loading': migrationService.loading}"
+			<x-button
+				:loading="migrationService.loading"
 				:disabled="migrationService.loading"
 				:href="authUrl"
-				class="button is-primary">
+			>
 				Get Started
-			</a>
+			</x-button>
 		</template>
 		<div
 			class="migration-in-progress-container"
@ -38,8 +38,8 @@
 				Are you sure?
 			</p>
 			<div class="buttons">
-				<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
-				<router-link :to="{name: 'home'}" class="button is-text has-text-danger is-inverted has-no-shadow underline-none">Cancel</router-link>
+				<x-button @click="migrate">I am sure, please start migrating now!</x-button>
+				<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">Cancel</x-button>
 			</div>
 		</div>
 		<div v-else>
@ -48,7 +48,7 @@
 					{{ message }}
 				</div>
 			</div>
-			<router-link :to="{name: 'home'}" class="button is-primary">Refresh</router-link>
+			<x-button :to="{name: 'home'}">Refresh</x-button>
 		</div>
 	</div>
 </template>
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@ -5,7 +5,8 @@
 			<div class="field has-addons">
 				<div class="control is-expanded">
 					<input
-						class="input" id="api-url"
+						class="input"
+						id="api-url"
 						placeholder="eg. https://localhost:3456"
 						required
 						type="url"
@ -15,21 +16,29 @@
 					/>
 				</div>
 				<div class="control">
-					<a class="button is-primary" @click="setApiUrl" :disabled="apiUrl === ''">
+					<x-button @click="setApiUrl" :disabled="apiUrl === ''">
 						Change
-					</a>
+					</x-button>
 				</div>
 			</div>
 		</div>
 		<div class="api-url-info" v-else>
-			Sign in to your Vikunja account on <span v-tooltip="apiUrl">{{ apiDomain() }}</span><br/>
-			<a @click="() => configureApi = true">change</a>
+			Sign in to your Vikunja account on
+			<span v-tooltip="apiUrl"> {{ apiDomain() }} </span>
+			<br />
+			<a @click="() => (configureApi = true)">change</a>
 		</div>

-		<div class="notification is-success mt-2" v-if="successMsg !== '' && errorMsg === ''">
+		<div
+			class="notification is-success mt-2"
+			v-if="successMsg !== '' && errorMsg === ''"
+		>
 			{{ successMsg }}
 		</div>
-		<div class="notification is-danger mt-2" v-if="errorMsg !== '' && successMsg === ''">
+		<div
+			class="notification is-danger mt-2"
+			v-if="errorMsg !== '' && successMsg === ''"
+		>
 			{{ errorMsg }}
 		</div>
 	</div>
@ -57,7 +66,9 @@ export default {
 			if (window.API_URL.startsWith('/api/v1')) {
 				return window.location.host
 			}
-			const urlParts = window.API_URL.replace('http://', '').replace('https://', '').split(/[/?#]/)
+			const urlParts = window.API_URL.replace('http://', '')
+				.replace('https://', '')
+				.split(/[/?#]/)
 			return urlParts[0]
 		},
 		setApiUrl() {
@ -68,7 +79,10 @@ export default {
 			let urlToCheck = this.apiUrl

 			// Check if the url has an http prefix
-			if (!urlToCheck.startsWith('http://') && !urlToCheck.startsWith('https://')) {
+			if (
+				!urlToCheck.startsWith('http://') &&
+				!urlToCheck.startsWith('https://')
+			) {
 				urlToCheck = `http://${urlToCheck}`
 			}

@ -79,17 +93,21 @@ export default {
 			window.API_URL = urlToCheck.toString()

 			// Check if the api is reachable at the provided url
-			this.$store.dispatch('config/update')
-				.catch(e => {
+			this.$store
+				.dispatch('config/update')
+				.catch((e) => {
 					// Check if it is reachable at /api/v1 and http
-					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+					if (
+						!urlToCheck.pathname.endsWith('/api/v1') &&
+						!urlToCheck.pathname.endsWith('/api/v1/')
+					) {
 						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it has a port and if not check if it is reachable at https
 					if (urlToCheck.protocol === 'http:') {
 						urlToCheck.protocol = 'https:'
@ -98,17 +116,20 @@ export default {
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it is reachable at /api/v1 and https
 					urlToCheck.pathname = origUrlToCheck.pathname
-					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+					if (
+						!urlToCheck.pathname.endsWith('/api/v1') &&
+						!urlToCheck.pathname.endsWith('/api/v1/')
+					) {
 						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it is reachable at port 3456 and https
 					if (urlToCheck.port !== 3456) {
 						urlToCheck.protocol = 'https:'
@ -118,17 +139,20 @@ export default {
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it is reachable at :3456 and /api/v1 and https
 					urlToCheck.pathname = origUrlToCheck.pathname
-					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+					if (
+						!urlToCheck.pathname.endsWith('/api/v1') &&
+						!urlToCheck.pathname.endsWith('/api/v1/')
+					) {
 						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it is reachable at port 3456 and http
 					if (urlToCheck.port !== 3456) {
 						urlToCheck.protocol = 'http:'
@ -138,10 +162,13 @@ export default {
 					}
 					return Promise.reject(e)
 				})
-				.catch(e => {
+				.catch((e) => {
 					// Check if it is reachable at :3456 and /api/v1 and http
 					urlToCheck.pathname = origUrlToCheck.pathname
-					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+					if (
+						!urlToCheck.pathname.endsWith('/api/v1') &&
+						!urlToCheck.pathname.endsWith('/api/v1/')
+					) {
 						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
 						window.API_URL = urlToCheck.toString()
 						return this.$store.dispatch('config/update')
@ -154,7 +181,7 @@ export default {
 					this.errorMsg = `Could not find or use Vikunja installation at "${this.apiDomain()}".`
 					window.API_URL = oldUrl
 				})
-				.then(r => {
+				.then((r) => {
 					if (typeof r !== 'undefined') {
 						// Set it + save it to local storage to save us the hoops
 						this.errorMsg = ''
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@ -1,27 +1,40 @@
 <template>
 	<notifications position="bottom left" :max="2" class="global-notification">
 		<template slot="body" slot-scope="props">
-			<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
+			<div
+				:class="[
+					'vue-notification-template',
+					'vue-notification',
+					props.item.type,
+				]"
+				@click="close(props)"
+			>
 				<div
 					class="notification-title"
 					v-html="props.item.title"
 					v-if="props.item.title"
-				>
-				</div>
+				></div>
 				<div
 					class="notification-content"
 					v-html="props.item.text"
-				>
-				</div>
+				></div>
 				<div
 					class="buttons is-right"
-					v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
-					<button
-						:key="'action_'+i"
+					v-if="
+						props.item.data &&
+						props.item.data.actions &&
+						props.item.data.actions.length > 0
+					"
+				>
+					<x-button
+						:key="'action_' + i"
 						@click="action.callback"
-						class="button has-no-shadow is-small" v-for="(action, i) in props.item.data.actions">
+						:shadow="false"
+						class="is-small"
+						v-for="(action, i) in props.item.data.actions"
+					>
 						{{ action.title }}
-					</button>
+					</x-button>
 				</div>
 			</div>
 		</template>
@ -40,12 +53,11 @@ export default {
 </script>

 <style scoped>
-
 .vue-notification {
 	z-index: 9999;
 }

 .buttons {
-	margin-top: .5em;
+	margin-top: 0.5em;
 }
 </style>
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@ -4,16 +4,28 @@
 			<div class="modal-container" @click.prevent.stop="$emit('close')">
 				<div class="modal-content">
 					<slot>
-					<div class="header">
-						<slot name="header"></slot>
-					</div>
-					<div class="content">
-						<slot name="text"></slot>
-					</div>
-					<div class="actions">
-						<button @click="$emit('close')" class="button is-text has-text-danger is-inverted has-no-shadow underline-none">Cancel</button>
-						<button @click="$emit('submit')" class="button is-primary has-no-shadow">Do it!</button>
-					</div>
+						<div class="header">
+							<slot name="header"></slot>
+						</div>
+						<div class="content">
+							<slot name="text"></slot>
+						</div>
+						<div class="actions">
+							<x-button
+								@click="$emit('close')"
+								type="tertary"
+								class="has-text-danger"
+							>
+								Cancel
+							</x-button>
+							<x-button
+								@click="$emit('submit')"
+								type="primary"
+								:shadow="false"
+							>
+								Do it!
+							</x-button>
+						</div>
 					</slot>
 				</div>
 			</div>
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@ -1,88 +1,101 @@
 <template>
 	<div class="card is-fullwidth">
 		<header class="card-header">
-			<p class="card-header-title">
-				Share links
-			</p>
+			<p class="card-header-title">Share links</p>
 		</header>
 		<div class="card-content content sharables-list">
-			<form @submit.prevent="add()" class="add-form">
-				<p>
-					Share with a link:
-				</p>
+			<div class="p-4">
+				<p>Share with a link:</p>
 				<div class="field has-addons">
 					<div class="control">
 						<div class="select">
 							<select v-model="selectedRight">
 								<option :value="rights.READ">Read only</option>
-								<option :value="rights.READ_WRITE">Read & write</option>
+								<option :value="rights.READ_WRITE">
+									Read & write
+								</option>
 								<option :value="rights.ADMIN">Admin</option>
 							</select>
 						</div>
 					</div>
 					<div class="control">
-						<button class="button is-primary" type="submit">
-							Share
-						</button>
+						<x-button @click="add"> Share </x-button>
 					</div>
 				</div>
-			</form>
-			<table class="table is-striped is-hoverable is-fullwidth link-share-list" v-if="linkShares.length > 0">
+			</div>
+			<table
+				class="table is-striped is-hoverable is-fullwidth link-share-list"
+				v-if="linkShares.length > 0"
+			>
 				<thead>
-				<tr>
-					<th>Link</th>
-					<th>Shared by</th>
-					<th>Right</th>
-					<th>Delete</th>
-				</tr>
+					<tr>
+						<th>Link</th>
+						<th>Shared by</th>
+						<th>Right</th>
+						<th>Delete</th>
+					</tr>
 				</thead>
 				<tbody>
-				<tr :key="s.id" v-for="s in linkShares">
-					<td>
-						<div class="field has-addons no-input-mobile">
-							<div class="control">
-								<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
+					<tr :key="s.id" v-for="s in linkShares">
+						<td>
+							<div class="field has-addons no-input-mobile">
+								<div class="control">
+									<input
+										:value="getShareLink(s.hash)"
+										class="input"
+										readonly
+										type="text"
+									/>
+								</div>
+								<div class="control">
+									<x-button
+										@click="copy(getShareLink(s.hash))"
+										:shadow="false"
+										v-tooltip="'Copy to clipboard'"
+									>
+										<span class="icon">
+											<icon icon="paste" />
+										</span>
+									</x-button>
+								</div>
 							</div>
-							<div class="control">
-								<a @click="copy(getShareLink(s.hash))" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
-									<span class="icon">
-										<icon icon="paste"/>
-									</span>
-								</a>
-							</div>
-						</div>
-					</td>
-					<td>
-						{{ s.sharedBy.getDisplayName() }}
-					</td>
-					<td class="type">
-						<template v-if="s.right === rights.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>
-							Admin
-						</template>
-						<template v-else-if="s.right === rights.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen"/>
-							</span>
-							Write
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users"/>
-							</span>
-							Read-only
-						</template>
-					</td>
-					<td class="actions">
-						<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
-							<span class="icon">
-								<icon icon="trash-alt"/>
-							</span>
-						</button>
-					</td>
-				</tr>
+						</td>
+						<td>
+							{{ s.sharedBy.getDisplayName() }}
+						</td>
+						<td class="type">
+							<template v-if="s.right === rights.ADMIN">
+								<span class="icon is-small">
+									<icon icon="lock" />
+								</span>
+								Admin
+							</template>
+							<template v-else-if="s.right === rights.READ_WRITE">
+								<span class="icon is-small">
+									<icon icon="pen" />
+								</span>
+								Write
+							</template>
+							<template v-else>
+								<span class="icon is-small">
+									<icon icon="users" />
+								</span>
+								Read-only
+							</template>
+						</td>
+						<td class="actions">
+							<x-button
+								@click="
+									() => {
+										linkIdToDelete = s.id
+										showDeleteModal = true
+									}
+								"
+								class="is-danger"
+								icon="trash-alt"
+							/>
+						</td>
+					</tr>
 				</tbody>
 			</table>
 		</div>
@ -90,11 +103,15 @@
 		<modal
 			@close="showDeleteModal = false"
 			@submit="remove()"
-			v-if="showDeleteModal">
+			v-if="showDeleteModal"
+		>
 			<span slot="header">Remove a link share</span>
-			<p slot="text">Are you sure you want to remove this link share?<br/>
-				It will no longer be possible to access this list with this link share.<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
+			<p slot="text">
+				Are you sure you want to remove this link share?<br />
+				It will no longer be possible to access this list with this link
+				share.<br />
+				<b>This CANNOT BE UNDONE!</b>
+			</p>
 		</modal>
 	</div>
 </template>
@ -106,7 +123,7 @@ import LinkShareService from '../../services/linkShare'
 import LinkShareModel from '../../models/linkShare'

 import copy from 'copy-to-clipboard'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'

 export default {
 	name: 'linkSharing',
@ -135,12 +152,13 @@ export default {
 		this.load()
 	},
 	watch: {
-		listId() { // watch it
+		listId() {
+			// watch it
 			this.load()
 		},
 	},
 	computed: mapState({
-		frontendUrl: state => state.config.frontendUrl,
+		frontendUrl: (state) => state.config.frontendUrl,
 	}),
 	methods: {
 		load() {
@ -149,34 +167,49 @@ export default {
 				return
 			}

-			this.linkShareService.getAll({listId: this.listId})
-				.then(r => {
+			this.linkShareService
+				.getAll({ listId: this.listId })
+				.then((r) => {
 					this.linkShares = r
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		add() {
-			let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
-			this.linkShareService.create(newLinkShare)
+			let newLinkShare = new LinkShareModel({
+				right: this.selectedRight,
+				listId: this.listId,
+			})
+			this.linkShareService
+				.create(newLinkShare)
 				.then(() => {
 					this.selectedRight = rights.READ
-					this.success({message: 'The link share was successfully created'}, this)
+					this.success(
+						{ message: 'The link share was successfully created' },
+						this
+					)
 					this.load()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		remove() {
-			let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
-			this.linkShareService.delete(linkshare)
+			let linkshare = new LinkShareModel({
+				id: this.linkIdToDelete,
+				listId: this.listId,
+			})
+			this.linkShareService
+				.delete(linkshare)
 				.then(() => {
-					this.success({message: 'The link share was successfully deleted'}, this)
+					this.success(
+						{ message: 'The link share was successfully deleted' },
+						this
+					)
 					this.load()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@ -1,13 +1,14 @@
 <template>
 	<div class="card is-fullwidth has-overflow">
 		<header class="card-header">
-			<p class="card-header-title">
-				Shared with these {{ shareType }}s
-			</p>
+			<p class="card-header-title">Shared with these {{ shareType }}s</p>
 		</header>
 		<div class="card-content" v-if="userIsAdmin">
 			<div class="field has-addons">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
+				<p
+					class="control is-expanded"
+					v-bind:class="{ 'is-loading': searchService.loading }"
+				>
 					<multiselect
 						:loading="searchService.loading"
 						placeholder="Type to search..."
@ -18,84 +19,114 @@
 					/>
 				</p>
 				<p class="control">
-					<button class="button is-primary" @click="add()">
-						Share
-					</button>
+					<x-button @click="add()"> Share </x-button>
 				</p>
 			</div>
 		</div>
 		<table class="table is-striped is-hoverable is-fullwidth">
 			<tbody>
-			<tr :key="s.id" v-for="s in sharables">
-				<template v-if="shareType === 'user'">
-					<td>{{ s.getDisplayName() }}</td>
-					<td>
-						<template v-if="s.id === userInfo.id">
-							<b class="is-success">You</b>
+				<tr :key="s.id" v-for="s in sharables">
+					<template v-if="shareType === 'user'">
+						<td>{{ s.getDisplayName() }}</td>
+						<td>
+							<template v-if="s.id === userInfo.id">
+								<b class="is-success">You</b>
+							</template>
+						</td>
+					</template>
+					<template v-if="shareType === 'team'">
+						<td>
+							<router-link
+								:to="{
+									name: 'teams.edit',
+									params: { id: s.id },
+								}"
+							>
+								{{ s.name }}
+							</router-link>
+						</td>
+					</template>
+					<td class="type">
+						<template v-if="s.right === rights.ADMIN">
+							<span class="icon is-small">
+								<icon icon="lock" />
+							</span>
+							Admin
+						</template>
+						<template v-else-if="s.right === rights.READ_WRITE">
+							<span class="icon is-small">
+								<icon icon="pen" />
+							</span>
+							Write
+						</template>
+						<template v-else>
+							<span class="icon is-small">
+								<icon icon="users" />
+							</span>
+							Read-only
 						</template>
 					</td>
-				</template>
-				<template v-if="shareType === 'team'">
-					<td>
-						<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
-							{{ s.name }}
-						</router-link>
+					<td class="actions" v-if="userIsAdmin">
+						<div class="select">
+							<select
+								@change="toggleType(s)"
+								class="button mr-2"
+								v-model="selectedRight[s.id]"
+							>
+								<option
+									:selected="s.right === rights.READ"
+									:value="rights.READ"
+								>
+									Read only
+								</option>
+								<option
+									:selected="s.right === rights.READ_WRITE"
+									:value="rights.READ_WRITE"
+								>
+									Read & write
+								</option>
+								<option
+									:selected="s.right === rights.ADMIN"
+									:value="rights.ADMIN"
+								>
+									Admin
+								</option>
+							</select>
+						</div>
+						<x-button
+							@click="
+								() => {
+									sharable = s
+									showDeleteModal = true
+								}
+							"
+							class="is-danger"
+							icon="trash-alt"
+						/>
 					</td>
-				</template>
-				<td class="type">
-					<template v-if="s.right === rights.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>
-						Admin
-					</template>
-					<template v-else-if="s.right === rights.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen"/>
-							</span>
-						Write
-					</template>
-					<template v-else>
-							<span class="icon is-small">
-								<icon icon="users"/>
-							</span>
-						Read-only
-					</template>
-				</td>
-				<td class="actions" v-if="userIsAdmin">
-					<div class="select">
-						<select @change="toggleType(s)" class="button buttonright" v-model="selectedRight[s.id]">
-							<option :selected="s.right === rights.READ" :value="rights.READ">Read only</option>
-							<option :selected="s.right === rights.READ_WRITE" :value="rights.READ_WRITE">Read &
-								write
-							</option>
-							<option :selected="s.right === rights.ADMIN" :value="rights.ADMIN">Admin</option>
-						</select>
-					</div>
-					<button @click="() => {sharable = s; showDeleteModal = true}"
-							class="button is-danger icon-only">
-							<span class="icon">
-								<icon icon="trash-alt"/>
-							</span>
-					</button>
-				</td>
-			</tr>
+				</tr>
 			</tbody>
 		</table>

 		<modal
 			@close="showDeleteModal = false"
 			@submit="deleteSharable()"
-			v-if="showDeleteModal">
-			<span slot="header">Remove a {{ shareType }} from the {{ typeString }}</span>
-			<p slot="text">Are you sure you want to remove this {{ shareType }} from the {{ typeString }}?<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
+			v-if="showDeleteModal"
+		>
+			<span slot="header"
+				>Remove a {{ shareType }} from the {{ typeString }}</span
+			>
+			<p slot="text">
+				Are you sure you want to remove this {{ shareType }} from the
+				{{ typeString }}?<br />
+				<b>This CANNOT BE UNDONE!</b>
+			</p>
 		</modal>
 	</div>
 </template>

 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'

 import UserNamespaceService from '../../services/userNamespace'
 import UserNamespaceModel from '../../models/userNamespace'
@ -155,10 +186,9 @@ export default {
 		Multiselect,
 	},
 	computed: mapState({
-		userInfo: state => state.auth.info,
+		userInfo: (state) => state.auth.info,
 	}),
 	created() {
-
 		if (this.shareType === 'user') {
 			this.searchService = new UserService()
 			this.sharable = new UserModel()
@ -167,11 +197,13 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new UserListService()
-				this.stuffModel = new UserListModel({listId: this.id})
+				this.stuffModel = new UserListModel({ listId: this.id })
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new UserNamespaceService()
-				this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
+				this.stuffModel = new UserNamespaceModel({
+					namespaceId: this.id,
+				})
 			} else {
 				throw new Error('Unknown type: ' + this.type)
 			}
@ -183,11 +215,13 @@ export default {
 			if (this.type === 'list') {
 				this.typeString = `list`
 				this.stuffService = new TeamListService()
-				this.stuffModel = new TeamListModel({listId: this.id})
+				this.stuffModel = new TeamListModel({ listId: this.id })
 			} else if (this.type === 'namespace') {
 				this.typeString = `namespace`
 				this.stuffService = new TeamNamespaceService()
-				this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
+				this.stuffModel = new TeamNamespaceModel({
+					namespaceId: this.id,
+				})
 			} else {
 				throw new Error('Unknown type: ' + this.type)
 			}
@ -199,36 +233,51 @@ export default {
 	},
 	methods: {
 		load() {
-			this.stuffService.getAll(this.stuffModel)
-				.then(r => {
+			this.stuffService
+				.getAll(this.stuffModel)
+				.then((r) => {
 					this.$set(this, 'sharables', r)
-					r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
+					r.forEach((s) =>
+						this.$set(this.selectedRight, s.id, s.right)
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		deleteSharable() {
-
 			if (this.shareType === 'user') {
 				this.stuffModel.userId = this.sharable.username
 			} else if (this.shareType === 'team') {
 				this.stuffModel.teamId = this.sharable.id
 			}
-			this.stuffService.delete(this.stuffModel)
+			this.stuffService
+				.delete(this.stuffModel)
 				.then(() => {
 					this.showDeleteModal = false
 					for (const i in this.sharables) {
 						if (
-							(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
-							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+							(this.sharables[i].id === this.stuffModel.userId &&
+								this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId &&
+								this.shareType === 'team')
 						) {
 							this.sharables.splice(i, 1)
 						}
 					}
-					this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+					this.success(
+						{
+							message:
+								'The ' +
+								this.shareType +
+								' was successfully deleted from the ' +
+								this.typeString +
+								'.',
+						},
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
@ -247,17 +296,27 @@ export default {
 				this.stuffModel.teamId = this.sharable.id
 			}

-			this.stuffService.create(this.stuffModel)
+			this.stuffService
+				.create(this.stuffModel)
 				.then(() => {
-					this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+					this.success(
+						{
+							message:
+								'The ' +
+								this.shareType +
+								' was successfully added.',
+						},
+						this
+					)
 					this.load()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		toggleType(sharable) {
-			if (this.selectedRight[sharable.id] !== rights.ADMIN &&
+			if (
+				this.selectedRight[sharable.id] !== rights.ADMIN &&
 				this.selectedRight[sharable.id] !== rights.READ &&
 				this.selectedRight[sharable.id] !== rights.READ_WRITE
 			) {
@ -265,26 +324,37 @@ export default {
 			}
 			this.stuffModel.right = this.selectedRight[sharable.id]

-
 			if (this.shareType === 'user') {
 				this.stuffModel.userId = sharable.username
 			} else if (this.shareType === 'team') {
 				this.stuffModel.teamId = sharable.id
 			}

-			this.stuffService.update(this.stuffModel)
-				.then(r => {
+			this.stuffService
+				.update(this.stuffModel)
+				.then((r) => {
 					for (const i in this.sharables) {
 						if (
-							(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
-							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+							(this.sharables[i].username ===
+								this.stuffModel.userId &&
+								this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId &&
+								this.shareType === 'team')
 						) {
 							this.$set(this.sharables[i], 'right', r.right)
 						}
 					}
-					this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+					this.success(
+						{
+							message:
+								'The ' +
+								this.shareType +
+								' right was successfully updated.',
+						},
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
@ -294,11 +364,12 @@ export default {
 				return
 			}

-			this.searchService.getAll({}, {s: query})
-				.then(response => {
+			this.searchService
+				.getAll({}, { s: query })
+				.then((response) => {
 					this.$set(this, 'found', response)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@ -4,7 +4,7 @@
 			<label class="label" for="tasktext">Task Text</label>
 			<div class="control">
 				<input
-					:class="{ 'disabled': taskService.loading}"
+					:class="{ disabled: taskService.loading }"
 					:disabled="taskService.loading"
 					@change="editTaskSubmit()"
 					class="input"
@ -12,7 +12,8 @@
 					placeholder="The task text is here..."
 					type="text"
 					v-focus
-					v-model="taskEditTask.title"/>
+					v-model="taskEditTask.title"
+				/>
 			</div>
 		</div>
 		<div class="field">
@ -29,20 +30,24 @@
 		</div>

 		<b>Reminder Dates</b>
-		<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
+		<reminders
+			@change="editTaskSubmit()"
+			v-model="taskEditTask.reminderDates"
+		/>

 		<div class="field">
 			<label class="label" for="taskduedate">Due Date</label>
 			<div class="control">
 				<flat-pickr
-					:class="{ 'disabled': taskService.loading}"
+					:class="{ disabled: taskService.loading }"
 					:config="flatPickerConfig"
 					:disabled="taskService.loading"
 					@on-close="editTaskSubmit()"
 					class="input"
 					id="taskduedate"
 					placeholder="The tasks due date is here..."
-					v-model="taskEditTask.dueDate">
+					v-model="taskEditTask.dueDate"
+				>
 				</flat-pickr>
 			</div>
 		</div>
@ -52,26 +57,28 @@
 			<div class="control columns">
 				<div class="column">
 					<flat-pickr
-						:class="{ 'disabled': taskService.loading}"
+						:class="{ disabled: taskService.loading }"
 						:config="flatPickerConfig"
 						:disabled="taskService.loading"
 						@on-close="editTaskSubmit()"
 						class="input"
 						id="taskduedate"
 						placeholder="Start date"
-						v-model="taskEditTask.startDate">
+						v-model="taskEditTask.startDate"
+					>
 					</flat-pickr>
 				</div>
 				<div class="column">
 					<flat-pickr
-						:class="{ 'disabled': taskService.loading}"
+						:class="{ disabled: taskService.loading }"
 						:config="flatPickerConfig"
 						:disabled="taskService.loading"
 						@on-close="editTaskSubmit()"
 						class="input"
 						id="taskduedate"
 						placeholder="End date"
-						v-model="taskEditTask.endDate">
+						v-model="taskEditTask.endDate"
+					>
 					</flat-pickr>
 				</div>
 			</div>
@ -79,27 +86,36 @@

 		<div class="field">
 			<label class="label" for="">Repeat after</label>
-			<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
+			<repeat-after
+				@change="editTaskSubmit()"
+				v-model="taskEditTask.repeatAfter"
+			/>
 		</div>

 		<div class="field">
 			<label class="label" for="">Priority</label>
 			<div class="control priority-select">
-				<priority-select @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
+				<priority-select
+					@change="editTaskSubmit()"
+					v-model="taskEditTask.priority"
+				/>
 			</div>
 		</div>

 		<div class="field">
 			<label class="label">Percent Done</label>
 			<div class="control">
-				<percent-done-select @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
+				<percent-done-select
+					@change="editTaskSubmit()"
+					v-model="taskEditTask.percentDone"
+				/>
 			</div>
 		</div>

 		<div class="field">
 			<label class="label">Color</label>
 			<div class="control">
-				<color-picker v-model="taskEditTask.hexColor"/>
+				<color-picker v-model="taskEditTask.hexColor" />
 			</div>
 		</div>

@ -109,7 +125,7 @@
 				<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
 					{{ a.getDisplayName() }}
 					<a @click="deleteAssigneeByIndex(index)">
-						<icon icon="times"/>
+						<icon icon="times" />
 					</a>
 				</li>
 			</ul>
@ -120,14 +136,18 @@
 				<edit-assignees
 					:initial-assignees="taskEditTask.assignees"
 					:list-id="taskEditTask.listId"
-					:task-id="taskEditTask.id"/>
+					:task-id="taskEditTask.id"
+				/>
 			</div>
 		</div>

 		<div class="field">
 			<label class="label">Labels</label>
 			<div class="control">
-				<edit-labels :task-id="taskEditTask.id" v-model="taskEditTask.labels"/>
+				<edit-labels
+					:task-id="taskEditTask.id"
+					v-model="taskEditTask.labels"
+				/>
 			</div>
 		</div>

@ -138,10 +158,13 @@
 			class="is-narrow"
 		/>

-		<button :class="{ 'is-loading': taskService.loading}" class="button is-primary is-fullwidth" type="submit">
+		<x-button
+			:loading="taskService.loading"
+			class="is-fullwidth"
+			@click="editTaskSubmit()"
+		>
 			Save
-		</button>
-
+		</x-button>
 	</form>
 </template>

@ -199,7 +222,9 @@ export default {
 		PrioritySelect,
 		flatPickr,
 		editor: () => ({
-			component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
+			component: import(
+				/* webpackChunkName: "editor" */ '../../components/input/editor'
+			),
 			loading: LoadingComponent,
 			error: ErrorComponent,
 			timeout: 60000,
@ -226,24 +251,30 @@ export default {
 	},
 	methods: {
 		initTaskFields() {
-			this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
-			this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
-			this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
+			this.taskEditTask.dueDate =
+				+new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
+			this.taskEditTask.startDate =
+				+new Date(this.task.startDate) === 0
+					? null
+					: this.task.startDate
+			this.taskEditTask.endDate =
+				+new Date(this.task.endDate) === 0 ? null : this.task.endDate
 			// This makes the editor trigger its mounted function again which makes it forget every input
 			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
 			// which made it impossible to detect change from the outside. Therefore the component would
 			// not update if new content from the outside was made available.
 			// See https://github.com/NikulinIlya/vue-easymde/issues/3
 			this.editorActive = false
-			this.$nextTick(() => this.editorActive = true)
+			this.$nextTick(() => (this.editorActive = true))
 		},
 		editTaskSubmit() {
-			this.taskService.update(this.taskEditTask)
-				.then(r => {
+			this.taskService
+				.update(this.taskEditTask)
+				.then((r) => {
 					this.$set(this, 'taskEditTask', r)
 					this.initTaskFields()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@ -2,12 +2,13 @@
 	<div class="gantt-chart box">
 		<div class="filter-container">
 			<div class="items">
-				<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
-					<span class="icon is-small">
-						<icon icon="filter"/>
-					</span>
+				<x-button
+					@click.prevent.stop="showTaskFilter = !showTaskFilter"
+					type="secondary"
+					icon="filter"
+				>
 					Filters
-				</button>
+				</x-button>
 			</div>
 			<filter-popup
 				@change="loadTasks"
@ -18,21 +19,37 @@
 		<div class="dates">
 			<template v-for="(y, yk) in days">
 				<div :key="yk + 'year'" class="months">
-					<div :key="mk + 'month'" class="month" v-for="(m, mk) in days[yk]">
-						{{ new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', {month: 'long'}) }},
-						{{ (new Date(yk)).getFullYear() }}
+					<div
+						:key="mk + 'month'"
+						class="month"
+						v-for="(m, mk) in days[yk]"
+					>
+						{{
+							new Date(
+								new Date(yk).setMonth(mk)
+							).toLocaleString('en-us', { month: 'long' })
+						}},
+						{{ new Date(yk).getFullYear() }}
 						<div class="days">
 							<div
-								:class="{'today': d.toDateString() === now.toDateString()}"
+								:class="{
+									today:
+										d.toDateString() === now.toDateString(),
+								}"
 								:key="dk + 'day'"
-								:style="{'width': dayWidth + 'px'}"
+								:style="{ width: dayWidth + 'px' }"
 								class="day"
-								v-for="(d, dk) in days[yk][mk]">
+								v-for="(d, dk) in days[yk][mk]"
+							>
 								<span class="theday" v-if="dayWidth > 25">
 									{{ d.getDate() }}
 								</span>
 								<span class="weekday" v-if="dayWidth > 25">
-									{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
+									{{
+										d.toLocaleString('en-us', {
+											weekday: 'short',
+										})
+									}}
 								</span>
 							</div>
 						</div>
@ -40,19 +57,29 @@
 				</div>
 			</template>
 		</div>
-		<div :style="{'width': fullWidth + 'px'}" class="tasks">
+		<div :style="{ width: fullWidth + 'px' }" class="tasks">
 			<div
 				:key="t.id"
-				:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+				:style="{
+					background:
+						'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' +
+						(k % 2 === 0
+							? '#fafafa 1px, #fafafa '
+							: '#fff 1px, #fff ') +
+						dayWidth +
+						'px)',
+				}"
 				class="row"
-				v-for="(t, k) in theTasks">
+				v-for="(t, k) in theTasks"
+			>
 				<VueDragResize
 					:class="{
-							'done': t.done,
-							'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
-							'has-light-text': !colorIsDark(t.hexColor),
-							'has-dark-text': colorIsDark(t.hexColor)
-						}"
+						done: t.done,
+						'is-current-edit':
+							taskToEdit !== null && taskToEdit.id === t.id,
+						'has-light-text': !colorIsDark(t.hexColor),
+						'has-dark-text': colorIsDark(t.hexColor),
+					}"
 					:gridX="dayWidth"
 					:h="31"
 					:isActive="canWrite"
@ -61,7 +88,10 @@
 					:parentW="fullWidth"
 					:snapToGrid="true"
 					:sticks="['mr', 'ml']"
-					:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+					:style="{
+						'border-color': t.hexColor,
+						'background-color': t.hexColor,
+					}"
 					:w="t.durationDays * dayWidth"
 					:x="t.offsetDays * dayWidth - 6"
 					:y="0"
@ -71,24 +101,38 @@
 					axis="x"
 					class="task"
 				>
-					<span :class="{
-					'has-high-priority': t.priority >= priorities.HIGH,
-					'has-not-so-high-priority': t.priority === priorities.HIGH,
-					'has-super-high-priority': t.priority === priorities.DO_NOW
-					}">{{ t.title }}</span>
-					<priority-label :priority="t.priority"/>
+					<span
+						:class="{
+							'has-high-priority': t.priority >= priorities.HIGH,
+							'has-not-so-high-priority':
+								t.priority === priorities.HIGH,
+							'has-super-high-priority':
+								t.priority === priorities.DO_NOW,
+						}"
+						>{{ t.title }}</span
+					>
+					<priority-label :priority="t.priority" />
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
 					<a @click="editTask(theTasks[k])" class="edit-toggle">
-						<icon icon="pen"/>
+						<icon icon="pen" />
 					</a>
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
 				<div
 					:key="t.id"
-					:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+					:style="{
+						background:
+							'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' +
+							(k % 2 === 0
+								? '#fafafa 1px, #fafafa '
+								: '#fff 1px, #fff ') +
+							dayWidth +
+							'px)',
+					}"
 					class="row"
-					v-for="(t, k) in tasksWithoutDates">
+					v-for="(t, k) in tasksWithoutDates"
+				>
 					<VueDragResize
 						:gridX="dayWidth"
 						:h="31"
@ -112,7 +156,11 @@
 				</div>
 			</template>
 		</div>
-		<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
+		<form
+			@submit.prevent="addNewTask()"
+			class="add-new-task"
+			v-if="canWrite"
+		>
 			<transition name="width">
 				<input
 					@blur="hideCrateNewTask"
@ -124,28 +172,31 @@
 					v-model="newTaskTitle"
 				/>
 			</transition>
-			<button @click="showCreateNewTask" class="button is-primary has-no-shadow">
-				<span class="icon is-small">
-					<icon icon="plus"/>
-				</span>
+			<x-button @click="showCreateNewTask" :shadow="false" icon="plus">
 				Add a new task
-			</button>
+			</x-button>
 		</form>
 		<transition name="fade">
 			<div class="card taskedit" v-if="isTaskEdit">
 				<header class="card-header">
-					<p class="card-header-title">
-						Edit Task
-					</p>
-					<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
+					<p class="card-header-title">Edit Task</p>
+					<a
+						@click="
+							() => {
+								isTaskEdit = false
+								taskToEdit = null
+							}
+						"
+						class="card-header-icon"
+					>
 						<span class="icon">
-							<icon icon="times"/>
+							<icon icon="times" />
 						</span>
 					</a>
 				</header>
 				<div class="card-content">
 					<div class="content">
-						<edit-task :task="taskToEdit"/>
+						<edit-task :task="taskToEdit" />
 					</div>
 				</div>
 			</div>
@ -162,7 +213,7 @@ import TaskModel from '../../models/task'
 import priorities from '../../models/priorities'
 import PriorityLabel from './partials/priorityLabel'
 import TaskCollectionService from '../../services/taskCollection'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import Rights from '../../models/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup'

@ -184,10 +235,10 @@ export default {
 			default: false,
 		},
 		dateFrom: {
-			default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
+			default: new Date(new Date().setDate(new Date().getDate() - 15)),
 		},
 		dateTo: {
-			default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
+			default: new Date(new Date().setDate(new Date().getDate() + 30)),
 		},
 		// The width of a day in pixels, used to calculate all sorts of things.
 		dayWidth: {
@ -226,9 +277,9 @@ export default {
 		}
 	},
 	watch: {
-		'dateFrom': 'buildTheGanttChart',
-		'dateTo': 'buildTheGanttChart',
-		'listId': 'parseTasks',
+		dateFrom: 'buildTheGanttChart',
+		dateTo: 'buildTheGanttChart',
+		listId: 'parseTasks',
 	},
 	created() {
 		this.now = new Date()
@ -240,7 +291,7 @@ export default {
 		this.buildTheGanttChart()
 	},
 	computed: mapState({
-		canWrite: state => state.currentList.maxRight > Rights.READ,
+		canWrite: (state) => state.currentList.maxRight > Rights.READ,
 	}),
 	methods: {
 		buildTheGanttChart() {
@ -252,17 +303,26 @@ export default {
 			this.startDate = new Date(this.dateFrom)
 			this.endDate = new Date(this.dateTo)

-			this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) + 1
+			this.dayOffsetUntilToday =
+				Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) +
+				1
 		},
 		prepareGanttDays() {
 			// Layout: years => [months => [days]]
 			let years = {}
-			for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
+			for (
+				let d = this.startDate;
+				d <= this.endDate;
+				d.setDate(d.getDate() + 1)
+			) {
 				let date = new Date(d)
 				if (years[date.getFullYear() + ''] === undefined) {
 					years[date.getFullYear() + ''] = {}
 				}
-				if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
+				if (
+					years[date.getFullYear() + ''][date.getMonth() + ''] ===
+					undefined
+				) {
 					years[date.getFullYear() + ''][date.getMonth() + ''] = []
 				}
 				years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
@ -279,79 +339,86 @@ export default {
 			this.$set(this, 'tasksWithoutDates', [])

 			const getAllTasks = (page = 1) => {
-				return this.taskCollectionService.getAll({listId: this.listId}, this.params, page)
-					.then(tasks => {
+				return this.taskCollectionService
+					.getAll({ listId: this.listId }, this.params, page)
+					.then((tasks) => {
 						if (page < this.taskCollectionService.totalPages) {
-							return getAllTasks(page + 1)
-								.then(nextTasks => {
-									return tasks.concat(nextTasks)
-								})
+							return getAllTasks(page + 1).then((nextTasks) => {
+								return tasks.concat(nextTasks)
+							})
 						} else {
 							return tasks
 						}
 					})
-					.catch(e => {
+					.catch((e) => {
 						return Promise.reject(e)
 					})
 			}

 			getAllTasks()
-				.then(tasks => {
+				.then((tasks) => {
 					this.theTasks = tasks
-						.filter(t => {
+						.filter((t) => {
 							if (t.startDate === null && !t.done) {
 								this.tasksWithoutDates.push(t)
 							}
-							return t.startDate >= this.startDate && t.endDate <= this.endDate
+							return (
+								t.startDate >= this.startDate &&
+								t.endDate <= this.endDate
+							)
 						})
-						.map(t => {
+						.map((t) => {
 							return this.addGantAttributes(t)
 						})
 						.sort(function (a, b) {
-							if (a.startDate < b.startDate)
-								return -1
-							if (a.startDate > b.startDate)
-								return 1
+							if (a.startDate < b.startDate) return -1
+							if (a.startDate > b.startDate) return 1
 							return 0
 						})
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		addGantAttributes(t) {
 			t.endDate === null ? this.endDate : t.endDate
-			t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
-			t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
+			t.durationDays =
+				Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
+			t.offsetDays =
+				Math.floor(
+					(t.startDate - this.startDate) / 1000 / 60 / 60 / 24
+				) + 1
 			return t
 		},
 		setTaskDragged(t) {
 			this.taskDragged = t
 		},
 		resizeTask(newRect) {
-
 			// Timeout to definitly catch if the user clicked on taskedit
 			setTimeout(() => {
-
 				if (this.isTaskEdit) {
 					return
 				}

-				let didntHaveDates = this.taskDragged.startDate === null ? true : false
+				let didntHaveDates =
+					this.taskDragged.startDate === null ? true : false

 				let startDate = new Date(this.startDate)
-				startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
+				startDate.setDate(
+					startDate.getDate() + newRect.left / this.dayWidth
+				)
 				startDate.setUTCHours(0)
 				startDate.setUTCMinutes(0)
 				startDate.setUTCSeconds(0)
 				startDate.setUTCMilliseconds(0)
 				this.taskDragged.startDate = startDate
 				let endDate = new Date(startDate)
-				endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
+				endDate.setDate(
+					startDate.getDate() + newRect.width / this.dayWidth
+				)
 				this.taskDragged.startDate = startDate
 				this.taskDragged.endDate = endDate

-
 				// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
 				// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
 				// prevent it from containing outdated Data in the first place.
@ -362,8 +429,9 @@ export default {
 					}
 				}

-				this.taskService.update(this.taskDragged)
-					.then(r => {
+				this.taskService
+					.update(this.taskDragged)
+					.then((r) => {
 						// If the task didn't have dates before, we'll update the list
 						if (didntHaveDates) {
 							for (const t in this.tasksWithoutDates) {
@ -376,13 +444,17 @@ export default {
 						} else {
 							for (const tt in this.theTasks) {
 								if (this.theTasks[tt].id === r.id) {
-									this.$set(this.theTasks, tt, this.addGantAttributes(r))
+									this.$set(
+										this.theTasks,
+										tt,
+										this.addGantAttributes(r)
+									)
 									break
 								}
 							}
 						}
 					})
-					.catch(e => {
+					.catch((e) => {
 						this.error(e, this)
 					})
 			}, 100)
@ -402,21 +474,25 @@ export default {
 		},
 		hideCrateNewTask() {
 			if (this.newTaskTitle === '') {
-				this.$nextTick(() => this.newTaskFieldActive = false)
+				this.$nextTick(() => (this.newTaskFieldActive = false))
 			}
 		},
 		addNewTask() {
 			if (!this.newTaskFieldActive) {
 				return
 			}
-			let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
-			this.taskService.create(task)
-				.then(r => {
+			let task = new TaskModel({
+				title: this.newTaskTitle,
+				listId: this.listId,
+			})
+			this.taskService
+				.create(task)
+				.then((r) => {
 					this.tasksWithoutDates.push(this.addGantAttributes(r))
 					this.newTaskTitle = ''
 					this.hideCrateNewTask()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@ -2,7 +2,7 @@
 	<div class="attachments">
 		<h3>
 			<span class="icon is-grey">
-				<icon icon="paperclip"/>
+				<icon icon="paperclip" />
 			</span>
 			Attachments
 		</h3>
@ -14,12 +14,14 @@
 			multiple
 			ref="files"
 			type="file"
-			v-if="editEnabled"/>
+			v-if="editEnabled"
+		/>
 		<progress
 			:value="attachmentService.uploadProgress"
 			class="progress is-primary"
 			max="100"
-			v-if="attachmentService.uploadProgress > 0">
+			v-if="attachmentService.uploadProgress > 0"
+		>
 			{{ attachmentService.uploadProgress }}%
 		</progress>

@ -28,13 +30,22 @@
 				class="attachment"
 				v-for="a in attachments"
 				:key="a.id"
-				@click="viewOrDownload(a)">
+				@click="viewOrDownload(a)"
+			>
 				<div class="filename">{{ a.file.name }}</div>
 				<div class="info">
 					<p class="collapses">
 						<span>
-							created <span v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</span> by
-							<user :avatar-size="24" :user="a.createdBy" :is-inline="true"/>
+							created
+							<span v-tooltip="formatDate(a.created)">{{
+								formatDateSince(a.created)
+							}}</span>
+							by
+							<user
+								:avatar-size="24"
+								:user="a.createdBy"
+								:is-inline="true"
+							/>
 						</span>
 						<span>
 							{{ a.file.getHumanSize() }}
@ -46,13 +57,20 @@
 					<p>
 						<a
 							@click="downloadAttachment(a)"
-							v-tooltip="'Download this attachment'">
+							v-tooltip="'Download this attachment'"
+						>
 							Download
 						</a>
 						<a
-							@click="() => {attachmentToDelete = a; showDeleteModal = true}"
+							@click="
+								() => {
+									attachmentToDelete = a
+									showDeleteModal = true
+								}
+							"
 							v-if="editEnabled"
-							v-tooltip="'Delete this attachment'">
+							v-tooltip="'Delete this attachment'"
+						>
 							Delete
 						</a>
 					</p>
@ -60,24 +78,29 @@
 			</a>
 		</div>

-		<a
+		<x-button
+			v-if="editEnabled"
 			:disabled="attachmentService.loading"
 			@click="$refs.files.click()"
-			class="button mb-4 has-no-shadow"
-			v-if="editEnabled">
-			<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
+			class="mb-4"
+			icon="cloud-upload-alt"
+			type="secondary"
+			:shadow="false"
+		>
 			Upload attachment
-		</a>
+		</x-button>

 		<!-- Dropzone -->
-		<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
+		<div
+			:class="{ hidden: !showDropzone }"
+			class="dropzone"
+			v-if="editEnabled"
+		>
 			<div class="drop-hint">
 				<div class="icon">
-					<icon icon="cloud-upload-alt"/>
-				</div>
-				<div class="hint">
-					Drop files here to upload
+					<icon icon="cloud-upload-alt" />
 				</div>
+				<div class="hint">Drop files here to upload</div>
 			</div>
 		</div>

@ -85,18 +108,27 @@
 		<modal
 			@close="showDeleteModal = false"
 			v-if="showDeleteModal"
-			@submit="deleteAttachment()">
+			@submit="deleteAttachment()"
+		>
 			<span slot="header">Delete attachment</span>
-			<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
+			<p slot="text">
+				Are you sure you want to delete the attachment
+				{{ attachmentToDelete.file.name }}?<br />
+				<b>This CANNOT BE UNDONE!</b>
+			</p>
 		</modal>

 		<transition name="modal">
 			<modal
-				@close="() => {showImageModal = false; attachmentImageBlobUrl = null}"
+				@close="
+					() => {
+						showImageModal = false
+						attachmentImageBlobUrl = null
+					}
+				"
 				v-if="showImageModal"
 			>
-				<img :src="attachmentImageBlobUrl" alt=""/>
+				<img :src="attachmentImageBlobUrl" alt="" />
 			</modal>
 		</transition>
 	</div>
@ -106,7 +138,7 @@
 import AttachmentService from '../../../services/attachment'
 import AttachmentModel from '../../../models/attachment'
 import User from '../../misc/user'
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'

 export default {
 	name: 'attachments',
@ -141,28 +173,28 @@ export default {
 		this.attachmentService = new AttachmentService()
 	},
 	computed: mapState({
-		attachments: state => state.attachments.attachments,
+		attachments: (state) => state.attachments.attachments,
 	}),
 	mounted() {
-		document.addEventListener('dragenter', e => {
+		document.addEventListener('dragenter', (e) => {
 			e.stopPropagation()
 			e.preventDefault()
 			this.showDropzone = true
 		})

-		window.addEventListener('dragleave', e => {
+		window.addEventListener('dragleave', (e) => {
 			e.stopPropagation()
 			e.preventDefault()
 			this.showDropzone = false
 		})

-		document.addEventListener('dragover', e => {
+		document.addEventListener('dragover', (e) => {
 			e.stopPropagation()
 			e.preventDefault()
 			this.showDropzone = true
 		})

-		document.addEventListener('drop', e => {
+		document.addEventListener('drop', (e) => {
 			e.stopPropagation()
 			e.preventDefault()

@ -183,32 +215,40 @@ export default {
 			this.uploadFiles(this.$refs.files.files)
 		},
 		uploadFiles(files) {
-			const attachmentModel = new AttachmentModel({taskId: this.taskId})
-			this.attachmentService.create(attachmentModel, files)
-				.then(r => {
+			const attachmentModel = new AttachmentModel({ taskId: this.taskId })
+			this.attachmentService
+				.create(attachmentModel, files)
+				.then((r) => {
 					if (r.success !== null) {
-						r.success.forEach(a => {
+						r.success.forEach((a) => {
 							this.$store.commit('attachments/add', a)
-							this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
+							this.$store.dispatch('tasks/addTaskAttachment', {
+								taskId: this.taskId,
+								attachment: a,
+							})
 						})
 					}
 					if (r.errors !== null) {
-						r.errors.forEach(m => {
+						r.errors.forEach((m) => {
 							this.error(m)
 						})
 					}
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		deleteAttachment() {
-			this.attachmentService.delete(this.attachmentToDelete)
-				.then(r => {
-					this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
+			this.attachmentService
+				.delete(this.attachmentToDelete)
+				.then((r) => {
+					this.$store.commit(
+						'attachments/removeById',
+						this.attachmentToDelete.id
+					)
 					this.success(r, this)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
@ -216,15 +256,16 @@ export default {
 				})
 		},
 		viewOrDownload(attachment) {
-			if (attachment.file.name.endsWith('.jpg') ||
+			if (
+				attachment.file.name.endsWith('.jpg') ||
 				attachment.file.name.endsWith('.png') ||
 				attachment.file.name.endsWith('.bmp') ||
-				attachment.file.name.endsWith('.gif')) {
+				attachment.file.name.endsWith('.gif')
+			) {
 				this.showImageModal = true
-				this.attachmentService.getBlobUrl(attachment)
-					.then(url => {
-						this.attachmentImageBlobUrl = url
-					})
+				this.attachmentService.getBlobUrl(attachment).then((url) => {
+					this.attachmentImageBlobUrl = url
+				})
 			} else {
 				this.downloadAttachment(attachment)
 			}
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@ -2,33 +2,70 @@
 	<div class="content details">
 		<h3 v-if="canWrite || comments.length > 0">
 			<span class="icon is-grey">
-				<icon :icon="['far', 'comments']"/>
+				<icon :icon="['far', 'comments']" />
 			</span>
 			Comments
 		</h3>
 		<div class="comments">
-			<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
+			<span
+				class="is-inline-flex is-align-items-center"
+				v-if="
+					taskCommentService.loading && saving === null && !creating
+				"
+			>
 				<span class="loader is-inline-block mr-2"></span>
 				Loading comments...
 			</span>
 			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left is-hidden-mobile">
-					<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
+					<img
+						:src="c.author.getAvatarUrl(48)"
+						alt=""
+						class="image is-avatar"
+						height="48"
+						width="48"
+					/>
 				</figure>
 				<div class="media-content">
 					<div class="comment-info">
-						<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
-						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
-						<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
-						<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
+						<img
+							:src="c.author.getAvatarUrl(20)"
+							alt=""
+							class="image is-avatar"
+							height="20"
+							width="20"
+						/>
+						<strong>{{ c.author.getDisplayName() }}</strong
+						>&nbsp;
+						<span v-tooltip="formatDate(c.created)">{{
+							formatDateSince(c.created)
+						}}</span>
+						<span
+							v-if="+new Date(c.created) !== +new Date(c.updated)"
+							v-tooltip="formatDate(c.updated)"
+						>
 							· edited {{ formatDateSince(c.updated) }}
 						</span>
 						<transition name="fade">
-							<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
-								<span class="loader is-inline-block mr-2"></span>
+							<span
+								class="is-inline-flex"
+								v-if="
+									taskCommentService.loading &&
+									saving === c.id
+								"
+							>
+								<span
+									class="loader is-inline-block mr-2"
+								></span>
 								Saving...
 							</span>
-							<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
+							<span
+								class="has-text-success"
+								v-if="
+									!taskCommentService.loading &&
+									saved === c.id
+								"
+							>
 								Saved!
 							</span>
 						</transition>
@ -38,7 +75,12 @@
 						:is-edit-enabled="canWrite"
 						:upload-callback="attachmentUpload"
 						:upload-enabled="true"
-						@change="() => {toggleEdit(c);editComment()}"
+						@change="
+							() => {
+								toggleEdit(c)
+								editComment()
+							}
+						"
 						v-model="c.comment"
 						:has-edit-bottom="true"
 						:bottom-actions="actions[c.id]"
@ -47,19 +89,34 @@
 			</div>
 			<div class="media comment" v-if="canWrite">
 				<figure class="media-left is-hidden-mobile">
-					<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
+					<img
+						:src="userAvatar"
+						alt=""
+						class="image is-avatar"
+						height="48"
+						width="48"
+					/>
 				</figure>
 				<div class="media-content">
 					<div class="form">
 						<transition name="fade">
-							<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
-								<span class="loader is-inline-block mr-2"></span>
+							<span
+								class="is-inline-flex"
+								v-if="taskCommentService.loading && creating"
+							>
+								<span
+									class="loader is-inline-block mr-2"
+								></span>
 								Creating comment...
 							</span>
 						</transition>
 						<div class="field">
 							<editor
-								:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
+								:class="{
+									'is-loading':
+										taskCommentService.loading &&
+										!isCommentEdit,
+								}"
 								:has-preview="false"
 								:upload-callback="attachmentUpload"
 								:upload-enabled="true"
@ -69,10 +126,15 @@
 							/>
 						</div>
 						<div class="field">
-							<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
-									:disabled="newComment.comment === ''"
-									@click="addComment()" class="button is-primary">Comment
-							</button>
+							<x-button
+								:loading="
+									taskCommentService.loading && !isCommentEdit
+								"
+								:disabled="newComment.comment === ''"
+								@click="addComment()"
+							>
+								Comment
+							</x-button>
 						</div>
 					</div>
 				</div>
@ -81,10 +143,13 @@
 		<modal
 			@close="showDeleteModal = false"
 			@submit="deleteComment()"
-			v-if="showDeleteModal">
+			v-if="showDeleteModal"
+		>
 			<span slot="header">Delete this comment</span>
-			<p slot="text">Are you sure you want to delete this comment?
-				<br/>This <b>CANNOT BE UNDONE!</b></p>
+			<p slot="text">
+				Are you sure you want to delete this comment? <br />This
+				<b>CANNOT BE UNDONE!</b>
+			</p>
 		</modal>
 	</div>
 </template>
@ -100,15 +165,15 @@ export default {
 	name: 'comments',
 	components: {
 		editor: () => ({
-			component: import(/* webpackChunkName: "editor" */ '../../input/editor'),
+			component: import(
+				/* webpackChunkName: "editor" */ '../../input/editor'
+			),
 			loading: LoadingComponent,
 			error: ErrorComponent,
 			timeout: 60000,
 		}),
 	},
-	mixins: [
-		attachmentUpload,
-	],
+	mixins: [attachmentUpload],
 	props: {
 		taskId: {
 			type: Number,
@ -140,9 +205,9 @@ export default {
 	},
 	created() {
 		this.taskCommentService = new TaskCommentService()
-		this.newComment = new TaskCommentModel({taskId: this.taskId})
-		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
-		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
+		this.newComment = new TaskCommentModel({ taskId: this.taskId })
+		this.commentEdit = new TaskCommentModel({ taskId: this.taskId })
+		this.commentToDelete = new TaskCommentModel({ taskId: this.taskId })
 		this.comments = []
 	},
 	mounted() {
@ -163,12 +228,13 @@ export default {
 	},
 	methods: {
 		loadComments() {
-			this.taskCommentService.getAll({taskId: this.taskId})
-				.then(r => {
+			this.taskCommentService
+				.getAll({ taskId: this.taskId })
+				.then((r) => {
 					this.$set(this, 'comments', r)
 					this.makeActions()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
@ -183,16 +249,20 @@ export default {
 			// not update if new content from the outside was made available.
 			// See https://github.com/NikulinIlya/vue-easymde/issues/3
 			this.editorActive = false
-			this.$nextTick(() => this.editorActive = true)
+			this.$nextTick(() => (this.editorActive = true))
 			this.creating = true

-			this.taskCommentService.create(this.newComment)
-				.then(r => {
+			this.taskCommentService
+				.create(this.newComment)
+				.then((r) => {
 					this.comments.push(r)
 					this.newComment.comment = ''
-					this.success({message: 'The comment was added successfully.'}, this)
+					this.success(
+						{ message: 'The comment was added successfully.' },
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
@ -215,8 +285,9 @@ export default {
 			this.saving = this.commentEdit.id

 			this.commentEdit.taskId = this.taskId
-			this.taskCommentService.update(this.commentEdit)
-				.then(r => {
+			this.taskCommentService
+				.update(this.commentEdit)
+				.then((r) => {
 					for (const c in this.comments) {
 						if (this.comments[c].id === this.commentEdit.id) {
 							this.$set(this.comments, c, r)
@ -227,7 +298,7 @@ export default {
 						this.saved = null
 					}, 2000)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
@ -236,7 +307,8 @@ export default {
 				})
 		},
 		deleteComment() {
-			this.taskCommentService.delete(this.commentToDelete)
+			this.taskCommentService
+				.delete(this.commentToDelete)
 				.then(() => {
 					for (const a in this.comments) {
 						if (this.comments[a].id === this.commentToDelete.id) {
@ -244,7 +316,7 @@ export default {
 						}
 					}
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
@ -253,14 +325,16 @@ export default {
 		},
 		makeActions() {
 			if (this.canWrite) {
-				this.comments.forEach(c => {
-					this.$set(this.actions, c.id, [{
-						action: () => this.toggleDelete(c.id),
-						title: 'Remove',
-					}])
+				this.comments.forEach((c) => {
+					this.$set(this.actions, c.id, [
+						{
+							action: () => this.toggleDelete(c.id),
+							title: 'Remove',
+						},
+					])
 				})
 			}
-		}
+		},
 	},
 }
 </script>
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@ -1,13 +1,34 @@
 <template>
-	<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
+	<div
+		:class="{ 'is-loading': taskService.loading }"
+		class="defer-task loading-container"
+	>
 		<label class="label">Defer due date</label>
 		<div class="defer-days">
-			<button @click="() => deferDays(1)" class="button has-no-shadow">1 day</button>
-			<button @click="() => deferDays(3)" class="button has-no-shadow">3 days</button>
-			<button @click="() => deferDays(7)" class="button has-no-shadow">1 week</button>
+			<x-button
+				@click.prevent.stop="() => deferDays(1)"
+				:shadow="false"
+				type="secondary"
+			>
+				1 day
+			</x-button>
+			<x-button
+				@click.prevent.stop="() => deferDays(3)"
+				:shadow="false"
+				type="secondary"
+			>
+				3 days
+			</x-button>
+			<x-button
+				@click.prevent.stop="() => deferDays(7)"
+				:shadow="false"
+				type="secondary"
+			>
+				1 week
+			</x-button>
 		</div>
 		<flat-pickr
-			:class="{ 'disabled': taskService.loading}"
+			:class="{ disabled: taskService.loading }"
 			:config="flatPickerConfig"
 			:disabled="taskService.loading"
 			class="input"
@ -97,13 +118,14 @@ export default {
 			}

 			this.task.dueDate = new Date(this.dueDate)
-			this.taskService.update(this.task)
-				.then(r => {
+			this.taskService
+				.update(this.task)
+				.then((r) => {
 					this.lastValue = r.dueDate
 					this.task = r
 					this.$emit('input', r)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@ -1,14 +1,14 @@
 <template>
 	<div class="task-relations">
-		<button
-			class="button is-pulled-right add-task-relation-button"
-			:class="{'is-active': showNewRelationForm}"
-			@click="showNewRelationForm = !showNewRelationForm"
-			v-tooltip="'Add a New Task Relation'"
+		<x-button
 			v-if="Object.keys(relatedTasks).length > 0"
-		>
-			<icon icon="plus"/>
-		</button>
+			@click="showNewRelationForm = !showNewRelationForm"
+			class="is-pulled-right add-task-relation-button"
+			:class="{'is-active': showNewRelationForm}"
+			v-tooltip="'Add a New Task Relation'"
+			type="secondary"
+			icon="plus"
+		/>
 		<transition-group name="fade">
 			<template v-if="editEnabled && showCreate">
 				<label class="label" key="label">
@ -48,7 +48,7 @@
 						</div>
 					</div>
 					<div class="control">
-						<a @click="addTaskRelation()" class="button is-primary">Add Task Relation</a>
+						<x-button @click="addTaskRelation()">Add Task Relation</x-button>
 					</div>
 				</div>
 			</template>
@ -248,7 +248,7 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
@import '@/styles/theme/variables';

 .add-task-relation-button {
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@ -1,9 +1,9 @@
 <template>
 	<div class="control repeat-after-input">
 		<div class="buttons has-addons is-centered mt-2">
-			<button class="button is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</button>
-			<button class="button is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</button>
-			<button class="button is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">Every Day</x-button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">Every Week</x-button>
+			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">Every Month</x-button>
 		</div>
 		<div class="columns is-align-items-center">
 			<div class="is-flex column">
--- a/src/components/user/avatar-settings.vue
+++ b/src/components/user/avatar-settings.vue
@ -33,13 +33,12 @@
 					ref="avatarUploadInput"
 					type="file"
 				/>
-				<a
-					:class="{ 'is-loading': avatarService.loading || loading}"
+				<x-button
+					:loading="avatarService.loading || loading"
 					@click="$refs.avatarUploadInput.click()"
-					class="button is-primary"
 					v-if="!isCropAvatar">
 					Upload Avatar
-				</a>
+				</x-button>
 				<template v-else>
 					<cropper
 						:src="avatarToCrop"
@ -47,20 +46,23 @@
 						@ready="() => loading = false"
 						class="mb-4"
 						ref="cropper"/>
-					<a
-						:class="{ 'is-loading': avatarService.loading || loading}"
+					<x-button
+						:loading="avatarService.loading || loading"
 						@click="uploadAvatar"
-						class="button is-primary">
+					>
 						Upload Avatar
-					</a>
+					</x-button>
 				</template>
 			</template>

-			<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
-				<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
-						class="button is-primary is-fullwidth">
+			<div class="mt-2" v-if="avatarProvider !== 'upload'">
+				<x-button
+					:loading="avatarService.loading || loading"
+					@click="updateAvatarStatus()"
+					class="is-fullwidth"
+				>
 					Save
-				</button>
+				</x-button>
 			</div>
 		</div>
 	</div>
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@ -81,7 +81,7 @@
 			text-transform: none;
 			font-family: $family-sans-serif;
 			font-weight: normal;
-			padding: 0;
+			padding: .5rem 0;
 			border: none;
 			cursor: pointer;

--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@ -119,14 +119,6 @@
    height: 100%;
 }

-.bigbuttons {
-  margin-top: 0.5rem;
-}
-
-.buttonright {
-  margin-right: 0.5rem;
-}
-
 .control.has-icons-left .icon, .control.has-icons-right .icon {
  z-index: 0;
 }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -3,13 +3,13 @@
 		<h2>Hi {{ userInfo.name !== '' ? userInfo.name : userInfo.username }}!</h2>
 		<template v-if="!hasTasks">
 			<p>Click on a list or namespace on the left to get started.</p>
-			<router-link
+			<x-button
 				:to="{name: 'migrate.start'}"
-				class="button is-primary has-no-shadow"
+				:shadow="false"
 				v-if="migratorsEnabled"
 			>
 				Import your data into Vikunja
-			</router-link>
+			</x-button>
 		</template>
 		<ShowTasks :show-all="true"/>
 	</div>
--- a/src/views/filters/CreateSavedFilter.vue
+++ b/src/views/filters/CreateSavedFilter.vue
@ -51,13 +51,14 @@
 								/>
 							</div>
 						</div>
-						<button
-							:class="{ 'disabled': savedFilterService.loading}"
+						<x-button
+							:loading="savedFilterService.loading"
 							:disabled="savedFilterService.loading"
 							@click="create()"
-							class="button is-primary is-fullwidth">
+							class="is-fullwidth"
+						>
 							Create new saved filter
-						</button>
+						</x-button>
 					</div>
 				</div>
 			</div>
--- a/src/views/filters/EditSavedFilter.vue
+++ b/src/views/filters/EditSavedFilter.vue
@ -52,22 +52,20 @@

 					<div class="field has-addons mt-4">
 						<div class="control is-fullwidth">
-							<button
+							<x-button
 								@click="save()"
-								:class="{ 'is-loading': filterService.loading}"
-								class="button is-primary is-fullwidth">
+								:loading="filterService.loading"
+								class="is-fullwidth">
 								Save
-							</button>
+							</x-button>
 						</div>
 						<div class="control">
-							<button
+							<x-button
 								@click="showDeleteModal = true"
-								:class="{ 'is-loading': filterService.loading}"
-								class="button is-danger">
-								<span class="icon">
-									<icon icon="trash-alt"/>
-								</span>
-							</button>
+								:loading="filterService.loading"
+								class="is-danger"
+								icon="trash-alt"
+							/>
 						</div>
 					</div>
 				</div>
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@ -1,11 +1,12 @@
 <template>
 	<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
-		<router-link :to="{name:'labels.create'}" class="button is-primary button-right">
-			<span class="icon is-small">
-				<icon icon="plus"/>
-			</span>
+		<x-button
+			:to="{name:'labels.create'}"
+			class="is-pulled-right"
+			icon="plus"
+		>
 			New label
-		</router-link>
+		</x-button>
 		<h1>Manage labels</h1>
 		<p>
 			Click on a label to edit it.
@ -77,19 +78,20 @@
 							</div>
 							<div class="field has-addons">
 								<div class="control is-expanded">
-									<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
-											type="submit">
+									<x-button
+										:loading="labelService.loading"
+										class="is-fullwidth"
+										@click="editLabelSubmit()"
+									>
 										Save
-									</button>
+									</x-button>
 								</div>
 								<div class="control">
-									<a
+									<x-button
 										@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
-										class="button has-icon is-danger">
-										<span class="icon">
-											<icon icon="trash-alt"/>
-										</span>
-									</a>
+										icon="trash-alt"
+										class="is-danger"
+									/>
 								</div>
 							</div>
 						</form>
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@ -15,12 +15,13 @@
 						v-model="label.title"/>
 				</p>
 				<p class="control">
-					<button class="button is-primary has-no-shadow" type="submit">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
+					<x-button
+						:shadow="false"
+						icon="plus"
+						@click="newlabel"
+					>
 						Add
-					</button>
+					</x-button>
 				</p>
 			</div>
 			<p class="help is-danger" v-if="showError && label.title === ''">
--- a/src/views/list/EditList.vue
+++ b/src/views/list/EditList.vue
@ -81,22 +81,20 @@

 					<div class="field has-addons mt-4">
 						<div class="control is-fullwidth">
-							<button
+							<x-button
 								@click="submit()"
-								:class="{ 'is-loading': listService.loading}"
-								class="button is-primary is-fullwidth">
+								:loading="listService.loading"
+								class="is-fullwidth">
 								Save
-							</button>
+							</x-button>
 						</div>
 						<div class="control">
-							<button
+							<x-button
 								@click="showDeleteModal = true"
-								:class="{ 'is-loading': listService.loading}"
-								class="button is-danger">
-								<span class="icon">
-									<icon icon="trash-alt"/>
-								</span>
-							</button>
+								:locading="listService.loading"
+								icon="trash-alt"
+								class="is-danger"
+							/>
 						</div>
 					</div>
 				</div>
@ -118,13 +116,12 @@
 							<namespace-search @selected="selectNamespace"/>
 						</div>
 						<div class="control">
-							<button
-								:class="{'is-loading': listDuplicateService.loading}"
+							<x-button
+								:loading="listDuplicateService.loading"
 								@click="duplicateList"
-								class="button is-primary"
-								type="submit">
+							>
 								Duplicate
-							</button>
+							</x-button>
 						</div>
 					</div>
 				</div>
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@ -18,12 +18,14 @@
 					v-model="list.title"/>
 			</p>
 			<p class="control">
-				<button :disabled="list.title === ''" @click="newList()" class="button is-primary has-no-shadow">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
+				<x-button
+					:disabled="list.title === ''"
+					@click="newList()"
+					icon="plus"
+					:shadow="false"
+				>
 					Add
-				</button>
+				</x-button>
 			</p>
 		</div>
 		<p class="help is-danger" v-if="showError && list.title === ''">
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@ -2,12 +2,13 @@
 	<div class="kanban-view">
 		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
 			<div class="items">
-				<button @click.prevent.stop="showFilters = !showFilters" class="button">
-					<span class="icon is-small">
-						<icon icon="filter"/>
-					</span>
+				<x-button
+					@click.prevent.stop="showFilters = !showFilters"
+					icon="filter"
+					type="secondary"
+				>
 					Filters
-				</button>
+				</x-button>
 			</div>
 			<filter-popup
 				@change="() => {filtersChanged = true; loadBuckets()}"
@ -59,11 +60,10 @@
 											/>
 										</div>
 										<div class="control">
-											<a class="button is-primary has-no-shadow">
-											<span class="icon">
-												<icon :icon="['far', 'save']"/>
-											</span>
-											</a>
+											<x-button
+												:icon="['far', 'save']"
+												:shadow="false"
+											/>
 										</div>
 									</div>
 									<template v-else>
@ -191,20 +191,21 @@
 							Please specify a title.
 						</p>
 					</div>
-					<a
+					<x-button
 						@click="toggleShowNewTaskInput(bucket.id)"
-						class="button has-no-shadow is-transparent is-fullwidth has-text-centered"
-						v-if="!showNewTaskInput[bucket.id]">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
-						<span v-if="bucket.tasks.length === 0">
-						Add a task
-						</span>
-						<span v-else>
-						Add another task
-					</span>
-					</a>
+						class="is-transparent is-fullwidth has-text-centered"
+						:shadow="false"
+						v-if="!showNewTaskInput[bucket.id]"
+						icon="plus"
+						type="secondary"
+					>
+						<template v-if="bucket.tasks.length === 0">
+							Add a task
+						</template>
+						<template v-else>
+							Add another task
+						</template>
+					</x-button>
 				</div>
 			</div>

@ -222,16 +223,16 @@
 					v-if="showNewBucketInput"
 					v-model="newBucketTitle"
 				/>
-				<a
+				<x-button
 					@click="() => showNewBucketInput = true"
-					class="button has-no-shadow is-transparent is-fullwidth has-text-centered" v-if="!showNewBucketInput">
-					<span class="icon is-small">
-						<icon icon="plus"/>
-					</span>
-					<span>
-						Create a new bucket
-					</span>
-				</a>
+					:shadow="false"
+					class="is-transparent is-fullwidth has-text-centered"
+					v-if="!showNewBucketInput"
+					type="secondary"
+					icon="plus"
+				>
+					Create a new bucket
+				</x-button>
 			</div>
 		</div>

@ -269,7 +270,7 @@ import {applyDrag} from '@/helpers/applyDrag'
 import {mapState} from 'vuex'
 import {saveListView} from '@/helpers/saveListView'
 import Rights from '../../../models/rights.json'
-import { LOADING, LOADING_MODULE } from '../../../store/mutation-types'
+import {LOADING, LOADING_MODULE} from '../../../store/mutation-types'
 import FilterPopup from '@/components/list/partials/filter-popup'

 export default {
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@ -1,5 +1,7 @@
 <template>
-	<div :class="{ 'is-loading': taskCollectionService.loading}" class="loader-container is-max-width-desktop list-view">
+	<div
+		:class="{ 'is-loading': taskCollectionService.loading}"
+		class="loader-container is-max-width-desktop list-view">
 		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
 			<div class="items">
 				<div class="search">
@ -18,26 +20,29 @@
 							</span>
 						</div>
 						<div class="control">
-							<button
-								:class="{'is-loading': taskCollectionService.loading}"
+							<x-button
+								:loading="taskCollectionService.loading"
 								@click="searchTasks"
-								class="button has-no-shadow is-primary">
+								:shadow="false"
+							>
 								Search
-							</button>
+							</x-button>
 						</div>
 					</div>
-					<button @click="showTaskSearch = !showTaskSearch" class="button" v-if="!showTaskSearch">
-						<span class="icon">
-							<icon icon="search"/>
-						</span>
-					</button>
+					<x-button
+						@click="showTaskSearch = !showTaskSearch"
+						icon="search"
+						type="secondary"
+						v-if="!showTaskSearch"
+					/>
 				</div>
-				<button @click.prevent.stop="showTaskFilter = !showTaskFilter" class="button">
-					<span class="icon is-small">
-						<icon icon="filter"/>
-					</span>
+				<x-button
+					@click.prevent.stop="showTaskFilter = !showTaskFilter"
+					type="secondary"
+					icon="filter"
+				>
 					Filters
-				</button>
+				</x-button>
 			</div>
 			<filter-popup
 				@change="loadTasks(1)"
@ -62,12 +67,13 @@
 					</span>
 				</p>
 				<p class="control">
-					<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-primary">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
+					<x-button
+						:disabled="newTaskText.length === 0"
+						@click="addTask()"
+						icon="plus"
+					>
 						Add
-					</button>
+					</x-button>
 				</p>
 			</div>
 			<p class="help is-danger" v-if="showError && newTaskText === ''">
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@ -2,20 +2,20 @@
 	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
-				<button @click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
-						class="button">
-					<span class="icon is-small">
-						<icon icon="th"/>
-					</span>
+				<x-button
+					@click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
+					icon="th"
+					type="secondary"
+				>
 					Columns
-				</button>
-				<button @click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
-						class="button">
-					<span class="icon is-small">
-						<icon icon="filter"/>
-					</span>
+				</x-button>
+				<x-button
+					@click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
+					icon="filter"
+					type="secondary"
+				>
 					Filters
-				</button>
+				</x-button>
 			</div>
 			<transition name="fade">
 				<div class="card" v-if="showActiveColumnsFilter">
--- a/src/views/namespaces/EditNamespace.vue
+++ b/src/views/namespaces/EditNamespace.vue
@ -61,22 +61,21 @@

 					<div class="field has-addons mt-4">
 						<div class="control is-fullwidth">
-							<button
+							<x-button
 								@click="submit()"
-								:class="{ 'is-loading': namespaceService.loading}"
-								class="button is-primary is-fullwidth">
+								:loading="namespaceService.loading"
+								class="is-fullwidth"
+							>
 								Save
-							</button>
+							</x-button>
 						</div>
 						<div class="control">
-							<button
+							<x-button
 								@click="showDeleteModal = true"
-								:class="{ 'is-loading': namespaceService.loading}"
-								class="button is-danger">
-								<span class="icon">
-									<icon icon="trash-alt"/>
-								</span>
-							</button>
+								:loading="namespaceService.loading"
+								class="is-danger"
+								icon="trash-alt"
+							/>
 						</div>
 					</div>
 				</div>
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@ -1,32 +1,26 @@
 <template>
 	<div class="content namespaces-list loader-container" :class="{'is-loading': loading}">
-		<router-link :to="{name: 'namespace.create'}" class="button is-primary new-namespace">
-			<span class="icon is-small">
-				<icon icon="plus"/>
-			</span>
+		<x-button :to="{name: 'namespace.create'}" class="new-namespace" icon="plus">
 			Create namespace
-		</router-link>
-		<router-link :to="{name: 'filters.create'}" class="button is-primary new-namespace">
-			<span class="icon is-small">
-				<icon icon="filter"/>
-			</span>
+		</x-button>
+		<x-button :to="{name: 'filters.create'}" class="new-namespace" icon="filter">
 			Create saved filter
-		</router-link>
+		</x-button>

 		<fancycheckbox class="show-archived-check" v-model="showArchived">
 			Show Archived
 		</fancycheckbox>

 		<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
-			<router-link
+			<x-button
 				:to="{name: 'list.create', params: {id:  n.id}}"
-				class="button is-pulled-right"
-				v-if="n.id > 0">
-				<span class="icon is-small">
-					<icon icon="plus"/>
-				</span>
+				class="is-pulled-right"
+				type="secondary"
+				v-if="n.id > 0"
+				icon="plus"
+			>
 				Create list
-			</router-link>
+			</x-button>

 			<h1>
 				<span>{{ n.title }}</span>
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@ -18,12 +18,14 @@
 					v-model="namespace.title"/>
 			</p>
 			<p class="control">
-				<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-primary has-no-shadow">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
+				<x-button
+					:disabled="namespace.title === ''"
+					@click="newNamespace()"
+					:shadow="false"
+					icon="plus"
+				>
 					Add
-				</button>
+				</x-button>
 			</p>
 		</div>
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@ -30,9 +30,9 @@
 			/>
 		</h3>
 		<div v-if="!showAll">
-			<a @click="showTodaysTasks()"     class="button has-no-shadow mr-2">Today</a>
-			<a @click="setDatesToNextWeek()"  class="button has-no-shadow mr-2">Next Week</a>
-			<a @click="setDatesToNextMonth()" class="button has-no-shadow">Next Month</a>
+			<x-button type="secondary" @click="showTodaysTasks()" :shadow="false" class="mr-2">Today</x-button>
+			<x-button type="secondary" @click="setDatesToNextWeek()" :shadow="false" class="mr-2">Next Week</x-button>
+			<x-button type="secondary" @click="setDatesToNextMonth()" :shadow="false">Next Month</x-button>
 		</div>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@ -56,8 +56,11 @@
 										choose-date-label="Click here to set a due date"
 										:disabled="taskService.loading || !canWrite"
 										ref="dueDate"
-										/>
-									<a @click="() => {task.dueDate = null;saveTask()}" v-if="task.dueDate && canWrite" class="remove">
+									/>
+									<a
+										@click="() => {task.dueDate = null;saveTask()}"
+										v-if="task.dueDate && canWrite"
+										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
@ -94,7 +97,11 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="startDate"
 									/>
-									<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
+									<a
+										@click="() => {task.startDate = null;saveTask()}"
+										v-if="task.startDate && canWrite"
+										class="remove"
+									>
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
@ -117,7 +124,10 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="endDate"
 									/>
-									<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite" class="remove">
+									<a
+										@click="() => {task.endDate = null;saveTask()}"
+										v-if="task.endDate && canWrite"
+										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
@ -235,94 +245,124 @@
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
 				<div class="column is-one-third action-buttons" v-if="canWrite">
-					<a
-						:class="{'is-success': !task.done, 'has-no-shadow': !task.done}"
+					<x-button
+						:class="{'is-success': !task.done}"
+						:shadow="task.done"
 						@click="toggleTaskDone()"
-						class="button is-outlined has-no-border">
-						<span class="icon is-small"><icon icon="check-double"/></span>
-						<template v-if="task.done">
-							Mark as undone
-						</template>
-						<template v-else>
-							Done!
-						</template>
-					</a>
-					<a
+						class="is-outlined has-no-border"
+						icon="check-double"
+						type="secondary"
+					>
+						{{ task.done ? 'Mark as undone' : 'Done!' }}
+					</x-button>
+					<x-button
 						@click="setFieldActive('assignees')"
 						@shortkey="setFieldActive('assignees')"
-						class="button"
+						type="secondary"
 						v-shortkey="['a']">
 						<span class="icon is-small"><icon icon="users"/></span>
 						Assign this task to a user
-					</a>
-					<a
+					</x-button>
+					<x-button
 						@click="setFieldActive('labels')"
 						@shortkey="setFieldActive('labels')"
-						class="button"
-						v-shortkey="['l']">
-						<span class="icon is-small"><icon icon="tags"/></span>
+						type="secondary"
+						v-shortkey="['l']"
+						icon="tags"
+					>
 						Add labels
-					</a>
-					<a @click="setFieldActive('priority')" class="button">
-						<span class="icon is-small"><icon :icon="['far', 'star']"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('priority')"
+						type="secondary"
+						:icon="['far', 'star']"
+					>
 						Set Priority
-					</a>
-					<a
+					</x-button>
+					<x-button
 						@click="setFieldActive('dueDate')"
 						@shortkey="setFieldActive('dueDate')"
-						class="button"
-						v-shortkey="['d']">
-						<span class="icon is-small"><icon icon="calendar"/></span>
+						type="secondary"
+						v-shortkey="['d']"
+						icon="calendar"
+					>
 						Set Due Date
-					</a>
-					<a @click="setFieldActive('startDate')" class="button">
-						<span class="icon is-small"><icon icon="calendar-week"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('startDate')"
+						type="secondary"
+						icon="calendar-week"
+					>
 						Set a Start Date
-					</a>
-					<a @click="setFieldActive('endDate')" class="button">
-						<span class="icon is-small"><icon icon="calendar-week"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('endDate')"
+						type="secondary"
+						icon="calendar-week"
+					>
 						Set an End Date
-					</a>
-					<a @click="setFieldActive('reminders')" class="button">
-						<span class="icon is-small"><icon icon="history"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('reminders')"
+						type="secondary"
+						icon="history"
+					>
 						Set Reminders
-					</a>
-					<a @click="setFieldActive('repeatAfter')" class="button">
-						<span class="icon is-small"><icon :icon="['far', 'clock']"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('repeatAfter')"
+						type="secondary"
+						:icon="['far', 'clock']"
+					>
 						Set a repeating interval
-					</a>
-					<a @click="setFieldActive('percentDone')" class="button">
-						<span class="icon is-small"><icon icon="percent"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('percentDone')"
+						type="secondary"
+						icon="percent"
+					>
 						Set Percent Done
-					</a>
-					<a
+					</x-button>
+					<x-button
 						@click="setFieldActive('attachments')"
 						@shortkey="setFieldActive('attachments')"
-						class="button"
-						v-shortkey="['f']">
-						<span class="icon is-small"><icon icon="paperclip"/></span>
+						type="secondary"
+						v-shortkey="['f']"
+						icon="paperclip"
+					>
 						Add attachments
-					</a>
-					<a
+					</x-button>
+					<x-button
 						@click="setFieldActive('relatedTasks')"
 						@shortkey="setFieldActive('relatedTasks')"
-						class="button"
-						v-shortkey="['r']">
-						<span class="icon is-small"><icon icon="tasks"/></span>
+						type="secondary"
+						v-shortkey="['r']"
+						icon="tasks"
+					>
 						Add task relations
-					</a>
-					<a @click="setFieldActive('moveList')" class="button">
-						<span class="icon is-small"><icon icon="list"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('moveList')"
+						type="secondary"
+						icon="list"
+					>
 						Move task
-					</a>
-					<a @click="setFieldActive('color')" class="button">
-						<span class="icon is-small"><icon icon="fill-drip"/></span>
+					</x-button>
+					<x-button
+						@click="setFieldActive('color')"
+						type="secondary"
+						icon="fill-drip"
+					>
 						Set task color
-					</a>
-					<a @click="showDeleteModal = true" class="button is-danger is-outlined has-no-shadow has-no-border">
-						<span class="icon is-small"><icon icon="trash-alt"/></span>
+					</x-button>
+					<x-button
+						@click="showDeleteModal = true"
+						icon="trash-alt"
+						:shadow="false"
+						class="is-danger is-outlined has-no-border"
+					>
 						Delete task
-					</a>
+					</x-button>

 					<!-- Created / Updated [by] -->
 					<p class="created">
@ -335,7 +375,7 @@
 						</template>
 						<template v-if="task.done">
 							<br/>
-							Done  <span v-tooltip="doneFormatted">{{ doneSince }}</span>
+							Done <span v-tooltip="doneFormatted">{{ doneSince }}</span>
 						</template>
 					</p>
 				</div>
@ -568,13 +608,17 @@ export default {
 			this.activeFields[fieldName] = true
 			this.$nextTick(() => {
 				if (this.$refs[fieldName]) {
-					this.$refs[fieldName].$el.focus();
+					this.$refs[fieldName].$el.focus()

 					// scroll the field to the center of the screen if not in viewport already
-					const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect();
+					const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect()

 					if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
-						this.$refs[fieldName].$el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
+						this.$refs[fieldName].$el.scrollIntoView({
+							behavior: 'smooth',
+							block: 'center',
+							inline: 'nearest'
+						})
 				}
 			})
 		},
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@ -1,36 +1,47 @@
 <template>
-	<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
+	<div
+		class="loader-container is-max-width-desktop"
+		:class="{ 'is-loading': teamService.loading }"
+	>
 		<div class="card is-fullwidth" v-if="userIsAdmin">
 			<header class="card-header">
-				<p class="card-header-title">
-					Edit Team
-				</p>
+				<p class="card-header-title">Edit Team</p>
 			</header>
 			<div class="card-content">
 				<div class="content">
 					<form @submit.prevent="save()">
 						<div class="field">
-							<label class="label" for="teamtext">Team Name</label>
+							<label class="label" for="teamtext"
+							>Team Name</label
+							>
 							<div class="control">
 								<input
-									:class="{ 'disabled': teamMemberService.loading}"
+									:class="{
+										disabled: teamMemberService.loading,
+									}"
 									:disabled="teamMemberService.loading"
 									class="input"
 									id="teamtext"
 									placeholder="The team text is here..."
 									type="text"
 									v-focus
-									v-model="team.name"/>
+									v-model="team.name"
+								/>
 							</div>
 						</div>
-						<p class="help is-danger" v-if="showError && team.name === ''">
+						<p
+							class="help is-danger"
+							v-if="showError && team.name === ''"
+						>
 							Please specify a name.
 						</p>
 						<div class="field">
-							<label class="label" for="teamdescription">Description</label>
+							<label class="label" for="teamdescription"
+							>Description</label
+							>
 							<div class="control">
 								<editor
-									:class="{ 'disabled': teamService.loading}"
+									:class="{ disabled: teamService.loading }"
 									:disabled="teamService.loading"
 									:preview-is-default="false"
 									id="teamdescription"
@ -43,22 +54,21 @@

 					<div class="field has-addons mt-4">
 						<div class="control is-fullwidth">
-							<button
+							<x-button
 								@click="save()"
-								:class="{ 'is-loading': teamService.loading}"
-								class="button is-primary is-fullwidth">
+								:loading="teamService.loading"
+								class="is-fullwidth"
+							>
 								Save
-							</button>
+							</x-button>
 						</div>
 						<div class="control">
-							<button
+							<x-button
 								@click="showDeleteModal = true"
-								:class="{ 'is-loading': teamService.loading}"
-								class="button is-danger">
-								<span class="icon">
-									<icon icon="trash-alt"/>
-								</span>
-							</button>
+								:loading="teamService.loading"
+								class="is-danger"
+								icon="trash-alt"
+							/>
 						</div>
 					</div>
 				</div>
@ -67,9 +77,7 @@

 		<div class="card is-fullwidth has-overflow">
 			<header class="card-header">
-				<p class="card-header-title">
-					Team Members
-				</p>
+				<p class="card-header-title">Team Members</p>
 			</header>
 			<div class="card-content" v-if="userIsAdmin">
 				<div class="field has-addons">
@ -84,12 +92,9 @@
 						/>
 					</div>
 					<div class="control">
-						<button class="button is-primary" @click="addUser">
-							<span class="icon is-small">
-								<icon icon="plus"/>
-							</span>
+						<x-button @click="addUser" icon="plus">
 							Add To Team
-						</button>
+						</x-button>
 					</div>
 				</div>
 			</div>
@ -104,32 +109,34 @@
 					</td>
 					<td class="type">
 						<template v-if="m.admin">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>
+								<span class="icon is-small">
+									<icon icon="lock"/>
+								</span>
 							Admin
 						</template>
 						<template v-else>
-							<span class="icon is-small">
-								<icon icon="user"/>
-							</span>
+								<span class="icon is-small">
+									<icon icon="user"/>
+								</span>
 							Member
 						</template>
 					</td>
 					<td class="actions" v-if="userIsAdmin">
-						<button :class="{'is-loading': teamMemberService.loading}" @click="() => toggleUserType(m)"
-							class="button buttonright is-primary"
-							v-if="m.id !== userInfo.id">
+						<x-button
+							:loading="teamMemberService.loading"
+							@click="() => toggleUserType(m)"
+							class="mr-2"
+							v-if="m.id !== userInfo.id"
+						>
 							Make {{ m.admin ? 'Member' : 'Admin' }}
-						</button>
-						<button :class="{'is-loading': teamMemberService.loading}"
+						</x-button>
+						<x-button
+							:loading="teamMemberService.loading"
 							@click="() => {member = m; showUserDeleteModal = true}"
-							class="button is-danger"
-							v-if="m.id !== userInfo.id">
-							<span class="icon">
-								<icon icon="trash-alt"/>
-							</span>
-						</button>
+							class="is-danger"
+							v-if="m.id !== userInfo.id"
+							icon="trash-alt"
+						/>
 					</td>
 				</tr>
 				</tbody>
@ -140,21 +147,30 @@
 		<modal
 			@close="showDeleteModal = false"
 			@submit="deleteTeam()"
-			v-if="showDeleteModal">
+			v-if="showDeleteModal"
+		>
 			<span slot="header">Delete the team</span>
-			<p slot="text">Are you sure you want to delete this team and all of its members?<br/>
-				All team members will loose access to lists and namespaces shared with this team.<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
+			<p slot="text">
+				Are you sure you want to delete this team and all of its
+				members?<br/>
+				All team members will loose access to lists and namespaces
+				shared with this team.<br/>
+				<b>This CANNOT BE UNDONE!</b>
+			</p>
 		</modal>
 		<!-- User delete modal -->
 		<modal
 			@close="showUserDeleteModal = false"
 			@submit="deleteUser()"
-			v-if="showUserDeleteModal">
+			v-if="showUserDeleteModal"
+		>
 			<span slot="header">Remove a user from the team</span>
-			<p slot="text">Are you sure you want to remove this user from the team?<br/>
-				They will loose access to all lists and namespaces this team has access to.<br/>
-				<b>This CANNOT BE UNDONE!</b></p>
+			<p slot="text">
+				Are you sure you want to remove this user from the team?<br/>
+				They will loose access to all lists and namespaces this team has
+				access to.<br/>
+				<b>This CANNOT BE UNDONE!</b>
+			</p>
 		</modal>
 	</div>
 </template>
@ -199,7 +215,9 @@ export default {
 	components: {
 		Multiselect,
 		editor: () => ({
-			component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
+			component: import(
+				/* webpackChunkName: "editor" */ '../../components/input/editor'
+				),
 			loading: LoadingComponent,
 			error: ErrorComponent,
 			timeout: 60000,
@ -213,25 +231,30 @@ export default {
 	},
 	watch: {
 		// call again the method if the route changes
-		'$route': 'loadTeam',
+		$route: 'loadTeam',
 	},
 	computed: {
 		userIsAdmin() {
-			return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
+			return (
+				this.team &&
+				this.team.maxRight &&
+				this.team.maxRight > Rights.READ
+			)
 		},
 		...mapState({
-			userInfo: state => state.auth.info,
+			userInfo: (state) => state.auth.info,
 		}),
 	},
 	methods: {
 		loadTeam() {
 			this.team = new TeamModel({id: this.teamId})
-			this.teamService.get(this.team)
-				.then(response => {
+			this.teamService
+				.get(this.team)
+				.then((response) => {
 					this.$set(this, 'team', response)
 					this.setTitle(`Edit Team ${this.team.name}`)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
@ -242,32 +265,47 @@ export default {
 			}
 			this.showError = false

-			this.teamService.update(this.team)
-				.then(response => {
+			this.teamService
+				.update(this.team)
+				.then((response) => {
 					this.team = response
-					this.success({message: 'The team was successfully updated.'}, this)
+					this.success(
+						{message: 'The team was successfully updated.'},
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		deleteTeam() {
-			this.teamService.delete(this.team)
+			this.teamService
+				.delete(this.team)
 				.then(() => {
-					this.success({message: 'The team was successfully deleted.'}, this)
+					this.success(
+						{message: 'The team was successfully deleted.'},
+						this
+					)
 					router.push({name: 'teams.index'})
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		deleteUser() {
-			this.teamMemberService.delete(this.member)
+			this.teamMemberService
+				.delete(this.member)
 				.then(() => {
-					this.success({message: 'The user was successfully deleted from the team.'}, this)
+					this.success(
+						{
+							message:
+								'The user was successfully deleted from the team.',
+						},
+						this
+					)
 					this.loadTeam()
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 				.finally(() => {
@ -279,29 +317,42 @@ export default {
 				teamId: this.teamId,
 				username: this.newMember.username,
 			})
-			this.teamMemberService.create(newMember)
+			this.teamMemberService
+				.create(newMember)
 				.then(() => {
 					this.loadTeam()
-					this.success({message: 'The team member was successfully added.'}, this)
+					this.success(
+						{message: 'The team member was successfully added.'},
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
 		toggleUserType(member) {
 			member.admin = !member.admin
 			member.teamId = this.teamId
-			this.teamMemberService.update(member)
-				.then(r => {
+			this.teamMemberService
+				.update(member)
+				.then((r) => {
 					for (const tm in this.team.members) {
 						if (this.team.members[tm].id === member.id) {
 							this.$set(this.team.members[tm], 'admin', r.admin)
 							break
 						}
 					}
-					this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
+					this.success(
+						{
+							message:
+								'The team member was successfully made ' +
+								(member.admin ? 'admin' : 'member') +
+								'.',
+						},
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
@ -311,11 +362,12 @@ export default {
 				return
 			}

-			this.userService.getAll({}, {s: query})
-				.then(response => {
+			this.userService
+				.getAll({}, {s: query})
+				.then((response) => {
 					this.$set(this, 'foundUsers', response)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@ -1,11 +1,12 @@
 <template>
 	<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
-		<router-link :to="{name:'teams.create'}" class="button is-primary button-right">
-			<span class="icon is-small">
-				<icon icon="plus"/>
-			</span>
+		<x-button
+			:to="{name:'teams.create'}"
+			class="is-pulled-right"
+			icon="plus"
+		>
 			New Team
-		</router-link>
+		</x-button>

 		<h1>Teams</h1>
 		<ul class="teams box" v-if="teams.length > 0">
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@ -16,12 +16,9 @@
 						v-model="team.name"/>
 				</p>
 				<p class="control">
-					<button class="button is-primary has-no-shadow" type="submit">
-						<span class="icon is-small">
-							<icon icon="plus"/>
-						</span>
+					<x-button :shadow="false" @click="newTeam" icon="plus">
 						Add
-					</button>
+					</x-button>
 				</p>
 			</div>
 			<p class="help is-danger" v-if="showError && team.name === ''">
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@ -54,12 +54,19 @@

 				<div class="field is-grouped login-buttons">
 					<div class="control is-expanded">
-						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
+						<x-button
+							@click="submit"
+							:loading="loading"
+						>
 							Login
-						</button>
-						<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">
+						</x-button>
+						<x-button
+							:to="{ name: 'user.register' }"
+							v-if="registrationEnabled"
+							type="secondary"
+						>
 							Register
-						</router-link>
+						</x-button>
 					</div>
 					<div class="control">
 						<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
@ -73,9 +80,15 @@
 			</form>

 			<div v-if="openidConnect.enabled && openidConnect.providers && openidConnect.providers.length > 0" class="mt-4">
-				<a @click="redirectToProvider(p)" v-for="(p, k) in openidConnect.providers" :key="k" class="button is-fullwidth">
+				<x-button
+					@click="redirectToProvider(p)"
+					v-for="(p, k) in openidConnect.providers"
+					:key="k"
+					type="secondary"
+					class="is-fullwidth"
+				>
 					Log in with {{ p.name }}
-				</a>
+				</x-button>
 			</div>

 			<legal/>
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@ -35,9 +35,12 @@

 				<div class="field is-grouped">
 					<div class="control">
-						<button :class="{ 'is-loading': this.passwordResetService.loading}" class="button is-primary"
-								type="submit">Reset your password
-						</button>
+						<x-button
+							:loading="this.passwordResetService.loading"
+							@click="submit"
+						>
+							Reset your password
+						</x-button>
 					</div>
 				</div>
 				<div class="notification is-info" v-if="this.passwordResetService.loading">
@ -51,7 +54,9 @@
 				<div class="notification is-success">
 					{{ successMessage }}
 				</div>
-				<router-link :to="{ name: 'user.login' }" class="button is-primary">Login</router-link>
+				<x-button :to="{ name: 'user.login' }">
+					Login
+				</x-button>
 			</div>
 			<legal/>
 		</div>
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@ -62,10 +62,15 @@

 				<div class="field is-grouped">
 					<div class="control">
-						<button class="button is-primary" type="submit" :class="{ 'is-loading': loading}" id="register-submit">
+						<x-button
+							:loading="loading"
+							id="register-submit"
+							@click="submit"
+							class="mr-2"
+						>
 							Register
-						</button>
-						<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
+						</x-button>
+						<x-button :to="{ name: 'user.login' }" type="secondary">Login</x-button>
 					</div>
 				</div>
 				<div class="notification is-info" v-if="loading">
@ -136,9 +141,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-.button {
-	margin: 0 0.4em 0 0;
-}
-</style>
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@ -20,11 +20,13 @@

 				<div class="field is-grouped">
 					<div class="control">
-						<button class="button is-primary" type="submit"
-								v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset
-							link
-						</button>
-						<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
+						<x-button
+							@click="submit"
+							:loading="passwordResetService.loading"
+						>
+							Send me a password reset link
+						</x-button>
+						<x-button :to="{ name: 'user.login' }" type="secondary">Login</x-button>
 					</div>
 				</div>
 				<div class="notification is-danger" v-if="errorMsg">
@ -35,7 +37,7 @@
 				<div class="notification is-success">
 					Check your inbox! You should have a mail with instructions on how to reset your password.
 				</div>
-				<router-link :to="{ name: 'user.login' }" class="button is-primary">Login</router-link>
+				<x-button :to="{ name: 'user.login' }">Login</x-button>
 			</div>
 			<legal/>
 		</div>
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@ -50,11 +50,13 @@
 						</div>
 					</form>

-					<div class="bigbuttons">
-						<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
-								class="button is-primary is-fullwidth">
+					<div class="mt-2">
+						<x-button
+							:loading="passwordUpdateService.loading"
+							@click="updatePassword()"
+							class="is-fullwidth">
 							Save
-						</button>
+						</x-button>
 					</div>
 				</div>
 			</div>
@ -96,11 +98,13 @@
 						</div>
 					</form>

-					<div class="bigbuttons">
-						<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
-								class="button is-primary is-fullwidth">
+					<div class="mt-2">
+						<x-button
+							:loading="emailUpdateService.loading"
+							@click="updateEmail()"
+							class="is-fullwidth">
 							Save
-						</button>
+						</x-button>
 					</div>
 				</div>
 			</div>
@ -134,11 +138,13 @@
 						</label>
 					</div>

-					<div class="bigbuttons">
-						<button :class="{ 'is-loading': userSettingsService.loading}" @click="updateSettings()"
-								class="button is-primary is-fullwidth">
+					<div class="mt-2">
+						<x-button
+							:loading="userSettingsService.loading"
+							@click="updateSettings()"
+							class="is-fullwidth">
 							Save
-						</button>
+						</x-button>
 					</div>
 				</div>
 			</div>
@ -155,13 +161,12 @@
 				</p>
 			</header>
 			<div class="card-content">
-				<a
-					:class="{ 'is-loading': totpService.loading }"
+				<x-button
+					:loading="totpService.loading"
 					@click="totpEnroll()"
-					class="button is-primary"
 					v-if="!totpEnrolled && totp.secret === ''">
 					Enroll
-				</a>
+				</x-button>
 				<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
 					<p>
 						To finish your setup, use this secret in your totp app (Google Authenticator or similar):
@ -184,14 +189,14 @@
 								v-model="totpConfirmPasscode"/>
 						</div>
 					</div>
-					<a @click="totpConfirm()" class="button is-primary">Confirm</a>
+					<x-button @click="totpConfirm()">Confirm</x-button>
 				</div>
 				<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
 					<p>
 						You've sucessfully set up two factor authentication!
 					</p>
 					<p v-if="!totpDisableForm">
-						<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
+						<x-button @click="totpDisableForm = true" class="is-danger">Disable</x-button>
 					</p>
 					<div v-if="totpDisableForm">
 						<div class="field">
@ -207,7 +212,7 @@
 									v-model="totpDisablePassword"/>
 							</div>
 						</div>
-						<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
+						<x-button @click="totpDisable()" class="is-danger">Disable two factor authentication</x-button>
 					</div>
 				</div>
 			</div>
@ -221,13 +226,12 @@
 				</p>
 			</header>
 			<div class="card-content">
-				<router-link
+				<x-button
 					:to="{name: 'migrate.start'}"
-					class="button is-primary"
 					v-if="migratorsEnabled"
 				>
 					Import your data into Vikunja
-				</router-link>
+				</x-button>
 			</div>
 		</div>

@ -248,11 +252,12 @@
 						<input type="text" v-model="caldavUrl" class="input" readonly/>
 					</div>
 					<div class="control">
-						<a @click="copy(caldavUrl)" class="button is-primary has-no-shadow" v-tooltip="'Copy to clipboard'">
-							<span class="icon">
-								<icon icon="paste"/>
-							</span>
-						</a>
+						<x-button
+							@click="copy(caldavUrl)"
+							:shadow="false"
+							v-tooltip="'Copy to clipboard'"
+							icon="paste"
+						/>
 					</div>
 				</div>
 				<p>