User name change and modify style

browser/main/HomePage.js

@@ -1,7 +1,6 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-import { EDIT_MODE, IDLE_MODE, NEW, toggleTutorial } from 'boost/actions'
-// import UserNavigator from './HomePage/UserNavigator'
+import { EDIT_MODE, IDLE_MODE, toggleTutorial } from 'boost/actions'
 import ArticleNavigator from './HomePage/ArticleNavigator'
 import ArticleTopBar from './HomePage/ArticleTopBar'
 import ArticleList from './HomePage/ArticleList'
@@ -114,13 +113,14 @@ class HomePage extends React.Component {
   }
 
   render () {
-    let { dispatch, status, articles, allArticles, activeArticle, folders, tags, filters } = this.props
+    let { dispatch, status, user, articles, allArticles, activeArticle, folders, tags, filters } = this.props
 
     return (
       <div className='HomePage'>
         <ArticleNavigator
           ref='nav'
           dispatch={dispatch}
+          user={user}
           folders={folders}
           status={status}
           allArticles={allArticles}
@@ -172,7 +172,7 @@ function buildFilter (key) {
 }
 
 function remap (state) {
-  let { folders, articles, status } = state
+  let { user, folders, articles, status } = state
 
   if (articles == null) articles = []
   articles.sort((a, b) => {
@@ -234,6 +234,7 @@ function remap (state) {
   if (activeArticle == null) activeArticle = articles[0]
 
   return {
+    user,
     folders,
     status,
     allArticles,
@@ -249,11 +250,9 @@ function remap (state) {
 }
 
 HomePage.propTypes = {
-  params: PropTypes.shape({
-    userId: PropTypes.string
-  }),
-  status: PropTypes.shape({
-    userId: PropTypes.string
+  status: PropTypes.shape(),
+  user: PropTypes.shape({
+    name: PropTypes.string
   }),
   articles: PropTypes.array,
   allArticles: PropTypes.array,

browser/main/HomePage/ArticleNavigator.js

@@ -7,10 +7,6 @@ import Preferences from 'boost/components/modal/Preferences'
 import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
 import keygen from 'boost/keygen'
 
-const electron = require('electron')
-const remote = electron.remote
-let userName = remote.getGlobal('process').env.USER
-
 const BRAND_COLOR = '#18AF90'
 
 const preferenceTutorialElement = (
@@ -109,7 +105,7 @@ export default class ArticleNavigator extends React.Component {
   }
 
   render () {
-    let { status, folders, allArticles } = this.props
+    let { status, user, folders, allArticles } = this.props
     let { targetFolders } = status
     if (targetFolders == null) targetFolders = []
 
@@ -127,7 +123,7 @@ export default class ArticleNavigator extends React.Component {
     return (
       <div className='ArticleNavigator'>
         <div className='userInfo'>
-          <div className='userProfileName'>{userName}</div>
+          <div className='userProfileName'>{user.name}</div>
           <div className='userName'>localStorage</div>
           <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
             <i className='fa fa-fw fa-chevron-down'/>