Add Profile Section title + Update

src/components/ChartsContainer.js

@@ -7,10 +7,10 @@ import { Grid } from '@material-ui/core';
 const styles = theme => ({
   root: {
     flexGrow: 1,
-    padding: '2rem',
+    paddingBottom: '2rem',
     backgroundColor: theme.palette.primary.light,
     [theme.breakpoints.up('md')]: {
-      padding: '3.125rem 0'
+      paddingBottom: '3.125rem'
     }
   },
   layout: {
@@ -28,7 +28,7 @@ const styles = theme => ({
 function ChartsContainer({ classes, children }) {
   return (
     <div className={classes.root}>
-      <Grid container spacing={2} className={classes.layout}>
+      <Grid container className={classes.layout}>
         {children}
       </Grid>
     </div>

src/components/ProfileSectionTitle.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faLeaf,
+  faUsers,
+  faBookOpen,
+  faChartBar,
+  faBuilding,
+  faCoins,
+  faCity,
+  faImage,
+  faBriefcase
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Grid, Typography } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () => ({
+  grid: {
+    height: '5rem',
+    marginTop: '4rem',
+    marginBottom: '0.5rem',
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  title: {
+    textDecoration: 'none',
+    display: 'inline',
+    marginLeft: '2rem',
+    textTransform: 'uppercase',
+    fontFamily: 'Sans Serif'
+  },
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '1rem',
+    borderRadius: '50%',
+    border: '1px solid',
+    marginTop: '-4px',
+    width: '5rem',
+    height: '5rem'
+  },
+  fa: {
+    fontSize: '2.6rem'
+  }
+});
+
+library.add(
+  faLeaf,
+  faBuilding,
+  faUsers,
+  faBookOpen,
+  faChartBar,
+  faCoins,
+  faCity,
+  faImage,
+  faBriefcase
+);
+
+function ProfileSectionTitle({ classes, tab: { name, icon } }) {
+  return (
+    <Grid item className={classes.grid}>
+      <span className={classes.icon}>
+        <FontAwesomeIcon className={classes.fa} icon={icon} size="sm" />
+      </span>
+      <Typography variant="h4" className={classes.title}>
+        {name}
+      </Typography>
+    </Grid>
+  );
+}
+
+ProfileSectionTitle.propTypes = {
+  classes: PropTypes.shape().isRequired,
+  tab: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default withStyles(styles)(ProfileSectionTitle);

src/components/ProfileTabs.js

@@ -104,7 +104,7 @@ class ProfileTabs extends React.Component {
                 <LinkTab
                   key={tab.href}
                   value={tab.href}
-                  href="#dominionProfileTabs" // Always show the tabs on click
+                  href={`#${tab.href}`} // Always show the tabs on click
                   label={tab.name}
                   className={classes.tab}
                   classes={{

src/data/charts.json

@@ -1,5 +1,6 @@
 [{
   "sectionTitle": "Demographics",
+  "sectionIcon": "users",
   "sectionDescription": "",
   "charts": [{
       "title": "Population",
@@ -44,6 +45,7 @@
 },
 {
   "sectionTitle": "Worker's Hostel Data",
+  "sectionIcon": "building",
   "sectionDescription": "",
   "charts": [{
       "title": "Number of people living in worker's hostel per age group",
@@ -192,6 +194,7 @@
 },
 {
   "sectionTitle": "Farm Land",
+  "sectionIcon": "leaf",
   "sectionDescription": "",
   "charts": [{
       "title": "Number of individuals owning farms and agricultural holdings by gender (%)",
@@ -300,6 +303,7 @@
 },
 {
   "sectionTitle": "Erven Land",
+  "sectionIcon": "city",
   "sectionDescription": "",
   "charts": [{
       "title": "Individual ownership of erven land in hectares by gender (%)",
@@ -383,6 +387,7 @@
 },
 {
   "sectionTitle": "Sectional Title land",
+  "sectionIcon": "image",
   "sectionDescription": "",
   "charts": [{
       "title": "Sectional Title Land Ownership",
@@ -492,6 +497,7 @@
 },
 {
   "sectionTitle": "Agricultural Land Sales",
+  "sectionIcon": "coins",
   "sectionDescription": "",
   "charts": [{
       "title": "Land Sales Distribution 2017/2018",
@@ -563,6 +569,7 @@
 },
 {
   "sectionTitle": "Land traded statistic for transactions of colour",
+  "sectionIcon": "briefcase",
   "sectionDescription": "",
   "charts": [
     {
@@ -643,6 +650,7 @@
 },
 {
   "sectionTitle": "Afrobarometer Round 7",
+  "sectionIcon": "chart-bar",
   "sectionDescription": "",
   "charts": [{
       "title": "Land Redistribution Prioritisation",