From 4b199471cffdadfb01b6a7d11df4cb6b66892208 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Wed, 18 Dec 2024 11:31:41 +0100
Subject: [PATCH] fix(style): minor adjustments to layout and colors

---
 front/src/components/ui/Link.vue     | 10 +++++-----
 front/src/components/ui/Popover.vue  |  6 +++---
 front/src/components/ui/popover.scss | 10 +++++-----
 front/src/style/colors.scss          |  9 +++++----
 front/src/ui/components/Sidebar.vue  |  6 ++----
 front/src/ui/components/UserMenu.vue |  2 +-
 6 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 91df0b0e4..cec147db4 100644
--- a/front/src/components/ui/Link.vue
+++ b/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) {
-      text-decoration:none;
-      background-color:transparent;
-      border-color:transparent;
+    &:not(.force-underline) {
+      text-decoration: none;
+      background-color: transparent;
+      border-color: transparent;
     }
 
     &.is-round {
diff --git a/front/src/components/ui/Popover.vue b/front/src/components/ui/Popover.vue
index 53e9e1a2e..81fac0981 100644
--- a/front/src/components/ui/Popover.vue
+++ b/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" />
diff --git a/front/src/components/ui/popover.scss b/front/src/components/ui/popover.scss
index 4d2145b52..90b567004 100644
--- a/front/src/components/ui/popover.scss
+++ b/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);
       }
     }
 
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 86302fbc6..723ded2e7 100644
--- a/front/src/style/colors.scss
+++ b/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-border-color:var(--fw-secondary);
+    --link-exact-active-background-color:var(--fw-gray-950);
+    --link-exact-active-border-color:transparent;
   }
 
   .secondary {
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 7c1be0519..be02ae60a 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/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"
         >
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index 796226877..beda4295e 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/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