Make HeaderButton able to have Icon or Image

mobile/package.json

@@ -8,7 +8,7 @@
     "react-test-renderer": "16.2.0"
   },
   "scripts": {
-    "start": "react-native start",
+    "bundler": "react-native start",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "test": "node node_modules/jest/bin/jest.js"

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>
+              <Row.Item>{headerButtonsLeft}</Row.Item>
-                <Image source={logoImage}
-                  height={height}
-                  margin={sizeInfo.headerMargin} />
-              </Row.Item>
               <Row.Item grow />
-              <Row.Item>
+              <Row.Item>{headerButtonsRight}</Row.Item>
-                { loggedInUser && <HeaderButton icon='profile' size={height} /> }
-                { loggedInUser && <HeaderButton icon='logout' size={height} onClick={this.handleLogout} /> }
-              </Row.Item>
             </Row>
           </Box>
         </Column.Item>

website/src/ui/HeaderButton.js

@@ -2,21 +2,30 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import style from './HeaderButton.style'
-import { Icon } from 'ui'
+import { Icon, Image } from '.'
+import { sizeInfo } from 'ui/style'
 
 class HeaderButton extends Component {
   static propTypes = {
-    icon: PropTypes.string,
     onClick: PropTypes.func,
-    size: PropTypes.number
+    icon: PropTypes.string,
+    image: PropTypes.object,
   }
 
   render() {
-    const { onClick, icon, size } = this.props
+    const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const { onClick, icon, image } = this.props
+    let content = null
+
+    if (image) {
+      content = (<Image source={image} width={size} height={size} />)
+    } else if (icon) {
+      content = (<Icon name={icon} size={size} />)
+    }
 
     return (
       <button type='button' style={[{ height: size, width: size }, style.base]} onClick={onClick}>
-        <Icon name={icon} size={size} />
+        {content}
       </button>
     )
   }