From 7aa982849f7388653e2bf68a93a7605bce3412c8 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 28 Apr 2017 15:42:46 +0900
Subject: [PATCH 1/2] Fix the layout and UX at create-folder-btn at sidebar

---
 browser/components/StorageItem.styl   |  2 +-
 browser/main/SideNav/StorageItem.styl | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/browser/components/StorageItem.styl b/browser/components/StorageItem.styl
index 8d6602bf..b294c405 100644
--- a/browser/components/StorageItem.styl
+++ b/browser/components/StorageItem.styl
@@ -35,7 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 15px
+  padding 0 25px
   height 26px
   line-height 26px
   border-width 0 0 0 2px
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index 6cc36e68..1b781848 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -60,11 +60,13 @@
   position absolute
   right 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  margin-right 5px
+  border-radius 50%
   &:hover
-    background-color transparent
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .root--folded
@@ -129,4 +131,8 @@ body[data-theme="dark"]
 
   .header-addFolderButton
     &:hover
-      color $ui-dark-text-color
\ No newline at end of file
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
\ No newline at end of file

From 60e566513311a63a2089161ff3e291f24c259016 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Fri, 28 Apr 2017 16:07:55 +0900
Subject: [PATCH 2/2] Fix the layout and UX of StorageItem at SIdebra

---
 browser/main/SideNav/StorageItem.styl | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index 1b781848..abd291e4 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -4,12 +4,13 @@
 
 .header
   position relative
-  height 26px
+  height 25px
   width 100%
   margin-bottom 5px
   transition 0.15s
 
 .header--active
+  margin-bottom 5px
   background-color $ui-button--active-backgroundColor
   transition color background-color  0.15s
 
@@ -30,26 +31,29 @@
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  border-radius 50%
   &:hover
-    background-color transparent
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
   navButtonColor()
   display block
   width 100%
-  height 30px
-  padding-left 25px
+  height 25px
+  padding-left 23px
   padding-right 10px
-  line-height 26px
+  line-height 22px
   cursor pointer
   font-size 13px
   border none
   overflow ellipsis
   text-align left
+  background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -66,6 +70,7 @@
   margin-right 5px
   border-radius 50%
   &:hover
+    transition 0.2s
     background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
@@ -119,10 +124,17 @@ body[data-theme="dark"]
 
   .header-toggleButton
     &:hover
+      transition 0.2s
       color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
 
   .header-info
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
+      transition 0.2s
       color $ui-dark-text-color
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:active, &:active:hover
@@ -131,6 +143,7 @@ body[data-theme="dark"]
 
   .header-addFolderButton
     &:hover
+      transition 0.2s
       color $ui-dark-text-color
       background-color alpha($ui-dark-button--active-backgroundColor, 60%)
     &:active, &:active:hover