Merge pull request #30 from kohchihao/update-events-button

Update events button

Author: kohchihao

package-lock.json

@@ -162,7 +162,7 @@ class NavBar extends Component {
             {/* Site icon */}
             <Button className={classes.siteIcon} color="inherit">
               <Link to="/" className={classes.links}>
-                <img src={codeForCommunity} />
+                <img src={codeForCommunity} alt="Code for Community"/>
               </Link>
             </Button>
 

src/components/NavBar.js

@@ -4,7 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 
 import BannerImage from '../commons/BannerImage';
-import { whiteSmoke } from '../../utils/Colors'
+import { whiteSmoke } from '../../utils/Colors';
 
 const styles = theme => ({
   root: {
@@ -31,17 +31,17 @@ const styles = theme => ({
   },
   info: {
     marginLeft: '2rem',
-    marginRight: '2rem'
+    marginRight: '2rem',
   },
   title: {
     color: whiteSmoke,
-    fontWeight: 700
+    fontWeight: 700,
   },
   description: {
     marginTop: '2em',
-    color: whiteSmoke
-  }
-})
+    color: whiteSmoke,
+  },
+});
 
 class BannerComponent extends Component {
   render() {
@@ -51,10 +51,14 @@ class BannerComponent extends Component {
       <div className={classes.root}>
         <BannerImage filename={'about_cover.jpg'} classProps={classes.bgImg} />
         <div className={classes.info}>
-          <Typography variant="h4" className={classes.title} gutterBottom>Welcome!</Typography>
+          <Typography variant="h4" className={classes.title} gutterBottom>
+            Welcome!
+          </Typography>
           <Typography variant="h6" className={classes.description}>
-            CodeForCommunity is an umbrella project of SoC Family, a network of SoC Students, Staff and Alumni who take great pride in helping develop the projects for underserved communities.
-                    </Typography>
+            CodeForCommunity is an umbrella project of SoC Family, a network of
+            SoC Students, Staff and Alumni who take great pride in helping
+            develop the projects for underserved communities.
+          </Typography>
         </div>
       </div>
     );

src/components/about/BannerComponent.js

@@ -91,7 +91,12 @@ class CapComponent extends Component {
           <br />
           CAP - Code to Achieve Potential is a program designed in collaboration
           with{' '}
-          <a href="https://www.autism.org.sg" target="_blank" className={classes.a}>
+          <a
+            href="https://www.autism.org.sg"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={classes.a}
+          >
             Autism Resource Centre, Singapore
           </a>{' '}
           to create code specific learning opportunities for youth with Autism.{' '}

src/components/cap/CapComponent.js

@@ -85,7 +85,7 @@ const styles = theme => ({
 
 class BannerComponent extends Component {
   render() {
-    const { title, description, btnOneText, btnOneLink } = this.props;
+    const { title, btnOneText, btnOneLink } = this.props;
     const { classes } = this.props;
 
     return (
@@ -95,21 +95,14 @@ class BannerComponent extends Component {
           <Typography variant="h4" className={classes.title} gutterBottom>
             {title}
           </Typography>
-          {/* <Typography variant="h6" className={classes.description}>
-            {description}
-          </Typography> */}
 
           <Typography variant="h6" className={classes.description}>
             {'Every '}
             <ReactRotatingText items={['{bids}', '10110']} />
              {' counts.'}
           </Typography>
 
-          <div>
-            <Link to={'/' + btnOneLink} className={classes.links}>
-              <Button className={classes.btn}>{btnOneText}</Button>
-            </Link>
-          </div>
+          
         </div>
       </div>
     );

src/components/home/banner/BannerComponent.js

@@ -59,7 +59,7 @@ class SignUpComponent extends Component {
           {title}
         </Typography>
         <Button className={classes.btn}>
-          <a href={btnLink} className={classes.links} target="_blank">
+          <a href={btnLink} className={classes.links} target="_blank" rel="noopener noreferrer">
             {btnText}
           </a>
         </Button>

src/components/home/signup/SignUpComponent.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import { Link } from 'gatsby';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
@@ -9,8 +9,7 @@ import BannerImage from '../commons/BannerImage';
 import { primary, hoverPrimary } from '../../utils/Colors';
 
 const styles = theme => ({
-  root: {
-  },
+  root: {},
   infoContainer: {
     padding: '2rem 3rem',
     [theme.breakpoints.up('md')]: {
@@ -34,7 +33,7 @@ const styles = theme => ({
       height: '25rem',
     },
     [theme.breakpoints.up('md')]: {
-      height: 'auto'
+      height: 'auto',
     },
   },
   bgImg: {
@@ -48,24 +47,40 @@ const styles = theme => ({
   joinUsBtn: {
     backgroundColor: primary,
     fontSize: 20,
-    textTransform: "capitalize",
+    textTransform: 'capitalize',
     padding: '7.5px 15px',
     '& a': {
-      color: 'white'
+      color: 'white',
     },
     '&:hover': {
-      backgroundColor: hoverPrimary
-    }
+      backgroundColor: hoverPrimary,
+    },
+  },
+  btn: {
+    backgroundColor: primary,
+    color: 'white',
+    marginRight: 15,
+    marginBottom: 15,
+    padding: '8px 15px',
+    textTransform: 'capitalize',
+    '&:hover': {
+      backgroundColor: hoverPrimary,
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: '10px 25px',
+      marginRight: 15,
+    },
   },
   links: {
     textDecoration: 'none',
-    color: 'black'
+    color: 'black',
   },
-})
+});
 
 class BannerComponent extends Component {
   render() {
     const { classes } = this.props;
+    const { title, btnOneText, btnOneLink } = this.props;
 
     return (
       <div className={classes.root}>
@@ -75,30 +90,46 @@ class BannerComponent extends Component {
               Impact the community
             </Typography>
 
-            <Typography variant="body1" className={classes.description} color='textSecondary'>
-              We are passionate about volunteering for underserved communities . We love to create code specific learning opportunities and bring the latest technologies to communities. We love to learn, share and code together. We love to give life to our ideas.
+            <Typography
+              variant="body1"
+              className={classes.description}
+              color="textSecondary"
+            >
+              We are passionate about volunteering for underserved communities .
+              We love to create code specific learning opportunities and bring
+              the latest technologies to communities. We love to learn, share
+              and code together. We love to give life to our ideas.
             </Typography>
 
-            <Typography variant="body1" className={classes.description} color='textSecondary'>
-              If you believe in Giving and have couple of hours to spare very week
+            <Typography
+              variant="body1"
+              className={classes.description}
+              color="textSecondary"
+            >
+              If you believe in Giving and have couple of hours to spare very
+              week
               <br />
-              If you are trustworthy, good communicator, independent and self-organised
+              If you are trustworthy, good communicator, independent and
+              self-organised
             </Typography>
 
-            <p>
-              <Button className={classes.joinUsBtn}>
-                <a href="#" className={classes.links}>Join Us</a>
-              </Button>
-            </p>
+            <div>
+              <Link to={'/' + btnOneLink} className={classes.links}>
+                <Button className={classes.btn}>{btnOneText}</Button>
+              </Link>
+            </div>
           </Grid>
 
           <Grid item xs={12} md={6} className={classes.bgImgContainer}>
-            <BannerImage filename={'volunteer_cover.jpg'} classProps={classes.bgImg} />
+            <BannerImage
+              filename={'volunteer_cover.jpg'}
+              classProps={classes.bgImg}
+            />
           </Grid>
         </Grid>
       </div>
     );
   }
 }
 
-export default withStyles(styles)(BannerComponent);
+export default withStyles(styles)(BannerComponent);

src/components/volunteer/BannerComponent.js renamed to src/components/programmes/BannerComponent.js

@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+
+import Image from '../commons/Image';
+import { royalBlue } from '../../utils/Colors';
+
+const styles = theme => ({
+  root: {
+    padding: '3rem 2rem 1rem 2rem',
+    [theme.breakpoints.up('sm')]: {
+      padding: '3rem 4rem 1rem 4rem',
+    },
+    [theme.breakpoints.up('md')]: {
+      padding: '3rem 5rem 1rem 5rem',
+    },
+  },
+  title: {
+    marginBottom: '2rem',
+    [theme.breakpoints.up('sm')]: {
+      marginBottom: '2rem',
+    },
+  },
+  programsContainer: {
+    maxWidth: 1440,
+    margin: '1rem auto',
+  },
+  programImageContainer: {
+    padding: 12,
+    [theme.breakpoints.up('sm')]: {
+      paddingRight: 14,
+    },
+  },
+  programImage: {
+    width: '100%',
+    height: 150,
+    [theme.breakpoints.up('sm')]: {
+      height: 225,
+    },
+    [theme.breakpoints.up('md')]: {
+      height: 175,
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: 225,
+    },
+  },
+  programTitle: {
+    color: royalBlue,
+  },
+  programDescriptionContainer: {
+    padding: 12,
+    [theme.breakpoints.up('sm')]: {
+      paddingLeft: 14,
+    },
+  },
+});
+
+class UpcomingProgramsComponent extends Component {
+  programsContainer = (classes, programsData) => {
+    const programs = programsData.edges;
+
+    return programs.map((program, index) => (
+      <React.Fragment>
+        <Grid item className={classes.programImageContainer} xs={12} md={5}>
+          <Image
+            filename={program.node.frontmatter.image.relativePath}
+            classProps={classes.programImage}
+          />
+        </Grid>
+
+        <Grid
+          item
+          className={classes.programDescriptionContainer}
+          xs={12}
+          md={6}
+        >
+          <Typography
+            className={classes.programTitle}
+            variant="h6"
+            gutterBottom
+          >
+            {program.node.frontmatter.name}
+          </Typography>
+          <Typography
+            className={classes.programDescription}
+            variant="body1"
+            gutterBottom
+          >
+            {program.node.frontmatter.description}
+          </Typography>
+          <Typography
+            className={classes.programPeriod}
+            variant="body1"
+            color="textSecondary"
+          >
+            Period: {program.node.frontmatter.period}
+          </Typography>
+        </Grid>
+      </React.Fragment>
+    ));
+  };
+
+  render() {
+    const { programs } = this.props;
+    const { classes } = this.props;
+    console.log('Progs', programs);
+    return (
+      <div className={classes.root}>
+        <Typography className={classes.title} variant="h5" align="center">
+          Upcoming Programs
+        </Typography>
+
+        <Grid
+          container
+          className={classes.programsContainer}
+          justify="center"
+          direction="row"
+        >
+          {programs.edges.length > 0 ? (
+            this.programsContainer(classes, programs)
+          ) : (
+            <Typography>No Upcoming events</Typography>
+          )}
+        </Grid>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(UpcomingProgramsComponent);