fix(ui): color sidebar & enable ghost style buttons

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;
     }

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;

front/src/ui/components/UserMenu.vue

@@ -58,6 +58,7 @@ const labels = computed(() => ({
       @click="openUserMenu = !openUserMenu"
       round
       icon
+      ghost
       class="is-icon-only"
     >
       <img