From 13efd647b44ef079512964f8bbf36fb06db5b807 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Tue, 17 Dec 2024 00:18:46 +0100
Subject: [PATCH] fix(ui): links cannot contain buttons. Props `solid` and
 `ghost` cannot be combined (see ui-docs)

---
 front/src/components/ui/Button.vue  | 28 -------------------------
 front/src/ui/components/Sidebar.vue | 32 +++++------------------------
 2 files changed, 5 insertions(+), 55 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 64e1be5e4..af4b8cdb5 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -141,34 +141,6 @@ onMounted(() => {
       }
     }
 
-    @include dark-theme {
-      &.ghost {
-        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
-          background-color: transparent !important;
-          border-color: transparent !important;
-        }
-        &.is-hovered,
-        &:hover,
-        &.is-active,
-        &:active {
-          background-color: var(--fw-gray-800) !important;
-          border-color: var(--fw-gray-800) !important;
-          color: var(--fw-text-color) !important;
-        }
-      }
-    }
-
-    @include light-theme {
-      &.is-hovered,
-      &:hover,
-      &.is-active,
-      &:active {
-        background-color: var(--fw-gray-800) !important;
-        border-color: var(--fw-gray-800) !important;
-        color: var(--fw-bg-color) !important;
-      }
-    }
-
     i.bi {
       font-size: 1.2rem;
     }
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 41e9212c1..d0b050d2d 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -75,78 +75,56 @@ const uploads = useUploadsStore()
 
     <nav :class="$style['button-list']">
       <Link to="/library"
-      >
-        <Button
           ghost
-          solid
           secondary
           icon="bi-compass"
         >
           {{ t('components.Sidebar.header.explore') }}
-        </Button>
       </Link>
 
-      <Link to="/library/artists">
-        <Button
+      <Link to="/library/artists"
           ghost
-          solid
           secondary
           icon="bi-person"
         >
           {{ t('components.Sidebar.link.artists') }}
-        </Button>
       </Link>
 
-      <Link to="/library/albums">
-        <Button
+      <Link to="/library/albums"
           ghost
-          solid
           secondary
           icon="bi-disc"
         >
           {{ t('components.Sidebar.link.albums') }}
-        </Button>
       </Link>
 
-      <Link to="/library/playlists">
-        <Button
+      <Link to="/library/playlists"
           ghost
-          solid
           secondary
           icon="bi-music-note-list"
         >
           {{ t('components.Sidebar.link.playlists') }}
-        </Button>
       </Link>
-      <Link to="/library/radios">
-        <Button
+      <Link to="/library/radios"
           ghost
-          solid
           secondary
           icon="bi-boombox-fill"
         >
           {{ t('components.Sidebar.link.radios') }}
-        </Button>
       </Link>
       <Link to="/library/podcasts">
-        <Button
           ghost
-          solid
           secondary
           icon="bi-mic"
         >
           {{ t('components.Sidebar.link.podcasts') }}
-        </Button>
       </Link>
-      <Link to="/">
-        <Button
+      <Link to="/"
           ghost
-          solid
           secondary
           icon="bi-heart"
         >
           {{ t('components.Sidebar.link.favorites') }}
-        </Button>
       </Link>
     </nav>
     <h3>{{ t('components.Sidebar.link.channels') }}</h3>