From d2a99599f01980367e6a218b35b89b5035a81d80 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 16 Dec 2024 16:15:25 +0100
Subject: [PATCH] fix(ui): color sidebar & enable ghost style buttons

---
 front/src/components/ui/Button.vue   | 16 +++++++++++++
 front/src/ui/components/Sidebar.vue  | 35 ++++++++++++++++++++--------
 front/src/ui/components/UserMenu.vue |  1 +
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index af4b8cdb5..c03fd8e30 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -141,6 +141,22 @@ onMounted(() => {
       }
     }
 
+    &.ghost {
+      &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: var(--fw-gray-100);
+      }
+      &.is-hovered,
+      &:hover,
+      &.is-active,
+      &:active {
+        background-color: var(--fw-gray-800) !important;
+        border-color: var(--fw-gray-800) !important;
+        color: var(--fw-gray-100) !important;
+      }
+    }
+
     i.bi {
       font-size: 1.2rem;
     }
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 6d1067006..41e9212c1 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -25,7 +25,7 @@ const uploads = useUploadsStore()
 </script>
 
 <template>
-  <aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
+  <aside :class="[$style.sidebar, $style['sticky-content']]">
     <header :class="$style['header-wrapper']">
       <Link to="/" :class="$style['logo']">
         <img
@@ -39,12 +39,12 @@ const uploads = useUploadsStore()
       <nav :class="$style['quick-actions']">
 
         <Link to="/manage/settings">
-          <Button round icon="bi-wrench" secondary>
+          <Button round icon="bi-wrench" ghost secondary>
           </Button>
         </Link>
 
         <Link to="/upload">
-          <Button round icon="bi-upload" class="is-icon-only" secondary>
+          <Button round icon="bi-upload" class="is-icon-only" ghost secondary>
             <Transition>
               <div
                 v-if="uploads.currentIndex < uploads.queue.length"
@@ -77,7 +77,9 @@ const uploads = useUploadsStore()
       <Link to="/library"
       >
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-compass"
         >
           {{ t('components.Sidebar.header.explore') }}
@@ -86,7 +88,9 @@ const uploads = useUploadsStore()
 
       <Link to="/library/artists">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-person"
         >
           {{ t('components.Sidebar.link.artists') }}
@@ -95,7 +99,9 @@ const uploads = useUploadsStore()
 
       <Link to="/library/albums">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-disc"
         >
           {{ t('components.Sidebar.link.albums') }}
@@ -104,7 +110,9 @@ const uploads = useUploadsStore()
 
       <Link to="/library/playlists">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-music-note-list"
         >
           {{ t('components.Sidebar.link.playlists') }}
@@ -112,7 +120,9 @@ const uploads = useUploadsStore()
       </Link>
       <Link to="/library/radios">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-boombox-fill"
         >
           {{ t('components.Sidebar.link.radios') }}
@@ -120,7 +130,9 @@ const uploads = useUploadsStore()
       </Link>
       <Link to="/library/podcasts">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-mic"
         >
           {{ t('components.Sidebar.link.podcasts') }}
@@ -128,7 +140,9 @@ const uploads = useUploadsStore()
       </Link>
       <Link to="/">
         <Button
-          color="secondary"
+          ghost
+          solid
+          secondary
           icon="bi-heart"
         >
           {{ t('components.Sidebar.link.favorites') }}
@@ -161,6 +175,7 @@ const uploads = useUploadsStore()
   height: 100%;
   display:flex;
   flex-direction:column;
+  background-color: var(--fw-gray-900);
 
   &.sticky-content {
     position: sticky;
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index c094848c0..12b9ee72c 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -58,6 +58,7 @@ const labels = computed(() => ({
       @click="openUserMenu = !openUserMenu"
       round
       icon
+      ghost
       class="is-icon-only"
     >
       <img