Add landing page text

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()

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 = {

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!

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

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} />

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'
   }
 })
 

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>