Client: Component style cleanup

client/src/App.js

@@ -20,6 +20,7 @@ import {
   Footer,
   Callback,
   Home,
+  About,
   Dashboard,
   Teams,
   theme,
@@ -149,6 +150,7 @@ class App extends Component {
               <NavBar auth={auth} />
               <Switch>
                 <Route exact path='/' component={Home} />
+                <Route exact path='/about' component={About} />
                 <Route exact path='/teams' component={Teams} />
                 <Route exact path='/teams/:slug' component={Teams} />
                 <Route

client/src/views/about/index.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+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 About = ({ 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>
+)
+
+About.propTypes = {
+  classes: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(About)

client/src/views/dashboard/TeamMembers.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
 
-import { TeamTable } from './components/TeamTable'
+import { MessageCard } from '../common/'
 
 const styles = theme => ({
   tableContainer: {
@@ -18,7 +18,7 @@ const TeamMembers = ({ classes }) => (
       Members
     </Typography>
     <div className={classes.tableContainer}>
-      <TeamTable />
+      <MessageCard message='Coming soon. Invite and manage team members' />
     </div>
   </div>
 )

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

@@ -51,9 +51,6 @@ export const DashTeamItem = ({ classes, team }) => (
           <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}>

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

@@ -16,6 +16,8 @@ const DashboardLink = props => <Link to='/dashboard' {...props} />
 const TeamsLink = props => <Link to='/manage-teams' {...props} />
 const MembersLink = props => <Link to='/team-members' {...props} />
 const SettingsLink = props => <Link to='/settings' {...props} />
+const DocumentationLink = props => <a href='https://advancedalgos.net/documentation-quick-start.shtml' target='_blank' {...props} />
+const SupportLink = props => <a href='https://t.me/advancedalgoscommunity' target='_blank' {...props} />
 
 export const MainDrawerItems = (
   <div>
@@ -54,13 +56,13 @@ export const MainDrawerItems = (
 
 export const SecondaryDrawerItems = (
   <div>
-    <ListItem button>
+    <ListItem button component={DocumentationLink}>
       <ListItemIcon>
         <LibraryBooksIcon />
       </ListItemIcon>
       <ListItemText primary='Documentation' />
     </ListItem>
-    <ListItem button>
+    <ListItem button component={SupportLink}>
       <ListItemIcon>
         <SentimentSatisfiedAltIcon />
       </ListItemIcon>

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
+import { withStyles } from '@material-ui/core/styles'
 import { Mutation } from 'react-apollo'
 
 import Button from '@material-ui/core/Button'
@@ -16,6 +16,17 @@ import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
 import { checkGraphQLError } from '../../../utils/graphql-errors'
 
+const styles = theme => ({
+  dialogContainer: {
+    display: 'block',
+    margin: '3em',
+    minWidth: 400
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  }
+})
+
 export class ManageTeamDelete extends Component {
   constructor (props) {
     super(props)
@@ -46,7 +57,7 @@ export class ManageTeamDelete extends Component {
 
   render () {
     console.log(this.props, this.props.slug)
-    const authId = this.props.authId
+    const { classes, authId } = this.props
     return (
       <Mutation
         mutation={DELETE_TEAM}
@@ -82,7 +93,7 @@ export class ManageTeamDelete extends Component {
           }
           return (
             <div>
-              <Button size='small' color='primary' className={this.props.classes.buttonRight} onClick={this.handleClickOpen}>
+              <Button size='small' color='primary' className={classes.buttonRight} onClick={this.handleClickOpen}>
                 <DeleteIcon /> Delete
               </Button>
               <Dialog
@@ -90,23 +101,25 @@ export class ManageTeamDelete extends Component {
                 onClose={this.handleClose}
                 aria-labelledby='form-dialog-title'
               >
-                <DialogTitle id='form-dialog-title'>Delete Team Team</DialogTitle>
-                <DialogContent>
-                  <Typography variant='subheading' color='primary'>DANGER - Deleting your team cannot be undone</Typography>
-                  <Typography variant='subheading'>Are you sure you want to delete this team?</Typography>
-                  {loader}
-                  {errors}
-                </DialogContent>
-                <DialogActions>
-                  <Button onClick={this.handleClose} color='primary'>
-                    Cancel
-                  </Button>
-                  <Button onClick={e => {
-                    this.handleSubmit(e, deleteTeam, this.props.slug, authId)
-                  }} color='primary'>
-                    Delete Team
-                  </Button>
-                </DialogActions>
+                <div classes={classes.dialogContainer}>
+                  <DialogTitle id='form-dialog-title'>Delete Team Team</DialogTitle>
+                  <DialogContent>
+                    <Typography variant='subheading' color='primary'>DANGER - Deleting your team cannot be undone</Typography>
+                    <Typography variant='subheading'>Are you sure you want to delete this team?</Typography>
+                    {loader}
+                    {errors}
+                  </DialogContent>
+                  <DialogActions>
+                    <Button onClick={this.handleClose} color='primary'>
+                      Cancel
+                    </Button>
+                    <Button onClick={e => {
+                      this.handleSubmit(e, deleteTeam, this.props.slug, authId)
+                    }} color='primary'>
+                      Delete Team
+                    </Button>
+                  </DialogActions>
+                </div>
               </Dialog>
             </div>
           )
@@ -127,4 +140,4 @@ ManageTeamDelete.propTypes = {
   authId: PropTypes.string.isRequired
 }
 
-export default withRouter(ManageTeamDelete)
+export default withStyles(styles)(ManageTeamDelete)

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
 
 import Button from '@material-ui/core/Button'
 import DetailsIcon from '@material-ui/icons/Details'
@@ -9,6 +10,17 @@ import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import Typography from '@material-ui/core/Typography'
 
+const styles = theme => ({
+  dialogContainer: {
+    display: 'block',
+    margin: '3em',
+    minWidth: 400
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  }
+})
+
 export class ManageTeamDetails extends Component {
   constructor (props) {
     super(props)
@@ -34,44 +46,46 @@ export class ManageTeamDetails extends Component {
           onClose={this.handleClose}
           aria-labelledby='form-dialog-title'
         >
-          <DialogTitle id='form-dialog-title'>{name} Team Details</DialogTitle>
-          <DialogContent>
-            <Typography
-              variant='display3'
-              align='center'
-              color='textPrimary'
-              gutterBottom
-            >
-              {name}
-            </Typography>
-            <Typography variant='subheading' color='textSecondary'>
-              {createdAt}
-            </Typography>
-            <Typography variant='subheading' color='textSecondary'>
-              Motto: {profile.motto}
-            </Typography>
-            <Typography variant='subheading' color='textSecondary'>
-              Description: {profile.description}
-            </Typography>
-            <Typography variant='subheading' paragraph gutterBottom>
-              Members: {members.length}
-            </Typography>
-            <Typography variant='subheading' color='primary'>
-              Team Admin:
-              {
-                members.map(member => {
-                  if (member.role === 'OWNER' || member.role === 'ADMIN') {
-                    return member.member.alias
-                  }
-                })
-              }
-            </Typography>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={this.handleClose} color='primary'>
-              Close
-            </Button>
-          </DialogActions>
+          <div classes={this.props.classes.dialogContainer}>
+            <DialogTitle id='form-dialog-title'>{name} Team Details</DialogTitle>
+            <DialogContent>
+              <Typography
+                variant='display3'
+                align='center'
+                color='textPrimary'
+                gutterBottom
+              >
+                {name}
+              </Typography>
+              <Typography variant='subheading' color='textSecondary'>
+                {createdAt}
+              </Typography>
+              <Typography variant='subheading' color='textSecondary'>
+                Motto: {profile.motto}
+              </Typography>
+              <Typography variant='subheading' color='textSecondary'>
+                Description: {profile.description}
+              </Typography>
+              <Typography variant='subheading' paragraph gutterBottom>
+                Members: {members.length}
+              </Typography>
+              <Typography variant='subheading' color='primary'>
+                Team Admin:
+                {
+                  members.map(member => {
+                    if (member.role === 'OWNER' || member.role === 'ADMIN') {
+                      return member.member.alias
+                    }
+                  })
+                }
+              </Typography>
+            </DialogContent>
+            <DialogActions>
+              <Button onClick={this.handleClose} color='primary'>
+                Close
+              </Button>
+            </DialogActions>
+          </div>
         </Dialog>
       </div>
     )
@@ -91,4 +105,4 @@ ManageTeamDetails.propTypes = {
   team: PropTypes.any
 }
 
-export default ManageTeamDetails
+export default withStyles(styles)(ManageTeamDetails)

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router-dom'
 import { Mutation } from 'react-apollo'
+import { withStyles } from '@material-ui/core/styles'
 
 import Button from '@material-ui/core/Button'
 import EditIcon from '@material-ui/icons/Edit'
@@ -20,6 +20,17 @@ import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
 
 import { checkGraphQLError } from '../../../utils/graphql-errors'
 
+const styles = theme => ({
+  dialogContainer: {
+    display: 'block',
+    margin: '3em',
+    minWidth: 400
+  },
+  buttonRight: {
+    justifyContent: 'flex-end'
+  }
+})
+
 export class ManageTeamEdit extends Component {
   constructor (props) {
     super(props)
@@ -29,8 +40,8 @@ export class ManageTeamEdit extends Component {
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
     console.log('ManageTeamEdit', props.team)
-    const motto = props.team.profile.motto
-    const description = props.team.profile.description
+    const motto = props.team.profile.motto || ''
+    const description = props.team.profile.description || ''
     this.state = {
       open: false,
       motto: motto,
@@ -40,7 +51,7 @@ export class ManageTeamEdit extends Component {
 
   render () {
     console.log(this.props, this.props.slug)
-    const { authId } = this.props
+    const { classes, team, authId } = this.props
     return (
       <Mutation
         mutation={UPDATE_TEAM_PROFILE}
@@ -70,7 +81,7 @@ export class ManageTeamEdit extends Component {
           }
           return (
             <div>
-              <Button size='small' color='primary' className={this.props.classes.buttonRight} onClick={this.handleClickOpen}>
+              <Button size='small' color='primary' className={classes.buttonRight} onClick={this.handleClickOpen}>
                 <EditIcon /> Edit
               </Button>
               <Dialog
@@ -78,45 +89,55 @@ export class ManageTeamEdit extends Component {
                 onClose={this.handleClose}
                 aria-labelledby='form-dialog-title'
               >
-                <DialogTitle id='form-dialog-title'>Edit Team Details</DialogTitle>
-                <DialogContent>
-                  <Typography variant='subheading'>Team Creation</Typography>
-                  <DialogContentText>Team Motto:</DialogContentText>
-                  <TextField
-                    autoFocus
-                    margin='dense'
-                    id='motto'
-                    label='Team Motto'
-                    type='text'
-                    fullWidth
-                    value={this.state.motto}
-                    onChange={this.handleChange}
-                  />
-                  <DialogContentText>Team description:</DialogContentText>
-                  <TextField
-                    margin='dense'
-                    id='description'
-                    label='Team Description'
-                    type='text'
-                    rows={4}
-                    multiline
-                    fullWidth
-                    value={this.state.description}
-                    onChange={this.handleChange}
-                  />
-                  {loader}
-                  {errors}
-                </DialogContent>
-                <DialogActions>
-                  <Button onClick={this.handleClose} color='primary'>
-                    Cancel
-                  </Button>
-                  <Button onClick={e => {
-                    this.handleSubmit(e, updateTeamProfile, this.props.slug)
-                  }} color='primary'>
-                    Update Team
-                  </Button>
-                </DialogActions>
+                <div classes={classes.dialogContainer}>
+                  <DialogTitle id='form-dialog-title'>Edit Team Details</DialogTitle>
+                  <DialogContent>
+                    <TextField
+                      autoFocus
+                      margin='dense'
+                      id='name'
+                      label='Team Name'
+                      type='text'
+                      fullWidth
+                      disabled
+                      value={team.name}
+                    />
+                    <TextField
+                      autoFocus
+                      margin='dense'
+                      id='motto'
+                      label='Team Motto'
+                      type='text'
+                      fullWidth
+                      value={this.state.motto}
+                      onChange={this.handleChange}
+                    />
+                    <DialogContentText>Team description:</DialogContentText>
+                    <TextField
+                      margin='dense'
+                      id='description'
+                      label='Team Description'
+                      type='text'
+                      rows={4}
+                      multiline
+                      fullWidth
+                      value={this.state.description}
+                      onChange={this.handleChange}
+                    />
+                    {loader}
+                    {errors}
+                  </DialogContent>
+                  <DialogActions>
+                    <Button onClick={this.handleClose} color='primary'>
+                      Cancel
+                    </Button>
+                    <Button onClick={e => {
+                      this.handleSubmit(e, updateTeamProfile, this.props.slug)
+                    }} color='primary'>
+                      Update Team
+                    </Button>
+                  </DialogActions>
+                </div>
               </Dialog>
             </div>
           )
@@ -161,4 +182,4 @@ ManageTeamEdit.propTypes = {
   team: PropTypes.object
 }
 
-export default withRouter(ManageTeamEdit)
+export default withStyles(styles)(ManageTeamEdit)

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

@@ -30,9 +30,9 @@ export const ManageTeamsItem = ({ classes, team, authId }) => (
           </Typography>
         </CardContent>
         <CardActions>
-          <ManageTeamDetails classes={classes} team={team} />
-          <ManageTeamEdit classes={classes} slug={team.slug} authId={authId} team={team} />
-          <ManageTeamDelete classes={classes} slug={team.slug} authId={authId} />
+          <ManageTeamDetails team={team} />
+          <ManageTeamEdit slug={team.slug} authId={authId} team={team} />
+          <ManageTeamDelete slug={team.slug} authId={authId} />
         </CardActions>
       </div>
     </Card>

client/src/views/dashboard/settings.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import Typography from '@material-ui/core/Typography'
 import { withStyles } from '@material-ui/core/styles'
 
-import { TeamTable } from './components/TeamTable'
+import { MessageCard } from '../common/'
 
 const styles = theme => ({
   tableContainer: {
@@ -18,7 +18,7 @@ export const Settings = ({ classes }) => (
       Settings
     </Typography>
     <div className={classes.tableContainer}>
-      <TeamTable />
+      <MessageCard message='Coming soon. Management settings.' />
     </div>
   </div>
 )

client/src/views/footer/index.js

@@ -55,26 +55,28 @@ const Footer = ({ classes }) => {
               Home
             </Typography>
           </NavLink>
-          <NavLink to='/' className={classNames(classes.footerLink)}>
+          <NavLink to='/teams' className={classNames(classes.footerLink)}>
             <Typography variant='subheading' color='textSecondary'>
               Teams
             </Typography>
           </NavLink>
-          <NavLink to='/' className={classNames(classes.footerLink)}>
+          <NavLink to='/about' 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)}>
+          <a href='https://t.me/advancedalgoscommunity' target='_blank>' className={classNames(classes.footerLink)}>
+            <Typography variant='title' color='textPrimary' gutterBottom>
+              Support
+            </Typography>
+          </a>
+          <a href='https://advancedalgos.net/documentation-quick-start.shtml' target='_blank>' className={classNames(classes.footerLink)}>
             <Typography variant='subheading' color='textSecondary'>
               Documentation
             </Typography>
-          </NavLink>
+          </a>
           <NavLink to='/' className={classNames(classes.footerLink)}>
             <Typography variant='subheading' color='textSecondary'>
               Telegram

client/src/views/index.js

@@ -2,9 +2,10 @@ import NavBar from './navbar'
 import Footer from './footer'
 import Callback from './callback'
 import Home from './home'
+import About from './about'
 import Dashboard from './dashboard'
 import Teams from './teams'
 
 import { theme, globalStyles } from './theme'
 
-export { NavBar, Footer, Callback, Home, Dashboard, Teams, theme, globalStyles }
+export { NavBar, Footer, Callback, Home, About, Dashboard, Teams, theme, globalStyles }