Added top margin to the index header logo

src/components/IndexHeader/index.js

@@ -5,6 +5,7 @@ import SearchInput from 'components/SearchInput';
 import debug from 'helpers/debug';
 
 const logo = require('../../../static/images/logo-lg-w.png');
+const styles = require('./style.scss');
 
 export default class IndexHeader extends Component {
   static propTypes = {
@@ -29,10 +30,10 @@ export default class IndexHeader extends Component {
         <div className="container">
           <div className="row">
             <div className="col-md-10 col-md-offset-1 text-center">
-              <Link to="/" data-metrics-event-name="IndexHeader:Link:Index">
-                <img src={logo} className="logo" alt="logo" />
+              <Link to="/" className={styles.link} data-metrics-event-name="IndexHeader:Link:Index">
+                <img src={logo} className={styles.logo} alt="logo" />
               </Link>
-              <h4 className="title">THE NOBLE QUR&#x27;AN</h4>
+              <h4 className={styles.title}>THE NOBLE QUR&#x27;AN</h4>
               {this.renderSearch()}
             </div>
           </div>

src/components/IndexHeader/style.scss

@@ -0,0 +1,18 @@
+@import '../../styles/variables.scss';
+
+.link{
+  display: inline-block;
+  width: 30%;
+  margin-top: 35px;
+}
+.logo{
+  padding-top: 10px;
+  padding-bottom: 10px;
+  height: auto;
+  width: 100%;
+}
+.title{
+  color: lighten($brand-primary, 30%);
+  font-size: 160%;
+  padding-bottom: 3.5%;
+}

src/styles/partials/_index-header.scss

@@ -46,14 +46,4 @@
     }
 
   }
-  .logo{
-    padding-top: 10px;
-    padding-bottom: 10px;
-    width: 30%;
-  }
-  .title{
-    color: lighten($brand-primary, 30%);
-    font-size: 160%;
-    padding-bottom: 3.5%;
-  }
 }