chore (beautify homepage): Make a better first impression on the home…

…page

- Add homepage carousel below the navigation bar
- Show actual article images in the footer (remove placeholder images)
- Centre the "Read More" button for each article
- Add the theme colour (turquoise) where appropriate

[Starts #162693578]

src/__snapshots__/index.test.js.snap

@@ -26,7 +26,7 @@ exports[`Provider and App renders <App/> correctly 1`] = `
       path="/article/:articleId"
     />
   </Switch>
-  <Footer />
+  <Connect(Footer) />
 </BrowserRouter>
 `;
 

src/commons/initialStates.js

@@ -70,4 +70,10 @@ export const initialStateWithSample2 = {
   article: sampleArticle2,
 };
 
+export const sampleListOfArticles = [
+  sampleArticle, { ...sampleArticle, id: 2 }, { ...sampleArticle, id: 3 },
+  { ...sampleArticle, id: 4 }, { ...sampleArticle, id: 5 }, { ...sampleArticle, id: 6 },
+  { ...sampleArticle, id: 7 }, { ...sampleArticle, id: 8 }, { ...sampleArticle, id: 9 },
+];
+
 export default initialState;

src/components/App/index.js

@@ -5,7 +5,7 @@ import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Home from '../Home';
 import Login from '../Login/index';
 import Header from '../Header';
-import { Footer } from '../Footer';
+import FooterConnected from '../../containers/Footer';
 import SignUpPageConnected from '../../containers/SignUpPage';
 import Articles from '../../containers/Articles';
 import ArticlePageConnected from '../../containers/ArticlePage';
@@ -23,7 +23,7 @@ const App = () => (
         <Route path="/articles" component={Articles} />
         <Route path="/article/:articleId" component={ArticlePageConnected} />
       </Switch>
-      <Footer />
+      <FooterConnected />
     </React.Fragment>
   </BrowserRouter>
 );

src/components/Articles/Articles.scss

@@ -1,3 +1,7 @@
+$primaryLight: #40e0d0;
+$primaryDark: #20c0b0;
+$primaryDarker: #345F5B;
+
 .articles-body {
   display: flex;
   flex-flow: row wrap;
@@ -48,15 +52,22 @@
     .date-section {
     }
     .read-more {
-      border-radius: 5px;
-    //   border: 1px solid red;
-      width: 40%;
-	  background: #47d79f;
-	  color: white;
+      text-align: center;
+      padding-top: 20px;
 
-	  a{
-		  color: #efefef;
-	  }
+      a {
+        border-radius: 5px;
+        background: $primaryLight;
+        color: #efefef;
+        text-align: center;
+        padding: 5px 10px;
+      }
+      a:hover {
+        text-decoration: none;
+        border: 1px solid $primaryLight;
+        background: white;
+        color: $primaryDark;
+      }
     }
   }
 }