From af6cd10e285e1c583791f2e8b090229d5730a1ea Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 7 Apr 2017 14:24:38 +0900
Subject: [PATCH] Change the layout at SideNav

---
 browser/components/SideNavFilter.styl |  9 ++++++++-
 browser/components/StorageItem.styl   |  7 ++++---
 browser/main/SideNav/SideNav.styl     |  6 ++++++
 browser/main/SideNav/StorageItem.styl | 13 +++++++------
 browser/styles/index.styl             |  2 +-
 5 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index a1933095..28a37c8d 100644
--- a/browser/components/SideNavFilter.styl
+++ b/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
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 96d232d8..acea72fc 100644
--- a/browser/components/StorageItem.styl
+++ b/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
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index c06a9272..6b0bfbd3 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/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
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index b4940fc8..12c71d1b 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/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
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index b72d1a73..9dac878c 100644
--- a/browser/styles/index.styl
+++ b/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