fix(style): [WIP] Sidebar style regressions

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"

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

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

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 {