client - wip user account page

client/app/components/content-container/content-container.tsx

@@ -4,6 +4,7 @@ import './content-container.scss';
 
 interface Props {
   className?: string;
+  style?: any;
 }
 
 interface State {}
@@ -15,7 +16,7 @@ export class ContentContainer extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className={`content-container ${this.props.className}`}>
+      <div className={`content-container ${this.props.className}`} style={this.props.style}>
         <div className="border-container">
           <div className="border border__left"/>
           <div className="border border__right"/>

client/app/components/login-button/login-button.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
 import { inject, observer } from 'mobx-react';
+import { Portrait } from '../portrait/portrait';
 import { UserStore } from '../../stores/user-store';
 
-interface Props {
+interface Props extends RouteComponentProps<any> {
   className?: string;
   userStore?: UserStore;
 }
@@ -23,13 +25,28 @@ export class LoginButton extends React.Component<Props, State> {
     window.open(oauthUrl, '_blank', 'resizeable=yes, height=900, width=1200');
   }
 
-  render() {
+  renderPortrait() {
     return (
-      <div className={this.props.className}>
+      <div onClick={() => this.props.history.push('/user-account')} style={{ cursor: 'pointer' }}>
+        <Portrait imageSrc={require('../../assets/Tyren.gif')}/>
+      </div>
+    );
+  }
+
+  renderLoginButton() {
+    return (
+      <div>
         <img src={require('../../assets/login-bot-left.gif')} />
         <img src={require('../../assets/login-bot-login.gif')} style={{ cursor: 'pointer' }} onClick={this.login.bind(this)} />
         <img src={require('../../assets/login-bot-right.gif')} />
       </div>
     );
   }
+  render() {
+    return (
+      <div className={this.props.className}>
+        {this.props.userStore!.user ? this.renderPortrait() : this.renderLoginButton()}
+      </div>
+    );
+  }
 }

client/app/components/portrait/portrait.tsx

@@ -3,6 +3,7 @@ import './portrait.scss';
 
 interface Props {
   imageSrc: any;
+  style?: any;
 }
 
 interface State {
@@ -14,7 +15,7 @@ export class Portrait extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className="portrait">
+      <div className="portrait" style={this.props.style}>
         <img src={require('../../assets/portrait-top.gif')}/>
         <div>
           <img src={require('../../assets/level-circle.gif')} className="portrait__level-circle"/>