Merge pull request #24 from andela/ch-beautify-homepage-162693578

#162693578 Make a better first impression on the homepage

src/__snapshots__/index.test.js.snap

@@ -36,6 +36,6 @@ exports[`Provider and App renders <Provider/> correctly 2`] = `
       path="/profiles/edit"
     />
   </Switch>
-  <Footer />
+  <Connect(Footer) />
 </BrowserRouter>
 `;

src/commons/initialStates.js

@@ -85,4 +85,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

@@ -3,9 +3,9 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Home from '../Home';
-import Login from '../Login/index';
+import LoginPage from '../../containers/LoginPage';
 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';
@@ -19,14 +19,14 @@ const App = () => (
       <Header />
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route path="/login" component={Login} />
+        <Route path="/login" component={LoginPage} />
         <Route path="/signup" component={SignUpPageConnected} />
         <Route path="/articles" component={Articles} />
         <Route path="/article/:articleId" component={ArticlePageConnected} />
         <Route path="/profile" component={ProfileConnected} />
         <Route path="/profiles/edit" component={EditProfilePageConnected} />
       </Switch>
-      <Footer />
+      <FooterConnected />
     </React.Fragment>
   </BrowserRouter>
 );

src/components/Article/__snapshots__/index.test.js.snap

@@ -56,7 +56,11 @@ exports[`<Article /> should render correctly 1`] = `
         <div
           className="author"
         >
-          janedoe
+          <a
+            href="profiles/janedoe"
+          >
+            janedoe
+          </a>
         </div>
       </span>
       <span

src/components/Article/index.js

@@ -20,11 +20,6 @@ const createIconSection = (icon, cssClass, content) => (
 
 const Article = ({ onLikeDislike, article }) => {
   const iconSections = [
-    {
-      icon: 'user',
-      cssClass: 'author',
-      content: article.author.username,
-    },
     {
       icon: 'clock',
       cssClass: 'readtime',
@@ -54,6 +49,12 @@ const Article = ({ onLikeDislike, article }) => {
             <img src={article.image_url} alt="poster" />
           </div>
           <div className="article-small-details">
+            <span key="author">
+              <FontAwesomeIcon icon="user" />
+              <div className="author">
+                <a href={`profiles/${article.author.username}`}>{article.author.username}</a>
+              </div>
+            </span>
             {iconSections.map(el => createIconSection(el.icon, el.cssClass, el.content))}
           </div>
           <div className="article-taglist">

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;
+      }
     }
   }
 }