improve style of sidenav

browser/main/SideNav/SideNav.styl

@@ -9,22 +9,24 @@
   flex-direction column
 
 .top
-  padding-bottom 15px
+  display flex
+  align-items top
+  justify-content space-between
+  padding-bottom 10px
+  margin 14px 14px 4px
 
 .switch-buttons
   background-color transparent
   border 0
-  margin 24px auto 4px 14px
   display flex
+  align-items center
   text-align center
 
 .extra-buttons
-  position absolute
+  position relative
+  top -3px
   display flex
   align-items center
-  justify-content flex-end
-  right 10px
-  top 24px
 
 .search
   position relative
@@ -98,8 +100,15 @@
   background-color #2E3235
   .switch-buttons
     display none
+  .extra-buttons > button:first-of-type // hide search icon
+    display none
   .top
     height 60px
+    align-items center
+    margin 0
+    justify-content center
+    position relative
+    left -4px
   .top-menu
     position static
     width $sideNav--folded-width
@@ -144,12 +153,19 @@ body[data-theme="white"]
   .root, .root--folded
     background-color #f9f9f9
     color $ui-text-color
+  .search .search-input
+    background-color #f9f9f9
+    color $ui-text-color
 
 body[data-theme="dark"]
   .root, .root--folded
     border-right 1px solid $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
     color $ui-dark-text-color
+  .search .search-input
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
 
   .top
     border-color $ui-dark-borderColor
@@ -159,12 +175,25 @@ body[data-theme="solarized-dark"]
     background-color $ui-solarized-dark-backgroundColor
     border-right 1px solid $ui-solarized-dark-borderColor
 
+  .search .search-input
+    background-color $ui-solarized-dark-backgroundColor
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor
+
 body[data-theme="monokai"]
   .root, .root--folded
     background-color $ui-monokai-backgroundColor
     border-right 1px solid $ui-monokai-borderColor
+  .search .search-input
+    background-color $ui-monokai-backgroundColor
+    color $ui-monokai-text-color
+    border-color $ui-monokai-borderColor
 
 body[data-theme="dracula"]
   .root, .root--folded
     background-color $ui-dracula-backgroundColor
-    border-right 1px solid $ui-dracula-borderColor
+    border-right 1px solid $ui-dracula-borderColor
+  .search .search-input
+    background-color $ui-dracula-backgroundColor
+    color $ui-dracula-text-color
+    border-color $ui-dracula-borderColor