use webpack & add some styles

2025-12-13 09:46:22 +00:00 · 2015-10-09 20:12:01 +09:00
parent 979dcead49
commit 2e4fc557ea
25 changed files with 601 additions and 317 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,20 @@
+{
+  "stage": 0,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}
--- a/browser/main/Components/ExternalLink.js
+++ b/browser/main/Components/ExternalLink.js
@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import shell from 'shell'
+
+export default class ExternalLink extends React.Component {
+  handleClick (e) {
+    shell.openExternal(this.props.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)} {...this.props}/>
+    )
+  }
+}
+
+ExternalLink.propTypes = {
+  href: PropTypes.string
+}
--- a/browser/main/Components/ProfileImage.js
+++ b/browser/main/Components/ProfileImage.js
@@ -0,0 +1,24 @@
+import React, { PropTypes} from 'react'
+import md5 from 'md5'
+
+export default class ProfileImage extends React.Component {
+  render () {
+    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
+    let email = this.props.email != null ? this.props.email : ''
+    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
+
+    return (
+      <img
+        className={className}
+        width={this.props.size}
+        height={this.props.size}
+        src={src}/>
+    )
+  }
+}
+
+ProfileImage.propTypes = {
+  email: PropTypes.string,
+  size: PropTypes.string,
+  className: PropTypes.string
+}
--- a/browser/main/Components/ProfileImage.jsx
+++ b/browser/main/Components/ProfileImage.jsx
@@ -1,15 +0,0 @@
-var React = require('react')
-var md5 = require('md5')
-
-module.exports = React.createClass({
-  propTypes: {
-    email: React.PropTypes.string,
-    size: React.PropTypes.string,
-    className: React.PropTypes.string
-  },
-  render: function () {
-    return (
-      <img className={this.props.className} width={this.props.size} height={this.props.size} src={'http://www.gravatar.com/avatar/' + md5(this.props.email.trim().toLowerCase()) + '?s=' + this.props.size}/>
-    )
-  }
-})
--- a/browser/main/HomeContainer/Components/ArticleDetail.js
+++ b/browser/main/HomeContainer/Components/ArticleDetail.js
@@ -3,7 +3,7 @@ import React, { PropTypes } from 'react'
 export default class ArticleDetail extends React.Component {
  render () {
    return (
-      <div></div>
+      <div className='ArticleDetail'></div>
    )
  }
 }
--- a/browser/main/HomeContainer/Components/UserNavigator.js
+++ b/browser/main/HomeContainer/Components/UserNavigator.js
@@ -1,21 +1,24 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
+import ProfileImage from '../../components/ProfileImage'

 export default class UserNavigator extends Component {

  renderUserList () {
-    var users = this.props.users.map(user => (
+    var users = this.props.users.map((user, index) => (
      <li key={'user-' + user.id}>
        <Link to={'/users/' + user.id}>
+          <ProfileImage email={user.email} size='44'/>
          <div className='userTooltip'>{user.name}</div>
+          <div className='keyLabel'>{'⌘' + (index + 1)}</div>
        </Link>
      </li>
    ))

    return (
-      <div className='userList'>
+      <ul className='userList'>
        {users}
-      </div>
+      </ul>
    )
  }

--- a/browser/main/HomeContainer/actions.js
+++ b/browser/main/HomeContainer/actions.js
@@ -1,10 +1,8 @@
-function updateUser (user) {
+export const USER_UPDATE = 'USER_UPDATE'
+
+export function updateUser (user) {
  return {
    type: 'USER_UPDATE',
    data: user
  }
 }
-
-module.exports = {
-  updateUser: updateUser
-}
--- a/browser/main/HomeContainer/components/ArticleTopBar.js
+++ b/browser/main/HomeContainer/components/ArticleTopBar.js
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+import ExternalLink from '../../components/ExternalLink'
+
+const ArticleTopBar = React.createClass({
+  render () {
+    return (
+      <div className='ArticleTopBar'>
+        <div className='left'>
+          <div className='search'>
+            <i className='fa fa-search fa-fw' />
+            <input placeholder='Search' type='text'/>
+          </div>
+          <button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
+        </div>
+        <div className='right'>
+          <button>?</button>
+          <button>i</button>
+          <ExternalLink className='logo' href='http://b00st.io'>
+            <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
+          </ExternalLink>
+        </div>
+      </div>
+    )
+  }
+})
+
+export default ArticleTopBar
--- a/browser/main/HomeContainer/index.js
+++ b/browser/main/HomeContainer/index.js
@@ -1,8 +1,9 @@
-import React from 'react'
-// import { connect } from 'react-redux'
+import React, { PropTypes} from 'react'
+import { connect } from 'react-redux'
 // import actionss....
 import UserNavigator from './Components/UserNavigator'
 import ArticleNavigator from './Components/ArticleNavigator'
+import ArticleTopBar from './Components/ArticleTopBar'
 import ArticleList from './Components/ArticleList'
 import ArticleDetail from './Components/ArticleDetail'

@@ -10,30 +11,13 @@ import ArticleDetail from './Components/ArticleDetail'
 // var KeyCaster = require('../Mixins/KeyCaster')

 class HomeContainer extends React.Component {
-  componentDidMount () {
-    // if (!this.isActive('user')) {
-    //   console.log('redirect to user home')
-    //   var user = JSON.parse(localStorage.getItem('currentUser'))
-    //   this.transitionTo('userHome', {userId: user.id})
-    // }
-  }
  render () {
-    let users = [
-      {
-        id: 1,
-        name: 'me',
-        email: 'fll@eme.com'
-      },
-      {
-        id: 2,
-        name: 'me',
-        email: 'fll@eme.com'
-      }
-    ]
+    const { users } = this.props
    return (
      <div className='HomeContainer'>
        <UserNavigator users={users} />
        <ArticleNavigator/>
+        <ArticleTopBar/>
        <ArticleList/>
        <ArticleDetail/>
      </div>
@@ -41,10 +25,19 @@ class HomeContainer extends React.Component {
  }
 }

-// function remap (state) {
-//   console.log('mapped')
-//   console.log(state)
-//   return {}
-// }
+function remap (state) {
+  let currentUser = state.currentUser
+  let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []

-export default HomeContainer
+  let users = [currentUser, ...teams]
+
+  return {
+    users
+  }
+}
+
+HomeContainer.propTypes = {
+  users: PropTypes.array
+}
+
+export default connect(remap, {})(HomeContainer)
--- a/browser/main/HomeContainer/reducer.js
+++ b/browser/main/HomeContainer/reducer.js
@@ -1,10 +1,14 @@
 import { combineReducers } from 'redux'
+import { USER_UPDATE } from './actions'

 const initialCurrentUser = JSON.parse(localStorage.getItem('currentUser'))

 function currentUser (state, action) {
  switch (action.type) {
-
+    case USER_UPDATE:
+      let user = action.data
+      localStorage.setItem('currentUser', JSON.stringify(user))
+      return user
    default:
      return initialCurrentUser
  }
--- a/browser/main/index.html
+++ b/browser/main/index.html
@@ -6,7 +6,7 @@

  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8">
+  <!-- <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8"> -->
  <link rel="shortcut icon" href="favicon.ico">

  <style>
@@ -46,7 +46,7 @@
 </head>
 <body>
  <div id="loadingCover">
-    <img src="resources/favicon-230x230.png">
+    <img src="../../resources/favicon-230x230.png">
    <div class='message'>Loading...</div>
  </div>

@@ -57,8 +57,9 @@
    var version = require('remote').require('app').getVersion()
    global.version = version
    document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
-    require("babel-core/register")
-    require('./index')
+    // require("babel-core/register")
+    // require('./index')
  </script>
+  <script src="http://localhost:8080/assets/main.js"></script>
 </body>
 </html>
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -1,9 +1,15 @@
 import React from 'react'
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
+import { updateUser } from './HomeContainer/actions'
+import reducer from './HomeContainer/reducer'
+import Hq from './Services/Hq'
 import { Router, Route, IndexRoute } from 'react-router'
 import MainContainer from './Containers/MainContainer'
 import LoginContainer from './Containers/LoginContainer'
 import SignupContainer from './Containers/SignupContainer'
 import HomeContainer from './HomeContainer'
+require('../styles/main/index.styl')

 function onlyUser (state, replaceState) {
  var currentUser = JSON.parse(localStorage.getItem('currentUser'))
@@ -15,15 +21,48 @@ let routes = (

    <Route name='login' path='login' component={LoginContainer}/>
    <Route name='signup' path='signup' component={SignupContainer}/>
-    <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}>
-      <IndexRoute name='homeDefault'/>
-      <Route name='user' path=':userId'/>
-    </IndexRoute>
+    <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}/>
+    <Route name='user' path='/users/:userId' component={HomeContainer} onEnter={onlyUser}/>
  </Route>
 )

+// with Dev
+import { compose } from 'redux'
+// Redux DevTools store enhancers
+import { devTools, persistState } from 'redux-devtools'
+// React components for Redux DevTools
+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 top right bottom>
+//     <DevTools store={store} monitor={LogMonitor} />
+//   </DebugPanel>
+// )
+
+// On production
+let store = createStore(reducer)
+
 let el = document.getElementById('content')
-React.render(<Router>{routes}</Router>, el, function () {
+
+React.render((
+  <div>
+    <Provider store={store}>
+      {() => <Router>{routes}</Router>}
+    </Provider>
+  </div>
+), el, function () {
  let loadingCover = document.getElementById('loadingCover')
  loadingCover.parentNode.removeChild(loadingCover)
+
+  // Refresh user information
+  Hq.getUser()
+    .then(function (res) {
+      store.dispatch(updateUser(res.body))
+    })
+    .catch(function (err) {
+      console.error(err.message)
+      console.log('Fetch failed')
+    })
 })
--- a/browser/styles/main/HomeContainer/ArticleDetail.styl
+++ b/browser/styles/main/HomeContainer/ArticleDetail.styl
@@ -3,7 +3,7 @@ noTagsColor = #999
 .ArticleDetail
  absolute right bottom
  top 60px
-  left 250px
+  left 510px
  padding 10px
  *
    -webkit-user-select all
--- a/browser/styles/main/HomeContainer/ArticleList.styl
+++ b/browser/styles/main/HomeContainer/ArticleList.styl
@@ -2,8 +2,9 @@ articleItemHoverBgColor = darken(white, 5%)
 articleItemColor = #777

 .ArticleList
-  absolute left bottom
+  absolute bottom
  top 60px
+  left 260px
  width 250px
  border-right solid 1px highlightenBorderColor
  &>ul
--- a/browser/styles/main/HomeContainer/ArticleTopBar.styl
+++ b/browser/styles/main/HomeContainer/ArticleTopBar.styl
@@ -0,0 +1,92 @@
+bgColor = #E6E6E6
+inputBgColor = white
+
+refreshBtColor = #B3B3B3
+refreshBtnActiveColor = #3A3A3A
+
+infoBtnColor = bgColor
+infoBtnBgColor = #B3B3B3
+infoBtnActiveBgColor = #3A3A3A
+
+.ArticleTopBar
+  absolute top right
+  left 260px
+  height 60px
+  background-color bgColor
+  &>.left
+    float left
+    &>.search
+      position relative
+      float left
+      height 33px
+      margin-top 13.5px
+      margin-left 15px
+      width 350px
+      border-radius 22px
+      background-color inputBgColor
+      padding 5px 15px
+      transition 0.1s
+      font-size 16px
+      border 1px solid transparent
+      border-color transparent
+      &.focus
+        border-color brandBorderColor
+      input
+        absolute top right
+        left 35px
+        width 300px
+        outline none
+        font-size 14px
+        border none
+        height 33px
+        line-height 33px
+        background-color transparent
+      i.fa
+        position absolute
+        display block
+        top 0
+        left 10px
+        line-height 33px
+    &>.refreshBtn
+      float left
+      width 33px
+      height 33px
+      margin-top 13.5px
+      margin-left 15px
+      border none
+      color refreshBtColor
+      background transparent
+      font-size 18px
+      line-height 18px
+      transition 0.1s
+      &:hover
+        color refreshBtnActiveColor
+  &>.right
+    float right
+    &>button
+      display block
+      position absolute
+      right 74px
+      top 20px
+      width 20px
+      height 20px
+      font-size 14px
+      line-height 14px
+      background-color infoBtnBgColor
+      color bgColor
+      border-radius 11px
+      border none
+      transition 0.1s
+      &:nth-child(1)
+        right 109px
+      &:hover
+        background-color infoBtnActiveBgColor
+
+    &>.logo
+      display block
+      position absolute
+      top 8px
+      right 15px
+      opacity 0.7
+      &:hover
+        opacity 1.0
--- a/browser/styles/main/HomeContainer/UserNavigator.styl
+++ b/browser/styles/main/HomeContainer/UserNavigator.styl
@@ -0,0 +1,85 @@
+userNavigatorBgColor = #1B1C1C
+userNavigatorColor = #DDD
+userAnchorColor = #979797
+userAnchorBgColor = #BEBEBE
+userAnchorActiveColor = textColor
+userAnchorActiveBgColor = white
+
+.UserNavigator
+  noSelect()
+  background-color userNavigatorBgColor
+  absolute left top bottom
+  width 60px
+  text-align center
+  box-sizing border-box
+  ul.userList
+    margin-top 25px
+    &>li
+      a
+        display block
+        width 38px
+        height 64px
+        margin 0 auto 10px
+        text-align center
+        text-decoration none
+        color userAnchorColor
+        line-height 44px
+        font-size 1.1em
+        cursor pointer
+        transition 0.1s
+        opacity 0.8
+
+        img.ProfileImage
+          width 38px
+          height 38px
+          border-radius 22px
+        &:hover, &.active
+          opacity 1
+          .userTooltip
+            opacity 1
+        .userTooltip
+          position absolute
+          z-index popupZIndex
+          background-color transparentify(invBackgroundColor, 80%)
+          color invTextColorq
+          padding 10px
+          line-height 1em
+          border-radius 5px
+          margin-top -52px
+          margin-left 52px
+          white-space nowrap
+          opacity 0
+          transition 0.1s
+          pointer-events none
+        .keyLabel
+          margin-top -25px
+          font-size 0.8em
+          color userNavigatorColor
+  button.newTeamButton
+    display block
+    margin 0 auto
+    width 30px
+    height 30px
+    circle()
+    border solid 1px lightButtonColor
+    color lightButtonColor
+    text-align center
+    background-image none
+    background-color transparent
+    box-sizing border-box
+    absolute left bottom right
+    bottom 15px
+    &:hover, &.hover, &:focus, &.focus
+      border-color darken(lightButtonColor, 50%)
+      color darken(lightButtonColor, 50%)
+    &:active, &.active
+      border-color darken(brandBorderColor, 10%)
+      background-color brandColor
+      color white
+    .tooltip
+      tooltip()
+      margin-top -22px
+      margin-left 33px
+      font-size 14px
+    &:hover .tooltip
+      opacity 1
--- a/browser/styles/main/HomeContainer/index.styl
+++ b/browser/styles/main/HomeContainer/index.styl
@@ -0,0 +1,4 @@
+@import './UserNavigator'
+@import './ArticleTopBar'
+@import './ArticleList'
+@import './ArticleDetail'
--- a/browser/styles/main/components/TopBar.styl
+++ b/browser/styles/main/components/TopBar.styl
@@ -1,43 +0,0 @@
-.TopBar
-  absolute top left right
-  height 60px
-  border-bottom solid 1px borderColor
-  noSelect()
-  .left
-    float left
-    .search
-      position absolute
-      top 13.5px
-      left 15px
-      height 33px
-      i.fa
-        position absolute
-        line-height 33px
-        z-index 1
-        width 33px
-        text-align center
-      input.searchInput
-        absolute top left
-        background-color white
-        borderInput()
-        width 350px
-        padding-left 30px
-        border-radius 16.5px
-        font-size 14px
-        height 33px
-        line-height 33px
-        outline none
-        &:focus
-          border-color brandColor
-  .right
-    float right
-    .logo
-      &>img
-        margin-top 7px
-        margin-right 15px
-      .tooltip
-        tooltip()
-        right 5px
-      &:hover
-        .tooltip
-          opacity 1.0
--- a/browser/styles/main/containers/HomeContainer.styl
+++ b/browser/styles/main/containers/HomeContainer.styl
@@ -1,153 +0,0 @@
-homeNavigatorBgColor = #1B1C1C
-homeNavigatorColor = #DDD
-userAnchorColor = #979797
-userAnchorBgColor = #BEBEBE
-userAnchorActiveColor = textColor
-userAnchorActiveBgColor = white
-
-.HomeContainer
-  .HomeNavigator
-    noSelect()
-    background-color homeNavigatorBgColor
-    absolute left top bottom
-    width 60px
-    text-align center
-    box-sizing border-box
-    // must be moved
-    // .profilePopup
-    //   position fixed
-    //   left 35px
-    //   top 35px
-    //   z-index popupZIndex
-    //   width 200px
-    //   background-color backgroundColor
-    //   box-shadow popupShadow
-    //   border-radius 10px
-    //   padding 10px 0 0px
-    //   &.close
-    //     display none
-    //   .profileGroup
-    //     margin-bottom 10px
-    //     .profileGroupLabel
-    //       text-align left
-    //       height 1em
-    //       padding 0 15px
-    //       span
-    //         position absolute
-    //         z-index 2
-    //         background-color backgroundColor
-    //         padding-right 5px
-    //         color inactiveTextColor
-    //         font-size 0.8em
-    //       &::before
-    //         content ''
-    //         position absolute
-    //         display block
-    //         z-index 1
-    //         height 0.5em
-    //         width 175px
-    //         border-bottom solid 1px borderColor
-    //     .profileGroupList
-    //       li
-    //         clearfix()
-    //         &:hover
-    //           background-color hoverBackgroundColor
-    //         .userName
-    //           width 155px
-    //           padding 10px 15px
-    //           text-align left
-    //           display block
-    //           text-decoration none
-    //           cursor pointer
-    //         .createNewTeam
-    //           btnStripDefault()
-    //           width 100%
-    //           padding 10px 20px
-    //           font-size 1em
-    //           cursor pointer
-    //           text-align left
-    //   .controlGroup
-    //     list-style none
-    //     border-top solid 1px borderColor
-    //     padding 10px 0
-    //     li
-    //       &:hover
-    //         background-color hoverBackgroundColor
-    //       button
-    //         btnStripDefault()
-    //         width 100%
-    //         padding 10px 20px
-    //         font-size 1em
-    //         cursor pointer
-    //         text-align left
-    ul.userList
-      margin-top 25px
-      &>li
-        .shortCut
-          margin-top 5px
-          font-size 0.8em
-          color homeNavigatorColor
-        a
-          display block
-          width 44px
-          height 44px
-          margin 0 auto
-          text-align center
-          background-color userAnchorBgColor
-          text-decoration none
-          color userAnchorColor
-          line-height 44px
-          font-size 1.1em
-          cursor pointer
-          circle()
-          img
-            width 44px
-            height 44px
-          transition 0.1s
-          &:hover, &.active
-            background-color userAnchorActiveBgColor
-            color userAnchorActiveColor
-          .userTooltip
-            position absolute
-            z-index popupZIndex
-            background-color transparentify(invBackgroundColor, 80%)
-            color invTextColor
-            padding 10px
-            line-height 1em
-            border-radius 5px
-            margin-top -52px
-            margin-left 52px
-            white-space nowrap
-            opacity 0
-            transition 0.1s
-            pointer-events none
-          &:hover .userTooltip
-            opacity 1
-    button.newTeamButton
-      display block
-      margin 0 auto
-      width 30px
-      height 30px
-      circle()
-      border solid 1px lightButtonColor
-      color lightButtonColor
-      text-align center
-      background-image none
-      background-color transparent
-      box-sizing border-box
-      absolute left bottom right
-      bottom 15px
-      &:hover, &.hover, &:focus, &.focus
-        border-color darken(lightButtonColor, 50%)
-        color darken(lightButtonColor, 50%)
-      &:active, &.active
-        border-color darken(brandBorderColor, 10%)
-        background-color brandColor
-        color white
-      .tooltip
-        tooltip()
-        margin-top -22px
-        margin-left 33px
-        font-size 14px
-      &:hover .tooltip
-        opacity 1
--- a/browser/styles/main/index.css
+++ b/browser/styles/main/index.css
@@ -1823,6 +1823,162 @@ a img {
 .ArticleList>ul li .divider {
  border-bottom: solid 1px #d0d0d0;
 }
+.ArticleNavigator {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: userNavigatorWidth;
+  background-color: userNavigatorBgColor;
+  color: userNavigatorColor;
+  -webkit-user-select: none;
+  cursor: default;
+}
+.ArticleNavigator>.profile {
+  height: 60px;
+  padding: 10px 15px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  border-bottom: solid 1px userNavigatorBorderColor;
+  cursor: pointer;
+}
+.ArticleNavigator>.profile>.profileName {
+  color: userNavigatorProfileNameColor;
+  font-size: 22px;
+  cursor: pointer;
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -o-transition: 0.1s;
+  -ms-transition: 0.1s;
+  transition: 0.1s;
+}
+.ArticleNavigator>.profile>.name {
+  padding: 5px 10px;
+  font-size: 14px;
+  color: userNavigatorColor;
+  cursor: pointer;
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -o-transition: 0.1s;
+  -ms-transition: 0.1s;
+  transition: 0.1s;
+}
+.ArticleNavigator>.profile>.dropdownIcon {
+  position: absolute;
+  top: 20px;
+  right: 25px;
+  float: right;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 8px;
+  border: solid 1px userNavigatorColor;
+  -webkit-border-radius: 12.5px;
+  border-radius: 12.5px;
+  text-align: center;
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -o-transition: 0.1s;
+  -ms-transition: 0.1s;
+  transition: 0.1s;
+}
+.ArticleNavigator>.profile:hover>.profileName {
+  color: #31c4a3;
+}
+.ArticleNavigator>.profile:hover>.name {
+  color: #fff;
+}
+.ArticleNavigator>.profile:hover>.dropdownIcon {
+  border-color: #fff;
+}
+.ArticleNavigator>.profile:hover:active>.dropdownIcon {
+  background-color: #2bac8f;
+  border-color: #2bac8f;
+}
+.ArticleNavigator>.control {
+  padding: 15px 15px;
+}
+.ArticleNavigator>.control>.newPostButton {
+  background-color: #2bac8f;
+  color: #fff;
+  height: 44px;
+  width: 100%;
+  border: none;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  font-size: 16px;
+  font-weight: 600;
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -o-transition: 0.1s;
+  -ms-transition: 0.1s;
+  transition: 0.1s;
+}
+.ArticleNavigator>.control>.newPostButton:hover {
+  background-color: #31c4a3;
+}
+.ArticleNavigator>.menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 134px;
+  padding: 15px 0;
+  overflow: auto;
+}
+.ArticleNavigator>.menu>.menuGruop>.label {
+  border-bottom: 1px solid userNavigatorBorderColor;
+  padding: 10px 15px;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.ArticleNavigator>.menu>.menuGruop>.label>.plusButton {
+  float: right;
+  width: 20px;
+  height: 20px;
+  margin-top: -2.5px;
+  margin-right: -5px;
+  line-height: 15px;
+  font-size: 8px;
+  border: solid 1px userNavigatorColor;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  background-color: transparent;
+  text-align: center;
+  color: userNavigatorColor;
+}
+.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover {
+  border-color: #fff;
+  color: #fff;
+}
+.ArticleNavigator>.menu>.menuGruop>.label>.plusButton:hover:active {
+  background-color: #2bac8f;
+  border-color: #2bac8f;
+}
+.ArticleNavigator>.menu>.folders .folderButton {
+  padding: 10px 25px;
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  font-size: 14px;
+  color: userNavigatorColor;
+  -webkit-transition: 0.1s;
+  -moz-transition: 0.1s;
+  -o-transition: 0.1s;
+  -ms-transition: 0.1s;
+  transition: 0.1s;
+  text-align: left;
+}
+.ArticleNavigator>.menu>.folders .folderButton:hover {
+  background-color: rgba(255,255,255,0.2);
+  color: #fff;
+}
+.ArticleNavigator>.menu>.folders .folderButton.active {
+  background-color: #2bac8f;
+  color: #fff;
+}
 .Select {
  position: relative;
 }
@@ -2211,7 +2367,7 @@ a img {
  -ms-filter: none;
  filter: none;
 }
-.HomeContainer .HomeNavigator {
+.HomeContainer .UserNavigator {
  -webkit-user-select: none;
  cursor: default;
  background-color: #1b1c1c;
@@ -2225,49 +2381,52 @@ a img {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
-.HomeContainer .HomeNavigator ul.userList {
+.HomeContainer .UserNavigator ul.userList {
  margin-top: 25px;
 }
-.HomeContainer .HomeNavigator ul.userList>li .shortCut {
-  margin-top: 5px;
-  font-size: 0.8em;
-  color: #ddd;
-}
-.HomeContainer .HomeNavigator ul.userList>li a {
+.HomeContainer .UserNavigator ul.userList>li a {
  display: block;
  width: 44px;
-  height: 44px;
-  margin: 0 auto;
+  height: 64px;
+  margin: 0 auto 20px;
  text-align: center;
-  background-color: #bebebe;
  text-decoration: none;
  color: #979797;
  line-height: 44px;
  font-size: 1.1em;
  cursor: pointer;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  overflow: hidden;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -o-transition: 0.1s;
  -ms-transition: 0.1s;
  transition: 0.1s;
+  opacity: 0.8;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
 }
-.HomeContainer .HomeNavigator ul.userList>li a img {
+.HomeContainer .UserNavigator ul.userList>li a img.ProfileImage {
  width: 44px;
  height: 44px;
+  -webkit-border-radius: 22px;
+  border-radius: 22px;
 }
-.HomeContainer .HomeNavigator ul.userList>li a:hover,
-.HomeContainer .HomeNavigator ul.userList>li a.active {
-  background-color: #fff;
-  color: #4d4d4d;
+.HomeContainer .UserNavigator ul.userList>li a:hover,
+.HomeContainer .UserNavigator ul.userList>li a.active {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
 }
-.HomeContainer .HomeNavigator ul.userList>li a .userTooltip {
+.HomeContainer .UserNavigator ul.userList>li a:hover .userTooltip,
+.HomeContainer .UserNavigator ul.userList>li a.active .userTooltip {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.HomeContainer .UserNavigator ul.userList>li a .userTooltip {
  position: absolute;
  z-index: 500;
  background-color: rgba(31,31,31,0.8);
-  color: #fff;
+  color: invTextColorq;
  padding: 10px;
  line-height: 1em;
  -webkit-border-radius: 5px;
@@ -2285,12 +2444,12 @@ a img {
  transition: 0.1s;
  pointer-events: none;
 }
-.HomeContainer .HomeNavigator ul.userList>li a:hover .userTooltip {
-  opacity: 1;
-  -ms-filter: none;
-  filter: none;
+.HomeContainer .UserNavigator ul.userList>li a .keyLabel {
+  margin-top: -25px;
+  font-size: 0.8em;
+  color: #ddd;
 }
-.HomeContainer .HomeNavigator button.newTeamButton {
+.HomeContainer .UserNavigator button.newTeamButton {
  display: block;
  margin: 0 auto;
  width: 30px;
@@ -2312,20 +2471,20 @@ a img {
  right: 0;
  bottom: 15px;
 }
-.HomeContainer .HomeNavigator button.newTeamButton:hover,
-.HomeContainer .HomeNavigator button.newTeamButton.hover,
-.HomeContainer .HomeNavigator button.newTeamButton:focus,
-.HomeContainer .HomeNavigator button.newTeamButton.focus {
+.HomeContainer .UserNavigator button.newTeamButton:hover,
+.HomeContainer .UserNavigator button.newTeamButton.hover,
+.HomeContainer .UserNavigator button.newTeamButton:focus,
+.HomeContainer .UserNavigator button.newTeamButton.focus {
  border-color: #454545;
  color: #454545;
 }
-.HomeContainer .HomeNavigator button.newTeamButton:active,
-.HomeContainer .HomeNavigator button.newTeamButton.active {
+.HomeContainer .UserNavigator button.newTeamButton:active,
+.HomeContainer .UserNavigator button.newTeamButton.active {
  border-color: #39a18a;
  background-color: #2bac8f;
  color: #fff;
 }
-.HomeContainer .HomeNavigator button.newTeamButton .tooltip {
+.HomeContainer .UserNavigator button.newTeamButton .tooltip {
  position: fixed;
  z-index: 500;
  background-color: rgba(31,31,31,0.8);
@@ -2349,7 +2508,7 @@ a img {
  margin-left: 33px;
  font-size: 14px;
 }
-.HomeContainer .HomeNavigator button.newTeamButton:hover .tooltip {
+.HomeContainer .UserNavigator button.newTeamButton:hover .tooltip {
  opacity: 1;
  -ms-filter: none;
  filter: none;
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -5,6 +5,7 @@ global-reset()
@import '../shared/*'
@import './components/*'
@import './containers/*'
+@import './HomeContainer'

 *
  -webkit-app-region no-drag
--- a/browser/styles/mixins/input.styl
+++ b/browser/styles/mixins/input.styl
@@ -3,6 +3,7 @@ stripInput()
  border-bottom 1px solid borderColor
  padding 5px 15px
  transition 0.1s
+  font-size 14px
  &:focus, &.focus
    border-bottom 1px solid brandBorderColor
    outline none
@@ -11,6 +12,7 @@ borderInput()
  border solid 1px borderColor
  padding 5px 15px
  transition 0.1s
+  font-size 14px
  &:focus, &.focus
    border-color brandBorderColor
    outline none
--- a/package.json
+++ b/package.json
@@ -5,12 +5,13 @@
  "main": "main.js",
  "scripts": {
    "start": "electron ./main.js",
+    "webpack": "webpack-dev-server --inline",
    "build": "electron-packager ./ Boost $npm_package_config_platform  $npm_package_config_version $npm_package_config_ignore --overwrite"
  },
  "config": {
    "version": "--version=0.33.0 --app-version=$npm_package_version --app-bundle-id=com.maisin.boost",
    "platform": "--platform=darwin --arch=x64 --prune --icon=app.icns",
-    "ignore": "--ignore=Boost-darwin-x64 --ignore=node_modules/devicon/icons --ignore=submodules\/ace\/(?!src-min)|submodules\/ace\/(?=src-min-noconflict)"
+    "ignore": "--ignore=Boost-darwin-x64 --ignore=node_modules/devicon/icons --ignore=submodules/ace/(?!src-min)|submodules/ace/(?=src-min-noconflict)"
  },
  "repository": {
    "type": "git",
@@ -55,11 +56,22 @@
    "titlebar": "^1.3.0"
  },
  "devDependencies": {
+    "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "css-loader": "^0.19.0",
    "electron-packager": "^5.1.0",
    "electron-prebuilt": "^0.33.6",
    "nib": "^1.1.0",
+    "react-transform-catch-errors": "^1.0.0",
+    "react-transform-hmr": "^1.0.1",
+    "redbox-react": "^1.1.1",
+    "redux-devtools": "^2.1.5",
    "standard": "^5.3.1",
-    "stylus": "^0.52.4"
+    "style-loader": "^0.12.4",
+    "stylus": "^0.52.4",
+    "stylus-loader": "^1.3.1",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.0"
  },
  "standard": {
    "ignore": [
--- a/browser/main/resources/favicon-230x230.png
+++ b/browser/main/resources/favicon-230x230.png
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,39 +1,50 @@
+var webpack = require('webpack')
 module.exports = {
  entry: {
-    main: './browser/main/index.jsx',
-    'main-style': './browser/main/style.js'
+    main: './browser/main/index.js'
  },
  output: {
    filename: '[name].js',
-    publicPath: 'http://localhost:8090/assets'
+    publicPath: 'http://localhost:8090/assets',
+    libraryTarget: 'commonjs2'
  },
  devtool: '#inline-source-map',
  module: {
    loaders: [
      {
-        test: /\.jsx$/,
-        loader: 'jsx-loader?insertPragma=React.DOM&harmony'
+        test: /(\.js|\.jsx)?$/,
+        exclude: /(node_modules|bower_components)/,
+        loader: 'babel'
      },
      {
-        test: /\.styl$/,
+        test: /\.styl?$/,
+        exclude: /(node_modules|bower_components)/,
        loader: 'style-loader!css-loader!stylus-loader'
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
      }
    ]
  },
-  externals: {
-    'react': 'React',
-    'react/addons': 'React',
-    'react-router': 'ReactRouter',
-    'ace': 'ace',
-    'reflux': 'Reflux',
-    'moment': 'moment',
-    'markdown-it': 'markdownit'
-  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  externals: [
+    'socket.io-client',
+    'md5',
+    'superagent',
+    'superagent-promise',
+    'react',
+    'redux',
+    'react-redux',
+    'react-router',
+    'lodash',
+    'redbox-react',
+    'react-transform-hmr',
+    'react-transform-catch-errors',
+    'redux-devtools',
+    'redux-devtools/lib/react'
+  ],
  resolve: {
-    extensions: ['', '.js', '.jsx']
-  }
+    extensions: ['', '.js', '.jsx', 'styl']
+  },
+  target: 'atom'
 }