cut out StorageList component

browser/main/SideNav/SideNav.styl

@@ -31,18 +31,6 @@
   margin-left 5px
   overflow ellipsis
 
-.storageList
-  absolute left right
-  bottom 37px
-  top 160px
-  overflow-y auto
-
-.storageList-empty
-  padding 0 10px
-  margin-top 15px
-  line-height 24px
-  color $ui-inactive-text-color
-
 .tagList
   absolute left right
   bottom 37px
@@ -64,9 +52,6 @@
 .root--folded
   @extend .root
   width 44px
-  .storageList-empty
-    white-space nowrap
-    transform rotate(90deg)
   .top-menu
     width 44px - 1
     text-align center
@@ -132,9 +117,6 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
-  .storageList-empty
-    color $ui-dark-inactive-text-color
-
   .navToggle
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/SideNav/index.js

@@ -7,6 +7,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
 import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import StorageList from 'browser/components/StorageList'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -67,11 +68,7 @@ class SideNav extends React.Component {
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
           />
 
-          <div styleName='storageList'>
-            {storageList.length > 0 ? storageList : (
-              <div styleName='storageList-empty'>No storage mount.</div>
-            )}
-          </div>
+          <StorageList storageList={storageList} />
           <button styleName='navToggle'
             onClick={(e) => this.handleToggleButtonClick(e)}
           >