(WIP) Integration work with quran-components

.gitignore

@@ -16,3 +16,4 @@ test/functional/screenshots/*
 .ssh
 webpack-stats.debug.json
 *.DS_Store
+.vscode

package.json

@@ -90,6 +90,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
+    "quran-components": "^0.0.52",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

src/components/IndexHeader/index.js

@@ -3,6 +3,7 @@ import Link from 'react-router/lib/Link';
 
 import SearchInput from 'components/SearchInput';
 import debug from 'helpers/debug';
+import Jumbotron from 'quran-components/lib/Jumbotron';
 
 const logo = require('../../../static/images/logo-lg-w.png');
 const styles = require('./style.scss');
@@ -26,7 +27,7 @@ export default class IndexHeader extends Component {
     debug('component:IndexHeader', 'Render');
 
     return (
-      <div className="index-header" style={{ backgroundColor: '#2CA4AB' }}>
+      <Jumbotron>
         <div className="container">
           <div className="row">
             <div className="col-md-10 col-md-offset-1 text-center">
@@ -38,7 +39,8 @@ export default class IndexHeader extends Component {
             </div>
           </div>
         </div>
-      </div>
+      </Jumbotron>
+
     );
   }
 }

src/components/ReciterDropdown/index.js

@@ -4,7 +4,7 @@ import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
-import Loader from 'components/Loader';
+import Loader from 'quran-components/lib/Loader';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import { loadRecitations } from 'redux/actions/options';
@@ -57,7 +57,7 @@ class ReciterDropdown extends Component {
           className={`${className} ${style.dropdown}`}
           title={title}
         >
-          {recitations.length ? this.renderMenu() : <Loader />}
+          {recitations.length ? this.renderMenu() : <Loader isActive />}
         </DropdownButton>
       </ButtonToolbar>
     );

src/components/SurahInfo/index.js

@@ -1,15 +1,16 @@
 import React, { PropTypes } from 'react';
 
 import { surahType } from 'types';
-import Loader from 'components/Loader';
+import Loader from 'quran-components/lib/Loader';
+
 
 const style = require('./style.scss');
 
 const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {
   // So we don't need to load images and files unless needed
   if (!isShowingSurahInfo) return <noscript />;
   if (!chapter.info) {
-    return <Loader />;
+    return <Loader isActive />;
   }
 
   return (

src/components/TopOptions/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
-
-import Title from 'containers/Surah/Title';
+import Title from 'quran-components/lib/SurahTitle';
 import Share from 'components/Share';
 import { surahType } from 'types';
 
+const styles = require('./style.scss');
+
 const TopOptions = ({ chapter }) => (
   <div className="row">
     <div className="col-md-4 hidden-xs hidden-sm">
-      <Title chapter={chapter} />
+      <Title chapterNumber={chapter.id} className={styles.title} color={'#2CA4AB'} />
     </div>
     <div className="col-md-8 text-right">
       <ul className="list-inline">

src/components/TopOptions/style.scss

@@ -0,0 +1,8 @@
+.title {
+    width: 45%;
+    position: absolute;
+    top: 25px;
+    transform: translateY(-47%);
+    display: inline-block;
+    vertical-align: middle;
+}

src/containers/Search/index.js

@@ -9,7 +9,7 @@ import ReactPaginate from 'react-paginate';
 import { FormattedHTMLMessage } from 'react-intl';
 
 import Verse from 'components/Verse';
-import Loader from 'components/Loader';
+import Loader from 'quran-components/lib/Loader';
 
 import { search } from 'redux/actions/search.js';
 
@@ -140,7 +140,7 @@ class Search extends Component {
     }
 
     if (isLoading) {
-      return <div style={{ padding: '15%' }}><Loader /></div>;
+      return <Loader isActive={isLoading} />;
     }
 
     if (!results.length) {

src/containers/Surah/index.js

@@ -10,7 +10,7 @@ import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
 
 // components
-import Loader from 'components/Loader';
+import Loader from 'quran-components/lib/Loader';
 import LazyLoad from 'components/LazyLoad';
 import PageBreak from 'components/PageBreak';
 import Audioplayer from 'components/Audioplayer';
@@ -38,6 +38,8 @@ import * as MediaActions from 'redux/actions/media.js';
 
 import { chaptersConnect, chapterInfoConnect, versesConnect } from './connect';
 
+const LoaderStyle = { width: '10em', height: '10em' };
+
 const style = require('./style.scss');
 
 class Surah extends Component {
@@ -268,7 +270,7 @@ class Surah extends Component {
             }
           </ul>
         }
-        loadingComponent={<Loader />}
+        loadingComponent={<Loader isActive={isLoading} style={LoaderStyle} />}
       />
     );
   }
@@ -343,7 +345,7 @@ class Surah extends Component {
     const { chapter, options, actions } = this.props; // eslint-disable-line no-shadow
     debug('component:Surah', 'Render');
 
-    if (!this.hasAyahs()) return <div className={style.container} style={{ margin: '50px auto' }}><Loader /></div>;
+    if (!this.hasAyahs()) return <div className={style.container} style={{ margin: '50px auto' }}><Loader isActive style={LoaderStyle} /></div>;
 
     return (
       <div className="chapter-body">