From 45301ca7f5180e307ca041683f3f6409e8733c50 Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Fri, 9 Nov 2018 08:36:41 -0800
Subject: [PATCH] Update TopBar to BannerTopBar

---
 .../views/common/components/BannerTopBar.js   | 26 +++++++++
 client/src/views/common/components/TopBar.js  | 50 ----------------
 client/src/views/common/index.js              |  4 +-
 .../components/ManageFBList.js                | 57 ++++++++++++-------
 client/src/views/financial-beings/index.js    |  4 +-
 .../components/ManageTeamsList.js             | 28 +++++----
 client/src/views/manage-teams/index.js        |  4 +-
 client/src/views/team-members/index.js        |  4 +-
 client/src/views/teams/index.js               |  4 +-
 9 files changed, 85 insertions(+), 96 deletions(-)
 create mode 100644 client/src/views/common/components/BannerTopBar.js
 delete mode 100644 client/src/views/common/components/TopBar.js

diff --git a/client/src/views/common/components/BannerTopBar.js b/client/src/views/common/components/BannerTopBar.js
new file mode 100644
index 000000000..866cbfe2a
--- /dev/null
+++ b/client/src/views/common/components/BannerTopBar.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Typography from '@material-ui/core/Typography'
+
+const BannerTopBar = ({
+  size,
+  backgroundUrl,
+  title,
+  text
+}) => (
+  <div className={`bannerTopBar ${size}`} style={backgroundUrl ? { backgroundImage: `url(${backgroundUrl})` } : {}}>
+    <div className='caption'>
+      <Typography className='title' variant='h1' align='center'>{title}</Typography>
+      <Typography className='text' variant='h2' align='center'>{text}</Typography>
+    </div>
+  </div>
+)
+
+BannerTopBar.propTypes = {
+  backgroundUrl: PropTypes.string,
+  size: PropTypes.string,
+  title: PropTypes.string,
+  text: PropTypes.string
+}
+
+export default BannerTopBar
diff --git a/client/src/views/common/components/TopBar.js b/client/src/views/common/components/TopBar.js
deleted file mode 100644
index c7320b1f8..000000000
--- a/client/src/views/common/components/TopBar.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Typography } from '@material-ui/core'
-import { withStyles } from '@material-ui/core/styles'
-
-import styles from './TopBarStyles'
-
-class TopBar extends React.Component {
-  render () {
-    const {
-      classes,
-      size,
-      title,
-      text
-    } = this.props
-    if (size === 'big') {
-      return (
-        <div className={classes.rootBig}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='h5' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subtitle1' align='center'>{text}</Typography>
-          </div>
-        </div>
-      )
-    }
-    if (size === 'medium') {
-      return (
-        <div className={classes.rootMedium}>
-          <div className={classes.captions}>
-            <Typography className={classes.title} variant='h5' align='center'>{title}</Typography>
-            <Typography className={classes.text} variant='subtitle1' align='center'>{text}</Typography>
-          </div>
-        </div>
-      )
-    }
-    return (
-      <div className={classes.rootSmall} />
-    )
-  }
-}
-
-TopBar.propTypes = {
-  classes: PropTypes.object.isRequired,
-  size: PropTypes.string,
-  title: PropTypes.string,
-  text: PropTypes.string
-}
-
-export default withStyles(styles)(TopBar)
diff --git a/client/src/views/common/index.js b/client/src/views/common/index.js
index 113554cae..cc64107b2 100644
--- a/client/src/views/common/index.js
+++ b/client/src/views/common/index.js
@@ -1,4 +1,4 @@
 import TeamBar from './components/TeamBar'
-import TopBar from './components/TopBar'
+import BannerTopBar from './components/BannerTopBar'
 
-export { TeamBar, TopBar }
+export { TeamBar, BannerTopBar }
diff --git a/client/src/views/financial-beings/components/ManageFBList.js b/client/src/views/financial-beings/components/ManageFBList.js
index 026385831..9893f4812 100644
--- a/client/src/views/financial-beings/components/ManageFBList.js
+++ b/client/src/views/financial-beings/components/ManageFBList.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { Query } from 'react-apollo'
 
 import Grid from '@material-ui/core/Grid'
+import Paper from '@material-ui/core/Paper'
+import Typography from '@material-ui/core/Typography'
 import { MessageCard } from '@advancedalgos/web-components'
 import { withStyles } from '@material-ui/core/styles'
 
@@ -61,36 +63,49 @@ export const ManageFBList = ({ classes }) => (
       if (!loading && !error) {
         if (data.teams_TeamsByOwner.length > 0) {
           return (
-            <React.Fragment>
-              <Grid container spacing={40}>
-                {!loading &&
-                  data.teams_TeamsByOwner.map(team => (
-                    <ManageFBItem
-                      key={team.id}
-                      team={team}
-                      classes={classes}
-                    />
-                  ))}
-                {errors}
-              </Grid>
-            </React.Fragment>
+            <Grid container spacing={0} direction='column' justify='center' alignItems='center'>
+              {!loading &&
+                data.teams_TeamsByOwner.map(team => (
+                  <ManageFBItem
+                    key={team.id}
+                    team={team}
+                    classes={classes}
+                  />
+                ))}
+              {errors}
+            </Grid>
           )
         } else {
           return (
-            <Grid container spacing={40}>
-              <Grid item xs={12}>
-                <MessageCard message='No financial beings yet — Create a team first!' />
-                {errors !== null && <MessageCard message={errors} />}
+            <Paper>
+              <Grid container spacing={0} direction='column' justify='center' alignItems='center' className={classes.container}>
+                <Grid item xs={10}>
+                  <Typography variant='h5' align='center'>
+                    You don&rsquo;t have any financial being. To create one, create a team first!
+                  </Typography>
+                  <Typography variant='body2' align='center' gutterBottom>
+                    After you create a team, a default trading algobot will be cloned and added to your team so
+                    that you can begin experimenting right away.
+                  </Typography>
+                </Grid>
               </Grid>
-            </Grid>
+            </Paper>
           )
         }
       } else {
         return (
-          <Grid container spacing={40}>
+          <Grid spacing={0} direction='column' justify='center' alignItems='center'>
             <Grid item xs={12}>
-              <MessageCard message='Loading...' />
-              {errors !== null && <MessageCard message={errors} />}
+              {errors === null &&
+                <Typography variant='h5' align='center' gutterBottom>
+                  Loading...
+                </Typography>
+              }
+              {errors !== null &&
+                <Typography variant='h5' align='center' gutterBottom>
+                  {errors}
+                </Typography>
+              }
             </Grid>
           </Grid>
         )
diff --git a/client/src/views/financial-beings/index.js b/client/src/views/financial-beings/index.js
index e23c46ce4..a3cf773ad 100644
--- a/client/src/views/financial-beings/index.js
+++ b/client/src/views/financial-beings/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { withStyles } from '@material-ui/core/styles'
 
-import { TopBar } from '../common'
+import { BannerTopBar } from '../common'
 import ManageFBList from './components/ManageFBList'
 
 const styles = theme => ({
@@ -14,7 +14,7 @@ const styles = theme => ({
 
 const FinancialBeings = ({ classes }) => (
   <div>
-    <TopBar size='medium' title='Manage Your Financial Beings' text='Manage your Advanced Algos Financial Beings' />
+    <BannerTopBar size='medium' title='Manage Your Financial Beings' text='Manage your Advanced Algos Financial Beings' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <ManageFBList />
   </div>
 )
diff --git a/client/src/views/manage-teams/components/ManageTeamsList.js b/client/src/views/manage-teams/components/ManageTeamsList.js
index 74bc3fb3e..0717dda7f 100644
--- a/client/src/views/manage-teams/components/ManageTeamsList.js
+++ b/client/src/views/manage-teams/components/ManageTeamsList.js
@@ -68,20 +68,18 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
       if (!loading && !error) {
         if (data.teams_TeamsByOwner.length > 0) {
           return (
-            <React.Fragment>
-              <Grid container spacing={0} direction='column' justify='center' alignItems='center'>
-                {!loading &&
-                  data.teams_TeamsByOwner.map(team => (
-                    <ManageTeamsItem
-                      key={team.id}
-                      team={team}
-                      classes={classes}
-                      {...props}
-                    />
-                  ))}
-                {errors}
-              </Grid>
-            </React.Fragment>
+            <Grid container spacing={0} direction='column' justify='center' alignItems='center'>
+              {!loading &&
+                data.teams_TeamsByOwner.map(team => (
+                  <ManageTeamsItem
+                    key={team.id}
+                    team={team}
+                    classes={classes}
+                    {...props}
+                  />
+                ))}
+              {errors}
+            </Grid>
           )
         } else {
           return (
@@ -94,7 +92,7 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
                   <Typography variant='body2' align='center' gutterBottom>
                     To begin developing on the Advanced Algos platform, as well as participate in Algobot competitions,
                     you'll need to create a team. A default trading algobot will be cloned and added to your team so
-                    that you can begin experimenting right away..
+                    that you can begin experimenting right away.
                   </Typography>
                   <CreateTeamForm />
                 </Grid>
diff --git a/client/src/views/manage-teams/index.js b/client/src/views/manage-teams/index.js
index b70be5273..1e5a72f92 100644
--- a/client/src/views/manage-teams/index.js
+++ b/client/src/views/manage-teams/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
 
-import { TopBar } from '../common'
+import { BannerTopBar } from '../common'
 import ManageTeamsList from './components/ManageTeamsList'
 
 const styles = theme => ({
@@ -24,7 +24,7 @@ const styles = theme => ({
 
 const ManageTeams = ({ classes, ...props }) => (
   <div>
-    <TopBar size='medium' title='Manage Your Teams' text='Create and manage your Advanced Algos teams' />
+    <BannerTopBar size='medium' title='Manage Your Teams' text='Create and manage your Advanced Algos teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <Grid
       container
       direction='column'
diff --git a/client/src/views/team-members/index.js b/client/src/views/team-members/index.js
index a5c4c79c7..35349f402 100644
--- a/client/src/views/team-members/index.js
+++ b/client/src/views/team-members/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 
 // import ManageTeamMembersList from './components/ManageTeamMembersList'
-import { TopBar } from '../common'
+import { BannerTopBar } from '../common'
 
 const styles = theme => ({
   tableContainer: {
@@ -14,7 +14,7 @@ const styles = theme => ({
 
 const TeamMembers = ({ classes }) => (
   <div>
-    <TopBar size='big' title='Team Members' text='Coming soon. Invite and manage team members.' />
+    <BannerTopBar size='big' title='Team Members' text='Coming soon. Invite and manage team members.' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
   </div>
 )
 
diff --git a/client/src/views/teams/index.js b/client/src/views/teams/index.js
index 07034a796..9d6b4fa9d 100644
--- a/client/src/views/teams/index.js
+++ b/client/src/views/teams/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { withStyles } from '@material-ui/core/styles'
 
-import { TopBar } from '../common'
+import { BannerTopBar } from '../common'
 import TeamsList from './components/TeamsList'
 
 const styles = theme => ({
@@ -31,7 +31,7 @@ const styles = theme => ({
 
 const Teams = ({ classes, match }) => (
   <React.Fragment>
-    <TopBar size='medium' title='Browse Teams' text='Explore Advanced Algos Teams' />
+    <BannerTopBar size='medium' title='Browse Teams' text='Explore Advanced Algos Teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <main className={classes.layout}>
       <TeamsList match={match} />
     </main>