From 12544c52ca55e6ada6d0fc3b5c1fab4dfce1a9ef Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 22 Jun 2022 21:37:23 +0200
Subject: [PATCH] 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    |  4 +++-
 src/components/misc/ButtonLink.vue | 17 +++++++++++++++++
 src/components/misc/api-config.vue |  4 ++--
 src/components/misc/error.vue      |  6 +++---
 4 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/components/misc/ButtonLink.vue

diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index f523ba2e..ab4383fa 100644
--- a/src/components/input/editor.vue
+++ b/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: {
diff --git a/src/components/misc/ButtonLink.vue b/src/components/misc/ButtonLink.vue
new file mode 100644
index 00000000..8b8620e4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index 5aa8f509..3bd9719e 100644
--- a/src/components/misc/api-config.vue
+++ b/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: {
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index b2bdce37..67c854f8 100644
--- a/src/components/misc/error.vue
+++ b/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>
-			<BaseButton href="https://vikunja.io/contact/">{{ $t('loadingError.contact') }}</BaseButton>
+			<ButtonLink @click="reload">{{ $t('loadingError.tryAgain') }}</ButtonLink>
+			<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()