cypress/e2e/list/list-view-list.spec.ts

@@ -61,7 +61,7 @@ describe('List View List', () => {
 		})
 		cy.visit(`/lists/${lists[1].id}/`)
 
-		cy.get('.list-title a.icon')
+		cy.get('.list-title .icon')
 			.should('not.exist')
 		cy.get('input.input[placeholder="Add a new task..."')
 			.should('not.exist')

cypress/e2e/list/list.spec.ts

@@ -52,9 +52,9 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', 'First List')
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Edit')
 			.click()
 		cy.get('#title')
@@ -68,7 +68,7 @@ describe('Lists', () => {
 		cy.get('.list-title h1')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
 			.should('contain', newListName)
 			.should('not.contain', lists[0].title)
 		cy.visit('/')
@@ -80,9 +80,9 @@ describe('Lists', () => {
 	it('Should remove a list', () => {
 		cy.visit(`/lists/${lists[0].id}`)
 
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-trigger')
 			.click()
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
 			.contains('Delete')
 			.click()
 		cy.url()
@@ -93,7 +93,7 @@ describe('Lists', () => {
 
 		cy.get('.global-notification')
 			.should('contain', 'Success')
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.location('pathname')
 			.should('equal', '/')
@@ -112,7 +112,7 @@ describe('Lists', () => {
 		cy.get('.modal-content [data-cy=modalPrimary]')
 			.click()
 		
-		cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
+		cy.get('.namespace-container .menu.namespaces-lists .menu-list')
 			.should('not.contain', lists[0].title)
 		cy.get('main.app-content')
 			.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')

cypress/e2e/task/task.spec.ts

@@ -165,7 +165,7 @@ describe('Task', () => {
 			})
 			cy.visit(`/tasks/${tasks[0].id}`)
 
-			cy.get('.task-view .details.content.description .editor a')
+			cy.get('.task-view .details.content.description .editor button')
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
@@ -297,7 +297,7 @@ describe('Task', () => {
 			cy.visit(`/tasks/${tasks[0].id}`)
 
 			cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
-				.get('a.remove-assignee')
+				.get('.remove-assignee')
 				.click()
 
 			cy.get('.global-notification')
@@ -402,7 +402,7 @@ describe('Task', () => {
 				.contains('Due Date')
 				.get('.date-input .datepicker .show')
 				.click()
-			cy.get('.datepicker .datepicker-popup a')
+			cy.get('.datepicker .datepicker-popup button')
 				.contains('Tomorrow')
 				.click()
 			cy.get('[data-cy="closeDatepicker"]')

src/components/base/BaseButton.vue

@@ -53,7 +53,8 @@ const props = defineProps({
 const componentNodeName = ref<Node['nodeName']>('button')
 interface ElementBindings {
 	type?: string;
-	rel?: string,
+	rel?: string;
+	target?: string;
 }
 
 const elementBindings = ref({})
@@ -74,7 +75,10 @@ watchEffect(() => {
 	// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
 	if ('href' in attrs) {
 		nodeName = 'a'
-		bindings = {rel: 'noreferrer noopener nofollow'}
+		bindings = {
+			rel: 'noreferrer noopener nofollow',
+			target: '_blank',
+		}
 	}
 
 	componentNodeName.value = nodeName
@@ -103,7 +107,7 @@ const isButton = computed(() => componentNodeName.value === 'button')
 
 :where(.base-button) {
 	cursor: pointer;
-	display: block;
+	display: inline-block;
 	color: inherit;
 	font: inherit;
 	user-select: none;

src/components/home/TheNavigation.vue

@@ -22,14 +22,14 @@
 
 		<div class="navbar-end">
 			<update/>
-			<a
+			<BaseButton
 				@click="openQuickActions"
 				class="trigger-button pr-0"
 				v-shortcut="'Control+k'"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
-			</a>
+			</BaseButton>
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">

src/components/home/contentAuth.vue

@@ -49,13 +49,13 @@
 					</modal>
 				</transition>
 
-				<a
+				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 					v-shortcut="'?'"
 				>
 					<icon icon="keyboard"/>
-				</a>
+				</BaseButton>
 			</main>
 		</div>
 	</div>

src/components/home/navigation.vue

@@ -51,7 +51,7 @@
 		<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
 			<template v-for="(n, nk) in namespaces" :key="n.id">
 				<div class="namespace-title" :class="{'has-menu': n.id > 0}">
-					<span
+					<BaseButton
 						@click="toggleLists(n.id)"
 						class="menu-label"
 						v-tooltip="namespaceTitles[nk]"
@@ -61,32 +61,25 @@
 							:style="{ backgroundColor: n.hexColor }"
 							class="color-bubble"
 						/>
-						<span class="name">
+						<span class="name">{{ namespaceTitles[nk] }}</span>
-							{{ namespaceTitles[nk] }}
+						<div
-						</span>
-						<a
 							class="icon is-small toggle-lists-icon pl-2"
 							:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
-							@click="toggleLists(n.id)"
 						>
 							<icon icon="chevron-down"/>
-						</a>
+						</div>
 						<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
 							({{ namespaceListsCount[nk] }})
 						</span>
-					</span>
+					</BaseButton>
 					<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
 				</div>
-				<div
-					v-if="listsVisible[n.id] ?? true"
-					:key="n.id + 'child'"
-					class="more-container"
-				>
 					<!--
 						NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
 						triggered by the change needs to have access to the current namespace
 					-->
 					<draggable
+						v-if="listsVisible[n.id] ?? true"
 						v-bind="dragOptions"
 						:modelValue="activeLists[nk]"
 						@update:modelValue="(lists) => updateActiveLists(n, lists)"
@@ -111,45 +104,36 @@
 					>
 						<template #item="{element: l}">
 							<li
-								class="loader-container is-loading-small"
+								class="list-menu loader-container is-loading-small"
 								:class="{'is-loading': listUpdating[l.id]}"
 							>
-								<router-link
+								<BaseButton
 									:to="{ name: 'list.index', params: { listId: l.id} }"
-									v-slot="{ href, navigate, isActive }"
+									class="list-menu-link"
-									custom
+									:class="{'router-link-exact-active': currentList.id === l.id}"
 								>
-									<a
+									<span class="icon handle">
-										@click="navigate"
+										<icon icon="grip-lines"/>
-										:href="href"
+									</span>
-										class="list-menu-link"
+									<span
-										:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
+										:style="{ backgroundColor: l.hexColor }"
-									>
+										class="color-bubble"
-										<span class="icon handle">
+										v-if="l.hexColor !== ''">
-											<icon icon="grip-lines"/>
+									</span>
-										</span>
+									<span class="list-menu-title">{{ getListTitle(l) }}</span>
-										<span
+								</BaseButton>
-											:style="{ backgroundColor: l.hexColor }"
+								<BaseButton
-											class="color-bubble"
+									class="favorite"
-											v-if="l.hexColor !== ''">
+									:class="{'is-favorite': l.isFavorite}"
-										</span>
+									@click="toggleFavoriteList(l)"
-										<span class="list-menu-title">
+								>
-											{{ getListTitle(l) }}
+									<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-										</span>
+								</BaseButton>
-										<span
-											:class="{'is-favorite': l.isFavorite}"
-											@click.prevent.stop="toggleFavoriteList(l)"
-											class="favorite">
-											<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
-										</span>
-									</a>
-								</router-link>
 								<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 								<span class="list-setting-spacer" v-else></span>
 							</li>
 						</template>
 					</draggable>
-				</div>
 			</template>
 		</nav>
 		<PoweredByLink/>
@@ -162,6 +146,7 @@ import {useStore} from 'vuex'
 import draggable from 'zhyswan-vuedraggable'
 import {SortableEvent} from 'sortablejs'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
@@ -334,7 +319,7 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.menu-label,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			display: flex;
 			align-items: center;
@@ -352,28 +337,21 @@ $vikunja-nav-selected-width: 0.4rem;
 				flex: 0 0 12px;
 			}
 
-			.favorite {
+		}
-				margin-left: .25rem;
+		.favorite {
-				transition: opacity $transition, color $transition;
+			margin-left: .25rem;
-				opacity: 0;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
 
-				&:hover {
+			&:hover,
-					color: var(--warning);
+			&.is-favorite {
-				}
+				color: var(--warning);
-
-				&.is-favorite {
-					opacity: 1;
-					color: var(--warning);
-				}
 			}
+		}
 
-			&:hover .favorite {
+		.favorite.is-favorite,
-				opacity: 1;
+		.list-menu:hover .favorite {
-			}
+			opacity: 1;
-
-			&:hover {
-				background: transparent;
-			}
 		}
 
 		.menu-label {
@@ -392,6 +370,8 @@ $vikunja-nav-selected-width: 0.4rem;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
+			color: $vikunja-nav-color;
+			padding: 0 .25rem;
 
 			.menu-label {
 				margin-bottom: 0;
@@ -410,11 +390,6 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			a:not(.dropdown-item) {
-				color: $vikunja-nav-color;
-				padding: 0 .25rem;
-			}
-
 			:deep(.dropdown-trigger) {
 				padding: .5rem;
 				cursor: pointer;
@@ -444,7 +419,7 @@ $vikunja-nav-selected-width: 0.4rem;
 
 		.menu-label,
 		.nsettings,
-		.menu-list span.list-menu-link,
+		.menu-list .list-menu-link,
 		.menu-list a {
 			color: $vikunja-nav-color;
 		}
@@ -483,7 +458,11 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 			}
 
-			span.list-menu-link, li > a {
+			a:hover {
+				background: transparent;
+			}
+
+			.list-menu-link, li > a {
 				padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
 				transition: all 0.2s ease;
 
@@ -556,7 +535,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				font-family: $vikunja-font;
 			}
 
-			span.list-menu-link, li > a {
+			.list-menu-link, li > a {
 				padding-left: 2rem;
 				display: inline-block;
 

src/components/input/datepicker.vue

@@ -1,95 +1,73 @@
 <template>
-	<div class="datepicker" :class="{'disabled': disabled}">
+	<div class="datepicker">
-		<a @click.stop="toggleDatePopup" class="show">
+		<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
-			<template v-if="date === null">
+			{{ date === null ? chooseDateLabel : formatDateShort(date) }}
-				{{ chooseDateLabel }}
+		</BaseButton>
-			</template>
-			<template v-else>
-				{{ formatDateShort(date) }}
-			</template>
-		</a>
 
 		<transition name="fade">
 			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
 
-				<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
+				<BaseButton
-					<span class="icon">
+					v-if="(new Date()).getHours() < 21"
-						<icon :icon="['far', 'calendar-alt']"/>
+					class="datepicker__quick-select-date"
-					</span>
+					@click.stop="setDate('today')"
+				>
+					<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.today') }}</span>
-							{{ $t('input.datepicker.today') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('today') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('tomorrow')">
-					<span class="icon">
-						<icon :icon="['far', 'sun']"/>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('tomorrow')"
+				>
+					<span class="icon"><icon :icon="['far', 'sun']"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.tomorrow') }}</span>
-							{{ $t('input.datepicker.tomorrow') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('tomorrow') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('nextMonday')">
-					<span class="icon">
-						<icon icon="coffee"/>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextMonday')"
+				>
+					<span class="icon"><icon icon="coffee"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.nextMonday') }}</span>
-							{{ $t('input.datepicker.nextMonday') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextMonday') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('thisWeekend')">
-					<span class="icon">
-						<icon icon="cocktail"/>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('thisWeekend')"
+				>
+					<span class="icon"><icon icon="cocktail"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.thisWeekend') }}</span>
-							{{ $t('input.datepicker.thisWeekend') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('thisWeekend') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('laterThisWeek')">
-					<span class="icon">
-						<icon icon="chess-knight"/>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('laterThisWeek')"
+				>
+					<span class="icon"><icon icon="chess-knight"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
-							{{ $t('input.datepicker.laterThisWeek') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('laterThisWeek') }}
-						</span>
-					</span>
-				</a>
-				<a @click.stop="() => setDate('nextWeek')">
-					<span class="icon">
-						<icon icon="forward"/>
 					</span>
+				</BaseButton>
+				<BaseButton
+					class="datepicker__quick-select-date"
+					@click.stop="setDate('nextWeek')"
+				>
+					<span class="icon"><icon icon="forward"/></span>
 					<span class="text">
-						<span>
+						<span>{{ $t('input.datepicker.nextWeek') }}</span>
-							{{ $t('input.datepicker.nextWeek') }}
+						<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
-						</span>
-						<span class="weekday">
-							{{ getWeekdayFromStringInterval('nextWeek') }}
-						</span>
 					</span>
-				</a>
+				</BaseButton>
 
 				<flat-pickr
 					:config="flatPickerConfig"
@@ -98,7 +76,7 @@
 				/>
 
 				<x-button
-					class="is-fullwidth"
+					class="datepicker__close-button is-fullwidth"
 					:shadow="false"
 					@click="close"
 					v-cy="'closeDatepicker'"
@@ -117,6 +95,8 @@ import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
 import {i18n} from '@/i18n'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 import {format} from 'date-fns'
 import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
 import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
@@ -134,6 +114,7 @@ export default defineComponent({
 	},
 	components: {
 		flatPickr,
+		BaseButton,
 	},
 	props: {
 		modelValue: {
@@ -263,68 +244,64 @@ export default defineComponent({
 	input.input {
 		display: none;
 	}
+}
 
-	&.disabled a {
+.datepicker-popup {
-		cursor: default;
+	position: absolute;
-	}
+	z-index: 99;
+	width: 320px;
+	background: var(--white);
+	border-radius: $radius;
+	box-shadow: $shadow;
 
-	.datepicker-popup {
+	@media screen and (max-width: ($tablet)) {
-		position: absolute;
+		width: calc(100vw - 5rem);
-		z-index: 99;
-		width: 320px;
-		background: var(--white);
-		border-radius: $radius;
-		box-shadow: $shadow;
-
-		@media screen and (max-width: ($tablet)) {
-			width: calc(100vw - 5rem);
-		}
-
-		a:not(.button) {
-			display: flex;
-			align-items: center;
-			padding: 0 .5rem;
-			width: 100%;
-			height: 2.25rem;
-			color: var(--text);
-			transition: all $transition;
-
-			&:first-child {
-				border-radius: $radius $radius 0 0;
-			}
-
-			&:hover {
-				background: var(--grey-100);
-			}
-
-			.text {
-				width: 100%;
-				font-size: .85rem;
-				display: flex;
-				justify-content: space-between;
-				padding-right: .25rem;
-
-				.weekday {
-					color: var(--text-light);
-					text-transform: capitalize;
-				}
-			}
-
-			.icon {
-				width: 2rem;
-				text-align: center;
-			}
-		}
-
-		a.button {
-			margin: 1rem;
-			width: calc(100% - 2rem);
-		}
-
-		:deep(.flatpickr-calendar) {
-			margin: 0 auto 8px;
-			box-shadow: none;
-		}
 	}
 }
+
+.datepicker__quick-select-date {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	width: 100%;
+	height: 2.25rem;
+	color: var(--text);
+	transition: all $transition;
+
+	&:first-child {
+		border-radius: $radius $radius 0 0;
+	}
+
+	&:hover {
+		background: var(--grey-100);
+	}
+
+	.text {
+		width: 100%;
+		font-size: .85rem;
+		display: flex;
+		justify-content: space-between;
+		padding-right: .25rem;
+
+		.weekday {
+			color: var(--text-light);
+			text-transform: capitalize;
+		}
+	}
+
+	.icon {
+		width: 2rem;
+		text-align: center;
+	}
+}
+	
+.datepicker__close-button {
+	margin: 1rem;
+	width: calc(100% - 2rem);
+}
+
+:deep(.flatpickr-calendar) {
+	margin: 0 auto 8px;
+	box-shadow: none;
+}
 </style>

src/components/input/editor.vue

@@ -16,23 +16,23 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
+				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
 			</template>
 		</p>
 
 		<ul class="actions d-print-none" v-if="bottomActions.length > 0">
 			<li v-if="isEditEnabled && !showPreviewText && showSave">
-				<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
+				<BaseButton v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
-				<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
+				<BaseButton v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</BaseButton>
 			</li>
 			<li v-for="(action, k) in bottomActions" :key="k">
-				<a @click="action.action">{{ action.title }}</a>
+				<BaseButton @click="action.action">{{ action.title }}</BaseButton>
 			</li>
 		</ul>
 		<template v-else-if="isEditEnabled && showSave">
 			<ul v-if="showEditButton" class="actions d-print-none">
 				<li>
-					<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
+					<BaseButton @click="toggleEdit">{{ $t('input.editor.edit') }}</BaseButton>
 				</li>
 			</ul>
 			<x-button
@@ -62,10 +62,15 @@ import AttachmentService from '../../services/attachment'
 import {findCheckboxesInText} from '../../helpers/checklistFromText'
 import {createRandomID} from '@/helpers/randomId'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
+
 export default defineComponent({
 	name: 'editor',
 	components: {
 		VueEasymde,
+		BaseButton,
+		ButtonLink,
 	},
 	props: {
 		modelValue: {

src/components/input/multiselect.vue

@@ -15,7 +15,7 @@
 						<slot name="tag" :item="item">
 						<span :key="`item${key}`" class="tag ml-2 mt-2">
 							{{ label !== '' ? item[label] : item }}
-							<a @click="() => remove(item)" class="delete is-small"></a>
+							<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
 						</span>
 						</slot>
 					</template>
@@ -37,7 +37,7 @@
 
 		<transition name="fade">
 			<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
-				<button
+				<BaseButton
 					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
 					:key="key"
@@ -54,9 +54,9 @@
 					<span class="hint-text">
 						{{ selectPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 
-				<button
+				<BaseButton
 					v-if="creatableAvailable"
 					class="is-fullwidth"
 					:ref="`result-${filteredSearchResults.length}`"
@@ -75,7 +75,7 @@
 					<span class="hint-text">
 						{{ createPlaceholder }}
 					</span>
-				</button>
+				</BaseButton>
 			</div>
 		</transition>
 
@@ -87,8 +87,13 @@ import {defineComponent} from 'vue'
 import {i18n} from '@/i18n'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export default defineComponent({
 	name: 'multiselect',
+	components: {
+		BaseButton,
+	},
 	data() {
 		return {
 			query: '',

src/components/list/partials/list-card.vue

@@ -15,19 +15,21 @@
 		<div
 			class="list-background background-fade-in"
 			:class="{'is-visible': background}"
-			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+			:style="{'background-image': background !== null ? `url(${background})` : undefined}"
+		/>
 		<div class="list-content">
-			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">
 				{{ $t('namespace.archived') }}
 			</span>
-				<span
+			<BaseButton
-					:class="{'is-favorite': list.isFavorite, 'is-archived': list.isArchived}"
+				v-else
-					@click.stop="toggleFavoriteList(list)"
+				:class="{'is-favorite': list.isFavorite}"
-					class="favorite">
+				@click.stop="toggleFavoriteList(list)"
+				class="favorite"
+			>
 				<icon :icon="list.isFavorite ? 'star' : ['far', 'star']"/>
-			</span>
+			</BaseButton>
-			</div>
+
 			<div class="title">{{ list.title }}</div>
 		</div>
 	</router-link>
@@ -43,6 +45,8 @@ import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import ListModel from '@/models/list'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const background = ref<string | null>(null)
 const backgroundLoading = ref(false)
 const blurHashUrl = ref('')
@@ -109,13 +113,14 @@ function toggleFavoriteList(list: ListModel) {
 		color: var(--grey-100);
 	}
 
-	&.has-background, .list-background {
+	&.has-background,
+	.list-background {
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
 
-	&.has-background .list-content .title {
+	&.has-background .title {
 		text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
 		color: var(--white);
 	}
@@ -176,23 +181,35 @@ function toggleFavoriteList(list: ListModel) {
 
 	.list-content {
 		display: flex;
-		justify-content: space-between;
+		align-content: space-between;
 		flex-wrap: wrap;
 		padding: 1rem;
 		position: absolute;
 		height: 100%;
 		width: 100%;
 
-		.is-archived-container {
-			width: 100%;
-			text-align: right;
 
-			.is-archived {
+		.is-archived {
-				font-size: .75rem;
+			font-size: .75rem;
-				float: left;
+		}
+
+		.favorite {
+			margin-left: auto;
+			transition: opacity $transition, color $transition;
+			opacity: 0;
+			display: block;
+
+			&:hover,
+			&.is-favorite {
+				color: var(--warning);
 			}
 		}
 
+		.favorite.is-favorite,
+		&:hover .favorite {
+			opacity: 1;
+		}
+
 		.title {
 			align-self: flex-end;
 			font-family: $vikunja-font;
@@ -209,30 +226,6 @@ function toggleFavoriteList(list: ListModel) {
 			-webkit-line-clamp: 3;
 			-webkit-box-orient: vertical;
 		}
-
-		.favorite {
-			transition: opacity $transition, color $transition;
-			opacity: 0;
-
-			&:hover {
-				color: var(--warning);
-			}
-
-			&.is-archived {
-				display: none;
-			}
-
-			&.is-favorite {
-				display: inline-block;
-				opacity: 1;
-				color: var(--warning);
-			}
-		}
-
-		&:hover .favorite {
-			opacity: 1;
-		}
-
 	}
 }
 </style>

src/components/misc/ButtonLink.vue

@@ -0,0 +1,17 @@
+<template>
+	<BaseButton class="button-link"><slot/></BaseButton>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+</script>
+
+<style lang="scss">
+.button-link {
+	color: var(--link);
+
+	&:hover {
+		color: var(--link-hover);
+	}
+}
+</style>

src/components/misc/api-config.vue

@@ -27,7 +27,7 @@
 				<span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
 			</i18n-t>
 			<br/>
-			<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
+			<ButtonLink class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</ButtonLink>
 		</div>
 
 		<message variant="success" v-if="successMsg !== '' && errorMsg === ''" class="mt-2">
@@ -48,6 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 import {success} from '@/message'
 
 import Message from '@/components/misc/message.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 const props = defineProps({
 	configureOpen: {
@@ -117,4 +118,9 @@ async function setApiUrl() {
 .url {
 	border-bottom: 1px dashed var(--primary);
 }
+
+.api-config__change-button {
+	display: inline-block;
+    color: var(--link);
+}
 </style>

src/components/misc/card.vue

@@ -4,7 +4,7 @@
 			<p class="card-header-title">
 				{{ title }}
 			</p>
-			<a
+			<BaseButton
 				v-if="hasClose"
 				class="card-header-icon"
 				:aria-label="$t('misc.close')"
@@ -14,7 +14,7 @@
 				<span class="icon">
 					<icon :icon="closeIcon"/>
 				</span>
-			</a>
+			</BaseButton>
 		</header>
 		<div class="card-content loader-container" :class="{'p-0': !padding, 'is-loading': loading}">
 			<div :class="{'content': hasContent}">
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+
 defineProps({
 	title: {
 		type: String,

src/components/misc/error.vue

@@ -1,14 +1,15 @@
 <template>
 	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
-			<a @click="reload">{{ $t('loadingError.tryAgain') }}</a>
+			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
-			<a href="https://vikunja.io/contact/" rel="noreferrer noopener nofollow" target="_blank">{{ $t('loadingError.contact') }}</a>
+			<ButtonLink href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</ButtonLink>
 		</i18n-t>
 	</message>
 </template>
 
 <script lang="ts" setup>
 import Message from '@/components/misc/message.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 function reload() {
 	window.location.reload()

src/components/misc/legal.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="legal-links">
-		<a :href="imprintUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="imprintUrl">{{ $t('navigation.imprint') }}</a>
+		<BaseButton :href="imprintUrl" v-if="imprintUrl">{{ $t('navigation.imprint') }}</BaseButton>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<a :href="privacyPolicyUrl" rel="noreferrer noopener nofollow" target="_blank" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</a>
+		<BaseButton :href="privacyPolicyUrl" v-if="privacyPolicyUrl">{{ $t('navigation.privacy') }}</BaseButton>
 	</div>
 </template>
 
@@ -10,6 +10,8 @@
 import {computed} from 'vue'
 import {useStore} from 'vuex'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+
 const store = useStore()
 
 const imprintUrl = computed(() => store.state.config.legal.imprintUrl)

src/components/misc/notification.vue

@@ -1,6 +1,7 @@
 <template>
 	<notifications position="bottom left" :max="2" class="global-notification">
 		<template #body="{ item, close }">
+			<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
 			<div
 				:class="[
 					'vue-notification-template',

src/components/notifications/notifications.vue

@@ -1,10 +1,10 @@
 <template>
 	<div class="notifications">
 		<div class="is-flex is-justify-content-center">
-			<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
+			<BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
 				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
 				<icon icon="bell"/>
-			</a>
+			</BaseButton>
 		</div>
 
 		<transition name="fade">
@@ -26,9 +26,9 @@
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
 								{{ n.notification.doer.getDisplayName() }}
 							</span>
-							<a @click="() => to(n, index)()">
+							<BaseButton @click="() => to(n, index)()">
 								{{ n.toText(userInfo) }}
-							</a>
+							</BaseButton>
 						</div>
 						<span class="created" v-tooltip="formatDate(n.created)">
 							{{ formatDateSince(n.created) }}
@@ -50,6 +50,7 @@
 import {computed, onMounted, onUnmounted, ref} from 'vue'
 
 import NotificationService from '@/services/notification'
+import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 import names from '@/models/constants/notificationNames.json'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'

src/components/quick-actions/quick-actions.vue

@@ -32,7 +32,7 @@
 						{{ r.title }}
 					</span>
 					<div class="result-items">
-						<button
+						<BaseButton
 							v-for="(i, key) in r.items"
 							:key="key"
 							:ref="`result-${k}_${key}`"
@@ -44,7 +44,7 @@
 							:class="{'is-strikethrough': i.done}"
 						>
 							{{ i.title }}
-						</button>
+						</BaseButton>
 					</div>
 				</div>
 			</div>
@@ -63,6 +63,8 @@ import TeamModel from '@/models/team'
 
 import {CURRENT_LIST, LOADING, LOADING_MODULE, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
 import ListModel from '@/models/list'
+
+import BaseButton from '@/components/base/BaseButton.vue'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 import {getHistory} from '@/modules/listHistory'
 import {parseTaskText, PrefixMode} from '@/modules/parseTaskText'
@@ -86,7 +88,10 @@ const SEARCH_MODE_TEAMS = 'teams'
 
 export default defineComponent({
 	name: 'quick-actions',
-	components: {QuickAddMagic},
+	components: {
+		BaseButton,
+		QuickAddMagic,
+	},
 	data() {
 		return {
 			query: '',

src/components/tasks/gantt-component.vue

@@ -96,9 +96,10 @@
 					</span>
 					<priority-label :priority="t.priority" :done="t.done"/>
 					<!-- 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">
+					<!-- FIXME: add label -->
+					<BaseButton @click="editTask(theTasks[k])" class="edit-toggle">
 						<icon icon="pen"/>
-					</a>
+					</BaseButton>
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
@@ -184,12 +185,14 @@ import TaskCollectionService from '../../services/taskCollection'
 import {mapState} from 'vuex'
 import Rights from '../../models/constants/rights.json'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default defineComponent({
 	name: 'GanttChart',
 	components: {
+		BaseButton,
 		FilterPopup,
 		PriorityLabel,
 		EditTask,

src/components/tasks/partials/attachments.vue

@@ -26,6 +26,9 @@
 		</progress>
 
 		<div class="files" v-if="attachments.length > 0">
+			<!-- FIXME: don't use a for element that wraps other links / buttons
+				Instead: overlay element with button that is inside.
+			-->
 			<a
 				class="attachment"
 				v-for="a in attachments"
@@ -53,25 +56,28 @@
 						</span>
 					</p>
 					<p>
-						<a
+						<BaseButton
+							class="attachment-info-meta-button"
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
 							{{ $t('misc.download') }}
-						</a>
+						</BaseButton>
-						<a
+						<BaseButton
+							class="attachment-info-meta-button"
 							@click.stop="copyUrl(a)"
 							v-tooltip="$t('task.attachment.copyUrlTooltip')"
 						>
 							{{ $t('task.attachment.copyUrl') }}
-						</a>
+						</BaseButton>
-						<a
+						<BaseButton
-							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-if="editEnabled"
+							class="attachment-info-meta-button"
+							@click.prevent.stop="() => {attachmentToDelete = a; showDeleteModal = true}"
 							v-tooltip="$t('task.attachment.deleteTooltip')"
 						>
 							{{ $t('misc.delete') }}
-						</a>
+						</BaseButton>
 					</p>
 				</div>
 			</a>
@@ -148,9 +154,12 @@ import {mapState} from 'vuex'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { uploadFiles, generateAttachmentUrl } from '@/helpers/attachments'
 
+import BaseButton from '@/components/base/BaseButton'
+
 export default defineComponent({
 	name: 'attachments',
 	components: {
+		BaseButton,
 		User,
 	},
 	data() {
@@ -297,7 +306,7 @@ export default defineComponent({
           display: flex;
 
           > span:not(:last-child):after,
-          > a:not(:last-child):after {
+          > button:not(:last-child):after {
             content: '·';
             padding: 0 .25rem;
           }
@@ -377,7 +386,7 @@ export default defineComponent({
 		}
 
 		> span:not(:last-child):after,
-		> a:not(:last-child):after {
+		> button:not(:last-child):after {
 			display: none;
 		}
 
@@ -387,6 +396,10 @@ export default defineComponent({
 	}
 }
 
+.attachment-info-meta-button {
+	color: var(--link);
+}
+
 @keyframes bounce {
   from,
   20%,

src/components/tasks/partials/editAssignees.vue

@@ -18,9 +18,9 @@
 			<template #tag="{item: user}">
 				<span class="assignee">
 					<user :avatar-size="32" :show-username="false" :user="user"/>
-					<a @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
+					<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
 						<icon icon="times"/>
-					</a>
+					</BaseButton>
 				</span>
 			</template>
 		</Multiselect>
@@ -34,6 +34,7 @@ import {useI18n} from 'vue-i18n'
 
 import User from '@/components/misc/user.vue'
 import Multiselect from '@/components/input/multiselect.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {includesById} from '@/helpers/utils'
 import UserModel from '@/models/user'
@@ -95,7 +96,7 @@ async function removeAssignee(user: UserModel) {
 	success({message: t('task.assignee.unassignSuccess')})
 }
 
-async function findUser(query) {
+async function findUser(query: string) {
 	if (query === '') {
 		clearAllFoundUsers()
 		return

src/components/tasks/partials/editLabels.vue

@@ -19,7 +19,7 @@
 				:style="{'background': label.hexColor, 'color': label.textColor}"
 				class="tag">
 				<span>{{ label.title }}</span>
-				<button type="button" v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
+				<BaseButton v-cy="'taskDetail.removeLabel'" @click="removeLabel(label)" class="delete is-small" />
 			</span>
 		</template>
 		<template #searchResult="{option}">
@@ -47,6 +47,7 @@ import LabelModel from '@/models/label'
 import LabelTaskService from '@/services/labelTask'
 import {success} from '@/message'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 const props = defineProps({

src/components/tasks/partials/quick-add-magic.vue

@@ -2,7 +2,7 @@
 	<div v-if="available">
 		<p class="help has-text-grey">
 			{{ $t('task.quickAddMagic.hint') }}.
-			<a @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</a>
+			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
 		</p>
 		<modal
 			@close="() => visible = false"
@@ -86,13 +86,16 @@
 </template>
 
 <script setup lang="ts">
+import {ref, computed} from 'vue'
+
+import ButtonLink from '@/components/misc/ButtonLink.vue'
+
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
-import {ref, computed} from 'vue'
 
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
 const available = computed(() => mode.value !== 'disabled')
-const prefixes = computed(() =>PREFIXES[mode.value])
+const prefixes = computed(() => PREFIXES[mode.value])
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -103,12 +103,13 @@
 						</span>
 						{{ t.title }}
 					</router-link>
-					<a
+					<BaseButton
+						v-if="editEnabled"
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
 						class="remove"
-						v-if="editEnabled">
+					>
 						<icon icon="trash-alt"/>
-					</a>
+					</BaseButton>
 				</div>
 			</div>
 		</div>
@@ -145,6 +146,7 @@ import TaskRelationService from '../../../services/taskRelation'
 import relationKinds from '../../../models/constants/relationKinds'
 import TaskRelationModel from '../../../models/taskRelation'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Multiselect from '@/components/input/multiselect.vue'
 
 export default defineComponent({
@@ -166,6 +168,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		Multiselect,
 	},
 	props: {

src/components/tasks/partials/reminders.vue

@@ -11,9 +11,9 @@
 				:disabled="disabled"
 				@close-on-change="() => addReminderDate(index)"
 			/>
-			<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
+			<BaseButton @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 				<icon icon="times"></icon>
-			</a>
+			</BaseButton>
 		</div>
 		<div class="reminder-input" v-if="!disabled">
 			<Datepicker
@@ -28,10 +28,13 @@
 <script setup lang="ts">
 import {PropType, ref, onMounted, watch} from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import Datepicker from '@/components/input/datepicker.vue'
 
 type Reminder = Date | string
 
+
+
 const props = defineProps({
 	modelValue: {
 		type: Array as PropType<Reminder[]>,

src/components/tasks/partials/singleTaskInList.vue

@@ -39,17 +39,21 @@
 				:user="a"
 				v-for="(a, i) in task.assignees"
 			/>
-			<time
+			<BaseButton
-				:datetime="formatISO(task.dueDate)"
-				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				class="is-italic"
-				@click.prevent.stop="showDefer = !showDefer"
 				v-if="+new Date(task.dueDate) > 0"
+				class="dueDate"
+				@click.prevent.stop="showDefer = !showDefer"
 				v-tooltip="formatDate(task.dueDate)"
-				:aria-expanded="showDefer ? 'true' : 'false'"
 			>
-				- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				<time
-			</time>
+					:datetime="formatISO(task.dueDate)"
+					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+					class="is-italic"
+					:aria-expanded="showDefer ? 'true' : 'false'"
+				>
+					- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
+				</time>
+			</BaseButton>
 			<transition name="fade">
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
 			</transition>
@@ -80,13 +84,13 @@
 			v-tooltip="$t('task.detail.belongsToList', {list: $store.getters['lists/getListById'](task.listId).title})">
 			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
-		<a
+		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
 			@click="toggleFavorite"
 			class="favorite">
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
-		</a>
+		</BaseButton>
 		<slot></slot>
 	</div>
 </template>
@@ -99,6 +103,7 @@ import PriorityLabel from './priorityLabel'
 import TaskService from '../../../services/task'
 import Labels from './labels'
 import User from '../../misc/user'
+import BaseButton from '@/components/base/BaseButton.vue'
 import Fancycheckbox from '../../input/fancycheckbox'
 import DeferTask from './defer-task'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
@@ -115,6 +120,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		ChecklistSummary,
 		DeferTask,
 		Fancycheckbox,
@@ -249,6 +255,11 @@ export default defineComponent({
 		display: inline-block;
 		flex: 1 0 50%;
 
+		.dueDate {
+			display: inline-block;
+			margin-left: 5px;
+		}
+
 		.overdue {
 			color: var(--danger);
 		}

src/views/labels/ListLabels.vue

@@ -32,13 +32,13 @@
 						v-tooltip.bottom="$t('label.edit.forbidden')">
 						{{ l.title }}
 					</span>
-					<a
+					<BaseButton
 						:style="{'color': l.textColor}"
 						@click="editLabel(l)"
 						v-else>
 						{{ l.title }}
-					</a>
+					</BaseButton>
-					<a @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
+					<BaseButton @click="showDeleteDialoge(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id" />
 				</span>
 			</div>
 			<div class="column is-4" v-if="isLabelEdit">
@@ -116,12 +116,14 @@ import {mapState} from 'vuex'
 import LabelModel from '../../models/label'
 import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
+import BaseButton from '@/components/base/BaseButton.vue'
 import AsyncEditor from '@/components/input/AsyncEditor'
 import ColorPicker from '@/components/input/colorPicker'
 
 export default defineComponent({
 	name: 'ListLabels',
 	components: {
+		BaseButton,
 		ColorPicker,
 		editor: AsyncEditor,
 	},

src/views/list/ListList.vue

@@ -65,9 +65,9 @@
 
 			<nothing v-if="ctaVisible && tasks.length === 0 && !loading">
 				{{ $t('list.list.empty') }}
-				<a @click="focusNewTaskInput()">
+				<ButtonLink @click="focusNewTaskInput()">
 					{{ $t('list.list.newTaskCta') }}
-				</a>
+				</ButtonLink>
 			</nothing>
 
 			<div class="tasks-container" :class="{ 'has-task-edit-open': isTaskEdit }">
@@ -99,13 +99,13 @@
 									<span class="icon handle">
 										<icon icon="grip-lines"/>
 									</span>
-									<div
+									<BaseButton
 										@click="editTask(t.id)"
 										class="icon settings"
 										v-if="!list.isArchived"
 									>
 										<icon icon="pencil-alt"/>
-									</div>
+									</BaseButton>
 								</template>
 							</single-task-in-list>
 						</template>
@@ -134,6 +134,8 @@
 <script lang="ts">
 import { ref, toRef, defineComponent } from 'vue'
 
+import BaseButton from '@/components/base/BaseButton.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 import ListWrapper from './ListWrapper.vue'
 import EditTask from '@/components/tasks/edit-task'
 import AddTask from '@/components/tasks/add-task'
@@ -190,6 +192,7 @@ export default defineComponent({
 		}
 	},
 	components: {
+		BaseButton,
 		ListWrapper,
 		Nothing,
 		FilterPopup,
@@ -198,6 +201,7 @@ export default defineComponent({
 		AddTask,
 		draggable,
 		Pagination,
+		ButtonLink,
 	},
 
 	setup(props) {

src/views/list/settings/background.vue

@@ -35,9 +35,7 @@
 				v-model="backgroundSearchTerm"
 			/>
 			<p class="unsplash-link">
-				<a href="https://unsplash.com" rel="noreferrer noopener nofollow" target="_blank">
+				<BaseButton href="https://unsplash.com">{{ $t('list.background.poweredByUnsplash') }}</BaseButton>
-					{{ $t('list.background.poweredByUnsplash') }}
-				</a>
 			</p>
 			<div class="image-search-result">
 				<a
@@ -83,12 +81,13 @@ import ListService from '@/services/list'
 import {CURRENT_LIST} from '@/store/mutation-types'
 import CreateEdit from '@/components/misc/create-edit.vue'
 import debounce from 'lodash.debounce'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 const SEARCH_DEBOUNCE = 300
 
 export default defineComponent({
 	name: 'list-setting-background',
-	components: {CreateEdit},
+	components: {CreateEdit, BaseButton},
 	data() {
 		return {
 			backgroundService: new BackgroundUnsplashService(),

src/views/tasks/TaskDetailView.vue

@@ -59,14 +59,14 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="dueDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.dueDate = null;saveTask()}"
 										v-if="task.dueDate && canWrite"
 										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>
@@ -99,7 +99,7 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="startDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.startDate = null;saveTask()}"
 										v-if="task.startDate && canWrite"
 										class="remove"
@@ -107,7 +107,7 @@
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>
@@ -126,14 +126,14 @@
 										:disabled="taskService.loading || !canWrite"
 										ref="endDate"
 									/>
-									<a
+									<BaseButton
 										@click="() => {task.endDate = null;saveTask()}"
 										v-if="task.endDate && canWrite"
 										class="remove">
 										<span class="icon is-small">
 											<icon icon="times"></icon>
 										</span>
-									</a>
+									</BaseButton>
 								</div>
 							</div>
 						</transition>