Merge pull request #1096 from BoostIO/fix-layout

Fix layout

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' />

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

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>