Have all user info and actions in one place

Author: Pavithra K

components/vote/app-style.scss

@@ -65,12 +65,34 @@
     }
   }
 
+  &__userinfo {
+    outline: none;
+    border: none;
+    background: getColor(elephant);
+    color: white;
+    cursor: pointer;
+    border-radius: 3px;
+    font-size: 13px;
+    display: inline-block;
+    padding: 3px 10px;
+
+    img {
+      height: 25px;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+  }
+
   &__self-info {
     margin-top: 10px;
   }
 
+  &__button-area {
+    margin: 5px 0;
+  }
+
   &__update-button {
-    float: right;
+    
   }
 
   h1 {

components/vote/app.jsx

@@ -188,15 +188,11 @@ export default class VoteApp extends React.Component {
               <Influence className="vote-app__influence-section" type="golden"/>
             </div>
             <div className="vote-app__user-section">
-              {this.renderSelf()}
+              {this.renderSelf(inProgress)}
             </div>
           </div>
         </div>
         { listInfo && <div>
-          {voteAppToken && <button className="vote-app__update-button" disabled={inProgress} onClick={() => {
-            this.updateSelf();
-            this.updateList();
-          }}>Update</button>}
           <h1>{listInfo.displayName}</h1>
           <div>{listInfo.description}</div>
           <ul className="vote-app__items-list">
@@ -265,7 +261,7 @@ export default class VoteApp extends React.Component {
     );
   }
 
-  renderSelf() {
+  renderSelf (inProgress) {
     let { listInfo, selfInfo, isFetchingSelf } = this.state;
     if(!selfInfo) {
       if(isFetchingSelf) {
@@ -276,17 +272,27 @@ export default class VoteApp extends React.Component {
       }}>Login with Github <img src={GithubMark}/> </button></div>;
     } else {
       return <div className="vote-app__self-info">
-        You are logged in as {selfInfo.login}. <button onClick={() => {
-          delete window.localStorage.voteAppToken;
-          window.location.reload();
-        }}>Log out</button>
+        <div className="vote-app__userinfo" >
+          <img alt={selfInfo.login} src={selfInfo.avatar} />
+          {selfInfo.login}
+        </div>
         { listInfo && <ul className="vote-app__currency-list">
           { selfInfo.currencies
             .filter(currency => listInfo.possibleVotes.some(voteSettings => voteSettings.currency === currency.name))
             .map(currency => <li className={"vote-app__currency-" + currency.name} title={`${currency.description}\nYou used ${currency.used} of a total of ${currency.value} ${currency.displayName}.`}>
             {currency.remaining} {currency.displayName}
           </li>) }
         </ul> }
+        <div className="vote-app__button-area">
+          <button className="vote-app__logout-button" onClick={() => {
+            delete window.localStorage.voteAppToken;
+            window.location.reload();
+          }}>Logout</button>
+          <button className="vote-app__update-button" disabled={inProgress} onClick={() => {
+              this.updateSelf();
+              this.updateList();
+            }}>Update</button>
+        </div>
       </div>;
     }
   }