Improved dark theme. Changed sidebar toggle icon.

assets/components/header/filter-bar.vue

@@ -171,9 +171,10 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: .5rem 1rem;
+    border-top: solid 1px var(--shadow-hint);
     z-index: 1;
     font-size: 0;
-    box-shadow: 0 0 3px var(--shadow);
+    box-shadow: 0 0 3px var(--darken);
 
     .icon {
         fill: var(--shadow);

assets/components/header/header.vue

@@ -2,7 +2,7 @@
     <header class="header">
         <div class="header-nav">
             <Icon
-                icon="menu"
+                icon="grid2"
                 class="sidebar-toggle"
                 @click.native.stop="toggleSidebar"
             />
@@ -10,14 +10,15 @@
             <router-link
                 to="/home"
                 class="logo-link"
-            ><h1 class="logo">
-                <Icon
-                    icon="logo"
+            ><h1 class="header-logo">
+                <div
+                    class="logo"
+                    v-html="logo"
                 />
             </h1></router-link>
 
             <nav class="nav">
-                <ul class="nolist">
+                <ul class="nav-list nolist">
                     <li class="nav-item">
                         <router-link
                             v-slot="{ href, isActive, navigate }"
@@ -67,7 +68,6 @@
             <div class="header-toggles">
                 <Icon
                     v-show="!sfw"
-                    v-tooltip="'Enable safe-for-work mode'"
                     icon="flower"
                     class="toggle noselect"
                     @click.native="setSfw(true)"
@@ -75,7 +75,6 @@
 
                 <Icon
                     v-show="sfw"
-                    v-tooltip="'Disable safe-for-work mode'"
                     icon="flower"
                     class="toggle active noselect"
                     @click.native="setSfw(false)"
@@ -83,7 +82,6 @@
 
                 <Icon
                     v-show="theme === 'light'"
-                    v-tooltip="'Switch to dark theme'"
                     icon="moon"
                     class="toggle noselect"
                     @click.native="setTheme('dark')"
@@ -91,7 +89,6 @@
 
                 <Icon
                     v-show="theme === 'dark'"
-                    v-tooltip="'Switch to light theme'"
                     icon="sun"
                     class="toggle noselect"
                     @click.native="setTheme('light')"
@@ -129,6 +126,8 @@ import { mapState } from 'vuex';
 
 import Search from './search.vue';
 
+import logo from '../../img/logo.svg';
+
 function sfw(state) {
     return state.ui.sfw;
 }
@@ -157,6 +156,7 @@ export default {
     },
     data() {
         return {
+            logo,
             searching: false,
         };
     },
@@ -183,7 +183,7 @@ export default {
     justify-content: space-between;
     background: var(--background);
     color: var(--primary);
-    border-bottom: solid 1px var(--shadow-hint);
+    box-shadow: 0 1px 0 var(--darken-hint);
     font-size: 0;
 }
 
@@ -202,9 +202,9 @@ export default {
 
 .sidebar-toggle {
     display: none;
-    fill: var(--shadow);
-    padding: 0 1rem;
-    width: 1.75rem;
+    fill: var(--shadow-modest);
+    padding: 0 1.5rem 0 1rem;
+    width: 1.25rem;
     height: 100%;
 
     &:hover {
@@ -214,33 +214,40 @@ export default {
 }
 
 .logo-link {
-    color: inherit;
+    height: 100%;
     display: inline-block;
     text-decoration: none;
+    margin: 0 1rem 0 0;
+}
+
+.header-logo {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 0 0 1rem;
 }
 
 .logo {
-    height: 100%;
-    display: inline-block;
-    padding: 0 0 0 1rem;
-    margin: 0 1rem 0 0;
-
-    .icon {
-        width: 6rem;
-        height: 1.5rem;
-    }
+    width: 6rem;
+    display: flex;
 }
 
-.nav {
+.nav,
+.nav-list {
     display: inline-block;
+    height: 100%;
+}
+
+.nav-item {
+    height: 100%;
 }
 
 .nav-link {
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 1rem 1rem calc(1rem - 5px) 1rem;
-    border-bottom: solid 5px transparent;
+    padding: 0 1rem;
     color: var(--shadow);
     text-decoration: none;
     font-size: .9rem;
@@ -249,7 +256,6 @@ export default {
 
     &.active {
         color: var(--primary);
-        border-bottom: solid 5px var(--primary);
 
         .icon {
             fill: var(--primary);
@@ -330,5 +336,9 @@ export default {
     .sidebar-toggle {
         display: inline-block;
     }
+
+    .header-logo {
+        padding: 0 0 0 .5rem;
+    }
 }
 </style>