Make HeaderButton able to have Icon or Image

website/src/App.js

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { Component, Fragment } from 'react'
 import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRoute } from './Auth'
 import { Home } from './Home'
 import { Profile } from './Profile'
 import { Users } from './Users'
-import { HeaderButton, Column, Row, Image, Text, Box } from 'ui'
+import { HeaderButton, Column, Row, Text, Box } from 'ui'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
@@ -11,7 +11,7 @@ import { sizeInfo } from 'ui/style'
 import { api } from 'src/API'
 import { reactAutoBind } from 'auto-bind2'
 
-export class App extends React.Component {
+export class App extends Component {
   constructor(props) {
     super(props)
     reactAutoBind(this)
@@ -39,24 +39,30 @@ export class App extends React.Component {
   }
 
   render() {
-    const height = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
     const { loggedInUser } = this.state
+    let headerButtonsRight = null
+    let headerButtonsLeft = null
+
+    if (loggedInUser) {
+      headerButtonsLeft = (
+        <HeaderButton image={logoImage} />
+      )
+      headerButtonsRight = (
+        <Fragment>
+          <HeaderButton icon='profile' />
+          <HeaderButton icon='logout' onClick={this.handleLogout} />
+        </Fragment>
+      )
+    }
 
     return (
       <Column minHeight='100vh'>
         <Column.Item height={sizeInfo.headerHeight - sizeInfo.headerBorderWidth}>
           <Box color='#FAFAFA' borderBottom={`${sizeInfo.headerBorderWidth}px solid #B2B2B2`}>
             <Row minWidth='100vw'>
-              <Row.Item>
-                <Image source={logoImage}
-                  height={height}
-                  margin={sizeInfo.headerMargin} />
-              </Row.Item>
+              <Row.Item>{headerButtonsLeft}</Row.Item>
               <Row.Item grow />
-              <Row.Item>
-                { loggedInUser && <HeaderButton icon='profile' size={height} /> }
-                { loggedInUser && <HeaderButton icon='logout' size={height} onClick={this.handleLogout} /> }
-              </Row.Item>
+              <Row.Item>{headerButtonsRight}</Row.Item>
             </Row>
           </Box>
         </Column.Item>