Major refactor

client/src/views/callback/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
 
-const Callback = () => (<div>Authenticating...</div>)
+const Callback = () => <div>Authenticating...</div>
 
 export default Callback

client/src/views/dashboard/components/CreateTeam.js

@@ -0,0 +1,135 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { withRouter } from 'react-router-dom'
+import Button from '@material-ui/core/Button'
+import AddIcon from '@material-ui/icons/Add'
+import TextField from '@material-ui/core/TextField'
+import Dialog from '@material-ui/core/Dialog'
+import DialogActions from '@material-ui/core/DialogActions'
+import DialogContent from '@material-ui/core/DialogContent'
+import DialogContentText from '@material-ui/core/DialogContentText'
+import DialogTitle from '@material-ui/core/DialogTitle'
+import Typography from '@material-ui/core/Typography'
+
+import { getItem } from '../../../utils/local-storage'
+
+export class CreateTeamDialog extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleClickOpen = this.handleClickOpen.bind(this)
+    this.handleClose = this.handleClose.bind(this)
+    this.handlePost = this.handlePost.bind(this)
+    this.slugify = this.slugify.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+
+    this.state = {
+      open: false,
+      name: ''
+    }
+  }
+
+  handleClickOpen () {
+    this.setState({ open: true })
+  }
+
+  handleClose () {
+    this.setState({ open: false })
+  }
+
+  handleChange (e) {
+    this.setState({ name: e.target.value })
+  }
+
+  render () {
+    console.log(this.props)
+    return (
+      <div>
+        <Button
+          variant='extendedFab'
+          aria-label='AddTeam'
+          className={this.props.classes.button}
+          onClick={this.handleClickOpen}
+        >
+          <AddIcon className={this.props.classes.extendedIcon} />
+          <Typography variant='subheading'>
+            Create A Team
+          </Typography>
+        </Button>
+        <Dialog
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby='form-dialog-title'
+        >
+          <DialogTitle id='form-dialog-title'>Subscribe</DialogTitle>
+          <DialogContent>
+            <Typography variant='subheading'>
+              Team Creation
+            </Typography>
+            <DialogContentText>
+              Name your team!
+            </DialogContentText>
+            <TextField
+              autoFocus
+              margin='dense'
+              id='teamname'
+              label='Team Name'
+              type='text'
+              fullWidth
+              value={this.state.name}
+              onChange={this.handleChange}
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color='primary'>
+              Cancel
+            </Button>
+            <Button onClick={this.handlePost} color='primary'>
+              Create Team
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    )
+  }
+
+  slugify (string) {
+    const a = 'àáäâãåèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'
+    const b = 'aaaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'
+    const p = new RegExp(a.split('').join('|'), 'g')
+
+    return string.toString().toLowerCase()
+      .replace(/\s+/g, '-') // Replace spaces with -
+      .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
+      .replace(/&/g, '-and-') // Replace & with 'and'
+      .replace(/[^\w-]+/g, '') // Remove all non-word characters
+      .replace(/--+/g, '-') // Replace multiple - with single -
+      .replace(/^-+/, '') // Trim - from start of text
+      .replace(/-+$/, '') // Trim - from end of text
+  }
+
+  async handlePost (e) {
+    e.preventDefault()
+    const { name } = this.state
+    const slug = this.slugify(name)
+    const currentUser = await getItem('user')
+    let authId = JSON.parse(currentUser)
+    authId = authId.sub
+    console.log('createPage cu:', JSON.parse(currentUser))
+    await this.props.createTeamMutation({
+      variables: {
+        name,
+        slug,
+        owner: authId
+      }
+    })
+    this.setState({ open: false })
+  }
+}
+
+CreateTeamDialog.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.function
+}
+
+export default withRouter(CreateTeamDialog)

client/src/views/dashboard/components/DrawerLinks.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import GroupIcon from '@material-ui/icons/Group'
+import DashboardIcon from '@material-ui/icons/Dashboard'
+import SettingsIcon from '@material-ui/icons/Settings'
+import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle'
+import LibraryBooksIcon from '@material-ui/icons/LibraryBooks'
+import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAlt'
+import AndroidIcon from '@material-ui/icons/Android'
+
+const DashboardLink = props => <Link to='/dashboard' {...props} />
+const TeamsLink = props => <Link to='/manage-team' {...props} />
+const MembersLink = props => <Link to='/members' {...props} />
+const SettingsLink = props => <Link to='/settings' {...props} />
+
+export const MainDrawerItems = (
+  <div>
+    <ListItem button component={DashboardLink}>
+      <ListItemIcon>
+        <DashboardIcon />
+      </ListItemIcon>
+      <ListItemText primary='Dashboard' />
+    </ListItem>
+    <ListItem button component={TeamsLink}>
+      <ListItemIcon>
+        <GroupIcon />
+      </ListItemIcon>
+      <ListItemText primary='Teams' />
+    </ListItem>
+    <ListItem button component={MembersLink}>
+      <ListItemIcon>
+        <SupervisedUserCircleIcon />
+      </ListItemIcon>
+      <ListItemText primary='Members' />
+    </ListItem>
+    <ListItem button component={TeamsLink}>
+      <ListItemIcon>
+        <AndroidIcon />
+      </ListItemIcon>
+      <ListItemText primary='Financial Beings' />
+    </ListItem>
+    <ListItem button component={SettingsLink}>
+      <ListItemIcon>
+        <SettingsIcon />
+      </ListItemIcon>
+      <ListItemText primary='Settings' />
+    </ListItem>
+  </div>
+)
+
+export const SecondaryDrawerItems = (
+  <div>
+    <ListItem button>
+      <ListItemIcon>
+        <LibraryBooksIcon />
+      </ListItemIcon>
+      <ListItemText primary='Documentation' />
+    </ListItem>
+    <ListItem button>
+      <ListItemIcon>
+        <SentimentSatisfiedAltIcon />
+      </ListItemIcon>
+      <ListItemText primary='Support' />
+    </ListItem>
+  </div>
+)
+
+export default MainDrawerItems

client/src/views/dashboard/components/TeamTable.js

@@ -0,0 +1,54 @@
+import React from 'react'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableCell from '@material-ui/core/TableCell'
+import TableHead from '@material-ui/core/TableHead'
+import TableRow from '@material-ui/core/TableRow'
+import Paper from '@material-ui/core/Paper'
+
+let id = 0
+const createData = (name, calories, fat, carbs, protein) => {
+  id += 1
+  return { id, name, calories, fat, carbs, protein }
+}
+
+const data = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9)
+]
+
+export const TeamTable = () => (
+  <Paper>
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>Dessert (100g serving)</TableCell>
+          <TableCell numeric>Calories</TableCell>
+          <TableCell numeric>Fat (g)</TableCell>
+          <TableCell numeric>Carbs (g)</TableCell>
+          <TableCell numeric>Protein (g)</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map(n => {
+          return (
+            <TableRow key={n.id}>
+              <TableCell component='th' scope='row'>
+                {n.name}
+              </TableCell>
+              <TableCell numeric>{n.calories}</TableCell>
+              <TableCell numeric>{n.fat}</TableCell>
+              <TableCell numeric>{n.carbs}</TableCell>
+              <TableCell numeric>{n.protein}</TableCell>
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  </Paper>
+)
+
+export default TeamTable

client/src/views/dashboard/index.js

@@ -0,0 +1,216 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import Divider from '@material-ui/core/Divider'
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardActions from '@material-ui/core/CardActions'
+import Button from '@material-ui/core/Button'
+
+import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
+import { CreateTeamDialog } from './components/CreateTeam'
+
+import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
+
+import aaweb from '../../assets/AlgonetWebPlatform.jpg'
+
+const drawerWidth = 240
+
+const styles = theme => ({
+  root: {
+    display: 'flex'
+  },
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1
+  },
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+    whiteSpace: 'nowrap',
+    zIndex: 1000
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing.unit * 3,
+    height: '100vh',
+    overflow: 'auto',
+    width: `calc(90% - ${drawerWidth}px)`
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  tableContainer: {
+    height: 320
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  aawebMedia: {
+    width: '100%',
+    height: 320
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit
+  }
+})
+
+const Dashboard = ({ classes, createTeamMutation, ...props }) => (
+  <div className={classes.root}>
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: classes.drawerPaper
+      }}
+    >
+      <div className={classes.appBarSpacer} />
+      <List>{MainDrawerItems}</List>
+      <Divider />
+      <List>{SecondaryDrawerItems}</List>
+    </Drawer>
+    <main className={classes.content}>
+      <div className={classes.appBarSpacer} />
+      <Grid container spacing={24} className={classes.cardGrid}>
+        <Grid item md={6}>
+          <Typography variant='display1' gutterBottom>
+            Teams
+          </Typography>
+          <Grid container spacing={24} className={classes.cardGrid}>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardContent className={classes.createCardContent}>
+                    <CreateTeamDialog classes={classes} createTeamMutation={createTeamMutation} />
+                  </CardContent>
+                </div>
+              </Card>
+            </Grid>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardMedia
+                    className={classes.cardMedia}
+                    image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
+                    title='Image title'
+                  />
+                  <CardContent className={classes.cardContent}>
+                    <Typography variant='headline'>Goodester</Typography>
+                    <Typography variant='subheading' color='textSecondary'>
+                      09.15.2018
+                    </Typography>
+                    <Typography variant='subheading' paragraph>
+                      Members:6
+                    </Typography>
+                    <Typography variant='subheading' color='primary'>
+                      Now recruiting!
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button
+                      size='small'
+                      color='primary'
+                      className={classes.buttonRight}
+                    >
+                      Details
+                    </Button>
+                  </CardActions>
+                </div>
+              </Card>
+            </Grid>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardMedia
+                    className={classes.cardMedia}
+                    image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
+                    title='Image title'
+                  />
+                  <CardContent className={classes.cardContent}>
+                    <Typography variant='headline'>Goodester</Typography>
+                    <Typography variant='subheading' color='textSecondary'>
+                      09.15.2018
+                    </Typography>
+                    <Typography variant='subheading' paragraph>
+                      Members:6
+                    </Typography>
+                    <Typography variant='subheading' color='primary'>
+                      Now recruiting!
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button
+                      size='small'
+                      color='primary'
+                      className={classes.buttonRight}
+                    >
+                      Details
+                    </Button>
+                  </CardActions>
+                </div>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item md={6}>
+          <Typography variant='display1' gutterBottom>
+            Develop
+          </Typography>
+          <Grid container spacing={24} className={classes.cardGrid}>
+            <Grid item md={12}>
+              <Card className={classes.mainFeaturedPost}>
+                <CardMedia
+                  className={classes.aawebMedia}
+                  image={aaweb}
+                  title='Image title'
+                />
+                <CardContent>
+                  <Typography variant='title' color='inherit' aligh='right'>
+                    <Button>Start Developing ></Button>
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </main>
+  </div>
+)
+
+Dashboard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.function
+}
+
+const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
+  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
+})(Dashboard)
+
+export default withStyles(styles)(CreateTeamDialogWithMutation)

client/src/views/dashboard/members.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import Divider from '@material-ui/core/Divider'
+
+import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
+import { TeamTable } from './components/TeamTable'
+
+import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
+
+const drawerWidth = 240
+
+const styles = theme => ({
+  root: {
+    display: 'flex'
+  },
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1
+  },
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+    whiteSpace: 'nowrap',
+    zIndex: 1000
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing.unit * 3,
+    height: '100vh',
+    overflow: 'auto',
+    width: `calc(90% - ${drawerWidth}px)`
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  tableContainer: {
+    height: 320
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  aawebMedia: {
+    width: '100%',
+    height: 320
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit
+  }
+})
+
+const Dashboard = ({ classes, createTeamMutation, ...props }) => (
+  <div className={classes.root}>
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: classes.drawerPaper
+      }}
+    >
+      <div className={classes.appBarSpacer} />
+      <List>{MainDrawerItems}</List>
+      <Divider />
+      <List>{SecondaryDrawerItems}</List>
+    </Drawer>
+    <main className={classes.content}>
+      <div className={classes.appBarSpacer} />
+      <Typography variant='display1' gutterBottom>
+        Members
+      </Typography>
+      <div className={classes.tableContainer}>
+        <TeamTable />
+      </div>
+    </main>
+  </div>
+)
+
+Dashboard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.function
+}
+
+const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
+  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
+})(Dashboard)
+
+export default withStyles(styles)(CreateTeamDialogWithMutation)

client/src/views/dashboard/settings.js

@@ -0,0 +1,210 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import Divider from '@material-ui/core/Divider'
+import Grid from '@material-ui/core/Grid'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import CardMedia from '@material-ui/core/CardMedia'
+import CardActions from '@material-ui/core/CardActions'
+import Button from '@material-ui/core/Button'
+
+import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
+import { TeamTable } from './components/TeamTable'
+import { CreateTeamDialog } from './components/CreateTeam'
+
+import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
+
+const drawerWidth = 240
+
+const styles = theme => ({
+  root: {
+    display: 'flex'
+  },
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1
+  },
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+    whiteSpace: 'nowrap',
+    zIndex: 1000
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing.unit * 3,
+    height: '100vh',
+    overflow: 'auto',
+    width: `calc(90% - ${drawerWidth}px)`
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  tableContainer: {
+    height: 320
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  aawebMedia: {
+    width: '100%',
+    height: 320
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit
+  }
+})
+
+const Dashboard = ({ classes, createTeamMutation, ...props }) => (
+  <div className={classes.root}>
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: classes.drawerPaper
+      }}
+    >
+      <div className={classes.appBarSpacer} />
+      <List>{MainDrawerItems}</List>
+      <Divider />
+      <List>{SecondaryDrawerItems}</List>
+    </Drawer>
+    <main className={classes.content}>
+      <div className={classes.appBarSpacer} />
+      <Grid container spacing={24} className={classes.cardGrid}>
+        <Grid item md={6}>
+          <Typography variant='display1' gutterBottom>
+            Settings
+          </Typography>
+          <Grid container spacing={24} className={classes.cardGrid}>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardContent className={classes.createCardContent}>
+                    <CreateTeamDialog classes={classes} createTeamMutation={createTeamMutation} />
+                  </CardContent>
+                </div>
+              </Card>
+            </Grid>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardMedia
+                    className={classes.cardMedia}
+                    image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
+                    title='Image title'
+                  />
+                  <CardContent className={classes.cardContent}>
+                    <Typography variant='headline'>Goodester</Typography>
+                    <Typography variant='subheading' color='textSecondary'>
+                      09.15.2018
+                    </Typography>
+                    <Typography variant='subheading' paragraph>
+                      Members:6
+                    </Typography>
+                    <Typography variant='subheading' color='primary'>
+                      Now recruiting!
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button
+                      size='small'
+                      color='primary'
+                      className={classes.buttonRight}
+                    >
+                      Details
+                    </Button>
+                  </CardActions>
+                </div>
+              </Card>
+            </Grid>
+            <Grid item>
+              <Card className={classes.card}>
+                <div className={classes.cardDetails}>
+                  <CardMedia
+                    className={classes.cardMedia}
+                    image='data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E' // eslint-disable-line max-len
+                    title='Image title'
+                  />
+                  <CardContent className={classes.cardContent}>
+                    <Typography variant='headline'>Goodester</Typography>
+                    <Typography variant='subheading' color='textSecondary'>
+                      09.15.2018
+                    </Typography>
+                    <Typography variant='subheading' paragraph>
+                      Members:6
+                    </Typography>
+                    <Typography variant='subheading' color='primary'>
+                      Now recruiting!
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button
+                      size='small'
+                      color='primary'
+                      className={classes.buttonRight}
+                    >
+                      Details
+                    </Button>
+                  </CardActions>
+                </div>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item md={6}>
+          <Typography variant='display1' gutterBottom>
+            Notifications
+          </Typography>
+          <Grid container spacing={24} className={classes.cardGrid}>
+            <Grid item md={12}>
+              <Card className={classes.mainFeaturedPost}>
+                <CardContent>
+                  <Typography variant='title' color='inherit' aligh='right'>
+                    <Button>Start Developing ></Button>
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    </main>
+  </div>
+)
+
+Dashboard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.function
+}
+
+const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
+  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
+})(Dashboard)
+
+export default withStyles(styles)(CreateTeamDialogWithMutation)

client/src/views/dashboard/teams.js

@@ -0,0 +1,111 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'react-apollo'
+
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import Divider from '@material-ui/core/Divider'
+
+import { MainDrawerItems, SecondaryDrawerItems } from './components/DrawerLinks'
+import { TeamTable } from './components/TeamTable'
+
+import { CreateTeamMutation } from '../../graphql/teams/CreateTeamMutation'
+
+const drawerWidth = 240
+
+const styles = theme => ({
+  root: {
+    display: 'flex'
+  },
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 1
+  },
+  drawerPaper: {
+    position: 'relative',
+    width: drawerWidth,
+    whiteSpace: 'nowrap',
+    zIndex: 1000
+  },
+  content: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing.unit * 3,
+    height: '100vh',
+    overflow: 'auto',
+    width: `calc(90% - ${drawerWidth}px)`
+  },
+  appBarSpacer: theme.mixins.toolbar,
+  tableContainer: {
+    height: 320
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 160,
+    height: 160,
+    justifyContent: 'flex-start'
+  },
+  aawebMedia: {
+    width: '100%',
+    height: 320
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit
+  }
+})
+
+const Dashboard = ({ classes, createTeamMutation, ...props }) => (
+  <div className={classes.root}>
+    <Drawer
+      variant='permanent'
+      classes={{
+        paper: classes.drawerPaper
+      }}
+    >
+      <div className={classes.appBarSpacer} />
+      <List>{MainDrawerItems}</List>
+      <Divider />
+      <List>{SecondaryDrawerItems}</List>
+    </Drawer>
+    <main className={classes.content}>
+      <div className={classes.appBarSpacer} />
+      <Typography variant='display1' gutterBottom>
+        Teams
+      </Typography>
+      <div className={classes.tableContainer}>
+        <TeamTable />
+      </div>
+    </main>
+  </div>
+)
+
+Dashboard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  createTeamMutation: PropTypes.function
+}
+
+const CreateTeamDialogWithMutation = graphql(CreateTeamMutation, {
+  name: 'createTeamMutation' // name of the injected prop: this.props.createTeamMutation...
+})(Dashboard)
+
+export default withStyles(styles)(CreateTeamDialogWithMutation)

client/src/views/footer/index.js

@@ -1,88 +1,118 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { NavLink } from 'react-router-dom'
+import { withStyles } from '@material-ui/core/styles'
+import classNames from 'classnames'
+import Typography from '@material-ui/core/Typography'
+import Grid from '@material-ui/core/Grid'
 
-const Footer = () => {
+import aalogo from '../../assets/logos/advanced-algos/aa-logo-vert.svg'
+
+const styles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  layout: {
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: {
+      width: 1200,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  },
+  footer: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    padding: `${theme.spacing.unit * 6}px 0`
+  },
+  footerContainer: {
+    marginRight: theme.spacing.unit * 8,
+    marginLeft: theme.spacing.unit * 8
+  },
+  footerLink: {
+    textDecoration: 'none'
+  }
+})
+
+const Footer = ({ classes }) => {
   return (
-    <footer>
-      <div className='container'>
-        <div className='row'>
-          <div className='col l6 s12'>
-            <h5 className='white-text'>Footer Content</h5>
-            <p className='grey-text text-lighten-4'>
-              You can use rows and columns here to organize your footer content.
-            </p>
-          </div>
-          <div className='col l4 offset-l2 s12'>
-            <h5 className='white-text'>Links</h5>
-            <ul className='right hide-on-med-and-down'>
-              <li>
-                <NavLink exact to='/'>
-                  Home
-                </NavLink>
-              </li>
-              <li>
-                <NavLink to='/browse'>Browse</NavLink>
-              </li>
-              <li>
-                <NavLink to='/search'>Search</NavLink>
-              </li>
-              <li>
-                <NavLink to='/contact'>Contact</NavLink>
-              </li>
-              <li>
-                <NavLink to='/about'>About</NavLink>
-              </li>
-              <li>
-                <a href='http://modules.advancedalgos.net'>Modules</a>
-              </li>
-
-              <li>
-                <a
-                  href=''
-                  className='tooltipped btn-floating btn-small indigo darken-4'
-                  data-position='bottom'
-                  data-tooltip='You Tube'
-                >
-                  <i className='fab fa-youtube' />
-                </a>
-              </li>
-              <li>
-                <a
-                  href=''
-                  className='tooltipped btn-floating btn-small indigo darken-4'
-                  data-position='bottom'
-                  data-tooltip='Facebook'
-                >
-                  <i className='fab fa-facebook' />
-                </a>
-              </li>
-              <li>
-                <a
-                  href=''
-                  className='tooltipped btn-floating btn-small indigo darken-4'
-                  data-position='bottom'
-                  data-tooltip='Twitter'
-                >
-                  <i className='fab fa-twitter' />
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div className='footer-copyright'>
-        <div className='container'>
-          © 2018 Copyright
-          <a
-            className='grey-text text-lighten-4 right'
-            href='www.advancedalgos.net'
-          >
-            Advanced Algos Ltd.
-          </a>
-        </div>
-      </div>
+    <footer className={classNames(classes.footer, classes.layout)}>
+      <Grid
+        container
+        spacing={32}
+        justify='space-evenly'
+        className={classNames(classes.footerContainer)}
+      >
+        <Grid item xs>
+          <Typography variant='title' color='textPrimary' gutterBottom>
+            Pages
+          </Typography>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Home
+            </Typography>
+          </NavLink>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Teams
+            </Typography>
+          </NavLink>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              About
+            </Typography>
+          </NavLink>
+        </Grid>
+        <Grid item xs>
+          <Typography variant='title' color='textPrimary' gutterBottom>
+            Support
+          </Typography>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Documentation
+            </Typography>
+          </NavLink>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Telegram
+            </Typography>
+          </NavLink>
+        </Grid>
+        <Grid item xs>
+          <Typography variant='title' color='textPrimary' gutterBottom>
+            Modules
+          </Typography>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Teams
+            </Typography>
+          </NavLink>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              Users
+            </Typography>
+          </NavLink>
+          <NavLink to='/' className={classNames(classes.footerLink)}>
+            <Typography variant='subheading' color='textSecondary'>
+              KeyVault
+            </Typography>
+          </NavLink>
+        </Grid>
+        <Grid item xs>
+          <NavLink to='/'>
+            <img src={aalogo} width={98} height={140} />
+          </NavLink>
+        </Grid>
+      </Grid>
     </footer>
   )
 }
 
-export default Footer
+Footer.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(Footer)

client/src/views/home/index.js

@@ -1,26 +1,61 @@
-import React, { Component } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 
-class Home extends Component {
-  render () {
-    return (
-      <div>
-        <section className='container section scrollspy' id='photos'>
-          <div className='row'>
-            <div className='col s12 l4'>
-              <h1> Header </h1>
-            </div>
-            <div className='col s12 l6 offset-l1'>
-              <h2 className='indigo-text text-darken-4'>Title 1</h2>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.
-              </p>
-            </div>
-          </div>
-        </section>
-      </div>
-    )
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  layout: {
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
+      width: 900,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  },
+  heroContent: {
+    maxWidth: 600,
+    margin: '0 auto',
+    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
   }
+})
+
+const Home = ({ classes }) => (
+  <React.Fragment>
+    <CssBaseline />
+    <main className={classes.layout}>
+      <div className={classes.heroContent}>
+        <Typography
+          variant='display3'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+          Collaborate. Innovate. Evolve.
+        </Typography>
+        <Typography
+          variant='title'
+          align='center'
+          color='textSecondary'
+          component='h3'
+        >
+          Welcome to the Advanced Algos Teams Module
+        </Typography>
+      </div>
+    </main>
+  </React.Fragment>
+)
+
+Home.propTypes = {
+  classes: PropTypes.object.isRequired
 }
 
-export default Home
+export default withStyles(styles)(Home)

client/src/views/index.js

@@ -2,5 +2,8 @@ import NavBar from './navbar'
 import Footer from './footer'
 import Callback from './callback'
 import Home from './home'
+import Dashboard from './dashboard'
 
-export { NavBar, Footer, Callback, Home }
+import { theme, globalStyles } from './theme'
+
+export { NavBar, Footer, Callback, Home, Dashboard, theme, globalStyles }

client/src/views/navbar/LoggedIn.js

@@ -1,7 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { graphql } from 'react-apollo'
 
-import CircularProgress from '@material-ui/core/CircularProgress'
 import LoggedInMenu from './LoggedInMenu'
 
 import { GetCurrentMember } from '../../graphql/members'
@@ -9,39 +9,39 @@ import { GetCurrentMember } from '../../graphql/members'
 import { isDefined } from '../../utils/js-helpers'
 
 export const LoggedIn = props => {
-  let { error, loading, userByAuthId } = props.data
-  let user = userByAuthId
+  let { data, user, auth } = props
+  console.log('LoggedIn :', data, user)
+  let displayName = 'No Display Name'
 
-  if (error) return <div> An Error Occurred</div>
-  else if (loading) {
-    return (
-      <div>
-        <CircularProgress />
-      </div>
-    )
-  } else {
-    let displayName = 'No Display Name'
-
-    if (isDefined(user.alias)) {
-      displayName = user.alias
-    }
-
-    if (isDefined(user.firstName)) {
-      displayName = user.firstName
-    }
-
-    if (isDefined(user.firstName) && isDefined(user.lastName)) {
-      displayName = user.firstName + ' ' + user.lastName
-    }
-
-    return (
-      <div>
-        <p>
-          <LoggedInMenu menuLabel={displayName} user={user} />
-        </p>
-      </div>
-    )
+  if (isDefined(user.alias)) {
+    displayName = user.alias
   }
+
+  if (isDefined(user.nickname)) {
+    displayName = user.nickname
+  }
+
+  if (isDefined(user.firstName)) {
+    displayName = user.firstName
+  }
+
+  if (isDefined(user.firstName) && isDefined(user.lastName)) {
+    displayName = user.firstName + ' ' + user.lastName
+  }
+
+  return (
+    <div>
+      <p>
+        <LoggedInMenu menuLabel={displayName} auth={auth} />
+      </p>
+    </div>
+  )
+}
+
+LoggedIn.propTypes = {
+  data: PropTypes.object,
+  user: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired
 }
 
 export default graphql(GetCurrentMember)(LoggedIn) // This binds the querty to the component

client/src/views/navbar/LoggedInMenu.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import Button from '@material-ui/core/Button'
 import Menu from '@material-ui/core/Menu'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -7,49 +8,45 @@ import { Link } from 'react-router-dom'
 import ProfileIcon from '@material-ui/icons/Person'
 import LogoutIcon from '@material-ui/icons/DirectionsWalk'
 
-import { getItem } from '../../utils/local-storage'
-
 const UserLink = props => <Link to='/user' {...props} />
-const LogoutLink = props => <Link to='/logout' {...props} />
+const LogoutLink = props => <Link to='/' {...props} />
 
 class LoggedInUserMenu extends Component {
   constructor (props) {
     super(props)
+
+    this.handleMenu = this.handleMenu.bind(this)
+    this.handleClose = this.handleClose.bind(this)
+    this.handleLogout = this.handleLogout.bind(this)
+
     this.state = {
-      user: null,
-      open: false
+      menu: null
     }
   }
 
-  ComponentDidMount () {
-    getItem('user').then(data => this.setState({ user: data })) // Set user to state
-  }
-
   render () {
-    const { menuLabel, anchorEl, updateAnchorEl } = this.propTypes
+    const { menuLabel } = this.props
     return (
       <React.Fragment>
         <Button
           aria-owns={this.state.open ? 'render-props-menu' : null}
           aria-haspopup='true'
-          onClick={event => {
-            updateAnchorEl(event.currentTarget)
-          }}
+          onClick={e => this.handleMenu(e)}
           color='inherit'
         >
           {menuLabel}
         </Button>
         <Menu
           id='render-props-menu'
-          anchorEl={anchorEl}
-          open={this.state.open}
+          anchorEl={this.state.menu}
+          open={Boolean(this.state.menu)}
           onClose={this.handleClose}
         >
           <MenuItem onClick={this.handleClose} component={UserLink}>
             <ProfileIcon />
             <div>Profile</div>
           </MenuItem>
-          <MenuItem onClick={this.handleClose} component={LogoutLink}>
+          <MenuItem onClick={this.handleLogout} component={LogoutLink}>
             <LogoutIcon />
             <div>Logout</div>
           </MenuItem>
@@ -58,9 +55,23 @@ class LoggedInUserMenu extends Component {
     )
   }
 
+  handleMenu (e) {
+    this.setState({ menu: e.currentTarget })
+  }
+
   handleClose () {
-    this.setState({ open: !this.state.open })
+    this.setState({ menu: null })
+  }
+
+  handleLogout () {
+    this.props.auth.logout()
+    this.setState({ menu: null })
   }
 }
 
+LoggedInUserMenu.propTypes = {
+  menuLabel: PropTypes.string.isRequired,
+  auth: PropTypes.object.isRequired
+}
+
 export default LoggedInUserMenu

client/src/views/navbar/index.js

@@ -6,19 +6,14 @@ import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
 import IconButton from '@material-ui/core/IconButton'
+import Button from '@material-ui/core/Button'
 
 // icons
-import MenuIcon from '@material-ui/icons/Menu'
 import HomeIcon from '@material-ui/icons/Home'
-import BrowseIcon from '@material-ui/icons/ImportContacts'
-import SearchIcon from '@material-ui/icons/Search'
-import ContactIcon from '@material-ui/icons/ContactMail'
-import AboutIcon from '@material-ui/icons/FormatShapes'
-import ModulesIcon from '@material-ui/icons/QueuePlayNext'
+import DashboardIcon from '@material-ui/icons/Dashboard'
 
 import { Link } from 'react-router-dom'
 
-import { isDefined } from '../../utils/js-helpers'
 import { getItem } from '../../utils/local-storage'
 
 // components
@@ -26,23 +21,33 @@ import { LoggedIn } from './LoggedIn'
 import { LoggedOut } from './LoggedOut'
 
 const AboutLink = props => <Link to='/about' {...props} />
-const ContactLink = props => <Link to='/contact' {...props} />
-const SearchLink = props => <Link to='/search' {...props} />
-const BrowseLink = props => <Link to='/browse' {...props} />
+const TeamsLink = props => <Link to='/teams' {...props} />
+const DashboardLink = props => <Link to='/dashboard' {...props} />
 const HomeLink = props => <Link to='/' {...props} />
 
-const styles = {
+const styles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
   root: {
     flexGrow: 1
   },
   flex: {
     flexGrow: 1
   },
+  toolbarTitle: {
+    flex: 1
+  },
   menuButton: {
     marginLeft: -12,
     marginRight: 20
+  },
+  appBar: {
+    position: 'relative'
   }
-}
+})
 
 class NavBar extends Component {
   constructor (props) {
@@ -53,31 +58,27 @@ class NavBar extends Component {
     }
   }
 
-  ComponentDidMount () {
-    getItem('user').then(data => this.setState({ user: data })) // Set user to state
+  async componentDidMount () {
+    const user = await getItem('user')
+    console.log('NavBar CDM: ', user, this.state)
+    this.setState({ user })
   }
 
   render () {
     let { classes, auth } = this.props
 
-    let authId
-    if (isDefined(this.state.user) && isDefined(this.state.user.sub)) {
-      authId = this.state.user.sub
-    }
+    let user = JSON.parse(this.state.user)
 
     return (
       <div className={classes.root}>
-        <AppBar position='static'>
+        <AppBar position='static' className={classes.appBar}>
           <Toolbar>
-            <IconButton
-              className={classes.menuButton}
+            <Typography
+              variant='title'
               color='inherit'
-              aria-label='Menu'
+              className={classes.toolbarTitle}
             >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant='title' color='inherit' className={classes.flex}>
-              Users Module
+              Teams Module
             </Typography>
 
             <IconButton
@@ -88,49 +89,21 @@ class NavBar extends Component {
             >
               <HomeIcon />
             </IconButton>
-            <IconButton
-              className={classes.menuButton}
-              color='inherit'
-              title='Browse the Users Directory'
-              component={BrowseLink}
-            >
-              <BrowseIcon />
-            </IconButton>
-            <IconButton
-              className={classes.menuButton}
-              color='inherit'
-              title='Search Users'
-              component={SearchLink}
-            >
-              <SearchIcon />
-            </IconButton>
-            <IconButton
-              className={classes.menuButton}
-              color='inherit'
-              title='Contact Form'
-              component={ContactLink}
-            >
-              <ContactIcon />
-            </IconButton>
-            <IconButton
-              className={classes.menuButton}
-              color='inherit'
-              title='About this Module'
-              component={AboutLink}
-            >
-              <AboutIcon />
-            </IconButton>
-            <IconButton
-              className={classes.menuButton}
-              color='inherit'
-              title='Go to another Module'
-              component={AboutLink}
-            >
-              <ModulesIcon />
-            </IconButton>
+            <Button component={TeamsLink}>Teams</Button>
+            <Button component={AboutLink}>About</Button>
 
-            {authId !== undefined && authId !== null ? (
-              <LoggedIn authId={authId} auth={auth} styles={styles} />
+            {this.state.user !== undefined && this.state.user !== null ? (
+              <React.Fragment>
+                <IconButton
+                  className={classes.menuButton}
+                  color='inherit'
+                  title='Dashboard'
+                  component={DashboardLink}
+                >
+                  <DashboardIcon />
+                </IconButton>
+                <LoggedIn user={user} auth={auth} styles={styles} />
+              </React.Fragment>
             ) : (
               <LoggedOut auth={auth} styles={styles} />
             )}

client/src/views/theme.js

@@ -0,0 +1,72 @@
+import { createMuiTheme } from '@material-ui/core/styles'
+import indigo from '@material-ui/core/colors/indigo'
+import red from '@material-ui/core/colors/red'
+
+export const theme = createMuiTheme({
+  palette: {
+    primary: red,
+    secondary: indigo
+  },
+  typography: {
+    fontFamily: '"Saira","Saira Condenses", sans-serif'
+  },
+  overrides: {
+    Paper: {
+      root: {
+        backgroundColor: '#ffffff'
+      },
+      elevation: 0,
+      square: true
+    }
+  }
+})
+
+export const globalStyles = theme => ({
+  '@global': {
+    body: {
+      backgroundColor: theme.palette.common.white
+    }
+  },
+  appBar: {
+    position: 'relative'
+  },
+  toolbarTitle: {
+    flex: 1
+  },
+  layout: {
+    width: 'auto',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3,
+    [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: {
+      width: 900,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
+  },
+  heroContent: {
+    maxWidth: 600,
+    margin: '0 auto',
+    padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px`
+  },
+  cardHeader: {
+    backgroundColor: theme.palette.grey[200]
+  },
+  cardPricing: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'baseline',
+    marginBottom: theme.spacing.unit * 2
+  },
+  cardActions: {
+    [theme.breakpoints.up('sm')]: {
+      paddingBottom: theme.spacing.unit * 2
+    }
+  },
+  footer: {
+    marginTop: theme.spacing.unit * 8,
+    borderTop: `1px solid ${theme.palette.divider}`,
+    padding: `${theme.spacing.unit * 6}px 0`
+  }
+})
+
+export default theme