design update 2

browser/main/SideNav/SideNav.styl

@@ -23,13 +23,13 @@
     background-color transparent
   &:active, &:active:hover
     color $ui-button-default--active-backgroundColor
-    background-color transparent
 
 .switch-buttons
   background-color transparent
   border 0
-  height 25px
-  margin 20px auto 0px 8px
+  margin 24px auto 4px 14px
+  display flex
+  text-align center
 
 .non-active-button
   color $ui-inactive-text-color
@@ -37,13 +37,16 @@
   border 0
   background-color transparent
   transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
   &:hover
     color alpha(#239F86, 60%)
 
 .active-button
   @extend .non-active-button
   color $ui-button-default--active-backgroundColor
-
+  
 .top-menu-label
   margin-left 5px
   overflow ellipsis

browser/main/SideNav/StorageItem.js

@@ -226,9 +226,9 @@ class StorageItem extends React.Component {
           <button styleName='header-toggleButton'
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
+            <img src={this.state.isOpen
+                ? '../resources/icon/icon-down.svg'
+                : '../resources/icon/icon-right.svg'
               }
             />
           </button>
@@ -237,7 +237,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus' />
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg'/>
             </button>
           }
 

browser/main/SideNav/StorageItem.styl

@@ -5,19 +5,23 @@
 
 .header
   position relative
-  height 25px
+  height 36px
   width 100%
   margin-bottom 5px
   transition 0.15s
+  display flex
+  align-items center
 
 .header--active
   margin-bottom 5px
-  background-color $ui-button-default--active-backgroundColor
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   transition color background-color  0.15s
+  display flex
+  align-items center
   .header-toggleButton
   .header-info
   .header-addFolderButton
-    color $ui-button-default-color
+    color #1EC38B
 
 .header-toggleButton
   navButtonColor()
@@ -37,23 +41,24 @@
   navButtonColor()
   display block
   width 100%
-  height 25px
-  padding-left 23px
-  padding-right 10px
+  height 36px
+  padding-left 25px
+  padding-right 15px
   line-height 22px
   cursor pointer
-  font-size 13px
+  font-size 14px
   border none
   overflow ellipsis
   text-align left
+  font-weight 600;
   background-color transparent
   &:hover
-    color $ui-button-default-color
+    color #1EC38B
     background-color alpha($ui-button-default--active-backgroundColor, 20%)
     transition background-color 0.15s
   &:active, &:active:hover
-    color $ui-button-default-color
-    background-color $ui-button-default--active-backgroundColor
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -62,12 +67,11 @@
 .header-addFolderButton
   navButtonColor()
   position absolute
-  right 0
+  right 10px
   width 25px
   height 25px
   padding 0
   border none
-  margin-right 5px
   border-radius 50%
   &:hover
     transition 0.2s

browser/main/SideNav/index.js

@@ -161,15 +161,26 @@ 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-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>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
           </div>
           <div>
             <button styleName='top-menu-preference'
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
-              <i className='fa fa-wrench fa-fw' />
-              <span styleName='top-menu-label'>Preferences</span>
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg'/>
             </button>
           </div>
         </div>