Merge branch '462_create_form_register_user' of https://github.com/Ag…

…ileVentures/sfn-client into 462_create_form_register_user
AgileVentures · Dec 2, 2019 · 4d9bb6a · 4d9bb6a
2 parents 2f1733b + aecd76c
commit 4d9bb6a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/src/components/Shared/Banner/Banner.scss b/src/components/Shared/Banner/Banner.scss
@@ -26,6 +26,7 @@
 
   p {
     margin-bottom: $margin-r;
+    text-align: center;
     text-shadow: 1px 1px $primary-color-darkblue;
   }
 }
@@ -43,3 +44,12 @@
   z-index: 1;
   top: 0;
 }
+
+@media only screen and (min-width: 992px) {
+  .banner {
+    p {
+      text-align: center;
+      max-width: 500px;
+    }
+  }
+}
diff --git a/src/containers/Home/Home.js b/src/containers/Home/Home.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
+import Banner from '../../components/Shared/Banner/Banner'
 
 class Home extends Component {
   render() {
@@ -88,6 +89,11 @@ class Home extends Component {
             </div>
           </div>
         </section>
+        <Banner
+          headline="Want to stay in touch?"
+          benefits="We send regular updates about the recent causes, upcoming artist performances and about Sing for Needs in general"
+          buttonLabel="Sign up to newsletter"
+        />
       </React.Fragment>
     )
   }

diff --git a/src/containers/Home/Home.scss b/src/containers/Home/Home.scss
@@ -104,8 +104,8 @@
   flex-direction: column;
   grid-column: 1/-1;
   margin-top: $margin-xxl;
-  margin-bottom: $margin-xxl;
-  padding-top: $padding-xl;
+  margin-bottom: $margin-r;
+  padding-top: $padding-xxl;
 
   h2 {
     color: $primary-color-white;
@@ -253,6 +253,7 @@
     .registration-options {
       width: 100%;
       padding-top: $padding-xl;
+      margin-bottom: $margin-xl;
       display: flex;
       flex-direction: row;
       justify-content: space-around;

diff --git a/src/containers/Home/Home.test.js b/src/containers/Home/Home.test.js
@@ -37,4 +37,8 @@ describe('<Home />', () => {
       1
     )
   })
+
+  it('has a section which directs visitors to the newsletter sign up page', () => {
+    expect(homeWrapper.find('Banner').length).toEqual(1)
+  })
 })