fix(style): minor adjustments to layout and colors

front/src/components/ui/Link.vue

@@ -16,7 +16,7 @@ const isExternalLink = computed(() => {
 const fontWeight = thin ? 400 : 900
 
 const isIconOnly = computed(() => !!icon)
-const isSimple = Object.keys(colorProps).length === 0
+const isSimple = propsToColor(colorProps).class === ''
 </script>
 
 <template>
@@ -85,10 +85,10 @@ const isSimple = Object.keys(colorProps).length === 0
       margin-left: 1ch;
     }
 
-    &:not(:hover, .force-underline) {
+    &:not(.force-underline) {
-      text-decoration:none;
+      text-decoration: none;
-      background-color:transparent;
+      background-color: transparent;
-      border-color:transparent;
+      border-color: transparent;
     }
 
     &.is-round {

front/src/components/ui/Popover.vue

@@ -4,13 +4,13 @@ import { whenever, useElementBounding, onClickOutside } from '@vueuse/core'
 
 import { isMobileView, useScreenSize } from '~/composables/screen'
 import { POPOVER_INJECTION_KEY, POPOVER_CONTEXT_INJECTION_KEY } from '~/injection-keys'
-import { type ColorProps, type DefaultProps, propsToColor } from '~/composables/colors';
+import { type ColorProps, type DefaultProps, type RaisedProps, propsToColor } from '~/composables/colors';
 
 const open = defineModel('open', { default: false })
 
 const { positioning = 'vertical', ...colorProps }  = defineProps<{
   positioning?:'horizontal' | 'vertical'
-} & (ColorProps | DefaultProps)>()
+} & (ColorProps | DefaultProps) & RaisedProps>()
 
 // Template refs
 const popover = ref()
@@ -136,7 +136,7 @@ watch(open, (isOpen) => {
         ref="popover"
         :style="position"
         :class="{ 'is-mobile': isMobile }"
-        class="funkwhale popover secondary"
+        class="funkwhale popover"
          v-bind="propsToColor(colorProps)"
       >
         <slot name="items" />

front/src/components/ui/popover.scss

@@ -18,7 +18,10 @@
 .funkwhale {
   &.popover {
     border: 1px solid var(--fw-border-color);
-    background-color: var(--background-color);
+    background-color: color-mix(in oklab, var(--background-color) 98%, var(--color));
+    .popover-item:hover {
+      background-color: color-mix(in oklab, var(--hover-background-color) 98%, var(--color));
+    }
 
     hr {
       border-bottom: 1px solid var(--fw-border-color);
@@ -27,16 +30,13 @@
     @include light-theme {
       --fw-border-color: var(--fw-gray-500);
 
-      .popover-item:hover {
-        background-color: var(--fw-gray-100);
-      }
     }
 
     @include dark-theme {
       --fw-border-color: var(--fw-gray-800);
 
       .popover-item:hover {
-        background-color: var(--fw-gray-800);
+        background-color: var(--hover-background-color);
       }
     }
 

front/src/style/colors.scss

@@ -106,7 +106,7 @@
 
     &.raised {
       --background-color:var(--fw-beige-300);
-      --border-color:var(--fw-beige-400);
+      --border-color:color-mix(in oklab, var(--fw-beige-400) 90%, currentcolor);
     }
 
     --link-active-border-color:var(--fw-beige-400);
@@ -301,7 +301,7 @@
     --active-border-color:var(--fw-gray-700);
 
     --pressed-color:var(--fw-red-010);
-    --pressed-background-color:var(--fw-secondary);
+    --pressed-background-color:var(--fw-gray-950);
 
     --disabled-color:var(--fw-gray-500);
     --disabled-background-color:var(--fw-gray-950);
@@ -312,11 +312,12 @@
       --border-color:var(--fw-gray-600);
       --link-color:var(--fw-gray-400);
       --link-hover-color:var(--fw-gray-200);
+      --link-exact-active-background-color:var(--fw-gray-800);
     }
 
     --link-active-border-color:var(--fw-gray-700);
-    --link-exact-active-background-color:var(--fw-secondary);
+    --link-exact-active-background-color:var(--fw-gray-950);
-    --link-exact-active-border-color:var(--fw-secondary);
+    --link-exact-active-border-color:transparent;
   }
 
   .secondary {

front/src/ui/components/Sidebar.vue

@@ -30,7 +30,7 @@ const uploads = useUploadsStore()
 
 <template>
   <aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
-    <Layout header flex>
+    <Layout flex no-gap header style="justify-content:space-between; padding-right:8px;">
       <Link to="/"
         :class="$style['logo']"
       >
@@ -42,8 +42,6 @@ const uploads = useUploadsStore()
         >
       </Link>
 
-      <Spacer grow />
-
       <Layout nav no-gap flex style="align-items: center;">
         <Link to="/manage/settings"
           round
@@ -123,7 +121,7 @@ const uploads = useUploadsStore()
         >
           {{ t('components.Sidebar.link.podcasts') }}
       </Link>
-      <Link to="/"
+      <Link to="/favorites"
           ghost
           icon="bi-heart"
         >

front/src/ui/components/UserMenu.vue

@@ -61,7 +61,7 @@ watchEffect(()=> {
 </script>
 
 <template>
-  <Popover v-model:open="openUserMenu">
+  <Popover raised v-model:open="openUserMenu">
     <Button
       @click="openUserMenu = !openUserMenu"
       round