From 82474b79250db9bfb5c76e4eb6d6c326db7402fa Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Thu, 15 Nov 2018 16:35:40 -0800
Subject: [PATCH] Add landing page text

---
 api/src/index.js                              |  2 +-
 client/src/views/landing/index.js             | 29 ++++++++++++++-
 .../components/ManageTeamsList.js             | 25 +++++++------
 client/src/views/manage-teams/index.js        | 37 +++----------------
 .../views/teams/components/TeamsDetails.js    | 10 ++++-
 .../src/views/teams/components/TeamsList.js   |  2 +-
 client/src/views/teams/index.js               |  2 +-
 7 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/api/src/index.js b/api/src/index.js
index bdac90407..a2e3e32e8 100644
--- a/api/src/index.js
+++ b/api/src/index.js
@@ -32,7 +32,7 @@ const db = new Prisma({
   typeDefs: 'src/generated/prisma.graphql',
   endpoint: process.env.PRISMA_ENDPOINT,
   secret: process.env.PRISMA_SECRET,
-  debug: true
+  debug: false
 })
 
 const app = express()
diff --git a/client/src/views/landing/index.js b/client/src/views/landing/index.js
index d38cf2501..de88b4997 100644
--- a/client/src/views/landing/index.js
+++ b/client/src/views/landing/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
 
 import { BannerTopBar } from '../common'
@@ -21,9 +22,33 @@ const styles = theme => ({
 })
 
 const Landing = ({ classes, ...props }) => (
-  <div>
+  <React.Fragment>
     <BannerTopBar size='big' title='Teams Module' text='Discover, create and manage Advanced Algos teams.' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
-  </div>
+    <div className='homePage container'>
+      <Typography variant='h1' align='center' className='title'>
+        Welcome to the Teams Module!
+      </Typography>
+      <Typography variant='h2' align='center' className='subtitle'>
+        Multidisciplinary groups of humans joining forces to breed financial beings and compete.
+      </Typography>
+      <div className='column'>
+        <Typography align='justify'>
+          One of the core propositions of Advanced Algos revolves around people teaming up to breed financial beings and compete in algorithmic trading competitions. Both developing and competing are team activities.
+        </Typography>
+        <Typography align='justify'>
+          If you are a user of the system but still haven’t joined any teams, the Teams Module is the right place to find one or even create your own.
+        </Typography>
+      </div>
+      <div className='column'>
+        <Typography align='justify'>
+          You may join and participate in as many teams as you wish.
+        </Typography>
+        <Typography align='justify'>
+          When you create your own team, you become the team’s owner and may allow more people in the team at your sole discretion. It has been shown that larger teams tend to become more intelligent.
+        </Typography>
+      </div>
+    </div>
+  </React.Fragment>
 )
 
 Landing.propTypes = {
diff --git a/client/src/views/manage-teams/components/ManageTeamsList.js b/client/src/views/manage-teams/components/ManageTeamsList.js
index 0717dda7f..2975d6bc9 100644
--- a/client/src/views/manage-teams/components/ManageTeamsList.js
+++ b/client/src/views/manage-teams/components/ManageTeamsList.js
@@ -5,6 +5,8 @@ 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 Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
 import { MessageCard } from '@advancedalgos/web-components'
 import { withStyles } from '@material-ui/core/styles'
 
@@ -12,19 +14,11 @@ import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
 import ManageTeamsItem from './ManageTeamsItem'
 import CreateTeamForm from './CreateTeamForm'
+import CreateTeamDialog from './CreateTeamDialog'
 
 import log from '../../../utils/log'
 
 const styles = theme => ({
-  container: {
-    padding: `${theme.spacing.unit * 8}px ${theme.spacing.unit * 6}px`,
-    margin: `${theme.spacing.unit * 1}px 0`
-  },
-  heroContent: {
-    maxWidth: 600,
-    margin: '0 auto',
-    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
-  },
   cardGrid: {
     padding: `${theme.spacing.unit * 8}px 0`
   },
@@ -68,7 +62,7 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
       if (!loading && !error) {
         if (data.teams_TeamsByOwner.length > 0) {
           return (
-            <Grid container spacing={0} direction='column' justify='center' alignItems='center'>
+            <Grid container spacing={8} direction='column' justify='stretch' alignItems='center'>
               {!loading &&
                 data.teams_TeamsByOwner.map(team => (
                   <ManageTeamsItem
@@ -79,12 +73,21 @@ export const ManageTeamsList = ({ classes, user = null, ...props }) => (
                   />
                 ))}
               {errors}
+              <Grid item xs={12} justify='stretch'>
+                <Card className={classes.card}>
+                  <div className={classes.cardDetails}>
+                    <CardContent className={classes.cardContent}>
+                      <CreateTeamDialog />
+                    </CardContent>
+                  </div>
+                </Card>
+              </Grid>
             </Grid>
           )
         } else {
           return (
             <Paper>
-              <Grid container spacing={0} direction='column' justify='center' alignItems='center' className={classes.container}>
+              <Grid container spacing={0} direction='column' justify='stretch' alignItems='center'>
                 <Grid item xs={10}>
                   <Typography variant='h5' align='center'>
                     You don&rsquo;t have any teams. Create one!
diff --git a/client/src/views/manage-teams/index.js b/client/src/views/manage-teams/index.js
index 361449d70..82e0a6e1c 100644
--- a/client/src/views/manage-teams/index.js
+++ b/client/src/views/manage-teams/index.js
@@ -1,40 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { withStyles } from '@material-ui/core/styles'
-import Grid from '@material-ui/core/Grid'
-
 import { BannerTopBar } from '../common'
 import ManageTeamsList from './components/ManageTeamsList'
 
-const styles = theme => ({
-  container: {
-    width: 'auto',
-    marginTop: theme.spacing.unit * 3,
-    marginBottom: theme.spacing.unit * 6,
-    [theme.breakpoints.up(800 + theme.spacing.unit * 3 * 2)]: {
-      width: 800,
-      marginLeft: 'auto',
-      marginRight: 'auto'
-    }
-  }
-})
-
 const ManageTeams = ({ classes, ...props }) => (
-  <div className='container'>
-    <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'
-      justify='center'
-      alignItems='stretch'
-      className={classes.container}
-      spacing={0}
-    >
-      <Grid item spacing={0}>
-        <ManageTeamsList {...props} />
-      </Grid>
-    </Grid>
+  <div>
+    <BannerTopBar size='medium' title='Manage Your Teams' text='Discover, Create and manage Advanced Algos Teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
+    <div className='container'>
+      <ManageTeamsList {...props} />
+    </div>
   </div>
 )
 
@@ -42,4 +17,4 @@ ManageTeams.propTypes = {
   classes: PropTypes.object.isRequired
 }
 
-export default withStyles(styles)(ManageTeams)
+export default ManageTeams
diff --git a/client/src/views/teams/components/TeamsDetails.js b/client/src/views/teams/components/TeamsDetails.js
index d7d751d14..6d1ec3c96 100644
--- a/client/src/views/teams/components/TeamsDetails.js
+++ b/client/src/views/teams/components/TeamsDetails.js
@@ -34,7 +34,7 @@ const styles = theme => ({
     marginBottom: theme.spacing.unit * 3,
     padding: 0,
     [theme.breakpoints.up(800 + theme.spacing.unit * 3 * 2)]: {
-      marginTop: theme.spacing.unit * 6,
+      marginTop: theme.spacing.unit * 3,
       marginBottom: theme.spacing.unit * 6,
       padding: `0 0 ${theme.spacing.unit * 6}px`
     }
@@ -55,6 +55,12 @@ const styles = theme => ({
     maxWidth: 100,
     height: 100,
     margin: `${theme.spacing.unit * 1}px 0 0 ${theme.spacing.unit * 3}px `
+  },
+  backLink: {
+    display: 'block',
+    textDecoration: 'none',
+    margin: `${theme.spacing.unit * 3}px 0 0`,
+    color: theme.palette.secondary.main
   }
 })
 
@@ -75,7 +81,7 @@ const TeamsDetails = ({ classes, team }) => {
     <React.Fragment>
       <CssBaseline />
       <main className={classes.layout}>
-        <Link to='/teams'>&larr; Back to all teams</Link>
+        <Link to='/teams' className={classes.backLink}>&larr; Back to all teams</Link>
         <Paper className={classes.paper}>
           <div className={classes.heroContent}>
             <img src={banner} alt={team.name} className={classes.banner} />
diff --git a/client/src/views/teams/components/TeamsList.js b/client/src/views/teams/components/TeamsList.js
index 0dc6877c9..cefd21ed7 100644
--- a/client/src/views/teams/components/TeamsList.js
+++ b/client/src/views/teams/components/TeamsList.js
@@ -41,7 +41,7 @@ const styles = theme => ({
     margin: '0  1em 1em 0'
   },
   buttonRight: {
-    justifyContent: 'flex-end'
+    textDecoration: 'none'
   }
 })
 
diff --git a/client/src/views/teams/index.js b/client/src/views/teams/index.js
index 91c9a0c40..d68e5658f 100644
--- a/client/src/views/teams/index.js
+++ b/client/src/views/teams/index.js
@@ -31,7 +31,7 @@ const styles = theme => ({
 
 const Teams = ({ classes, match }) => (
   <React.Fragment>
-    <BannerTopBar size='medium' title='Browse Teams' text='Explore Advanced Algos Teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
+    <BannerTopBar size={match.params.slug !== undefined ? 'small' : 'medium'} title='Browse Teams' text='Explore Advanced Algos Teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <div className='container'>
       <TeamsList match={match} />
     </div>