feature/#155492453 (#186)

* feature: update heading to match design 

[#155492453]

* feature: use variable for background color

[#155492453]

Author: TWHou

client/components/Home/Home.js

@@ -83,7 +83,7 @@ class Home extends Component {
         </section>
 
         <ListOfProjects
-          title={'Click To Apply'}
+          title={'Find Projects'}
           projects={this.state.filteredProjects}
           className={styles.projectList}
         />

client/components/ListOfProjects/ListOfProjects.js

@@ -48,7 +48,7 @@ class ListOfProjects extends Component {
   render () {
     return (
       <section className={styles.projectListSection}>
-        <h1>{this.props.title}</h1>
+        <h1 className={styles.title}>{this.props.title}</h1>
 
         <div className={styles.listContainer}>
           <GridList className={styles.list} cellHeight={'auto'} cols={3} spacing={8}>

client/components/ListOfProjects/ListOfProjects.scss

@@ -8,6 +8,9 @@
 .title {
   font-size: 20px;
   margin-bottom: 15px;
+  padding: 15px;
+  color: white;
+  background-color: $backgound-orange;
 }
 
 .listContainer {

client/scss/partials/_variables.scss

@@ -10,3 +10,4 @@ $errorColor: red;
 $validInputColor: #3E9B2A;
 $inputsBorderColor: #C6CBD4;
 $text-red: #EA4C2D;
+$backgound-orange: #ED4B2F;