Add FB to Team Details

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

@@ -15,7 +15,7 @@ import log from '../../../utils/log'
 
 const styles = theme => ({
   fbContainer: {
-    margin: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 2}px`
+    margin: `0 0 ${theme.spacing.unit * 2}px`
   },
   card: {
     display: 'flex',

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

@@ -65,10 +65,7 @@ const styles = theme => ({
     borderTop: '1px solid #CCCCCC',
     width: '90%',
     margin: `${theme.spacing.unit * 3}px auto`,
-    paddingTop: `${theme.spacing.unit * 3}px`,
-    '& h4': {
-      padding: `0 ${theme.spacing.unit * 3}px ${theme.spacing.unit * 1}px`
-    }
+    paddingTop: `${theme.spacing.unit * 3}px`
   },
   banner: {
     maxWidth: '100%',

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

@@ -8,6 +8,8 @@ import { withStyles } from '@material-ui/core/styles'
 
 import { Link } from 'react-router-dom'
 
+import TeamsFBView from './TeamsFBView'
+
 const styles = theme => ({
   root: {
     flexGrow: 1
@@ -41,8 +43,12 @@ const styles = theme => ({
     margin: '0 auto',
     padding: `0 0 ${theme.spacing.unit * 2}px`
   },
+  metaContainer: {
+    marginTop: `${theme.spacing.unit * 1}px`,
+    alignSelf: 'stretch',
+    borderRight: '1px solid #CCCCCC'
+  },
   teamMeta: {
-    borderRight: '1px solid #CCCCCC',
     margin: `${theme.spacing.unit * 3}px 0 0`,
     paddingLeft: `${theme.spacing.unit * 2}px`,
     textAlign: 'center'
@@ -58,6 +64,12 @@ const styles = theme => ({
       padding: `0 ${theme.spacing.unit * 3}px 0`
     }
   },
+  fbContent: {
+    borderTop: '1px solid #CCCCCC',
+    width: '90%',
+    margin: `${theme.spacing.unit * 3}px auto`,
+    paddingTop: `${theme.spacing.unit * 3}px`
+  },
   banner: {
     maxWidth: '100%',
     height: 'auto',
@@ -102,7 +114,7 @@ const TeamsDetails = ({ classes, team }) => {
           <div className={classes.heroContent}>
             <img src={banner} alt={team.name} className={classes.banner} />
             <Grid container>
-              <Grid md={3}>
+              <Grid md={3} className={classes.metaContainer}>
                 <Grid container className={classes.teamMeta} direction='column' justify='center'>
                   <img src={avatar} alt={team.name} className={classes.avatar} />
                   <Typography variant='subtitle1' paragraph gutterBottom>
@@ -136,6 +148,16 @@ const TeamsDetails = ({ classes, team }) => {
                     Description: {team.profile.description}
                   </Typography>
                 </Grid>
+                <Grid container className={classes.fbContent} direction='column'>
+                  <Typography
+                    variant='h4'
+                    color='textSecondary'
+                    gutterBottom
+                  >
+                    Financial Beings
+                  </Typography>
+                  <TeamsFBView team={team} />
+                </Grid>
               </Grid>
             </Grid>
           </div>

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+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 Typography from '@material-ui/core/Typography'
+import { withStyles } from '@material-ui/core/styles'
+
+import log from '../../../utils/log'
+
+const styles = theme => ({
+  fbContainer: {
+    margin: `0 0 ${theme.spacing.unit * 2}px`
+  },
+  card: {
+    display: 'flex',
+    width: '100%'
+  },
+  cardDetails: {
+    display: 'flex',
+    flex: 1
+  },
+  cardContent: {
+    flex: 1
+  },
+  cardMedia: {
+    flex: 1,
+    width: 100,
+    height: 100,
+    maxWidth: 100,
+    justifyContent: 'flex-start'
+  }
+})
+
+export const TeamsFBView = ({ classes, team }) => {
+  log.debug('ManageTeamProvileFBView', team, team.fb[0], 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>
+  )
+}
+
+TeamsFBView.propTypes = {
+  classes: PropTypes.object.isRequired,
+  team: PropTypes.object.isRequired
+}
+
+export default withStyles(styles)(TeamsFBView)