From 6316ddc6a69294683df2a317d8bec22be8ba806d Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Thu, 9 Nov 2017 21:51:43 +0900
Subject: [PATCH] Fix layout

---
 browser/components/SideNavFilter.js   |  2 +-
 browser/components/SideNavFilter.styl | 29 +++++++++++++++++++++++++++
 browser/main/SideNav/index.js         |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index df019c7e..1fc59d7e 100644
--- a/browser/components/SideNavFilter.js
+++ b/browser/components/SideNavFilter.js
@@ -33,7 +33,7 @@ const SideNavFilter = ({
       <span styleName='menu-button-label'>Starred</span>
       <span styleName='counters'>{counterStarredNote}</span>
     </button>
-    <button styleName={isTrashedActive ? 'menu-button--active' : 'menu-button'}
+    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
       onClick={handleTrashedButtonClick}
     >
       <i className='fa fa-trash fa-fw' />
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 38a56c9b..388801dd 100644
--- a/browser/components/SideNavFilter.styl
+++ b/browser/components/SideNavFilter.styl
@@ -12,6 +12,7 @@
 
 .counters
   float right
+  color $ui-inactive-text-color
 
 .menu-button--active
   @extend .menu-button
@@ -47,6 +48,23 @@
     .menu-button-label
       color $ui-text-color
 
+.menu-button-trash--active
+  @extend .menu-button
+  color #5D9E36
+  background-color $ui-button--active-backgroundColor
+  .menu-button-label
+    color $ui-text-color
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #5D9E36
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 50%)
+    color #5D9E36
+    .menu-button-label
+      color $ui-text-color
+
 .menu-button-label
   margin-left 5px
 
@@ -106,3 +124,14 @@ body[data-theme="dark"]
       color $ui-favorite-star-button-color
       .menu-button-label
         color $ui-dark-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-dark-text-color
\ No newline at end of file
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 3040e91d..336492d4 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -161,7 +161,7 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-folder fa-fw' /></button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}><i className='fa fa-bars fa-fw' style={{transform: 'rotate(90deg)'}} /></button>
             <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}><i className='fa fa-tags fa-fw' /></button>
           </div>
           <div>