Create New Team form adjusted to standards

client/src/views/manage-teams/components/CreateTeamForm.js

@@ -8,6 +8,7 @@ import TextField from '@material-ui/core/TextField'
 import FormControl from '@material-ui/core/FormControl'
 import FormHelperText from '@material-ui/core/FormHelperText'
 import Typography from '@material-ui/core/Typography'
+import Grid from '@material-ui/core/Grid'
 import { isEmpty } from '../../../utils/js-helpers'
 
 import CREATE_TEAM from '../../../graphql/teams/CreateTeamMutation'
@@ -20,14 +21,22 @@ const styles = theme => ({
     width: '100%',
     margin: '3em 0 1em'
   },
+  typography: {
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: 40
+  },
   dialogStyle: {
     padding: '3em'
   },
   textField: {
-    marginBottom: 10
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: 25
   },
   submitButton: {
-    margin: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 6}px`
+    margin: theme.spacing.unit,
+    marginTop: theme.spacing.unit * 3
   }
 })
 
@@ -84,7 +93,10 @@ export class CreateTeamForm extends Component {
               error={this.state.nameError !== '' || this.state.botNameError !== '' || error !== null}
               className={classes.formContainer}
             >
-              <Typography variant='subtitle2' align='center'>Create a name for your team</Typography>
+              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+              Give a nice and memorable name to your team.
+              </Typography>
+
               <TextField
                 autoFocus
                 id='name'
@@ -99,8 +111,8 @@ export class CreateTeamForm extends Component {
               {this.state.nameError !== '' && (
                 <FormHelperText>{this.state.nameError}</FormHelperText>
               )}
-              <Typography variant='subtitle2' align='center' ><br />
-                Create a name for your teams bot.
+              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+              Give a name for to the bot you are forking.
               </Typography>
               <TextField
                 autoFocus
@@ -118,16 +130,23 @@ export class CreateTeamForm extends Component {
               )}
               {error && <FormHelperText>{errors}</FormHelperText>}
               {loader}
-              <Button
-                onClick={e => {
-                  this.handleSubmit(e, createTeam, this.state.name, this.state.botName)
-                }}
-                variant='contained'
-                color='secondary'
-                className={classes.submitButton}
-              >
-                Create Team
-              </Button>
+
+              <Grid container justify='center' >
+                <Grid item>
+
+                  <Button
+                    onClick={e => {
+                      this.handleSubmit(e, createTeam, this.state.name, this.state.botName)
+                    }}
+                    variant='contained'
+                    color='secondary'
+                    className={classes.submitButton}
+                >
+                  Create Team
+                </Button>
+
+                </Grid>
+              </Grid>
             </FormControl>
           )
         }}

client/src/views/manage-teams/components/ManageTeamsList.js

@@ -22,6 +22,11 @@ const styles = theme => ({
   root: {
     flexGrow: 1
   },
+  typography: {
+    width: '80%',
+    marginLeft: '10%',
+    marginTop: 40
+  },
   heroContent: {
     maxWidth: 800,
     margin: `${theme.spacing.unit * 4}px auto`,
@@ -53,6 +58,13 @@ const styles = theme => ({
     height: 100,
     maxWidth: 100,
     justifyContent: 'flex-start'
+  },
+  paper: {
+    width: '100%',
+    flexGrow: 1,
+    padding: 10,
+    marginTop: '5%',
+    marginBottom: '10%'
   }
 })
 
@@ -109,25 +121,23 @@ export const ManageTeamsList = ({ classes, match, ...props }) => (
           )
         } else {
           return (
-            <div className={classes.root} >
-              <div className={classes.heroContent}>
-                <Paper>
-                  <Grid container spacing={0} direction='column' justify='stretch' alignItems='center' className={classes.newTeamContainer}>
-                    <Grid item xs={10}>
-                      <Typography variant='h5' align='center'>
-                        You don&rsquo;t have any teams. Create one!
-                      </Typography>
-                      <Typography variant='body1' align='center' gutterBottom>
-                        To begin developing on the Advanced Algos platform, as well as participate in Algobot competitions,
-                        you'll need to create a team. A default trading algobot will be cloned and added to your team so
-                        that you can begin experimenting right away.
-                      </Typography>
-                      <CreateTeamForm />
-                    </Grid>
-                  </Grid>
-                </Paper>
-              </div>
+            <div className='container'>
+              <Paper className={classes.paper} >
+
+                <Typography className={classes.typography} variant='h5' gutterBottom>
+                  Your First Team
+                </Typography>
+
+                <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+                  To begin developing on the Advanced Algos platform, as well as to participate in trading competitions,
+                  you will need to create a team or become a member of an existing one. Currently, the only option is to create your own team. As part of the same process, an already existing trading bot will be forked for you so that you do not have to start from scratch. It will be added to your team so
+                  that you can begin experimenting right away.
+                </Typography>
+                <CreateTeamForm />
+
+              </Paper>
             </div>
+
           )
         }
       } else {