Feature/#155492458 - User sees filters (#184)

* Pivotal Story #155492458

Filter section grid layout

* Pivotal Story #155492458-Filter Grid

Filter grid layout. Moved to left of screen with style added for visual appeal

Author: ltchurch88t

client/components/Home/Home.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import Checkbox from 'material-ui/Checkbox'
@@ -33,31 +33,33 @@ class Home extends Component {
         <FormControlLabel key={index}
           control={ <Checkbox name={type} value={item} onChange={this.handleCheckbox} /> }
           label={item}
+          className={styles.checkBoxes}
         />
       )
     })
   }
 
   render () {
     return (
-      <Fragment>
+      <div className={styles.homeGrid}>
         <section className={styles.filterSection}>
-          <h1>{'Filters'}</h1>
-          <FormLabel>Causes</FormLabel>
-          <FormGroup row>
+          <span className={styles.filterTitle}><h1>{'Filters'}</h1></span>
+          <FormLabel className={styles.causeTitle}>Causes</FormLabel>
+          <FormGroup column className={styles.causesList}>
             { this.renderList(causes, 'causes') }
           </FormGroup>
-
-          <FormLabel>Technologies</FormLabel>
-          <FormGroup row>
+          <FormLabel className={styles.techTitle}>Tech</FormLabel>
+          <FormGroup column className={styles.techList}>
             { this.renderList(technologies, 'technologies') }
           </FormGroup>
         </section>
 
         <ListOfProjects
           title={'Click To Apply'}
-          projects={this.props.projects} />
-      </Fragment>
+          projects={this.props.projects}
+          className={styles.projectList}
+        />
+      </div>
     )
   }
 }

client/components/Home/Home.scss

@@ -1,4 +1,73 @@
+$titleBarColor: #f5f5f5;
+$titleBarRadius: 200px;
+$fontColor: #4b4c4d;
+
+.homeGrid {
+	display: grid;
+	margin-left: -150px;
+	grid-template-columns: auto 85%;//
+	grid-template-areas:
+		"filterSection projectList";
+}
+
+.projectList {
+	grid-area: projectList;
+	padding: 0 30px;
+}
+
 .filterSection {
-  padding: 0 60px;
-  display: grid;
+	padding: 0 30px 10px;
+	grid-area: filterSection;
+	box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.1);
+	display: grid;
+	grid-template-rows: 60px 30px auto 30px auto;
+	grid-template-columns: 300px;
+	grid-template-areas:
+		"filterTitle"
+		"causeTitle"
+		"causes"
+		"techTitle"
+		"technologies";
+	grid-row-gap: 10px;
+	height: 70%;
+}
+
+.filterTitle {
+	grid-area: filterTitle;
+}
+
+.causeTitle {
+	grid-area: causeTitle;
+	border-radius: $titleBarRadius;
+	color: $fontColor;
+	font-weight: bold;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: $titleBarColor;
+}
+
+.techTitle {
+	grid-area: techTitle;
+	border-radius: $titleBarRadius;
+	color: $fontColor;
+	font-weight: bold;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: $titleBarColor;
+}
+
+.causesList {
+	grid-area: causes;
+}
+
+.techList {
+	grid-area: technologies;
+}
+
+.checkBoxes {
+	margin-top: -2px;
 }

docs/PULL_REQUEST_TEMPLATE.md

@@ -23,6 +23,7 @@
 #### Description of Changes:
 <!-- Put a description of your changes here -->
 
+
 #### TODO:
 <!-- Put any TODO's here -->