diff --git a/.gitignore b/.gitignore index 707bb3209..d612dfb1b 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ test/functional/screenshots/* .ssh webpack-stats.debug.json *.DS_Store +.vscode \ No newline at end of file diff --git a/package.json b/package.json index 1671b1441..4ea3792b6 100644 --- a/package.json +++ b/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", diff --git a/src/components/IndexHeader/index.js b/src/components/IndexHeader/index.js index 2e9e2fb2c..2b67fbc7c 100644 --- a/src/components/IndexHeader/index.js +++ b/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 ( -
+
@@ -38,7 +39,8 @@ export default class IndexHeader extends Component {
-
+ + ); } } diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js deleted file mode 100644 index 57f48b889..000000000 --- a/src/components/Loader/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const Loader = () => ( -
- -
-); - -export default Loader; diff --git a/src/components/Loader/style.scss b/src/components/Loader/style.scss deleted file mode 100644 index 80fded77d..000000000 --- a/src/components/Loader/style.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import '../../styles/variables.scss'; - -$timing: 1s; -$size: 4px; -$border-size: $size * 1.25; - -.loader, -.loader:after { - border-radius: 50%; - width: 10em; - height: 10em; -} - -.loader { - margin: 30px auto; - font-size: $size; - position: relative; - text-indent: -9999em; - border-top: $border-size solid $brand-primary; - border-right: $border-size solid $brand-primary; - border-bottom: $border-size solid $brand-primary; - border-left: $border-size solid #ffffff; - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load $timing infinite linear; - animation: load $timing infinite linear; -} - -@-webkit-keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} diff --git a/src/components/ReciterDropdown/index.js b/src/components/ReciterDropdown/index.js index 12c466ce5..8c77eb1a3 100644 --- a/src/components/ReciterDropdown/index.js +++ b/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() : } + {recitations.length ? this.renderMenu() : } ); diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js index 8a90d36a8..7485f8525 100644 --- a/src/components/SurahInfo/index.js +++ b/src/components/SurahInfo/index.js @@ -1,7 +1,8 @@ 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'); @@ -9,7 +10,7 @@ const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => { // So we don't need to load images and files unless needed if (!isShowingSurahInfo) return