From f48b7c59d5713bf8e3d1de19f52bec99159c8ca4 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 30 Jan 2025 15:59:35 +0100
Subject: [PATCH] refactor(front): make secondary default for pills and display
 raised tagslist on cards

---
 front/src/components/tags/List.vue |  7 ++-----
 front/src/components/ui/Card.vue   | 18 ++++++++----------
 front/src/components/ui/Pill.vue   |  2 +-
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index f60493fae..e81ffc527 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -36,21 +36,18 @@ const tags = computed(() => {
 </script>
 
 <template>
-  <Layout flex style="gap: 8px" class="component-tags-list">
+  <Layout flex gap-8 class="component-tags-list">
     <router-link
       v-for="tag in tags"
       :key="tag"
       :to="{name: props.detailRoute, params: { id: tag } }"
       :class="props.labelClasses"
     >
-      <Pill solid raised secondary>
+      <Pill raised>
         #{{ truncate(tag, props.truncateSize) }}
       </Pill>
     </router-link>
     <Pill
-      solid
-      raised
-      secondary
       v-if="props.showMore && tags.length < props.tags.length"
       @click.prevent="honorLimit = false"
     >
diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index 9b8e24821..55b688d93 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -5,7 +5,7 @@ import { type RouterLinkProps, RouterLink } from 'vue-router';
 import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, color } from '~/composables/color'
 import { type WidthProps, width } from '~/composables/width'
 
-import Pill from './Pill.vue'
+import TagsList from '~/components/tags/List.vue'
 import Alert from './Alert.vue'
 import { type Props as AlertProps } from './Alert.vue'
 import Layout from './Layout.vue';
@@ -89,15 +89,13 @@ const attributes = computed(() =>
     </Alert>
 
     <Layout flex gap-4 v-if="tags" :class="$style.tags">
-      <Pill
-        solid
-        raised
-        secondary
-        v-for="tag in tags"
-        :key="tag"
-      >
-        #{{ tag }}
-      </Pill>
+      <TagsList
+        label-classes="tiny"
+        :truncate-size="8"
+        :limit="2"
+        :show-more="false"
+        :tags="tags"
+      />
     </Layout>
 
     <Layout no-gap v-if="$slots.default" :class="$style.content">
diff --git a/front/src/components/ui/Pill.vue b/front/src/components/ui/Pill.vue
index 91671a423..00b29d8a8 100644
--- a/front/src/components/ui/Pill.vue
+++ b/front/src/components/ui/Pill.vue
@@ -16,7 +16,7 @@ const model = defineModel<string>()
     class="funkwhale pill"
     :class="props.noUnderline && 'no-underline'"
     :is="model ? 'label' : 'button'"
-    v-bind="color(props, ['interactive', 'outline'])()"
+    v-bind="color(props, ['interactive', 'secondary'])()"
     @click.stop="handleClick"
   >
     <div v-if="!!$slots.image" class="pill-image">