Merge pull request #76 from Luis-Fernando-Molina/develop

Standarizing Look and Feel

client/src/views/landing/index.js

@@ -23,7 +23,7 @@ const styles = theme => ({
 
 const Landing = ({ classes, ...props }) => (
   <React.Fragment>
-    <BannerTopBar size='big' title='Teams Module' text='Discover, create and manage Advanced Algos teams.' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
+    <BannerTopBar size='big' title='Teams Module' text='Responsible for all teams at Advanced Algos.' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <div className='homePage container'>
       <Typography variant='h1' align='center' className='title'>
         Welcome to the Teams Module!

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 {

client/src/views/manage-teams/index.js

@@ -8,10 +8,10 @@ const ManageTeams = ({ match, ...props }) => (
   <div>
     <BannerTopBar
       size={match.params.slug !== undefined ? 'small' : 'medium'}
-      title='Manage Your Teams'
-      text='Discover, Create and manage Advanced Algos Teams'
+      title='Your Teams'
+      text='Create and manage your teams here.'
       backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg'
-    />
+  />
     <div className='container'>
       <ManageTeamsList {...props} match={match} />
     </div>

client/src/views/teams/index.js

@@ -31,7 +31,7 @@ const styles = theme => ({
 
 const Teams = ({ classes, match }) => (
   <React.Fragment>
-    <BannerTopBar size={match.params.slug !== undefined ? 'small' : 'medium'} title='Browse Teams' text='Explore Advanced Algos Teams' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
+    <BannerTopBar size={match.params.slug !== undefined ? 'small' : 'medium'} title='Teams Directory' text='All teams in Advanced Algos are here.' backgroundUrl='https://advancedalgos.net/img/photos/teams.jpg' />
     <div className='container'>
       <TeamsList match={match} />
     </div>