Add Team Landing

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

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
 }

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)

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>