From 0b0fe4c0f4f8db6952b2b2b51177faf06d770ff7 Mon Sep 17 00:00:00 2001
From: robertfausk <robertfreigang@gmx.de>
Date: Thu, 2 Jan 2025 16:59:45 +0100
Subject: [PATCH] Migrate ColorBadge of TagList from bootstrap-vue to vuetify 2
 #248

---
 web/assets/js/components/Tags/ColorBadge.vue | 17 ++++++++++-------
 web/assets/js/components/Tags/TagList.vue    |  3 +--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/assets/js/components/Tags/ColorBadge.vue b/web/assets/js/components/Tags/ColorBadge.vue
index 4a3b519d..236b3b89 100644
--- a/web/assets/js/components/Tags/ColorBadge.vue
+++ b/web/assets/js/components/Tags/ColorBadge.vue
@@ -1,16 +1,19 @@
 <template>
-    <b-badge
+    <v-chip
         class="font-weight-bold d-flex align-items-center"
         :style="`background-color: ${ color }`"
         pill
-        font-scale="2"
     >
-        <div
-            style="height:inherit; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; filter: invert(1) grayscale(1) contrast(999);"
+        <span
+            :style="`background-color: ${ color }`"
         >
-            {{ color }}
-        </div>
-    </b-badge>
+            <span
+                style="height:inherit; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; filter: invert(1) grayscale(1) contrast(999);"
+            >
+                {{ color }}
+            </span>
+        </span>
+    </v-chip>
 </template>
 
 <script>
diff --git a/web/assets/js/components/Tags/TagList.vue b/web/assets/js/components/Tags/TagList.vue
index 2440c7ac..abbe6d0f 100755
--- a/web/assets/js/components/Tags/TagList.vue
+++ b/web/assets/js/components/Tags/TagList.vue
@@ -135,7 +135,6 @@
 <script>
 'use strict';
 import ColorBadge from './ColorBadge.vue';
-import ContentLoadingSpinner from '../ContentLoadingSpinner.vue';
 import {useAlertStore, useAuthStore, useClientStore, useTagStore} from '../../stores';
 import {
     itemsPerPageOptions,
@@ -146,7 +145,7 @@ import {
 
 export default {
     name: 'TagList',
-    components: { ContentLoadingSpinner, ColorBadge },
+    components: { ColorBadge },
     data: function () {
         return {
             itemsPerPageOptions,