Merge pull request #21 from jinyingtan/Refactor

Refactor

Author: Tan Jin Ying

src/components/header.js renamed to src/components/NavBar.js

@@ -24,18 +24,18 @@ const styles = theme => ({
     width: '100%',
   },
   appBar: {
-    backgroundColor: '#fff',
+    backgroundColor: 'white',
   },
   grow: {
     flexGrow: 1,
   },
   links: {
     textDecoration: 'none',
-    color: '#000',
+    color: 'black',
   },
   whiteLinks: {
     textDecoration: 'none',
-    color: '#fff',
+    color: 'white',
   },
   sectionDesktop: {
     display: 'none',
@@ -115,7 +115,7 @@ const NavBoxItem = ({ to, title, classes }) => {
   );
 };
 
-class Header extends Component {
+class NavBar extends Component {
   state = {
     left: false,
   };
@@ -195,7 +195,7 @@ class Header extends Component {
               open={this.state.left}
               onClose={this.toggleDrawer('left', false)}
             >
-            
+
               <div
                 tabIndex={0}
                 role="button"
@@ -212,12 +212,12 @@ class Header extends Component {
   }
 }
 
-Header.propTypes = {
+NavBar.propTypes = {
   siteTitle: PropTypes.string,
 };
 
-Header.defaultProps = {
+NavBar.defaultProps = {
   siteTitle: '',
 };
 
-export default withStyles(styles)(Header);
+export default withStyles(styles)(NavBar);

src/components/about/BannerComponent.js

@@ -3,7 +3,8 @@ import React, { Component } from 'react';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 
-import BannerImage from '../BannerImage';
+import BannerImage from '../commons/BannerImage';
+import { whiteSmoke } from '../../utils/Colors'
 
 const styles = theme => ({
   root: {
@@ -33,12 +34,12 @@ const styles = theme => ({
     marginRight: '2rem'
   },
   title: {
-    color: '#f5f5f5',
+    color: whiteSmoke,
     fontWeight: 700
   },
   description: {
     marginTop: '2em',
-    color: '#f5f5f5'
+    color: whiteSmoke
   }
 })
 

src/components/about/PictureWithNameComponent.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 
-import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
 
-import PictureWithWriteUpComponent from './PictureWithWriteUpComponent'
-import PictureWithNameComponent from './PictureWithNameComponent'
+import TeamHorizontalCardComponent from './TeamHorizontalCardComponent'
+import TeamVerticalCardComponent from './TeamVerticalCardComponent'
 
 const styles = theme => ({
   root: {
@@ -47,7 +47,7 @@ class TeamComponent extends Component {
 
     return (
       partners.map((partner, index) => (
-        <PictureWithNameComponent
+        <TeamVerticalCardComponent
           name={partner.node.frontmatter.name}
           profilePicture={partner.node.frontmatter.profilePicture.relativePath}
           club={partner.node.frontmatter.club}
@@ -71,7 +71,7 @@ class TeamComponent extends Component {
           <div className={classes.advisors}>
             <Typography variant="h5" className={classes.title} gutterBottom>Advisors</Typography>
             <div className={classes.advisorsInfo}>
-              <PictureWithWriteUpComponent
+              <TeamHorizontalCardComponent
                 info={advisors}
               />
             </div>
@@ -80,7 +80,7 @@ class TeamComponent extends Component {
           <div className={classes.operations}>
             <Typography variant="h5" className={classes.title} gutterBottom>Operations</Typography>
             <div className={classes.advisorsInfo}>
-              <PictureWithWriteUpComponent
+              <TeamHorizontalCardComponent
                 info={operations}
               />
             </div>

src/components/about/PictureWithWriteUpComponent.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+import Image from '../commons/Image'
+
+const styles = theme => ({
+  profileImage: {
+    borderRadius: '50%',
+    width: '4.5rem',
+    height: '4.5rem',
+    [theme.breakpoints.up('md')]: {
+      width: '5.5rem',
+      height: '5.5rem'
+    },
+  },
+  name: {
+    fontWeight: 700,
+    marginBottom: '0.75em',
+    marginTop: '1.5em',
+    [theme.breakpoints.up('sm')]: {
+      marginBottom: '1.25em',
+      marginTop: 0
+    }
+  },
+})
+
+class TeamHorizontalCardComponent extends Component {
+  createGridItems = (classes, data) => {
+    const info = data.edges;
+
+    return (
+      info.map((i, index) => (
+        <Grid item xs={12} sm={6}>
+          <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}>
+                <Typography variant="body1" className={classes.name}>{i.node.frontmatter.name}</Typography>
+                <Typography variant="body2" className={classes.title}>{i.node.frontmatter.description}</Typography>
+              </Grid>
+            </Grid>
+          </div>
+        </Grid>
+      ))
+    )
+  }
+
+  render() {
+    const { info } = this.props;
+    const { classes } = this.props;
+
+    return (
+      <div>
+        <Grid container spacing={40}>
+          {this.createGridItems(classes, info)}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+TeamHorizontalCardComponent.propTypes = {
+  info: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(TeamHorizontalCardComponent);