From b8d4cb2abaf3494e79733a4543cfd2688e2868d9 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Fri, 14 Feb 2025 11:03:15 +0100
Subject: [PATCH] feat(style): render solid links the same as buttons

---
 front/src/components/ui/Link.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 77cbab2e2..661ba04c8 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, useSlots } from 'vue'
 
 import { type RouterLinkProps } from 'vue-router'
 import { type ColorProps, type DefaultProps, type VariantProps, color, isNoColors } from '~/composables/color';
@@ -26,9 +26,11 @@ const isExternalLink = computed(() =>
   typeof props.to === 'string' && (props.to.startsWith('http') || props.to.startsWith('./'))
 )
 
-const [fontWeight, activeFontWeight] = props.thickWhenActive ? [600, 900] : [400, 400]
+const [fontWeight, activeFontWeight] = 'solid' in props || props.thickWhenActive ? [600, 900] : [400, 400]
 
-const isIconOnly = computed(() => !!props.icon)
+const slots = useSlots()
+
+const isIconOnly = computed(() => !!props.icon && (!slots.default || 'square' in props && props.square || 'squareSmall' in props && props.squareSmall ))
 
 const button = ref()
 
@@ -39,10 +41,13 @@ onMounted(() => {
 
 <template>
   <component :is="isExternalLink ? 'a' : 'RouterLink'"
-    v-bind="color(props, ['interactive'])(
-            width(props, isNoColors(props) ? [] : ['normalHeight', 'auto'])(
-            align(props)(
-            )))"
+    v-bind="
+      color(props, ['interactive'])(
+      width(props,
+        isNoColors(props) ? [] : ['normalHeight', 'solid' in props ? 'buttonWidth' : 'auto']
+      )(
+      align(props, 'solid' in props ? {alignText: 'center'} : {})(
+      )))"
     ref="button"
     :autofocus="autofocus || undefined"
     :class="[