AboutComponent: Update design

Author: Jin Ying

src/components/about/TeamComponent.js

@@ -50,8 +50,6 @@ class TeamComponent extends Component {
         <TeamVerticalCardComponent
           name={partner.node.frontmatter.name}
           profilePicture={partner.node.frontmatter.profilePicture.relativePath}
-          club={partner.node.frontmatter.club}
-          role={partner.node.frontmatter.role}
         />
       ))
     )

src/components/about/TeamHorizontalCardComponent.js

@@ -10,22 +10,28 @@ import Image from '../commons/Image'
 const styles = theme => ({
   profileImage: {
     borderRadius: '50%',
-    width: '4.5rem',
-    height: '4.5rem',
+    width: '6rem',
+    height: '6rem',
     [theme.breakpoints.up('md')]: {
-      width: '5.5rem',
-      height: '5.5rem'
+      width: '6.75rem',
+      height: '6.75rem'
     },
   },
   name: {
     fontWeight: 700,
-    marginBottom: '0.75em',
     marginTop: '1.5em',
     [theme.breakpoints.up('sm')]: {
-      marginBottom: '1.25em',
       marginTop: 0
     }
   },
+  role: {
+    marginBottom: '0.75em',
+    color: '#9e9e9e',
+    fontStyle: 'italic',
+    [theme.breakpoints.up('sm')]: {
+      marginBottom: '1.25em',
+    }
+  }
 })
 
 class TeamHorizontalCardComponent extends Component {
@@ -34,15 +40,16 @@ class TeamHorizontalCardComponent extends Component {
 
     return (
       info.map((i, index) => (
-        <Grid item xs={12} sm={6}>
+        <Grid item xs={12} sm={9}>
           <div className={classes.root}>
             <Grid container>
               <Grid item sm={4} lg={3}>
                 <Image filename={i.node.frontmatter.profilePicture.relativePath} classProps={classes.profileImage} />
               </Grid>
 
-              <Grid item sm={8} lg={9} className={classes.info}>
+              <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>
               </Grid>
             </Grid>

src/components/about/TeamVerticalCardComponent.js

@@ -36,7 +36,6 @@ const styles = theme => ({
       height: '5.5rem'
     },
   },
-
 })
 
 class TeamVerticalCardComponent extends Component {
@@ -47,13 +46,11 @@ class TeamVerticalCardComponent extends Component {
     return (
       <Grid item xs={6} sm={3} className={classes.root}>
         <div className={classes.profilePictureContainer}>
-          <Image filename={profilePicture} classProps={classes.profilePicture} />
+          <Image filename={profilePicture} classProps={classes.profilePicture} classImageStyle={{ objectFit: 'contain' }} />
         </div>
 
         <div className={classes.description}>
           <Typography variant="body1" className={classes.name} gutterBottom>{name}</Typography>
-          <Typography variant="caption" className={classes.club} gutterBottom>{club}</Typography>
-          <Typography variant="caption" className={classes.role} gutterBottom>{role}</Typography>
         </div>
       </Grid>
     );
@@ -63,8 +60,6 @@ class TeamVerticalCardComponent extends Component {
 TeamVerticalCardComponent.propTypes = {
   profilePicture: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  role: PropTypes.string.isRequired,
-  club: PropTypes.string.isRequired
 };
 
 export default withStyles(styles)(TeamVerticalCardComponent);

src/images/about_cover.jpg

@@ -42,6 +42,7 @@ export const pageQuery = graphql`
         node {
           frontmatter {
             name
+            role
             description
             profilePicture {
               relativePath
@@ -60,6 +61,7 @@ export const pageQuery = graphql`
         node {
           frontmatter {
             name
+            role
             description
             profilePicture {
               relativePath
@@ -82,8 +84,6 @@ export const pageQuery = graphql`
         node {
           frontmatter {
             name
-            club
-            role
             profilePicture {
               relativePath
             }