AboutComponent: Minor layout changes

Author: Jin Ying

src/components/about/TeamComponent.js

@@ -47,7 +47,7 @@ class TeamComponent extends Component {
 
     return (
       partners.map((partner, index) => (
-        <TeamVerticalCardComponent
+        <TeamVerticalCardComponent key={index}
           name={partner.node.frontmatter.name}
           profilePicture={partner.node.frontmatter.profilePicture.relativePath}
         />

src/components/about/TeamHorizontalCardComponent.js

@@ -40,7 +40,7 @@ class TeamHorizontalCardComponent extends Component {
 
     return (
       info.map((i, index) => (
-        <Grid item xs={12} sm={9}>
+        <Grid item xs={12} sm={9} key={index}>
           <div className={classes.root}>
             <Grid container>
               <Grid item sm={4} lg={3}>
@@ -50,11 +50,24 @@ class TeamHorizontalCardComponent extends Component {
               <Grid item sm={8} lg={9}>
                 <Typography variant="body1" className={classes.name}>{i.node.frontmatter.name}</Typography>
                 <Typography variant="subtitle2" className={classes.role}>{i.node.frontmatter.role}</Typography>
-                <Typography variant="body2" className={classes.title}>{i.node.frontmatter.description}</Typography>
+
+                {
+                  i.node.frontmatter.description.split('\n').map(function (item, idx) {
+                    return (
+                      <React.Fragment key={idx}>
+                        <Typography variant="body2">
+                          {item}
+                        </Typography>
+                        <br />
+                      </React.Fragment>
+                    )
+                  })
+                }
+
               </Grid>
             </Grid>
           </div>
-        </Grid>
+        </Grid >
       ))
     )
   }

src/components/about/TeamVerticalCardComponent.js

@@ -10,37 +10,25 @@ import Image from '../commons/Image'
 const styles = theme => ({
   root: {
     marginBottom: '1.25rem',
-    [theme.breakpoints.up('sm')]: {
-      textAlign: 'center',
-      marginBottom: '1.25rem'
-    }
+    textAlign: 'center',
   },
   profilePictureContainer: {
-    width: '4.5rem',
-    height: '4.5rem',
-    marginBottom: '1.25rem',
-    [theme.breakpoints.up('sm')]: {
-      margin: '0 auto 1.25rem auto',
-    },
+    width: '5.5rem',
+    height: '5.5rem',
+    margin: '0 auto 1.25rem auto',
     [theme.breakpoints.up('md')]: {
-      width: '5.5rem',
-      height: '5.5rem'
+      width: '6.25rem',
+      height: '6.25rem'
     },
   },
   profilePicture: {
     borderRadius: '50%',
-    width: '4.5rem',
-    height: '4.5rem',
-    [theme.breakpoints.up('md')]: {
-      width: '5.5rem',
-      height: '5.5rem'
-    },
   },
 })
 
 class TeamVerticalCardComponent extends Component {
   render() {
-    const { name, profilePicture, club, role } = this.props;
+    const { name, profilePicture } = this.props;
     const { classes } = this.props;
 
     return (