add redirect home -> user(current user), enhance UserNavigation style

Author: Rokt33r

browser/main/HomeContainer/Components/UserNavigator.js

@@ -7,7 +7,7 @@ export default class UserNavigator extends Component {
   renderUserList () {
     var users = this.props.users.map((user, index) => (
       <li key={'user-' + user.id}>
-        <Link to={'/users/' + user.id}>
+        <Link to={'/users/' + user.id} activeClassName='active'>
           <ProfileImage email={user.email} size='44'/>
           <div className='userTooltip'>{user.name}</div>
           <div className='keyLabel'>{'⌘' + (index + 1)}</div>
@@ -26,6 +26,10 @@ export default class UserNavigator extends Component {
     return (
       <div className='UserNavigator'>
         {this.renderUserList()}
+        <button className='createTeamBtn'>
+          +
+          <div className='tooltip'>Create a new team</div>
+        </button>
       </div>
     )
   }

browser/main/index.js

@@ -14,11 +14,11 @@ require('../styles/main/index.styl')
 function onlyUser (state, replaceState) {
   var currentUser = JSON.parse(localStorage.getItem('currentUser'))
   if (currentUser == null) replaceState('login', '/login')
+  if (state.location.pathname === '/') replaceState('user', '/users/' + currentUser.id)
 }
 
 let routes = (
   <Route path='/' component={MainContainer}>
-
     <Route name='login' path='login' component={LoginContainer}/>
     <Route name='signup' path='signup' component={SignupContainer}/>
     <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}/>
@@ -27,11 +27,11 @@ let routes = (
 )
 
 // 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'
+// 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)

browser/styles/main/HomeContainer/ArticleNavigator.styl

@@ -0,0 +1,7 @@
+articleNavBgColor = #353535
+
+.ArticleNavigator
+  background-color articleNavBgColor
+  absolute top bottom
+  left 60px
+  width 200px

browser/styles/main/HomeContainer/UserNavigator.styl

@@ -27,59 +27,55 @@ userAnchorActiveBgColor = white
         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
+          opacity 0.7
+        &:hover
+          img.ProfileImage
+            opacity 1
           .userTooltip
             opacity 1
+        &.active
+          img.ProfileImage
+            opacity 1
         .userTooltip
+          tooltip()
           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
+          margin-left 44px
         .keyLabel
           margin-top -25px
           font-size 0.8em
           color userNavigatorColor
-  button.newTeamButton
+  button.createTeamBtn
     display block
     margin 0 auto
     width 30px
     height 30px
-    circle()
-    border solid 1px lightButtonColor
-    color lightButtonColor
+    border-radius 15px
+    border 2px solid darken(white, 5%)
+    color darken(white, 5%)
     text-align center
     background-image none
     background-color transparent
     box-sizing border-box
-    absolute left bottom right
+    absolute left 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
+    font-size 22px
+    line-height 22px
+    transition 0.1s
     .tooltip
       tooltip()
-      margin-top -22px
-      margin-left 33px
-      font-size 14px
-    &:hover .tooltip
-      opacity 1
+      margin-top -26px
+      margin-left 30px
+    &:hover, &.hover, &:focus, &.focus
+      color white
+      border-color white
+      .tooltip
+        opacity 1
+    &:active
+      background-color brandColor
+      border-color brandColor

browser/styles/main/HomeContainer/index.styl

@@ -1,4 +1,5 @@
 @import './UserNavigator'
 @import './ArticleTopBar'
+@import './ArticleNavigator'
 @import './ArticleList'
 @import './ArticleDetail'

browser/styles/mixins/tooltip.styl

@@ -3,10 +3,9 @@ tooltip()
   z-index popupZIndex
   background-color transparentify(invBackgroundColor, 80%)
   color invTextColor
-  padding 10px
+  padding 10px 15px
   font-size 12px
   line-height 12px
-  border-radius 5px
   white-space nowrap
   opacity 0
   transition 0.1s