Change the layout at SideNav

browser/components/SideNavFilter.styl

@@ -3,6 +3,12 @@
 
 .menu-button
   navButtonColor()
+  &:active
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-text-color
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    color $ui-text-color
   height 32px
   padding 0 15px
   font-size 12px
@@ -12,10 +18,11 @@
 
 .menu-button--active
   @extend .menu-button
+  color $ui-text-color
   background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
   &:hover
     background-color $ui-button--active-backgroundColor
+    color $ui-text-color
 
 .menu-button-label
   margin-left 5px

browser/components/StorageItem.styl

@@ -17,17 +17,18 @@
   &:first-child
     margin-top 0
   &:hover
+    color $ui-text-color
     background-color $ui-button--hover-backgroundColor
   &:active
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button--active-color
+  color $ui-text-color
   background-color $ui-button--active-backgroundColor
   &:hover
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
 .folderList-item-name

browser/main/SideNav/SideNav.styl

@@ -15,6 +15,12 @@
   font-size 12px
   width 100%
   text-align left
+  &:hover
+    color $ui-text-color
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
 
 .top-menu-label
   margin-left 5px

browser/main/SideNav/StorageItem.styl

@@ -9,26 +9,27 @@
   margin-bottom 5px
   transition 0.15s
   &:hover
+    color $ui-text-color
     background-color $ui-button--hover-backgroundColor
   &:active
     .header-toggleButton
     .header-addFolderButton
-      color white
+      color $ui-text-color
       &:active
-        color $ui-active-color
+        color $ui-text-color
 
 .header--active
   @extend .header
   .header-info
-    color $ui-button--active-color
+    color $ui-text-color
     background-color $ui-button--active-backgroundColor
   .header-toggleButton
   .header-addFolderButton
-    color white
+    color $ui-text-color
     &:active
     &:hover
     &:hover:active
-      color white
+      color $ui-text-color
 
 .header-toggleButton
   position absolute
@@ -42,7 +43,7 @@
   &:hover
     color $ui-text-color
   &:active
-    color $ui-active-color
+    color $ui-text-color
 
 .header-info
   display block

browser/styles/index.styl

@@ -25,7 +25,7 @@ $ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 $ui-button-color = #939395
 $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
 $ui-button--active-color = white
-$ui-button--active-backgroundColor = #6AA5E9
+$ui-button--active-backgroundColor = #D4D4D4
 $ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip