Quick links layout improved.

src/components/Home/QuickSurahs/index.js

@@ -2,65 +2,66 @@ import React from 'react';
 import debug from '../../../helpers/debug';
 import Link from 'react-router/lib/Link';
 
+const styles = require('containers/Home/style.scss');
+
 export default () => {
   debug('component:Index', 'QuickSurahs');
 
   const isFriday = new Date().getDay() === 5;
 
   return (
-    <span className="pull-right">
-      <ul className="list-inline">
-        <li>Quick links:</li>
+    <div className="">
+      <h4 className={`text-muted ${styles.title}`}>
+        <span>Quick links:</span>
         {
           isFriday &&
-            <li>
+            <span>
               <Link
                 to="/18"
                 data-metrics-event-name="QuickLinks:Click"
                 data-metrics-surah-id="18"
               >
                 Surah Al-Kahf
               </Link>
-              {' '}|
-            </li>
+            </span>
         }
-        <li>
+        <span>
           <Link
             to="/36"
             data-metrics-event-name="QuickLinks:Click"
             data-metrics-surah-id="36"
           >
             Surah Yasin (Yaseen)
-          </Link>{' '}|
-        </li>
-        <li>
+          </Link>
+        </span>
+        <span>
           <Link
             to="/55"
             data-metrics-event-name="QuickLinks:Click"
             data-metrics-surah-id="55"
           >
             Surah Ar-Rahman
-          </Link>{' '}|
-        </li>
+          </Link>
+        </span>
 
-        <li>
+        <span>
           <Link
             to="/67"
             data-metrics-event-name="QuickLinks:Click"
             data-metrics-surah-id="67"
           >
             Surah Al Mulk
-          </Link>{' '}|
-        </li>
-        <li>
+          </Link>
+        </span>
+        <span>
           <Link
             to="/2/255"
             data-metrics-event-name="QuickLinks:Click"
             data-metrics-surah-id="2/255"
           >
             Ayat Al-Kursi
           </Link>
-        </li>
-      </ul>
-    </span>);
+        </span>
+      </h4>
+    </div>);
 };

src/containers/Home/index.js

@@ -22,9 +22,9 @@ function Home(props) {
       <div className={`container ${styles.list}`}>
         <div className="row">
           <div className="col-md-10 col-md-offset-1">
+            <QuickSurahs />
             <h4 className={`text-muted ${styles.title}`}>
               SURAHS (CHAPTERS)
-              <QuickSurahs />
             </h4>
             <div className="row">
               <SurahsList surahs={Object.values(props.surahs).slice(0, 38)} />

src/containers/Home/style.scss

@@ -1,13 +1,30 @@
 @import '../../styles/variables.scss';
 
-.list{
-  .title{
-    padding: 50px 0px;
+.list {
+  .title {
+    padding: 20px 0;
     font-size: 14px;
-    margin: 0px;
-
-    @media(max-width: $screen-xs-max) {
-      padding: 10px 0;
+    margin-top: 20px;
+
+    span {
+      margin: 0;
+      line-height: 2;
+      a {
+        padding: 0 15px;
+      }
+      &:after {
+        content: '|';
+      }
+      &:first-child, &:last-child {
+        &:after {
+          content: none;
+        }
+      }
+    }
+
+    &:last-child {
+      margin-top: 25px;
+      border-bottom: solid 2px rgba(0,0,0,.05)
     }
   }
 }