Major refactor

2018-09-12 08:56:51 -07:00
1 parent 0ad7b17757
commit 33b91af112
@@ -1,3 +1,4 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
 }
@@ -1330,6 +1330,20 @@
 				"@babel/plugin-syntax-async-generators": "^7.0.0"
 			}
 		},
+		"@babel/plugin-proposal-class-properties": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.0.0.tgz",
+			"integrity": "sha512-mVgsbdySh6kuzv4omXvw0Kuh+3hrUrQ883qTCf75MqfC6zctx2LXrP3Wt+bbJmB5fE5nfhf/Et2pQyrRy4j0Pg==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-function-name": "^7.0.0",
+				"@babel/helper-member-expression-to-functions": "^7.0.0",
+				"@babel/helper-optimise-call-expression": "^7.0.0",
+				"@babel/helper-plugin-utils": "^7.0.0",
+				"@babel/helper-replace-supers": "^7.0.0",
+				"@babel/plugin-syntax-class-properties": "^7.0.0"
+			}
+		},
 		"@babel/plugin-proposal-json-strings": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.0.0.tgz",
@@ -1380,6 +1394,15 @@
 				"@babel/helper-plugin-utils": "^7.0.0"
 			}
 		},
+		"@babel/plugin-syntax-class-properties": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.0.0.tgz",
+			"integrity": "sha512-cR12g0Qzn4sgkjrbrzWy2GE7m9vMl/sFkqZ3gIpAQdrvPDnLM8180i+ANDFIXfjHo9aqp0ccJlQ0QNZcFUbf9w==",
+			"dev": true,
+			"requires": {
+				"@babel/helper-plugin-utils": "^7.0.0"
+			}
+		},
 		"@babel/plugin-syntax-json-strings": {
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz",
@@ -19,6 +19,7 @@
  "license": "AGPL-3.0",
  "devDependencies": {
    "@babel/core": "^7.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^8.6.5",
@@ -78,6 +79,7 @@
    "apollo-utilities": "^1.0.20",
    "auth0-lock": "^11.9.0",
    "babel-polyfill": "^6.26.0",
+    "classnames": "^2.2.6",
    "cross-fetch": "^2.2.2",
    "dotenv-webpack": "^1.5.7",
    "graphql": "^0.13.2",
@@ -12,7 +12,18 @@ import { getMainDefinition } from 'apollo-utilities'
 import React, { Component } from 'react'
 import { Route, BrowserRouter, Switch } from 'react-router-dom'

-import { NavBar, Footer, Callback, Home } from './views'
+import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { withStyles } from '@material-ui/core/styles'
+import {
+  NavBar,
+  Footer,
+  Callback,
+  Home,
+  Dashboard,
+  theme,
+  globalStyles
+} from './views'

 import Auth from './auth'

@@ -101,16 +112,16 @@ const authRetryLink = onError(
  }
 )

-const authLink = setContext((_, { headers }) => {
+const authLink = setContext(async (_, { headers }) => {
  // get the authentication token from local storage if it exists
-  const token = window.localStorage.getItem('access_token')
-  // return the headers to the context so httpLink can read them
-  return {
-    headers: {
-      ...headers,
-      Authorization: token ? `Bearer ${token}` : ``
+  await getItem('access_token').then(token => {
+    return {
+      headers: {
+        ...headers,
+        Authorization: token ? `Bearer ${token}` : ``
+      }
    }
-  }
+  })
 })

 const cache = new InMemoryCache().restore(window.__APOLLO_STATE__)
@@ -131,24 +142,28 @@ class App extends Component {
    return (
      <BrowserRouter>
        <ApolloProvider client={client}>
-          <div className='App'>
-            <NavBar auth={auth} />
-            <Switch>
-              <Route exact path='/' component={Home} />
-              <Route
-                path='/callback'
-                render={props => {
-                  auth.handleAuthentication(props)
-                  return <Callback {...props} />
-                }}
-              />
-            </Switch>
-            <Footer />
-          </div>
+          <MuiThemeProvider theme={theme}>
+            <CssBaseline />
+            <div className='App'>
+              <NavBar auth={auth} />
+              <Switch>
+                <Route exact path='/' component={Home} />
+                <Route exact path='/dashboard' component={Dashboard} />
+                <Route
+                  path='/callback'
+                  render={props => {
+                    auth.handleAuthentication(props)
+                    return <Callback {...props} />
+                  }}
+                />
+              </Switch>
+              <Footer />
+            </div>
+          </MuiThemeProvider>
        </ApolloProvider>
      </BrowserRouter>
    )
  }
 }

-export default App
+export default withStyles(globalStyles)(App)
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 98 140"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{stroke:#2a96ff;stroke-miterlimit:10;stroke-width:0.5px;}.cls-4{fill:#4d4d4d;}.cls-5{fill:#e3493c;}</style><clipPath id="clip-path"><rect class="cls-1" x="144.54" y="59.59" width="600" height="600"/></clipPath></defs><title>aa-logo-vert</title><g id="Layer_1" data-name="Layer 1"><g class="cls-2"><circle class="cls-3" cx="210.14" cy="243.28" r="277.97"/></g></g><g id="Layer_4" data-name="Layer 4"><path class="cls-4" d="M11.27,108.29l-.38-3H8.62l-.38,3h-3L7.49,93.1h4.57l2.28,15.19ZM9.83,96.08H9.68L8.9,102.6h1.71Z"/><path class="cls-4" d="M18,93.1h3.69a4.53,4.53,0,0,1,2.79.67,3.22,3.22,0,0,1,1,2.11,41.13,41.13,0,0,1,.19,4.82,41,41,0,0,1-.19,4.81,3.19,3.19,0,0,1-1,2.11,4.46,4.46,0,0,1-2.79.67H18Zm3.69,12.43a.89.89,0,0,0,.71-.22,2.31,2.31,0,0,0,.25-1.15c0-.61,0-1.77,0-3.46s0-2.85,0-3.47a2.31,2.31,0,0,0-.25-1.15.89.89,0,0,0-.71-.22H21v9.67Z"/><path class="cls-4" d="M31.16,108.29,29.11,93.1h3l1.25,12.06h.23L34.8,93.1h3l-2.05,15.19Z"/><path class="cls-4" d="M46.35,108.29l-.38-3H43.7l-.38,3h-3L42.57,93.1h4.57l2.28,15.19ZM44.91,96.08h-.15L44,102.6h1.7Z"/><path class="cls-4" d="M58.44,108.29l-2.36-7.62H56v7.62H53.12V93.1h2.8L58.09,100h.11V93.1h2.89v15.19Z"/><path class="cls-4" d="M70.19,108.36a6.43,6.43,0,0,1-1.12.11,4,4,0,0,1-2.61-.71,3.72,3.72,0,0,1-1.1-2.28,31.28,31.28,0,0,1-.26-4.78,29.46,29.46,0,0,1,.28-4.77,3.82,3.82,0,0,1,1.12-2.3,3.9,3.9,0,0,1,2.57-.71,7.72,7.72,0,0,1,1.18.1,3.21,3.21,0,0,1,.85.24v2.53a11.75,11.75,0,0,0-1.48-.11,1.48,1.48,0,0,0-1.05.29,2.16,2.16,0,0,0-.35,1.23c0,.62-.08,1.79-.08,3.5s0,2.87.08,3.5a2.15,2.15,0,0,0,.35,1.22,1.48,1.48,0,0,0,1.05.29,9.89,9.89,0,0,0,1.53-.11v2.47A4.23,4.23,0,0,1,70.19,108.36Z"/><path class="cls-4" d="M75,108.29V93.1h6.09v2.76H78v3.38h2.7V102H78v3.53h3.07v2.76Z"/><path class="cls-4" d="M85.08,93.1h3.69a4.55,4.55,0,0,1,2.79.67,3.16,3.16,0,0,1,1,2.11,38.45,38.45,0,0,1,.2,4.82,38.37,38.37,0,0,1-.2,4.81,3.14,3.14,0,0,1-1,2.11,4.48,4.48,0,0,1-2.79.67H85.08Zm3.69,12.43a.89.89,0,0,0,.71-.22,2.31,2.31,0,0,0,.25-1.15c0-.61,0-1.77,0-3.46s0-2.85,0-3.47a2.31,2.31,0,0,0-.25-1.15.89.89,0,0,0-.71-.22h-.69v9.67Z"/><path class="cls-5" d="M19.79,134.79l-2.1-5.3H9.08L7,134.79H5.24l7.15-18.23h2l7.16,18.23Zm-6.33-16.24h-.14L9.64,127.9h7.5Z"/><path class="cls-5" d="M26.41,134.79V116.56h1.7v16.58H37v1.65Z"/><path class="cls-5" d="M48.1,126.76V125.2h6.2v9.3c-.87.14-1.84.26-2.9.35s-2,.15-2.8.15a12.88,12.88,0,0,1-4.9-.69,3.89,3.89,0,0,1-2.15-2.6,22.5,22.5,0,0,1-.58-6,22.11,22.11,0,0,1,.6-6A3.87,3.87,0,0,1,43.72,117a13.15,13.15,0,0,1,4.88-.67c.88,0,1.85.05,2.92.14s2,.22,2.7.36v1.51a33.49,33.49,0,0,0-4.66-.42,18.69,18.69,0,0,0-4.55.37,2.7,2.7,0,0,0-1.81,1.93,18.81,18.81,0,0,0-.53,5.43,23.5,23.5,0,0,0,.39,5.13,3,3,0,0,0,1.59,2.09,10.15,10.15,0,0,0,4,.55c.56,0,1.25,0,2.07-.08s1.47-.12,2-.19v-6.41Z"/><path class="cls-5" d="M61.91,134.32A3.33,3.33,0,0,1,60,131.86a31.94,31.94,0,0,1-.41-6.19,31.89,31.89,0,0,1,.41-6.18A3.33,3.33,0,0,1,61.91,117a13.45,13.45,0,0,1,5.07-.67A13.42,13.42,0,0,1,72,117a3.33,3.33,0,0,1,1.89,2.47,31.89,31.89,0,0,1,.41,6.18,31.94,31.94,0,0,1-.41,6.19A3.33,3.33,0,0,1,72,134.32,13.38,13.38,0,0,1,67,135,13.4,13.4,0,0,1,61.91,134.32Zm9-1.29a2.34,2.34,0,0,0,1.37-1.86,29.55,29.55,0,0,0,.34-5.5,29.7,29.7,0,0,0-.34-5.5,2.32,2.32,0,0,0-1.37-1.85,13.69,13.69,0,0,0-4-.38,13.73,13.73,0,0,0-4,.38,2.32,2.32,0,0,0-1.37,1.85,28.82,28.82,0,0,0-.34,5.5,28.68,28.68,0,0,0,.34,5.5A2.34,2.34,0,0,0,63,133a13.73,13.73,0,0,0,4,.38A13.69,13.69,0,0,0,70.94,133Z"/><path class="cls-5" d="M82.89,134.91c-1.17-.07-2.18-.15-3-.25v-1.59c.91.08,1.93.16,3,.23s2,.11,2.76.11a17.72,17.72,0,0,0,2.32-.12,4,4,0,0,0,1.49-.49,1.67,1.67,0,0,0,.81-1.07,7.68,7.68,0,0,0,.2-1.92,9.6,9.6,0,0,0-.15-2.07,1.14,1.14,0,0,0-.71-.83,7.63,7.63,0,0,0-2-.42L83,126a4.91,4.91,0,0,1-2.42-.74,2.61,2.61,0,0,1-1-1.47,10.4,10.4,0,0,1-.23-2.45,5.81,5.81,0,0,1,.71-3.17,3.47,3.47,0,0,1,2-1.44,14.24,14.24,0,0,1,3.66-.37c1,0,2,0,3.09.1a19.49,19.49,0,0,1,2.44.29v1.51c-.7-.08-1.55-.16-2.54-.22s-1.9-.09-2.73-.09a15.54,15.54,0,0,0-2.52.16,4.18,4.18,0,0,0-1.51.5,1.74,1.74,0,0,0-.76,1,6,6,0,0,0-.19,1.72,6.83,6.83,0,0,0,.17,1.76,1.32,1.32,0,0,0,.67.82,4.9,4.9,0,0,0,1.57.39l4.51.47a10.3,10.3,0,0,1,2.69.56,2.23,2.23,0,0,1,1.25,1.43,9.9,9.9,0,0,1,.3,2.91,6.84,6.84,0,0,1-.72,3.54,3.17,3.17,0,0,1-2,1.47,14.17,14.17,0,0,1-3.38.32C85.14,135,84.05,135,82.89,134.91Z"/><path class="cls-5" d="M47.08,49.62c1.17-.36,8.61.83,9.61,1.53,3.13,2.21,7.71,3.41,9.55,1.15s-.08-6.13-3-9.1c-.88-.88-3.7-7.75-3.56-9,.42-3.87-.85-8.5-3.73-9s-5.61,3.66-6.3,7.16c-.24,1.22-5,7.11-6.14,7.62-3.48,1.62-6.77,5-5.73,7.69S43.7,50.65,47.08,49.62Z"/><path class="cls-5" d="M60,9.61c4.68.2,6.65,9.72,5.89,17.18-.24,2.37,5.27,15.71,6.24,17.91a7.29,7.29,0,0,0,3,3C71.63,38.07,71.32,30.32,72,28.51c3-8.4,1.71-19.69-2.85-22.32-3.07-1.77-9.79-2.48-14.07,4.56A6.91,6.91,0,0,1,60,9.61Z"/><path class="cls-5" d="M22.61,50.2C20.Line truncated
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
@@ -0,0 +1,9 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e3493c">
+<meta name="apple-mobile-web-app-title" content="Advanced Algos">
+<meta name="application-name" content="Advanced Algos">
+<meta name="msapplication-TileColor" content="#da532c">
+<meta name="theme-color" content="#ffffff">
@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1365.333" height="1365.333" viewBox="0 0 1024.000000 1024.000000"><path d="M685.9 27.4c-.2.2-3 .7-6.1 1-12.6 1.5-34.6 8.5-45.2 14.5-2 1.2-5.3 3.1-7.3 4.2-14.3 8.1-30.2 22.3-43.5 38.8-5.9 7.4-16.2 22.1-15.5 22.1.2 0 3.6-1.7 7.5-3.9 17.4-9.6 28.8-12.1 52.2-11.7 13.4.3 17.7.8 23.1 2.5 25.1 8 45.2 36.6 58.9 83.7 1.8 6 3.3 11.6 3.5 12.4 2.3 10.8 3.5 17.1 4 20 .3 1.9 1 6 1.5 9 1.2 7.3 1.8 11.3 2.5 18.5.4 3.3.8 7.6 1.1 9.5 1.6 14.3 2.2 51.4 1 69.5-1.4 21.3-1.5 26-.5 31 .5 2.7 1.2 6.3 1.5 8 2.3 12.9 20.6 69 33.4 102.5 1.6 4.1 4.8 12.4 7.1 18.5 17.1 45.2 47.3 118.6 49.1 119.3.4.2.8.9.8 1.5.1 3.8 18.3 22 29.2 29.1 4.7 3.1 8.8 5.6 9 5.6.3 0-3.2-10.9-7.7-24.3-4.5-13.3-8.4-25.3-8.7-26.7-.4-1.4-2-7.2-3.7-13-4.3-14.5-12.2-45.3-13.7-54-.3-1.4-.7-3.3-1-4.2-.3-1-.7-3-1-4.5-.2-1.6-.9-4.8-1.4-7.3-.5-2.5-1.4-7.2-2-10.5-.5-3.3-1.2-7.1-1.5-8.5-.3-1.4-1-5.7-1.5-9.5-.6-3.9-1.2-8.1-1.5-9.5-.3-2.3-.7-5.4-2-16.3-3.1-25.8-3.8-58.6-1.5-73.2.7-4.4 2.2-10.7 3.5-14 2.3-6.1 9-28.9 9.9-33.5.3-1.4 1.2-5.2 2-8.5s1.7-7.4 1.9-9c.3-1.7 1.4-8.2 2.6-14.6 1.1-6.3 2.3-14.7 2.6-18.5.4-3.8.9-8.3 1.1-9.9 2.2-16.2 2.2-69.4 0-83.5-.2-1.4-.7-5-1.1-8-6.7-56.6-26.4-102.4-53.1-123.1-11.1-8.5-31-16.4-49.9-19.7-9.6-1.7-38.4-2.9-39.6-1.8zM465 215.4c-2.3 3-9.7 11.7-14.5 17-1.1 1.2-5.6 6.2-10 11.1-8.3 9.3-43.9 45.2-53.5 54-51.1 46.9-108.8 86-132.5 90-2.2.4-4.4.8-5 .9-.5.2-2.8.6-5 1.1-24.5 4.7-70 20.4-91 31.3-2.7 1.4-5.2 2.6-5.5 2.7-.7.1-12.3 6.2-16.7 8.7-2.1 1.2-5.4 3.1-7.5 4.2C62.4 471.4 16.3 519 4.3 559.8.9 571.3.5 590 3.4 603.5c2.6 12.1 7.2 25.6 11.8 35 19.6 39.1 52.7 65.8 95.3 76.8 5.5 1.4 12 2.9 14.5 3.2 2.5.4 5.4.9 6.5 1.1 2.8.5 11.7 1.4 19.5 1.9l6.4.4-3.4-2.1c-20.8-12.5-29.7-21.3-39-38.3-1.8-3.3-4.3-7.8-5.5-10-6.1-11.2-8.2-22.8-6.4-35.1 7.4-48 72.3-111.2 159.4-155 10.5-5.3 21-11.2 23.5-13.1 8.7-6.7 26.9-25.3 45.4-46.3 1.7-2 4.9-5.6 7.1-8.1 2.2-2.4 6-6.9 8.5-9.8 2.5-3 5-5.9 5.5-6.5.6-.6 3-3.6 5.5-6.6 6.5-8 7.1-8.6 15.2-18.5 12.7-15.4 51.5-64.5 61.3-77.6 1.1-1.5 5.9-7.8 10.6-14 11.5-15.2 13.3-18.1 16.8-26.9 3-7.7 3.5-9.3 5.1-19 1.2-7.1 1.9-21.9 1.1-22.4-.3-.2-1.7 1.1-3.1 2.8zM563.9 315c-21.5 5.4-43.9 28.6-59.4 61.3-5.2 11-10.1 24.9-12.5 35.7-2 8.8-6.1 16.2-21 37.4-1.8 2.6-17.8 23.2-20.7 26.6-14.7 17.6-22.4 26.2-31.2 35.1-8.7 8.6-12.2 11.3-19.6 15.2-16.7 8.7-25.6 14.5-37 23.8-22.2 18.1-36.8 38.2-41 56.4-1.6 6.6-2.2 17.6-1.1 19.3.3.5.7 2.1 1 3.7.8 4.3 5.3 12.7 9.1 16.8 10.1 11.1 27.7 18.5 50.5 21.3 12.2 1.5 36.1.8 49-1.6 11.6-2 12.6-2.3 20.5-4.5s31.7-2.2 43.5 0c.8.2 4.4.6 8 1 3.6.4 7.4.9 8.4 1.1 1.1.2 4.2.6 6.9.9 2.8.3 5.3.8 5.6.9.3.2 2.9.7 5.6 1 9.1 1.3 39 7.5 47.9 10.1 8.9 2.6 18.5 7 20.6 9.6 1.9 2.3 30.1 16.5 39.5 20 9.1 3.3 26.6 7.7 33.7 8.6 9.2 1.1 23.9.7 30-.7 19.5-4.6 33.3-18.5 36.3-36.7.7-4.2.8-19 .1-20.1-.2-.4-.7-2.4-1-4.6-1-6.1-5.5-18.3-10.3-28.1-4.2-8.3-15.4-26.1-20.1-31.6-5.8-7-14.5-17-18.6-21.4-2.6-2.8-6.5-8-8.7-11.7-6.3-10.8-17.6-35.1-25.4-55.3-1.5-3.9-3.3-8.4-4-10-1.4-3.5-4.9-12.8-5-13.5 0-.3-1.2-3.7-2.5-7.5-1.3-3.9-2.5-7.5-2.6-8-.1-.6-.9-3.5-1.8-6.6-2.6-8.9-2.8-10-2.6-17.4.7-25.5.3-39.3-1.3-49.5-.3-1.4-.8-4.5-1.2-7-.3-2.4-.8-4.7-1-5.1-.2-.3-.7-2.1-1-4-.9-5.4-6.3-20.6-9.7-27.3-7.5-14.9-16.6-24.9-27.5-30.3-6.3-3.1-8.3-3.6-16-3.9-4.8-.2-10.4.1-12.4.6zM340 752.1c-12.3 2.1-18.9 4.4-31.5 10.7-10.5 5.3-11.8 4.4 13 9.2 69 13.5 135.5 34.9 186.8 60.2 24.5 12.1 41 22.8 49.7 32.3 24.3 26.6 37.9 39.4 60 56.6 50.3 39.2 116.2 69.8 162.5 75.5 2.8.3 6.8.9 9 1.3 4.8.9 28.3.6 34-.3 23.2-4 37.1-11.8 56.6-31.7 33-33.8 46.8-81.2 37.4-128.4-3.2-16-8-29.9-16.2-46.5l-4.2-8.5-.1 8c-.1 4.4-.3 8.7-.4 9.5-.2.8-.6 3.8-1 6.6-1.8 14.4-15.1 40.8-26.4 52.7-17.8 18.7-53.6 23.1-99.2 12.2-5.8-1.4-11.5-2.7-12.6-3-1.2-.3-7.7-2.3-14.5-4.6-36.3-12-78-32.8-111.4-55.7-6-4.1-13-8.4-15.5-9.4-2.5-1.1-5.4-2.3-6.5-2.8-5.6-2.4-39.7-11.2-52.5-13.5-1.9-.3-4.2-.7-5-.9-.8-.1-4-.8-7-1.4-9.8-2-26.4-5.1-30-5.6-3-.5-29.1-4.8-37-6.1-1.4-.2-4.3-.7-6.5-1-6.9-1.1-9.8-1.5-15.5-2.5-3-.5-8.2-1.2-11.5-1.6-3.3-.3-6.2-.7-6.5-.9-.3-.2-4.4-.9-9-1.5-4.7-.6-9.6-1.3-11-1.5-1.4-.2-6.3-.9-11-1.5s-9.6-1.3-11-1.5c-5.9-.8-10.8-1.5-15-2-5.1-.6-9.4-1.2-16-2.1-7.1-.9-20.1-1.1-25-.3z"/></svg>
@@ -0,0 +1,19 @@
+{
+    "name": "Advanced Algos",
+    "short_name": "Advanced Algos",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
@@ -104,7 +104,7 @@ class Auth {
      console.log(authResult.idTokenPayload)
      setItem('user', JSON.stringify(authResult.idTokenPayload))
      if (window.location.href.includes(`callback`)) {
-        window.location.href = '/'
+        window.location.href = '/dashboard'
      }
      return true
    }
@@ -128,7 +128,7 @@ class Auth {
      console.log('signinOrCreateAccount auth: ', await data)
      setItem('user', JSON.stringify(data.data.authenticate))
      if (window.location.href.includes(`callback`)) {
-        window.location.href = '/'
+        window.location.href = '/dashboard'
      } else {
        window.location.reload()
      }
@@ -1,15 +1,19 @@
 /* eslint-disable no-unused-vars */
 import gql from 'graphql-tag'

-export const AddTeamMutation = gql`
+export const CreateTeamMutation = gql`
  mutation CreateTeamMutation($name: String!, $slug: String!, $owner: String!) {
    createTeam(name: $name, slug: $slug, owner: $owner) {
      id
      name
      slug
-      owner {
-        auth0id
-        id
+      owner
+      members{
+        role
+        member {
+          authId
+          alias
+        }
      }
    }
  }
@@ -3,7 +3,7 @@ import gql from 'graphql-tag'

 export const UniqueTeamnameQuery = gql`
  query uniqueTeamname($name: String!) {
-    teamByName(name: $name){
+    teamByName(name: $name) {
      name
    }
  }
@@ -1,5 +1,5 @@
 import React from 'react'

-const Callback = () => (<div>Authenticating...</div>)
+const Callback = () => <div>Authenticating...</div>

 export default Callback
@@ -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)
@@ -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
@@ -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
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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 }
@@ -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
@@ -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
@@ -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} />
            )}
@@ -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
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 98 140"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{stroke:#2a96ff;stroke-miterlimit:10;stroke-width:0.5px;}.cls-4{fill:#4d4d4d;}.cls-5{fill:#e3493c;}</style><clipPath id="clip-path"><rect class="cls-1" x="144.54" y="59.59" width="600" height="600"/></clipPath></defs><title>aa-logo-vert</title><g id="Layer_1" data-name="Layer 1"><g class="cls-2"><circle class="cls-3" cx="210.14" cy="243.28" r="277.97"/></g></g><g id="Layer_4" data-name="Layer 4"><path class="cls-4" d="M11.27,108.29l-.38-3H8.62l-.38,3h-3L7.49,93.1h4.57l2.28,15.19ZM9.83,96.08H9.68L8.9,102.6h1.71Z"/><path class="cls-4" d="M18,93.1h3.69a4.53,4.53,0,0,1,2.79.67,3.22,3.22,0,0,1,1,2.11,41.13,41.13,0,0,1,.19,4.82,41,41,0,0,1-.19,4.81,3.19,3.19,0,0,1-1,2.11,4.46,4.46,0,0,1-2.79.67H18Zm3.69,12.43a.89.89,0,0,0,.71-.22,2.31,2.31,0,0,0,.25-1.15c0-.61,0-1.77,0-3.46s0-2.85,0-3.47a2.31,2.31,0,0,0-.25-1.15.89.89,0,0,0-.71-.22H21v9.67Z"/><path class="cls-4" d="M31.16,108.29,29.11,93.1h3l1.25,12.06h.23L34.8,93.1h3l-2.05,15.19Z"/><path class="cls-4" d="M46.35,108.29l-.38-3H43.7l-.38,3h-3L42.57,93.1h4.57l2.28,15.19ZM44.91,96.08h-.15L44,102.6h1.7Z"/><path class="cls-4" d="M58.44,108.29l-2.36-7.62H56v7.62H53.12V93.1h2.8L58.09,100h.11V93.1h2.89v15.19Z"/><path class="cls-4" d="M70.19,108.36a6.43,6.43,0,0,1-1.12.11,4,4,0,0,1-2.61-.71,3.72,3.72,0,0,1-1.1-2.28,31.28,31.28,0,0,1-.26-4.78,29.46,29.46,0,0,1,.28-4.77,3.82,3.82,0,0,1,1.12-2.3,3.9,3.9,0,0,1,2.57-.71,7.72,7.72,0,0,1,1.18.1,3.21,3.21,0,0,1,.85.24v2.53a11.75,11.75,0,0,0-1.48-.11,1.48,1.48,0,0,0-1.05.29,2.16,2.16,0,0,0-.35,1.23c0,.62-.08,1.79-.08,3.5s0,2.87.08,3.5a2.15,2.15,0,0,0,.35,1.22,1.48,1.48,0,0,0,1.05.29,9.89,9.89,0,0,0,1.53-.11v2.47A4.23,4.23,0,0,1,70.19,108.36Z"/><path class="cls-4" d="M75,108.29V93.1h6.09v2.76H78v3.38h2.7V102H78v3.53h3.07v2.76Z"/><path class="cls-4" d="M85.08,93.1h3.69a4.55,4.55,0,0,1,2.79.67,3.16,3.16,0,0,1,1,2.11,38.45,38.45,0,0,1,.2,4.82,38.37,38.37,0,0,1-.2,4.81,3.14,3.14,0,0,1-1,2.11,4.48,4.48,0,0,1-2.79.67H85.08Zm3.69,12.43a.89.89,0,0,0,.71-.22,2.31,2.31,0,0,0,.25-1.15c0-.61,0-1.77,0-3.46s0-2.85,0-3.47a2.31,2.31,0,0,0-.25-1.15.89.89,0,0,0-.71-.22h-.69v9.67Z"/><path class="cls-5" d="M19.79,134.79l-2.1-5.3H9.08L7,134.79H5.24l7.15-18.23h2l7.16,18.23Zm-6.33-16.24h-.14L9.64,127.9h7.5Z"/><path class="cls-5" d="M26.41,134.79V116.56h1.7v16.58H37v1.65Z"/><path class="cls-5" d="M48.1,126.76V125.2h6.2v9.3c-.87.14-1.84.26-2.9.35s-2,.15-2.8.15a12.88,12.88,0,0,1-4.9-.69,3.89,3.89,0,0,1-2.15-2.6,22.5,22.5,0,0,1-.58-6,22.11,22.11,0,0,1,.6-6A3.87,3.87,0,0,1,43.72,117a13.15,13.15,0,0,1,4.88-.67c.88,0,1.85.05,2.92.14s2,.22,2.7.36v1.51a33.49,33.49,0,0,0-4.66-.42,18.69,18.69,0,0,0-4.55.37,2.7,2.7,0,0,0-1.81,1.93,18.81,18.81,0,0,0-.53,5.43,23.5,23.5,0,0,0,.39,5.13,3,3,0,0,0,1.59,2.09,10.15,10.15,0,0,0,4,.55c.56,0,1.25,0,2.07-.08s1.47-.12,2-.19v-6.41Z"/><path class="cls-5" d="M61.91,134.32A3.33,3.33,0,0,1,60,131.86a31.94,31.94,0,0,1-.41-6.19,31.89,31.89,0,0,1,.41-6.18A3.33,3.33,0,0,1,61.91,117a13.45,13.45,0,0,1,5.07-.67A13.42,13.42,0,0,1,72,117a3.33,3.33,0,0,1,1.89,2.47,31.89,31.89,0,0,1,.41,6.18,31.94,31.94,0,0,1-.41,6.19A3.33,3.33,0,0,1,72,134.32,13.38,13.38,0,0,1,67,135,13.4,13.4,0,0,1,61.91,134.32Zm9-1.29a2.34,2.34,0,0,0,1.37-1.86,29.55,29.55,0,0,0,.34-5.5,29.7,29.7,0,0,0-.34-5.5,2.32,2.32,0,0,0-1.37-1.85,13.69,13.69,0,0,0-4-.38,13.73,13.73,0,0,0-4,.38,2.32,2.32,0,0,0-1.37,1.85,28.82,28.82,0,0,0-.34,5.5,28.68,28.68,0,0,0,.34,5.5A2.34,2.34,0,0,0,63,133a13.73,13.73,0,0,0,4,.38A13.69,13.69,0,0,0,70.94,133Z"/><path class="cls-5" d="M82.89,134.91c-1.17-.07-2.18-.15-3-.25v-1.59c.91.08,1.93.16,3,.23s2,.11,2.76.11a17.72,17.72,0,0,0,2.32-.12,4,4,0,0,0,1.49-.49,1.67,1.67,0,0,0,.81-1.07,7.68,7.68,0,0,0,.2-1.92,9.6,9.6,0,0,0-.15-2.07,1.14,1.14,0,0,0-.71-.83,7.63,7.63,0,0,0-2-.42L83,126a4.91,4.91,0,0,1-2.42-.74,2.61,2.61,0,0,1-1-1.47,10.4,10.4,0,0,1-.23-2.45,5.81,5.81,0,0,1,.71-3.17,3.47,3.47,0,0,1,2-1.44,14.24,14.24,0,0,1,3.66-.37c1,0,2,0,3.09.1a19.49,19.49,0,0,1,2.44.29v1.51c-.7-.08-1.55-.16-2.54-.22s-1.9-.09-2.73-.09a15.54,15.54,0,0,0-2.52.16,4.18,4.18,0,0,0-1.51.5,1.74,1.74,0,0,0-.76,1,6,6,0,0,0-.19,1.72,6.83,6.83,0,0,0,.17,1.76,1.32,1.32,0,0,0,.67.82,4.9,4.9,0,0,0,1.57.39l4.51.47a10.3,10.3,0,0,1,2.69.56,2.23,2.23,0,0,1,1.25,1.43,9.9,9.9,0,0,1,.3,2.91,6.84,6.84,0,0,1-.72,3.54,3.17,3.17,0,0,1-2,1.47,14.17,14.17,0,0,1-3.38.32C85.14,135,84.05,135,82.89,134.91Z"/><path class="cls-5" d="M47.08,49.62c1.17-.36,8.61.83,9.61,1.53,3.13,2.21,7.71,3.41,9.55,1.15s-.08-6.13-3-9.1c-.88-.88-3.7-7.75-3.56-9,.42-3.87-.85-8.5-3.73-9s-5.61,3.66-6.3,7.16c-.24,1.22-5,7.11-6.14,7.62-3.48,1.62-6.77,5-5.73,7.69S43.7,50.65,47.08,49.62Z"/><path class="cls-5" d="M60,9.61c4.68.2,6.65,9.72,5.89,17.18-.24,2.37,5.27,15.71,6.24,17.91a7.29,7.29,0,0,0,3,3C71.63,38.07,71.32,30.32,72,28.51c3-8.4,1.71-19.69-2.85-22.32-3.07-1.77-9.79-2.48-14.07,4.56A6.91,6.91,0,0,1,60,9.61Z"/><path class="cls-5" d="M22.61,50.2C20.Line truncated
				`@@ -0,0 +1 @@`
				<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1365.333" height="1365.333" viewBox="0 0 1024.000000 1024.000000"><path d="M685.9 27.4c-.2.2-3 .7-6.1 1-12.6 1.5-34.6 8.5-45.2 14.5-2 1.2-5.3 3.1-7.3 4.2-14.3 8.1-30.2 22.3-43.5 38.8-5.9 7.4-16.2 22.1-15.5 22.1.2 0 3.6-1.7 7.5-3.9 17.4-9.6 28.8-12.1 52.2-11.7 13.4.3 17.7.8 23.1 2.5 25.1 8 45.2 36.6 58.9 83.7 1.8 6 3.3 11.6 3.5 12.4 2.3 10.8 3.5 17.1 4 20 .3 1.9 1 6 1.5 9 1.2 7.3 1.8 11.3 2.5 18.5.4 3.3.8 7.6 1.1 9.5 1.6 14.3 2.2 51.4 1 69.5-1.4 21.3-1.5 26-.5 31 .5 2.7 1.2 6.3 1.5 8 2.3 12.9 20.6 69 33.4 102.5 1.6 4.1 4.8 12.4 7.1 18.5 17.1 45.2 47.3 118.6 49.1 119.3.4.2.8.9.8 1.5.1 3.8 18.3 22 29.2 29.1 4.7 3.1 8.8 5.6 9 5.6.3 0-3.2-10.9-7.7-24.3-4.5-13.3-8.4-25.3-8.7-26.7-.4-1.4-2-7.2-3.7-13-4.3-14.5-12.2-45.3-13.7-54-.3-1.4-.7-3.3-1-4.2-.3-1-.7-3-1-4.5-.2-1.6-.9-4.8-1.4-7.3-.5-2.5-1.4-7.2-2-10.5-.5-3.3-1.2-7.1-1.5-8.5-.3-1.4-1-5.7-1.5-9.5-.6-3.9-1.2-8.1-1.5-9.5-.3-2.3-.7-5.4-2-16.3-3.1-25.8-3.8-58.6-1.5-73.2.7-4.4 2.2-10.7 3.5-14 2.3-6.1 9-28.9 9.9-33.5.3-1.4 1.2-5.2 2-8.5s1.7-7.4 1.9-9c.3-1.7 1.4-8.2 2.6-14.6 1.1-6.3 2.3-14.7 2.6-18.5.4-3.8.9-8.3 1.1-9.9 2.2-16.2 2.2-69.4 0-83.5-.2-1.4-.7-5-1.1-8-6.7-56.6-26.4-102.4-53.1-123.1-11.1-8.5-31-16.4-49.9-19.7-9.6-1.7-38.4-2.9-39.6-1.8zM465 215.4c-2.3 3-9.7 11.7-14.5 17-1.1 1.2-5.6 6.2-10 11.1-8.3 9.3-43.9 45.2-53.5 54-51.1 46.9-108.8 86-132.5 90-2.2.4-4.4.8-5 .9-.5.2-2.8.6-5 1.1-24.5 4.7-70 20.4-91 31.3-2.7 1.4-5.2 2.6-5.5 2.7-.7.1-12.3 6.2-16.7 8.7-2.1 1.2-5.4 3.1-7.5 4.2C62.4 471.4 16.3 519 4.3 559.8.9 571.3.5 590 3.4 603.5c2.6 12.1 7.2 25.6 11.8 35 19.6 39.1 52.7 65.8 95.3 76.8 5.5 1.4 12 2.9 14.5 3.2 2.5.4 5.4.9 6.5 1.1 2.8.5 11.7 1.4 19.5 1.9l6.4.4-3.4-2.1c-20.8-12.5-29.7-21.3-39-38.3-1.8-3.3-4.3-7.8-5.5-10-6.1-11.2-8.2-22.8-6.4-35.1 7.4-48 72.3-111.2 159.4-155 10.5-5.3 21-11.2 23.5-13.1 8.7-6.7 26.9-25.3 45.4-46.3 1.7-2 4.9-5.6 7.1-8.1 2.2-2.4 6-6.9 8.5-9.8 2.5-3 5-5.9 5.5-6.5.6-.6 3-3.6 5.5-6.6 6.5-8 7.1-8.6 15.2-18.5 12.7-15.4 51.5-64.5 61.3-77.6 1.1-1.5 5.9-7.8 10.6-14 11.5-15.2 13.3-18.1 16.8-26.9 3-7.7 3.5-9.3 5.1-19 1.2-7.1 1.9-21.9 1.1-22.4-.3-.2-1.7 1.1-3.1 2.8zM563.9 315c-21.5 5.4-43.9 28.6-59.4 61.3-5.2 11-10.1 24.9-12.5 35.7-2 8.8-6.1 16.2-21 37.4-1.8 2.6-17.8 23.2-20.7 26.6-14.7 17.6-22.4 26.2-31.2 35.1-8.7 8.6-12.2 11.3-19.6 15.2-16.7 8.7-25.6 14.5-37 23.8-22.2 18.1-36.8 38.2-41 56.4-1.6 6.6-2.2 17.6-1.1 19.3.3.5.7 2.1 1 3.7.8 4.3 5.3 12.7 9.1 16.8 10.1 11.1 27.7 18.5 50.5 21.3 12.2 1.5 36.1.8 49-1.6 11.6-2 12.6-2.3 20.5-4.5s31.7-2.2 43.5 0c.8.2 4.4.6 8 1 3.6.4 7.4.9 8.4 1.1 1.1.2 4.2.6 6.9.9 2.8.3 5.3.8 5.6.9.3.2 2.9.7 5.6 1 9.1 1.3 39 7.5 47.9 10.1 8.9 2.6 18.5 7 20.6 9.6 1.9 2.3 30.1 16.5 39.5 20 9.1 3.3 26.6 7.7 33.7 8.6 9.2 1.1 23.9.7 30-.7 19.5-4.6 33.3-18.5 36.3-36.7.7-4.2.8-19 .1-20.1-.2-.4-.7-2.4-1-4.6-1-6.1-5.5-18.3-10.3-28.1-4.2-8.3-15.4-26.1-20.1-31.6-5.8-7-14.5-17-18.6-21.4-2.6-2.8-6.5-8-8.7-11.7-6.3-10.8-17.6-35.1-25.4-55.3-1.5-3.9-3.3-8.4-4-10-1.4-3.5-4.9-12.8-5-13.5 0-.3-1.2-3.7-2.5-7.5-1.3-3.9-2.5-7.5-2.6-8-.1-.6-.9-3.5-1.8-6.6-2.6-8.9-2.8-10-2.6-17.4.7-25.5.3-39.3-1.3-49.5-.3-1.4-.8-4.5-1.2-7-.3-2.4-.8-4.7-1-5.1-.2-.3-.7-2.1-1-4-.9-5.4-6.3-20.6-9.7-27.3-7.5-14.9-16.6-24.9-27.5-30.3-6.3-3.1-8.3-3.6-16-3.9-4.8-.2-10.4.1-12.4.6zM340 752.1c-12.3 2.1-18.9 4.4-31.5 10.7-10.5 5.3-11.8 4.4 13 9.2 69 13.5 135.5 34.9 186.8 60.2 24.5 12.1 41 22.8 49.7 32.3 24.3 26.6 37.9 39.4 60 56.6 50.3 39.2 116.2 69.8 162.5 75.5 2.8.3 6.8.9 9 1.3 4.8.9 28.3.6 34-.3 23.2-4 37.1-11.8 56.6-31.7 33-33.8 46.8-81.2 37.4-128.4-3.2-16-8-29.9-16.2-46.5l-4.2-8.5-.1 8c-.1 4.4-.3 8.7-.4 9.5-.2.8-.6 3.8-1 6.6-1.8 14.4-15.1 40.8-26.4 52.7-17.8 18.7-53.6 23.1-99.2 12.2-5.8-1.4-11.5-2.7-12.6-3-1.2-.3-7.7-2.3-14.5-4.6-36.3-12-78-32.8-111.4-55.7-6-4.1-13-8.4-15.5-9.4-2.5-1.1-5.4-2.3-6.5-2.8-5.6-2.4-39.7-11.2-52.5-13.5-1.9-.3-4.2-.7-5-.9-.8-.1-4-.8-7-1.4-9.8-2-26.4-5.1-30-5.6-3-.5-29.1-4.8-37-6.1-1.4-.2-4.3-.7-6.5-1-6.9-1.1-9.8-1.5-15.5-2.5-3-.5-8.2-1.2-11.5-1.6-3.3-.3-6.2-.7-6.5-.9-.3-.2-4.4-.9-9-1.5-4.7-.6-9.6-1.3-11-1.5-1.4-.2-6.3-.9-11-1.5s-9.6-1.3-11-1.5c-5.9-.8-10.8-1.5-15-2-5.1-.6-9.4-1.2-16-2.1-7.1-.9-20.1-1.1-25-.3z"/></svg>