fix: add ButtonLink component

Add ButtonLink component to fix occasions where the BaseButton needs to be styled in a link color.

src/components/input/editor.vue

@@ -16,7 +16,7 @@
 		<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
 			{{ emptyText }}
 			<template v-if="isEditEnabled">
-				<BaseButton @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</BaseButton>.
+				<ButtonLink @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</ButtonLink>.
 			</template>
 		</p>
 
@@ -63,12 +63,14 @@ 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/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/>
-			<BaseButton class="api-config__change-button" @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</BaseButton>
+			<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,7 +48,7 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 import {success} from '@/message'
 
 import Message from '@/components/misc/message.vue'
-import BaseButton from '@/components/base/BaseButton.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 const props = defineProps({
 	configureOpen: {

src/components/misc/error.vue

@@ -1,15 +1,15 @@
 <template>
 	<message variant="danger">
 		<i18n-t keypath="loadingError.failed">
-			<BaseButton @click="reload">{{ $t('loadingError.tryAgain') }}</BaseButton>
+			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
-			<BaseButton href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</BaseButton>
+			<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 BaseButton from '@/components/base/BaseButton.vue'
+import ButtonLink from '@/components/misc/ButtonLink.vue'
 
 function reload() {
 	window.location.reload()