From e043dc80202875cab1adf952a4dc0e5dbcf54ab2 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 4 Jan 2025 17:12:49 +0100
Subject: [PATCH] fix(style): [WIP] Sidebar style regressions

---
 front/src/components/ui/Input.vue    |  2 +-
 front/src/style/colors.scss          |  4 ++--
 front/src/ui/components/Sidebar.vue  | 35 ++++++++++++++++++++++++----
 front/src/ui/components/UserMenu.vue |  3 +++
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/front/src/components/ui/Input.vue b/front/src/components/ui/Input.vue
index d2cb545da..e339bbc9f 100644
--- a/front/src/components/ui/Input.vue
+++ b/front/src/components/ui/Input.vue
@@ -60,7 +60,7 @@ const model = defineModel<string|number>()
     </span>
 
     <input
-    v-bind="{...$attrs, ...attributes, ...color({}, ['default', 'raised', 'solid'])()}"
+    v-bind="{...$attrs, ...attributes, ...color({}, ['default', 'raised', 'solid', 'secondary'])()}"
     v-model="model"
     ref="input"
     :placeholder="placeholder"
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index f63584959..31b9a887f 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -309,7 +309,7 @@
     --border-color:var(--fw-gray-700);
 
     --hover-color:var(--fw-beige-400);
-    --hover-background-color:var(--fw-gray-950);
+    --hover-background-color:var(--fw-gray-850);
     --hover-border-color:var(--fw-beige-400);
 
     --active-color:var(--fw-gray-200);
@@ -332,7 +332,7 @@
     }
 
     --link-active-border-color:var(--fw-gray-700);
-    --link-exact-active-background-color:var(--fw-gray-950);
+    --link-exact-active-background-color:var(--fw-gray-800);
     --link-exact-active-border-color:transparent;
 
     --void-off-background-color: var(--fw-gray-800);
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index 62b358002..b44413258 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -35,7 +35,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 </script>
 
 <template>
-  <Layout aside default solid raised gap-12 :class="[$style.sidebar, $style['sticky-content']]">
+  <Layout aside default solid gap-12 :class="[$style.sidebar, $style['sticky-content']]">
     <Layout header flex no-gap style="justify-content:space-between; padding-right:8px;">
       <Link
         :to="{name: logoUrl}"
@@ -57,8 +57,10 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 
         <Button
           align-self="center"
-          round icon="bi-upload"
+          round
+          icon="bi-upload"
           icon-width
+          :class="[$style.button]"
           ghost
           @click="store.commit('ui/toggleModal', 'upload')"
           :aria-pressed="store.state.ui.modalsOpen.has('languages') || undefined"
@@ -86,6 +88,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
       <div :class="$style.search">
         <Input
           v-model="searchQuery"
+          raised
           type="search"
           icon="bi-search"
           :placeholder="t('components.audio.SearchBar.placeholder.search')"
@@ -189,8 +192,11 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 </template>
 
 <style module lang="scss">
-
 .sidebar {
+  @include dark-theme {
+    background-color: var(--fw-gray-950);
+    /* TODO: Fix */
+  }
   .logo {
     display: block;
     width: 40px;
@@ -198,6 +204,17 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
     margin: 16px;
   }
 
+  header {
+    & > nav {
+      a,
+      button.button {
+        height: 40px;
+        width: 40px;
+        padding: 10px;
+      }
+    }
+  }
+
   &.sticky-content {
     max-height: 100dvh;
     overflow: auto;
@@ -284,7 +301,17 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
     }
     .menu-links {
       padding: 0 16px 32px;
-      flex-grow: 1
+      flex-grow: 1;
+
+      nav > a {
+        padding-left: 20px;
+
+        &:global(.active) {
+          border: none;
+        }
+
+      }
+
     }
   }
 
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index fa6b58f43..dfed1cd5d 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -155,6 +155,9 @@ const labels = computed(() => ({
 </template>
 
 <style scoped lang="scss">
+header > nav button.button {
+  padding: 10px;
+}
 nav.button-list {
   width: 100%;
   a:hover {