Fix createTeam view + details for no FB

client/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@advancedalgos/teams-client",
-	"version": "0.0.27",
+	"version": "0.0.28",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

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

@@ -27,6 +27,9 @@ const styles = theme => ({
     margin: `${theme.spacing.unit * 4}px auto`,
     padding: 0
   },
+  newTeamContainer: {
+    padding: `${theme.spacing.unit * 4}px 0`
+  },
   cardGrid: {
     padding: `${theme.spacing.unit * 8}px 0`
   },
@@ -107,21 +110,23 @@ export const ManageTeamsList = ({ classes, match, ...props }) => (
         } else {
           return (
             <div className={classes.root} >
-              <Paper>
-                <Grid container spacing={0} direction='column' justify='stretch' alignItems='center'>
-                  <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 />
+              <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>
-                </Grid>
-              </Paper>
+                </Paper>
+              </div>
             </div>
           )
         }

client/src/views/teams/components/TeamsFBView.js

@@ -35,31 +35,47 @@ const styles = theme => ({
 })
 
 export const TeamsFBView = ({ classes, team }) => {
-  log.debug('ManageTeamProvileFBView', team, team.fb[0], team.fb[0].avatar)
+  log.debug('ManageTeamProvileFBView', team, team.fb[0])
+  let avatar = 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
+  if (team.fb.length > 0) {
+    avatar = team.fb[0].avatar
 
-  let avatar = (team.fb[0].avatar !== undefined && team.fb[0].avatar !== null) ? team.fb[0].avatar : 'https://aadevelop.blob.core.windows.net/module-teams/module-default/aa-avatar-default.png'
-
-  return (
-    <Grid item xs={12} className={classes.fbContainer}>
-      <Card className={classes.card}>
-        <div className={classes.cardDetails}>
-          <CardMedia
-            className={classes.cardMedia}
-            image={avatar}
-            title={team.name}
-          />
-          <CardContent className={classes.cardContent}>
-            <Typography gutterBottom variant='h5' component='h2'>
-              {team.fb[0].name}
-            </Typography>
-            <Typography variant='caption' color='textSecondary'>
-              {team.fb[0].kind}
-            </Typography>
-          </CardContent>
-        </div>
-      </Card>
-    </Grid>
-  )
+    return (
+      <Grid item xs={12} className={classes.fbContainer}>
+        <Card className={classes.card}>
+          <div className={classes.cardDetails}>
+            <CardMedia
+              className={classes.cardMedia}
+              image={avatar}
+              title={team.name}
+            />
+            <CardContent className={classes.cardContent}>
+              <Typography gutterBottom variant='h5' component='h2'>
+                {team.fb[0].name}
+              </Typography>
+              <Typography variant='caption' color='textSecondary'>
+                {team.fb[0].kind}
+              </Typography>
+            </CardContent>
+          </div>
+        </Card>
+      </Grid>
+    )
+  } else {
+    return (
+      <Grid item xs={12} className={classes.fbContainer}>
+        <Card className={classes.card}>
+          <div className={classes.cardDetails}>
+            <CardContent className={classes.cardContent}>
+              <Typography gutterBottom variant='h6'>
+                No Financial Beings
+              </Typography>
+            </CardContent>
+          </div>
+        </Card>
+      </Grid>
+    )
+  }
 }
 
 TeamsFBView.propTypes = {