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

---
 browser/components/SideNavFilter.styl |  2 +-
 browser/components/StorageItem.styl   | 22 +++++++++++++++++++++-
 browser/main/SideNav/SideNav.styl     |  9 +++++----
 browser/main/SideNav/StorageItem.styl | 25 +++++++++++++++----------
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 148ad401..a1933095 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -53,7 +53,7 @@ body[data-theme="dark"]
       background-color $ui-dark-button--active-backgroundColor
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-
+      color $ui-button--active-color
   .menu-button--active
     color $ui-dark-button--active-color
     background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 796a4816..96d232d8 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -33,7 +33,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 30px
+  padding 0 15px
   height 26px
   line-height 26px
   border-width 0 0 0 3px
@@ -68,3 +68,23 @@
 .folderList-item-name--folded
   @extend .folderList-item-name
   padding-left 12px
+
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-button--active-color
+    &:active
+      color $ui-button--active-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-button--active-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      color $ui-button--active-color
+      background-color $ui-dark-button--active-backgroundColor
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 6ed5c215..c06a9272 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -110,10 +110,11 @@ body[data-theme="dark"]
 
   .top-menu
     navDarkButtonColor()
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-button--active-color
 
   .storageList-empty
     color $ui-dark-inactive-text-color
-
-  .navToggle
-    navDarkButtonColor()
-
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index eeef3bf4..b4940fc8 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -108,16 +108,21 @@
     margin 0 5px
 
 body[data-theme="dark"]
-  .header-toggleButton
-  .header-addFolderButton
-    color $ui-dark-inactive-text-color
+  .header
     &:hover
-      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-button--active-color
     &:active
-      color $ui-dark-active-color
+      color $ui-button--active-color
+      background-color $ui-dark-button--active-backgroundColor
+
   .header--active
-    .header-toggleButton
-    .header-addFolderButton
-      color white
-      &:active
-        color white
+    @extend .header
+    .header-info
+      color $ui-button--active-color
+      background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      color $ui-button--active-color
+      background-color $ui-dark-button--active-backgroundColor