From a3d6aa2393616ebe4316df32b02f081ade4fdcd7 Mon Sep 17 00:00:00 2001
From: Barry Low <barrylow@gmail.com>
Date: Mon, 12 Nov 2018 23:26:37 -0800
Subject: [PATCH] Add Team Landing

---
 client/src/index.js                           |  4 ++-
 client/src/views/index.js                     |  2 ++
 client/src/views/landing/index.js             | 33 +++++++++++++++++++
 .../src/views/teams/components/TeamsItem.js   |  4 +--
 4 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 client/src/views/landing/index.js

diff --git a/client/src/index.js b/client/src/index.js
index c5381d25c..a4deab1a1 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -11,6 +11,7 @@ import {
   FinancialBeings,
   Settings,
   Teams,
+  Landing,
   globalStyles
 } from './views'
 
@@ -37,7 +38,8 @@ class App extends Component {
     return (
       <div className='App'>
         <Switch>
-          <Route exact path={`/teams`} component={Teams} />
+          <Route exact path={`/teams`} component={Landing} />
+          <Route exact path={`/browse-teams`} component={Teams} />
           <Route
             exact
             path={`/teams/manage-teams`}
diff --git a/client/src/views/index.js b/client/src/views/index.js
index 13f2200ec..3521019a1 100644
--- a/client/src/views/index.js
+++ b/client/src/views/index.js
@@ -4,6 +4,7 @@ import FinancialBeings from './financial-beings'
 import Settings from './settings'
 import Teams from './teams'
 import AcceptTeamInvite from './teams/AcceptTeamInvite'
+import Landing from './landing'
 
 import { TeamBar } from './common'
 
@@ -17,6 +18,7 @@ export {
   Settings,
   Teams,
   TeamBar,
+  Landing,
   theme,
   globalStyles
 }
diff --git a/client/src/views/landing/index.js b/client/src/views/landing/index.js
new file mode 100644
index 000000000..19840bb22
--- /dev/null
+++ b/client/src/views/landing/index.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { withStyles } from '@material-ui/core/styles'
+
+import { BannerTopBar } from '../common'
+
+const styles = theme => ({
+  container: {
+    width: 'auto',
+    marginTop: theme.spacing.unit * 3,
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: 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 Landing = ({ classes, ...props }) => (
+  <div>
+    <BannerTopBar size='big' title='Teams Module' text='Create and manage your Advanced Algos teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
+  </div>
+)
+
+Landing.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(Landing)
diff --git a/client/src/views/teams/components/TeamsItem.js b/client/src/views/teams/components/TeamsItem.js
index 28ae53a9c..543cf810b 100644
--- a/client/src/views/teams/components/TeamsItem.js
+++ b/client/src/views/teams/components/TeamsItem.js
@@ -36,10 +36,10 @@ export const TeamsItem = ({ classes, team }) => {
           />
           <CardContent className={classes.cardContent}>
             <Grid container>
-              <Grid md={3}>
+              <Grid item md={3}>
                 <img src={avatar} alt={team.name} className={classes.avatar} />
               </Grid>
-              <Grid md={9}>
+              <Grid item md={9}>
                 <Typography gutterBottom variant='h5' component='h2'>
                   {team.name}
                 </Typography>