Fixing logout button

website/src/App.js

@@ -9,10 +9,38 @@ import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
 import { sizeInfo } from 'ui/style'
 import { api } from 'src/API'
+import { reactAutoBind } from 'auto-bind2'
 
 export class App extends React.Component {
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+    this.state = {
+      loggedInUser: api.loggedInUser
+    }
+  }
+
+  handleUpdate() {
+    this.setState({ loggedInUser: api.loggedInUser })
+  }
+
+  componentDidMount() {
+    api.addListener('login', this.handleUpdate)
+    api.addListener('logout', this.handleUpdate)
+  }
+
+  componentWillUnmount() {
+    api.removeListener('login', this.handleUpdate)
+    api.removeListener('logout', this.handleUpdate)
+  }
+
+  handleLogout() {
+    api.logout()
+  }
+
   render() {
     const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const { loggedInUser } = this.state
 
     return (
       <Column minHeight='100vh'>
@@ -24,10 +52,10 @@ export class App extends React.Component {
                   height={height}
                   margin={sizeInfo.headerMargin} />
               </Row.Item>
-              <Row.Item grow>&nbsp;</Row.Item>
+              <Row.Item grow />
               <Row.Item>
-                { api.loggedInUser && <HeaderButton icon='profile' size={height} /> }
-                { api.loggedInUser && <HeaderButton icon='logout' size={height} /> }
+                { loggedInUser && <HeaderButton icon='profile' size={height} /> }
+                { loggedInUser && <HeaderButton icon='logout' size={height} onClick={this.handleLogout} /> }
               </Row.Item>
             </Row>
           </Box>

website/src/ui/HeaderButton.style.js

@@ -7,9 +7,11 @@ export default {
     borderWidth: 0,
     padding: '0 0 0 0',
     outline: 'none',
-
     ':hover': {
       background: colorInfo.headerButtonBackgroundHover,
+    },
+    ':active': {
+      background: colorInfo.headerButtonBackgroundActive,
     }
   }
 }

website/src/ui/style.js

@@ -6,6 +6,7 @@ export const colorInfo = {
   buttonBackgroundHover: '#3CB0FD',
   headerButtonBackground: '#FAFAFA',
   headerButtonBackgroundHover: '#DADADA',
+  headerButtonBackgroundActive: '#AAAAAA',
   disabledButtonBackground: '#E0E0E0',
   modalBackground: '#FFFFFF',
   uncheckedCheckbox: '#A0A0A0',