Merge branch 'master' into production

.eslintrc

@@ -36,15 +36,15 @@
     "__DEVTOOLS__": true,
     "socket": true,
     "webpackIsomorphicTools": true,
-    ga: true,
-    Raven: true,
-    mixpanel: true,
+    "ga": true,
+    "Raven": true,
+    "mixpanel": true,
     "expect": true,
     "browser": true,
     "import": true,
     "FB": true,
     "window": true,
-    sinon: true
+    "sinon": true
   },
   "env": {
     "mocha": true,

README.md

@@ -44,6 +44,7 @@ analyze-bundle-size bundle-stats.json
 
 [Reactjs]: https://facebook.github.io/react/docs/getting-started.html
 [Redux]: http://redux.js.org/
+[styled-components]: http://styled-components.com
 [Expressjs]: http://expressjs.com/en/starter/hello-world.html
 [Webpack]: http://webpack.github.io/docs/what-is-webpack.html
 [nodejs]: https://nodejs.org/en/

bin/server.js

@@ -32,7 +32,7 @@ if (__DEVELOPMENT__) {
 }
 
 global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../webpack/isomorphic-tools-configuration'))
-.development(process.env.NODE_ENV === 'development')
-.server(rootDir, function() {
-  require('../src/server.js').default();
-});
+  .development(process.env.NODE_ENV === 'development')
+  .server(rootDir, function() {
+    require('../src/server.js').default();
+  });

bin/server.prod.js

@@ -10,8 +10,10 @@ global.__CLIENT__ = false;
 global.__SERVER__ = true;
 global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
 
-global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../webpack/isomorphic-tools-configuration'))
-.development(__DEVELOPMENT__)
-.server(rootDir, function() {
-  require('../dist/server.js').default();
-});
+global.webpack_isomorphic_tools = new webpackIsomorphicTools(
+  require('../webpack/isomorphic-tools-configuration')
+)
+  .development(__DEVELOPMENT__)
+  .server(rootDir, function() {
+    require('../dist/server.js').default();
+  });

karma.conf.js

@@ -1,8 +1,8 @@
-var webpack = require('webpack');
+const path = require('path');
+const webpack = require('webpack');
 
-module.exports = function(config) {
+module.exports = config => {
   config.set({
-
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
 
@@ -26,42 +26,42 @@ module.exports = function(config) {
       './node_modules/phantomjs-polyfill/bind-polyfill.js',
       './tests/polyfill/Event.js',
       './node_modules/Intl/locale-data/jsonp/en-US.js',
-      {pattern: 'static/images/*', watched: false, included: false, served: true},
+      {
+        pattern: 'static/images/*',
+        watched: false,
+        included: false,
+        served: true
+      },
 
       // Actual tests here
       'tests.webpack.js'
     ],
 
     // list of files to exclude
-    exclude: [
-    ],
+    exclude: [],
 
     proxies: {
-      '/images': __dirname + '/static/images',
-      '/images/': __dirname + '/static/images/',
+      '/images': path.join(__dirname, '/static/images'),
+      '/images/': path.join(__dirname, '/static/images/')
     },
 
     proxyValidateSSL: false,
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessors
-
     preprocessors: {
-      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
+      'tests.webpack.js': ['webpack', 'sourcemap']
     },
 
     webpack: {
       externals: {
-        'cheerio': 'window',
+        cheerio: 'window',
         'react/addons': true,
         'react/lib/ExecutionEnvironment': true,
         'react/lib/ReactContext': true
       },
       resolve: {
-        modules: [
-          'src',
-          'node_modules'
-        ],
+        modules: ['src', 'node_modules'],
         extensions: ['', '.json', '.js']
       },
 
@@ -72,9 +72,16 @@ module.exports = function(config) {
             exclude: [/server/, /node_modules/, /tests/],
             loader: 'babel'
           },
-          { test: /\.json$/, loader: 'json-loader'},
-          { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' },
-          { test: /\.(jpe?g|png|gif|svg)$/, loader: 'url', query: {limit: 10240} }
+          { test: /\.json$/, loader: 'json-loader' },
+          {
+            test: /\.scss$/,
+            loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
+          },
+          {
+            test: /\.(jpe?g|png|gif|svg)$/,
+            loader: 'url',
+            query: { limit: 10240 }
+          }
         ]
       },
 
@@ -86,12 +93,12 @@ module.exports = function(config) {
         fs: 'empty'
       },
 
-      plugins:[
+      plugins: [
         new webpack.DefinePlugin({
           __CLIENT__: true,
           __SERVER__: false,
           __DEVELOPMENT__: true,
-          __DEVTOOLS__: false  // <-------- DISABLE redux-devtools HERE
+          __DEVTOOLS__: false // <-------- DISABLE redux-devtools HERE
         })
       ],
 
@@ -119,20 +126,16 @@ module.exports = function(config) {
     // web server port
     port: 9876,
 
-
     // enable / disable colors in the output (reporters and logs)
     colors: true,
 
-
     // level of logging
     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
     logLevel: config.LOG_INFO,
 
-
     // enable / disable watching file and executing tests whenever any file changes
     autoWatch: true,
 
-
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     // browsers: ['Chrome', 'PhantomJS'],

package.json

@@ -13,7 +13,6 @@
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
     "dev-old": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
     "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node --expose-gc ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js --progress  & env NODE_PATH='./src' PORT=8000 node --expose-gc ./bin/server.js",
-    "start": "NODE_PATH='src' node ./start",
     "build": "npm run build:client & npm run build:server",
     "build:server": "babel ./src -d ./dist -D",
     "build:client": "webpack --config ./webpack/prod.config.js",
@@ -33,6 +32,10 @@
       "npm run prettier",
       "npm run lint:fix",
       "git add"
+    ],
+    "*.scss": [
+      "npm run prettier",
+      "git add"
     ]
   },
   "engines": {
@@ -104,7 +107,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.73",
+    "quran-components": "^0.0.78",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",
@@ -139,6 +142,7 @@
     "sitemap": "1.8.1",
     "strip-loader": "0.1.2",
     "style-loader": "0.13.1",
+    "styled-components": "^2.1.0",
     "superagent": "3.3.1",
     "url": "0.11.0",
     "url-loader": "0.5.7",
@@ -184,7 +188,7 @@
     "phantomjs-polyfill": "0.0.1",
     "piping": "0.3.0",
     "pre-commit": "1.1.3",
-    "prettier": "^1.2.2",
+    "prettier": "^1.5.2",
     "react-addons-test-utils": "15.4.1",
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",

src/client.js

@@ -10,10 +10,12 @@ import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 
 import debug from 'debug';
 
 import config from './config';
+import theme from './theme';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
@@ -47,16 +49,18 @@ match(
   { history, routes: routes(store) },
   (error, redirectLocation, renderProps) => {
     const component = (
-      <Router
-        {...renderProps}
-        render={props => (
-          <ReduxAsyncConnect
-            {...props}
-            helpers={{ client }}
-            render={applyRouterMiddleware(useScroll())}
-          />
-        )}
-      />
+      <ThemeProvider theme={theme}>
+        <Router
+          {...renderProps}
+          render={props => (
+            <ReduxAsyncConnect
+              {...props}
+              helpers={{ client }}
+              render={applyRouterMiddleware(useScroll())}
+            />
+          )}
+        />
+      </ThemeProvider>
     );
 
     const mountNode = document.getElementById('app');

src/components/Audioplayer/ScrollButton/index.js

@@ -1,9 +1,19 @@
 import React, { PropTypes } from 'react';
+import styled from 'styled-components';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-const style = require('../style.scss');
+const ScrollLink = styled.a`
+  width: 100%;
+  display: inline-block;
+  cursor: pointer;
+  padding-right: 1.5%;
+  color: ${props => (props.active ? props.theme.brandPrimary : props.theme.textColor)};
+  outline: none;
+  cursor: pointer;
+  margin-bottom: 0;
+`;
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
@@ -22,14 +32,13 @@ const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
         placement="top"
         trigger={['hover', 'focus']}
       >
-        <a
+        <ScrollLink
           tabIndex="-1"
-          className={`pointer ${style.buttons} ${shouldScroll ? style.scroll : ''}`}
+          active={shouldScroll}
           onClick={onScrollToggle}
-          style={{ marginBottom: 0 }}
         >
           <i className="ss-icon ss-link" />
-        </a>
+        </ScrollLink>
       </OverlayTrigger>
     </div>
   );

src/components/Audioplayer/Track/index.js

@@ -1,7 +1,36 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component, PropTypes } from 'react';
+import styled from 'styled-components';
 
-const styles = require('./style.scss');
+const Container = styled.div`
+  height: 6px;
+  width: 100%;
+  background-color: #f7f7f7;
+  cursor: pointer;
+  margin-bottom: 5px;
+`;
+
+const Progress = styled.div`
+  height: 100%;
+  background-color: ${props => props.theme.brandPrimary};
+  position: relative;
+  padding-left: 12px;
+
+
+  &:after{
+    content: '';
+    height: 12px;
+    width: 12px;
+    border-radius: 10px;
+    position: absolute;
+    right: 0;
+    display: block;
+    background: #fff;
+    top: -3px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.45);
+    transition: height 0.5s;
+  }
+`;
 
 export default class Track extends Component {
   static propTypes = {
@@ -12,10 +41,8 @@ export default class Track extends Component {
   handleClick = (event) => {
     const { onTrackChange } = this.props;
 
-    const fraction = (
-      event.nativeEvent.offsetX /
-      this.container.getBoundingClientRect().width
-    );
+    const fraction =
+      event.nativeEvent.offsetX / this.container.getBoundingClientRect().width;
 
     return onTrackChange(fraction);
   };
@@ -24,13 +51,14 @@ export default class Track extends Component {
     const { progress } = this.props;
 
     return (
-      <div
-        ref={(container) => { this.container = container; }}
-        className={styles.container}
+      <Container
+        ref={(container) => {
+          this.container = container;
+        }}
         onClick={this.handleClick}
       >
-        <div className={styles.progress} style={{ width: `${progress}%` }} />
-      </div>
+        <Progress style={{ width: `${progress}%` }} />
+      </Container>
     );
   }
 }