Update volunteer programs

Author: DanKhoo

src/components/volunteer/VolunteerProgramsComponent.js

@@ -11,7 +11,7 @@ import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 
 import Image from '../commons/Image';
-import { primary, hoverPrimary } from '../../utils/Colors';
+import { primary, hoverPrimary, royalBlue } from '../../utils/Colors';
 
 const ExpansionPanel = withStyles({
   root: {
@@ -49,6 +49,12 @@ const styles = theme => ({
   },
   description: {
     textAlign: 'justify',
+    '& a': {
+      color: royalBlue,
+    },
+    '& a:hover': {
+      textDecoration: 'none',
+    },
   },
   btnAlign: {
     textAlign: 'center',
@@ -68,7 +74,6 @@ const styles = theme => ({
   },
   links: {
     textDecoration: 'none',
-    color: 'black',
   },
   programImage: {
     width: '100%',
@@ -84,13 +89,13 @@ const styles = theme => ({
 
 class VolunteerProgramsComponent extends Component {
   programsComponent = (classes, programData) => {
-    const program = programData.edges;
+    const programs = programData.edges;
 
-    return program.map((coder, index) => (
+    return programs.map((program, index) => (
       <Grid item xs={12} sm={6} md={4} xl={3} key={index}>
         <Card>
           <Image
-            filename={coder.node.frontmatter.image.relativePath}
+            filename={program.node.frontmatter.image.relativePath}
             classProps={classes.programImage}
           />
           <ExpansionPanel>
@@ -101,7 +106,7 @@ class VolunteerProgramsComponent extends Component {
               id="panel1a-header"
             >
               <Typography variant="h7" noWrap>
-                {coder.node.frontmatter.title}
+                {program.node.frontmatter.title}
               </Typography>
             </ExpansionPanelSummary>
             <ExpansionPanelDetails>
@@ -110,7 +115,7 @@ class VolunteerProgramsComponent extends Component {
                 variant="body2"
                 gutterBottom
               >
-                {coder.node.frontmatter.description}
+                <div dangerouslySetInnerHTML={{ __html: program.node.html }} />
               </Typography>
             </ExpansionPanelDetails>
             <Typography className={classes.btnAlign}>

src/images/volunteer_programs/cap/index.md

@@ -1,6 +1,6 @@
 ---
-title: "CAP"
-image: "cap_image.jpg"
-description:
-  "Welcome to the CAP program by SoC Student Life under its Code for Community project. The #socFamily team is very excited that you have found us! CAP - Code to Achieve Potential is a program designed in [Autism Resource Centre, Singapore](https://www.autism.org.sg) to create code specific learning opportunities for youth with Autism. We want YOU to teach coding to ARC students to help them improve their employability. So let’s get started on this awesome journey!"
+title: 'CAP'
+image: 'cap_image.jpg'
 ---
+
+Welcome to the CAP program by SoC Student Life under its Code for Community project. The #socFamily team is very excited that you have found us! CAP - Code to Achieve Potential is a program designed in [Autism Resource Centre, Singapore](https://www.autism.org.sg) to create code specific learning opportunities for youth with Autism. We want YOU to teach coding to ARC students to help them improve their employability. So let’s get started on this awesome journey!

src/images/volunteer_programs/young_coder/index.md

@@ -1,13 +1,6 @@
 ---
-title: "Young Coder"
-image: "young_coder_image.jpeg"
-description:
-  "Welcome to the YoungCoders program by SoC Student Life under its Code
-  for Community project.  
-  The #socFamily team is very excited that you have found us!  
-  We want every child in underserved communities to have an equal
-  opportunity to learn coding and be comfortable with the latest
-  technologies. Even more than that we want YOU to encourage them to
-  love using technology and get the most out of every opportunity. So
-  let’s get started on this awesome journey!"
+title: 'Young Coder'
+image: 'young_coder_image.jpeg'
 ---
+
+Welcome to the YoungCoders program by SoC Student Life under its Code for Community project. The #socFamily team is very excited that you have found us! We want every child in underserved communities to have an equal opportunity to learn coding and be comfortable with the latest technologies. Even more than that we want YOU to encourage them to love using technology and get the most out of every opportunity. So let’s get started on this awesome journey!

src/pages/volunteer.js

@@ -90,6 +90,7 @@ export const pageQuery = graphql`
     ) {
       edges {
         node {
+          html
           frontmatter {
             title
             image {