実装：PlanetNavigatorのUser iconを押すとそのUser pageに飛ぶ

改善：Profile Photoに影を追加

browser/main/Components/PlanetNavigator.jsx

@@ -1,4 +1,6 @@
 var React = require('react/addons')
+var ReactRouter = require('react-router')
+var Link = ReactRouter.Link
 
 var ProfileImage = require('./ProfileImage')
 
@@ -27,8 +29,10 @@ var PlanetNavigator = React.createClass({
     var users = this.props.currentPlanet.Users.map(function (user) {
       return (
         <li key={'user-' + user.id}>
-          <ProfileImage size='44' email={user.email}/>
+          <Link to='user' params={{userName: user.name}}>
-          <div className='userTooltip'>{user.profileName}</div>
+            <ProfileImage className='userPhoto' size='44' email={user.email}/>
+            <div className='userTooltip'>{user.profileName}</div>
+          </Link>
         </li>
       )
     })
@@ -62,7 +66,7 @@ var PlanetNavigator = React.createClass({
         <div className='usersLabel'>Users</div>
         <ul className='users'>
           {users}
-          <li onClick={this.props.openAddUserModal} className='btn-default'><i className='fa fa-plus'/></li>
+          <li onClick={this.props.openAddUserModal} className='addUserButton btn-default'><i className='fa fa-plus'/></li>
         </ul>
       </div>
     )

browser/main/Containers/UserContainer.jsx

@@ -6,6 +6,7 @@ var Link = ReactRouter.Link
 var request = require('superagent')
 
 var UserNavigator = require('../Components/UserNavigator')
+var ProfileImage = require('../Components/ProfileImage')
 
 var AuthStore = require('../Stores/AuthStore')
 var PlanetStore = require('../Stores/PlanetStore')
@@ -130,7 +131,7 @@ module.exports = React.createClass({
           <div className='UserHome'>
             <h1>User Profile</h1>
             <div className='userProfile'>
-              <img className='userPhoto' width='150' height='150' src='../vendor/dummy.jpg'/>
+              <ProfileImage className='userPhoto' size='150' email={user.email}/>
               <div className='userIntro'>
                 <div className='userProfileName'>{user.profileName}</div>
                 <Link className='userName' to='user' params={{userName: user.name}}>{user.name}</Link>

browser/styles/main/containers/PlanetContainer.styl

@@ -132,9 +132,13 @@
       width 44px
       height 44px
       float left
-      circle()
       margin 3px
       line-height 44px
+      .userPhoto
+        circle()
+        width 44px
+        height 44px
+        box-shadow 1px 1px 4px 0px #C5C5C5
       .userTooltip
         position absolute
         z-index 500
@@ -149,6 +153,8 @@
         pointer-events none
       &:hover .userTooltip
         opacity 1
+      &.addUserButton
+        circle()
 
 
 .PlanetArticleList

browser/styles/main/containers/UserContainer.styl

@@ -14,10 +14,10 @@
       padding 0
       border none
       cursor pointer
+      box-sizing border-box
       img
         transition 0.1s
-        opacity 0.8
+        opacity 0.9
-      box-sizing border-box
       &.active, &:active, &.focus, &:focus, &.hover, &:hover
         img
           opacity 1

browser/styles/shared/modal.styl

@@ -246,6 +246,7 @@
         .userPhoto
           margin-bottom 25px
           circle()
+          box-shadow 1px 1px 4px 0px #C5C5C5
 
   .PlanetSettingModal.modal
     .settingBody
@@ -295,6 +296,7 @@
               width 44px
               height 44px
               circle()
+              box-shadow 1px 1px 4px 0px #C5C5C5
             .userName
               float left
               height 44px

browser/styles/vars.styl

@@ -15,6 +15,8 @@ textColor = #4D4D4D
 backgroundColor= white
 fontSize= 16px
 
+shadowColor= #C5C5C5
+
 invBackgroundColor = #4C4C4C
 invTextColor = white