update design of SideNav

smaller menu

browser/finder/FinderMain.styl

@@ -30,8 +30,10 @@ $list-width = 250px
   absolute left top bottom
   width $nav-width
   background-color $ui-backgroundColor
+
 .result-nav-filter
   margin-bottom 5px
+
 .result-nav-filter-option
   height 25px
   line-height 25px
@@ -41,13 +43,13 @@ $list-width = 250px
 
 .result-nav-menu
   navButtonColor()
-  height 40px
+  height 32px
   padding 0 10px
   font-size 14px
   width 100%
   outline none
   text-align left
-  line-height 40px
+  line-height 32px
   box-sizing border-box
   cursor pointer
 
@@ -60,7 +62,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 50px + 10px
+  top 80px + 32px + 10px
   overflow-y auto
 
 .result-list

browser/finder/NoteItem.styl

@@ -115,6 +115,7 @@
   color $ui-inactive-text-color
   vertical-align middle
   font-size 10px
+  margin-left 5px
 
 .bottom-time
   color $ui-inactive-text-color

browser/finder/StorageSection.js

@@ -48,7 +48,13 @@ class StorageSection extends React.Component {
         <div styleName='header'>
           <button styleName='header-toggleButton'
             onClick={(e) => this.handleToggleButtonClick(e)}
-          ><i className='fa fa-caret-down'/></button>
+          >
+            <i className={this.state.isOpen
+                ? 'fa fa-caret-down'
+                : 'fa fa-caret-right'
+              }
+            />
+          </button>
           <button styleName={filter.type === 'STORAGE' && filter.storage === storage.key
               ? 'header-name--active'
               : 'header-name'

browser/finder/StorageSection.styl

@@ -2,23 +2,23 @@
   position relative
 
 .header
-  height 30px
+  height 26px
 .header-toggleButton
   absolute top left
   width 25px
-  height 30px
+  height 26px
   navButtonColor()
   border none
   outline none
 .header-name
   display block
-  height 30px
+  height 26px
   navButtonColor()
   padding 0 10px 0 25px
   font-size 14px
   width 100%
   text-align left
-  line-height 30px
+  line-height 26px
   box-sizing border-box
   cursor pointer
   outline none
@@ -33,20 +33,20 @@
 .folderList-item
   display block
   width 100%
-  height 30px
+  height 26px
   navButtonColor()
   padding 0 10px 0 25px
   font-size 14px
   width 100%
   text-align left
-  line-height 30px
+  line-height 26px
   box-sizing border-box
   cursor pointer
   outline none
   padding 0 10px
   margin 2px 0
-  height 30px
-  line-height 30px
+  height 26px
+  line-height 26px
   border-width 0 0 0 6px
   border-style solid
   border-color transparent