Merge pull request #23 from jinyingtan/AboutImprovement

Improvements on About Page

Author: Tan Jin Ying

package-lock.json

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

src/components/about/TeamComponent.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,20 +40,34 @@ class TeamHorizontalCardComponent extends Component {
 
     return (
       info.map((i, index) => (
-        <Grid item xs={12} sm={6}>
+        <Grid item xs={12} sm={9} key={index}>
           <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="body2" className={classes.title}>{i.node.frontmatter.description}</Typography>
+                <Typography variant="subtitle2" className={classes.role}>{i.node.frontmatter.role}</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/TeamHorizontalCardComponent.js

@@ -10,50 +10,35 @@ 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 (
       <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 +48,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/components/about/TeamVerticalCardComponent.js

@@ -36,7 +36,7 @@ const Image = props => (
       }
 
       const imageSizes = image.node.childImageSharp.sizes;
-      return <Img alt={props.alt} sizes={imageSizes} className={props.classProps}/>;
+      return <Img alt={props.alt} sizes={imageSizes} className={props.classProps} imgStyle={props.classImageStyle} />;
     }}
   />
 );

src/components/commons/Image.js

@@ -105,7 +105,7 @@ class VolunteerProgramsComponent extends Component {
               aria-controls="panel1a-content"
               id="panel1a-header"
             >
-              <Typography variant="h7" noWrap>
+              <Typography variant="body1" noWrap>
                 {program.node.frontmatter.title}
               </Typography>
             </ExpansionPanelSummary>

src/components/volunteer/VolunteerProgramsComponent.js

@@ -1,5 +1,6 @@
 ---
-name: 'Dr Bimlesh Wadhwa'
+name: 'Dr. Bimlesh Wadhwa'
 profilePicture: 'bimlesh.jpg'
-description: 'Dr. Wadhwa Bimlesh is a Senior Lecturer of Computer Science and Assistant Dean (Student Life) of the School of Computing at the National University of Singapore (NUS).'
+role: 'Assistant Dean, Student Life'
+description: "Dr. Bimlesh Wadhwa is Senior Lecturer of Computer Science and Assistant Dean (Student Life) of the School of Computing at the National University of Singapore (NUS).\nShe founded 'Code For Community' in March 2015. She is passionate about tech, diversity and igniting potential in underserved. She believes tech skills could  empower underserved communities building  their confidence and encouraging them into education, entrepreneurship and employment"
 ---