set style to articlenavigator

browser/main/HomeContainer/Components/ArticleNavigator.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import ProfileImage from '../../components/ProfileImage'
 
 export default class ArticleNavigator extends React.Component {
   render () {
@@ -11,9 +12,14 @@ export default class ArticleNavigator extends React.Component {
       )
     })
 
-    let members = Array.isArray(user.Members) ? user.Members.map(member => {
+    let members = Array.isArray(user.Members) ? user.Members.sort((a, b) => {
+      return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
+    }).map(member => {
       return (
-        <div>{member.profileName}</div>
+        <div key={'member-' + member.id}>
+          <ProfileImage className='memberImage' email={member.email} size='22'/>
+          <div className='memberProfileName'>{member.profileName}</div>
+        </div>
       )
     }) : null
 
@@ -22,7 +28,7 @@ export default class ArticleNavigator extends React.Component {
         <div className='userInfo'>
           <div className='userProfileName'>{user.profileName}</div>
           <div className='userName'>{user.name}</div>
-          <i className='fa fa-fw fa-chevron-down'/>
+          <button className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
         </div>
 
         <div className='controlSection'>
@@ -30,9 +36,9 @@ export default class ArticleNavigator extends React.Component {
         </div>
 
         <div className='folders'>
-          <div className='foldersHeader'>
+          <div className='header'>
-            <div className='folderTitle'>Folders</div>
+            <div className='title'>Folders</div>
-            <button className='addFolderBtn'><i className='fa fa-fw fa-plus'/></button>
+            <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
           </div>
           <div className='folderList'>
             <button>All folders</button>
@@ -43,7 +49,8 @@ export default class ArticleNavigator extends React.Component {
         {user.userType === 'team' ? (
           <div className='members'>
             <div className='header'>
-              <div className='title'></div>
+              <div className='title'>Members</div>
+              <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
             </div>
             <div className='memberList'>
               {members}

browser/main/index.js

@@ -36,7 +36,7 @@ import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
 let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
 let store = finalCreateStore(reducer)
 let devEl = (
-  <DebugPanel left right bottom>
+  <DebugPanel top right bottom>
     <DevTools store={store} monitor={LogMonitor} />
   </DebugPanel>
 )

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -5,3 +5,99 @@ articleNavBgColor = #353535
   absolute top bottom
   left 60px
   width 200px
+  color white
+  .userInfo
+    height 60px
+    display block
+    border-bottom 1px solid borderColor
+    .userProfileName
+      color brandColor
+      font-size 28px
+      padding 6px 0 0 10px
+    .userName
+      color white
+      padding-left 20px
+      margin-top 3px
+    .settingBtn
+      width 22px
+      height 22px
+      line-height 22px
+      border-radius 11px
+      position absolute
+      top 19px
+      right 14px
+      color white
+      padding 0
+      background-color transparent
+      border 1px solid white
+      &:active
+        background-color brandColor
+        border-color brandColor
+  .controlSection
+    height 88px
+    padding 22px 15px
+    .newPostBtn
+      border none
+      background-color brandColor
+      color white
+      height 44px
+      width 170px
+      border-radius 5px
+      font-size 20px
+  .folders, .members
+    .header
+      border-bottom 1px solid borderColor
+      padding-bottom 5px
+      margin-bottom 5px
+      clearfix()
+      .title
+        float left
+        padding-left 10px
+        font-size 18px
+        line-height 22px
+      .addBtn
+        float right
+        margin-right 15px
+        width 22px
+        height 22px
+        font-size 10px
+        padding 0
+        line-height 22px
+        border 1px solid white
+        border-radius 11px
+        background-color transparent
+        color white
+        padding 0
+        font-weight bold
+        &:active
+          background-color brandColor
+          border-color brandColor
+  .folders
+    margin-bottom 15px
+    .folderList button
+      height 44px
+      width 200px
+      border none
+      text-align left
+      font-size 14px
+      background-color transparent
+      color white
+      padding-left 15px
+      &:hover
+        background-color transparentify(white, 5%)
+      &.active, &:active
+        background-color brandColor
+  .members
+    .memberList>div
+      height 33px
+      width 200px
+      margin-bottom 5px
+      padding-left 15px
+      .memberImage
+        float left
+        margin-top 5.5px
+        border-radius 11px
+      .memberProfileName
+        float left
+        line-height 33px
+        margin-left 7px