From ef3acc27a7fc1ebdd47fb01f01cf58649b217bca Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 12 Dec 2016 03:38:07 +0500
Subject: [PATCH 01/17] Work in progress for #245

---
 package.json                                  |  1 +
 src/client.js                                 |  9 +++-
 .../Audioplayer/RepeatDropdown/index.js       | 46 +++++++++++++----
 .../Audioplayer/ScrollButton/index.js         |  6 ++-
 src/components/Audioplayer/index.js           | 13 ++++-
 src/components/Ayah/index.js                  | 29 +++++++----
 src/components/Copy/index.js                  |  7 ++-
 src/config.js                                 |  2 +
 src/locale/en.js                              | 47 +++++++++++++++++
 src/locale/ur.js                              | 51 +++++++++++++++++++
 src/redux/modules/audioplayer.js              |  1 -
 src/server.js                                 | 20 +++++---
 src/styles/main.scss                          |  1 -
 13 files changed, 200 insertions(+), 33 deletions(-)
 create mode 100644 src/locale/en.js
 create mode 100644 src/locale/ur.js

diff --git a/package.json b/package.json
index 354ab812a..43db3c0db 100644
--- a/package.json
+++ b/package.json
@@ -112,6 +112,7 @@
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
+    "react-intl":"2.1.5",
     "winston": "1.1.2"
   },
   "devDependencies": {
diff --git a/src/client.js b/src/client.js
index 7af6269d0..9a91daca7 100644
--- a/src/client.js
+++ b/src/client.js
@@ -12,6 +12,7 @@ import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
+import { IntlProvider } from 'react-intl';
 
 import debug from 'debug';
 
@@ -19,7 +20,9 @@ import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
+import localeData from './locale/ur.js';
 
+const localMessages = localeData.messages;
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
@@ -60,9 +63,11 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <Provider store={store} key="provider">
+    <IntlProvider locale='en' messages={localMessages}>
+      <Provider  store={store} key="provider">
       {component}
-    </Provider>, mountNode, () => {
+      </Provider>
+    </IntlProvider>, mountNode, () => {
       debug('client', 'React Rendered');
     }
   );
diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js
index 345d32ddf..3222091ca 100644
--- a/src/components/Audioplayer/RepeatDropdown/index.js
+++ b/src/components/Audioplayer/RepeatDropdown/index.js
@@ -8,6 +8,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import SwitchToggle from 'components/SwitchToggle';
+import {FormattedMessage } from 'react-intl';
 
 const style = require('../style.scss');
 
@@ -59,9 +60,13 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        From - To: <br />
         <ul className="list-inline" style={{marginBottom: 0}}>
           <li>
+            <FormattedMessage
+              id={ "player.repeat.rangeStart" }
+              defaultMessage={'From'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.from}
@@ -82,6 +87,11 @@ export default class RepeatButton extends Component {
           </li>
           <li> - </li>
           <li>
+            <FormattedMessage
+              id={ "player.repeat.rangeEnd" }
+              defaultMessage={'To'}
+            />{' '}:
+            <br />
             <FormControl
               componentClass="select"
               value={repeat.to}
@@ -107,7 +117,10 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        Ayah: <br />
+        <FormattedMessage
+          id={ "player.currentAyah" }
+          defaultMessage={'Ayah'}
+        />{' '}: <br />
         <FormControl
           componentClass="select"
           value={repeat.from}
@@ -141,10 +154,16 @@ export default class RepeatButton extends Component {
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
-              Single
+              <FormattedMessage
+                id={ "player.repeat.single" }
+                defaultMessage={'Single'}
+              />
             </NavItem>
             <NavItem eventKey={2} title="Range" className={style.pill}>
-              Range
+              <FormattedMessage
+                id={ "player.repeat.range" }
+                defaultMessage={'Range'}
+              />
             </NavItem>
           </Nav>
         </Col>
@@ -169,7 +188,10 @@ export default class RepeatButton extends Component {
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12} style={{paddingTop: 15}}>
-          Times: <br />
+          <FormattedMessage
+            id={ "player.repeat.title" }
+            defaultMessage={'Repeat'}
+          />: <br />
           <FormControl
             componentClass="select"
             value={repeat.times}
@@ -178,8 +200,11 @@ export default class RepeatButton extends Component {
               times: parseInt(event.target.value, 10)
             })}
           >
-            <option value={Infinity}>
-              Loop
+            <option value={'Infinity'}>
+              {<FormattedMessage
+                id={ "player.repeat.loop" }
+                defaultMessage={'Loop'}
+              />}
             </option>
             {
               times.map((ayah, index) => (
@@ -204,7 +229,10 @@ export default class RepeatButton extends Component {
         title={
           <Row>
             <Col md={12} className="text-center">
-              Toggle repeat{'  '}
+              <FormattedMessage
+                id={ "player.repeat.title" }
+                defaultMessage={'TOGGLE REPEAT'}
+              />{'  '}
               <SwitchToggle
                 checked={!!repeat.from}
                 onToggle={this.handleToggle}
@@ -225,7 +253,7 @@ export default class RepeatButton extends Component {
       <div className="text-center">
         <OverlayTrigger
           overlay={popover}
-          placement="bottom"
+          placement="top"
           trigger="click"
           rootClose
         >
diff --git a/src/components/Audioplayer/ScrollButton/index.js b/src/components/Audioplayer/ScrollButton/index.js
index be57620d8..7039774d6 100644
--- a/src/components/Audioplayer/ScrollButton/index.js
+++ b/src/components/Audioplayer/ScrollButton/index.js
@@ -1,13 +1,17 @@
 import React, { PropTypes } from 'react';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
+import {FormattedMessage } from 'react-intl';
 
 const style = require('../style.scss');
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
     <Tooltip id="scroll-button-tooltip">
-      Automatically scrolls to the currently playing ayah on transitions...
+      <FormattedMessage
+        id={ "player.scrollButtonTip" }
+        defaultMessage={'Automatically scrolls to the currently playing ayah on transitions...'}
+      />
     </Tooltip>
   );
 
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index 07ab98f19..c4ceffbf8 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -10,6 +10,7 @@ import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
 import RepeatDropdown from './RepeatDropdown';
+import {FormattedMessage} from 'react-intl';
 
 // Helpers
 import debug from 'helpers/debug';
@@ -394,7 +395,12 @@ export class Audioplayer extends Component {
     if (isLoading) {
       return (
         <li className={`${style.container} ${className}`}>
-          <div>Loading...</div>
+          <div>
+            <FormattedMessage
+              id='app.loading'
+              defaultMessage={ 'Loading...' }
+            />
+          </div>
         </li>
       );
     }
@@ -417,7 +423,10 @@ export class Audioplayer extends Component {
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>
-            Ayah: {currentAyah.split(':')[1]}
+            <FormattedMessage
+              id='player.currentAyah'
+              defaultMessage={ 'Ayah' }
+            />: {currentAyah.split(':')[1]}
           </li>
           <li className={style.controlItem}>
             {this.renderPreviousButton()}
diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index 1ab4d87c4..09909be82 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -3,6 +3,7 @@ import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 
 import Copy from 'components/Copy';
+import {FormattedMessage} from 'react-intl';
 
 import debug from 'helpers/debug';
 
@@ -50,7 +51,8 @@ export default class Ayah extends Component {
       this.props.bookmarked !== nextProps.bookmarked,
       this.props.tooltip !== nextProps.tooltip,
       this.props.currentWord !== nextProps.currentWord,
-      this.props.currentAyah !== nextProps.currentAyah
+      this.props.currentAyah !== nextProps.currentAyah,
+      this.props.isPlaying !== nextProps.isPlaying
     ];
 
     if (this.props.match) {
@@ -61,12 +63,12 @@ export default class Ayah extends Component {
   }
 
   handlePlay(ayah) {
-    const { isPlaying, audioActions } = this.props;
+    const { isPlaying, audioActions, currentAyah } = this.props;
     const { pause, setAyah, play } = audioActions;
+    const  isPreviouslyPlaying = isPlaying;
 
-    if (isPlaying) {
+    if (isPlaying)
       pause();
-    }
     setAyah(ayah);
     play();
   }
@@ -197,7 +199,13 @@ export default class Ayah extends Component {
   }
 
   renderPlayLink() {
-    const { isSearched, ayah } = this.props;
+    const { isSearched, ayah, currentAyah, isPlaying } = this.props;
+    const playing = ayah.ayahKey == currentAyah && isPlaying;
+    let icon = <i className="ss-icon ss-play" />
+
+    if (playing) {
+      icon = <i className="ss-icon ss-pause" />;
+    }
 
     if (!isSearched) {
       return (
@@ -205,7 +213,11 @@ export default class Ayah extends Component {
           onClick={() => this.handlePlay(ayah.ayahKey)}
           className="text-muted"
         >
-          <i className="ss-icon ss-play" /> Play
+          {icon}
+          <FormattedMessage
+            id={ playing ? 'actions.pause' : 'actions.play' }
+            defaultMessage={ playing ? 'Pause' : 'Play'}
+          />
         </a>
       );
     }
@@ -236,7 +248,7 @@ export default class Ayah extends Component {
           onClick={() => bookmarkActions.removeBookmark(ayah.ayahKey)}
           className="text-muted"
         >
-          <strong><i className="ss-icon ss-bookmark" /> Bookmarked</strong>
+          <strong><i className="ss-icon ss-bookmark" /> Bookmarked </strong>
         </a>
       );
     }
@@ -294,8 +306,7 @@ export default class Ayah extends Component {
 
   render() {
     const { ayah, currentAyah } = this.props;
-    const currentIndex = parseInt(currentAyah.split(":")[1], 10);
-    const className = ayah.ayahIndex === currentIndex ? styles.highlight : "";
+    const className = ayah.ayahKey === currentAyah ? styles.highlight : "";
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (
diff --git a/src/components/Copy/index.js b/src/components/Copy/index.js
index ab407ccfa..80c6171bb 100644
--- a/src/components/Copy/index.js
+++ b/src/components/Copy/index.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
+import {FormattedMessage } from 'react-intl';
 
 export default class Copy extends Component {
   static propTypes = {
@@ -26,7 +27,11 @@ export default class Copy extends Component {
         className={!isCopied && 'text-muted'}
         data-metrics-event-name="Ayah:Copy"
       >
-        <i className="ss-icon ss-attach" /> {isCopied ? 'Copied!' : 'Copy'}
+        <i className="ss-icon ss-attach" />
+        <FormattedMessage
+          id={ isCopied ? 'actions.copied' : 'actions.copy' }
+          defaultMessage={ isCopied ? 'Copied!' : 'Copy'}
+        />
       </a>
     );
   }
diff --git a/src/config.js b/src/config.js
index 1f729c683..c546782fb 100644
--- a/src/config.js
+++ b/src/config.js
@@ -18,6 +18,8 @@ module.exports = Object.assign({
   sentryClient: process.env.SENTRY_KEY_CLIENT,
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
+  // Supported locales
+  locales: ["en", "ar", "ur"],
   app: {
     head: {
       titleTemplate: `%s - ${title}`,
diff --git a/src/locale/en.js b/src/locale/en.js
new file mode 100644
index 000000000..4c979a28e
--- /dev/null
+++ b/src/locale/en.js
@@ -0,0 +1,47 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    "local": 'en',
+    "setting.title": "Options",
+    "setting.surahs": "Surahs",
+    "setting.verses": "Go to verse",
+    "setting.reciters": "Reciters",
+    "setting.translations.title": "Translations",
+    "setting.translations.removeAll": "Remove all",
+    "setting.translations.english": "English",
+    "setting.translations.other": "Other Languages",
+    "setting.fontSize": "Font size",
+    "setting.reading": "Reading",
+    "setting.tooltip.title": "TOOLTIP DISPLAY",
+    "setting.tooltip.translation": "Translation",
+    "setting.tooltip.transliteration": "Transliteration",
+
+    "search.placeholder": "Search",
+    "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
+    "search.noResult": "Search",
+
+    "surah.next": "NEXT SURAH",
+    "surah.previous": "PREVIOUS SURAH",
+    "surah.info": "Surah Info",
+    "surah.index.heading": "SURAHS (CHAPTERS)",
+    "surah.index.quickLinks": "Quick links",
+
+    "player.currentAyah": "Ayah",
+    "player.nextAyah": "Next Ayah",
+    "player.previousAyah": "Previous Ayah",
+    "player.repeat.title": "TOGGLE REPEAT",
+    "player.repeat.single": "Single",
+    "player.repeat.range": "Range",
+    "player.repeat.rangeStart": "From",
+    "player.repeat.rangeEnd": "To",
+    "player.repeat.times": "Times",
+    "player.repeat.loop": "loop",
+    "player.scrollButtonTip": "Automatically scrolls to the currently playing ayah on transitions...",
+
+    "app.loading": "Loading ...",
+    "actions.copy": "Copy",
+    "actions.copied": "Copied!",
+    "actions.play": "Play",
+    "actions.pause": "Pause"
+  }
+};
diff --git a/src/locale/ur.js b/src/locale/ur.js
new file mode 100644
index 000000000..60efc94d1
--- /dev/null
+++ b/src/locale/ur.js
@@ -0,0 +1,51 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  locales: ["ur"],
+
+  messages: {
+    "local": "ur",
+    "setting.title": "اختیارات",
+    "setting.surahs": "سورة",
+    "setting.verses": "آیت منتخب کریں",
+    "setting.reciters": "قاری منتخب کریں",
+    "setting.translations.title": "ترجمے",
+    "setting.translations.removeAll": "سب کو ہٹا دیں",
+    "setting.translations.english": "انگریزی",
+    "setting.translations.other": "دوسری زبانیں",
+    "setting.fontSize": "حرف کا سائز",
+    "setting.reading": "پڑہائی",
+    "setting.tooltip": "لفظ کے اوپر",
+    "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
+    "setting.tooltip.translation": "ترجمہ",
+    "setting.tooltip.transliteration": "تلفظ",
+
+    "search.placeholder": "تلاش",
+    "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
+    //TODO: "{total} میں سے {from} تا {to} نتائج"
+    "search.noResult": "تلاش",
+
+    "surah.next": "اگلی سورت",
+    "surah.previous": "پچھلی سورت",
+    "surah.info": "سورہ کی معلومات",
+    "surah.index.heading": "سورتیں",
+    "surah.index.quickLinks": "فوری لنک",
+
+    "player.currentAyah": "آیت",
+    "player.nextAyah": "اگلی آیت",
+    "player.previousAyah": "پچھلی آیت",
+    "player.repeat.title": " دہرائیں",
+    "player.repeat.single": "اکیلی آیت",
+    "player.repeat.range": "مخصوص آیات",
+    "player.repeat.rangeStart": "سے",
+    "player.repeat.rangeEnd": "تک",
+    "player.repeat.times": "کتنی بار",
+    "player.repeat.loop": "چلاتے رہو",
+    "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
+
+    "app.loading": "لوڈ ہو رہا ہے...",
+    "actions.copy": "کاپی",
+    "actions.copied": "کاپی کر لیا",
+    "actions.play": "چلاو",
+    "actions.pause": "روک دیں"
+  }
+};
diff --git a/src/redux/modules/audioplayer.js b/src/redux/modules/audioplayer.js
index 3534020a5..09902dffb 100644
--- a/src/redux/modules/audioplayer.js
+++ b/src/redux/modules/audioplayer.js
@@ -177,7 +177,6 @@ export default function reducer(state = initialState, action = {}) {
 
       return state;
 
-
     }
     case NEXT: {
       const [surahId, ayahNum] = action.currentAyah.split(':');
diff --git a/src/server.js b/src/server.js
index ba7607a59..f4fe55d97 100644
--- a/src/server.js
+++ b/src/server.js
@@ -22,11 +22,13 @@ import routes from './routes';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import debug from './helpers/debug';
+import { IntlProvider } from 'react-intl';
 
 import Html from './helpers/Html';
 
 import { setUserAgent } from './redux/actions/audioplayer.js';
 import { setOption } from './redux/actions/options.js';
+import localeData from './locale/ur.js';
 
 // Use varnish for the static routes, which will cache too
 server.use(raven.middleware.express.requestHandler(config.sentryServer));
@@ -43,10 +45,12 @@ server.use((req, res, next) => {
 
   if (req.query.DISABLE_SSR) {
     return res.status(200).send('<!doctype html>\n' + ReactDOM.renderToString(
-      <Html
-        store={store}
-        assets={webpack_isomorphic_tools.assets()}
-      />
+        <IntlProvider locale='ur' messages={localData.messages}>
+          <Html
+          store={store}
+          assets={webpack_isomorphic_tools.assets()}
+          />
+        </IntlProvider>
     ));
   }
 
@@ -68,9 +72,11 @@ server.use((req, res, next) => {
 
       loadOnServer({...renderProps, store, helpers: { client }}).then(() => {
         const component = (
-          <Provider store={store}>
-            <ReduxAsyncConnect {...renderProps} />
-          </Provider>
+          <IntlProvider messages={localeData.messages} locale='en' >
+            <Provider store={store}>
+              <ReduxAsyncConnect {...renderProps}  />
+            </Provider>
+          </IntlProvider>
         );
 
         res.type('html');
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a51d3c6a8..5cb2ecd8f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,7 +15,6 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/tooltip';
 @import 'partials/highlight';
 
-
 html,body{
   height: 100%;
   min-height: 100%;

From c7e1f1f90a10e6b59e75646468a99fde14846a50 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Thu, 15 Dec 2016 05:25:41 +0500
Subject: [PATCH 02/17] refactored local, local specific fonts, almost done
 with i18n :)

---
 .../Audioplayer/RepeatDropdown/index.js       | 33 +++++++-------
 .../Audioplayer/ScrollButton/index.js         |  4 +-
 src/components/Audioplayer/index.js           |  6 +--
 src/components/Ayah/index.js                  | 13 +++---
 src/components/Ayah/style.scss                |  5 ---
 src/components/ContentDropdown/index.js       | 17 +++++--
 src/components/Copy/index.js                  |  4 +-
 src/components/FontSizeDropdown/index.js      | 12 +++--
 src/components/Footer/index.js                | 45 ++++++++++++++++---
 src/components/Home/QuickSurahs/index.js      |  4 +-
 src/components/IndexHeader/Nav/index.js       | 29 +++++++++---
 src/components/InformationToggle/index.js     |  4 +-
 .../LocaleFormattedMessage/index.js           | 23 ++++++++++
 src/components/NightModeToggle/index.js       | 44 +++++++++++-------
 src/components/QuranNav/index.js              | 23 ++++++++--
 src/components/ReadingModeToggle/index.js     |  3 +-
 src/components/ReciterDropdown/index.js       |  4 +-
 src/components/SearchInput/index.js           | 11 +++--
 src/components/SurahsDropdown/index.js        |  5 ++-
 src/components/TooltipDropdown/index.js       | 12 +++--
 src/components/TopOptions/index.js            |  5 +--
 src/components/VersesDropdown/index.js        |  6 +--
 src/containers/Surah/index.js                 | 29 ++++++++++--
 src/locale/en.js                              |  1 +
 src/locale/ur.js                              | 26 +++++++++--
 src/redux/modules/options.js                  |  1 -
 src/styles/main.scss                          |  5 +++
 src/utils/bindTooltip.js                      |  4 +-
 28 files changed, 274 insertions(+), 104 deletions(-)
 create mode 100644 src/components/LocaleFormattedMessage/index.js

diff --git a/src/components/Audioplayer/RepeatDropdown/index.js b/src/components/Audioplayer/RepeatDropdown/index.js
index 3222091ca..ef90239ae 100644
--- a/src/components/Audioplayer/RepeatDropdown/index.js
+++ b/src/components/Audioplayer/RepeatDropdown/index.js
@@ -6,13 +6,14 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 import FormControl from 'react-bootstrap/lib/FormControl';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import { intlShape, injectIntl } from 'react-intl';
 
 import SwitchToggle from 'components/SwitchToggle';
-import {FormattedMessage } from 'react-intl';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
-export default class RepeatButton extends Component {
+class RepeatButton extends Component {
   static propTypes = {
     surah: PropTypes.object.isRequired,
     repeat: PropTypes.shape({
@@ -21,7 +22,8 @@ export default class RepeatButton extends Component {
       times: PropTypes.number
     }).isRequired,
     setRepeat: PropTypes.func.isRequired,
-    current: PropTypes.number.isRequired
+    current: PropTypes.number.isRequired,
+    intl: intlShape.isRequired
   };
 
   handleToggle = () => {
@@ -62,7 +64,7 @@ export default class RepeatButton extends Component {
       <Col md={12} style={{paddingTop: 15}}>
         <ul className="list-inline" style={{marginBottom: 0}}>
           <li>
-            <FormattedMessage
+            <LocaleFormattedMessage
               id={ "player.repeat.rangeStart" }
               defaultMessage={'From'}
             />{' '}:
@@ -87,7 +89,7 @@ export default class RepeatButton extends Component {
           </li>
           <li> - </li>
           <li>
-            <FormattedMessage
+            <LocaleFormattedMessage
               id={ "player.repeat.rangeEnd" }
               defaultMessage={'To'}
             />{' '}:
@@ -117,7 +119,7 @@ export default class RepeatButton extends Component {
 
     return (
       <Col md={12} style={{paddingTop: 15}}>
-        <FormattedMessage
+        <LocaleFormattedMessage
           id={ "player.currentAyah" }
           defaultMessage={'Ayah'}
         />{' '}: <br />
@@ -154,13 +156,13 @@ export default class RepeatButton extends Component {
             onSelect={this.handleNavChange}
           >
             <NavItem eventKey={1} title="Single Ayah" className={style.pill}>
-              <FormattedMessage
+              <LocaleFormattedMessage
                 id={ "player.repeat.single" }
                 defaultMessage={'Single'}
               />
             </NavItem>
             <NavItem eventKey={2} title="Range" className={style.pill}>
-              <FormattedMessage
+              <LocaleFormattedMessage
                 id={ "player.repeat.range" }
                 defaultMessage={'Range'}
               />
@@ -182,13 +184,13 @@ export default class RepeatButton extends Component {
   }
 
   renderTimes() {
-    const { repeat, setRepeat } = this.props;
+    const { repeat, setRepeat, intl } = this.props;
     const times = Array(10).join().split(',');
 
     return (
       <Row className={!repeat.from && style.disabled}>
         <Col md={12} style={{paddingTop: 15}}>
-          <FormattedMessage
+          <LocaleFormattedMessage
             id={ "player.repeat.title" }
             defaultMessage={'Repeat'}
           />: <br />
@@ -201,10 +203,9 @@ export default class RepeatButton extends Component {
             })}
           >
             <option value={'Infinity'}>
-              {<FormattedMessage
-                id={ "player.repeat.loop" }
-                defaultMessage={'Loop'}
-              />}
+              {
+                intl.formatMessage({id: "player.repeat.loop", defaultMessage: 'Loop'})
+              }
             </option>
             {
               times.map((ayah, index) => (
@@ -229,7 +230,7 @@ export default class RepeatButton extends Component {
         title={
           <Row>
             <Col md={12} className="text-center">
-              <FormattedMessage
+              <LocaleFormattedMessage
                 id={ "player.repeat.title" }
                 defaultMessage={'TOGGLE REPEAT'}
               />{'  '}
@@ -265,3 +266,5 @@ export default class RepeatButton extends Component {
     );
   }
 }
+
+export default injectIntl(RepeatButton);
diff --git a/src/components/Audioplayer/ScrollButton/index.js b/src/components/Audioplayer/ScrollButton/index.js
index 7039774d6..314212625 100644
--- a/src/components/Audioplayer/ScrollButton/index.js
+++ b/src/components/Audioplayer/ScrollButton/index.js
@@ -1,14 +1,14 @@
 import React, { PropTypes } from 'react';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
-import {FormattedMessage } from 'react-intl';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('../style.scss');
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
     <Tooltip id="scroll-button-tooltip">
-      <FormattedMessage
+      <LocaleFormattedMessage
         id={ "player.scrollButtonTip" }
         defaultMessage={'Automatically scrolls to the currently playing ayah on transitions...'}
       />
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index c4ceffbf8..a36d9a7ad 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -10,7 +10,7 @@ import Track from './Track';
 import Segments from './Segments';
 import ScrollButton from './ScrollButton';
 import RepeatDropdown from './RepeatDropdown';
-import {FormattedMessage} from 'react-intl';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 // Helpers
 import debug from 'helpers/debug';
@@ -396,7 +396,7 @@ export class Audioplayer extends Component {
       return (
         <li className={`${style.container} ${className}`}>
           <div>
-            <FormattedMessage
+            <LocaleFormattedMessage
               id='app.loading'
               defaultMessage={ 'Loading...' }
             />
@@ -423,7 +423,7 @@ export class Audioplayer extends Component {
         </div>
         <ul className={`list-inline ${style.controls}`}>
           <li className={style.controlItem}>
-            <FormattedMessage
+            <LocaleFormattedMessage
               id='player.currentAyah'
               defaultMessage={ 'Ayah' }
             />: {currentAyah.split(':')[1]}
diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index da6451d69..be8d89b6c 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -3,7 +3,7 @@ import Link from 'react-router/lib/Link';
 import { Element } from 'react-scroll';
 
 import Copy from 'components/Copy';
-import {FormattedMessage} from 'react-intl';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 import debug from 'helpers/debug';
 
@@ -91,7 +91,7 @@ export default class Ayah extends Component {
         >
           <h4 className="montserrat">{content.name || content.resource.name}</h4>
           <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small dangerouslySetInnerHTML={{__html: content.text}} className={`${styles[lang] || 'times-new'}`} />
+            <small dangerouslySetInnerHTML={{__html: content.text}} className={lang} />
           </h2>
         </div>
       );
@@ -121,7 +121,11 @@ export default class Ayah extends Component {
                     data-metrics-media-content-id={content.id}
                     data-metrics-media-content-ayah-key={ayah.ayahKey}
                   >
-                    Watch lecture by {content.resource.name}
+                    <LocaleFormattedMessage
+                      id={'ayah.media.lectureFrom'}
+                      defaultMessage={"Watch lecture by {from}"}
+                      values={{from: content.resource.name}}
+                      />
                   </a>
                 </small>
               </h2>
@@ -169,7 +173,6 @@ export default class Ayah extends Component {
           />
         );
       }
-
       const label = isLast ? {'title': `Verse ${ayah.ayahNum}`} : {}
       return (
         <b
@@ -214,7 +217,7 @@ export default class Ayah extends Component {
           className="text-muted"
         >
           {icon}
-          <FormattedMessage
+          <LocaleFormattedMessage
             id={ playing ? 'actions.pause' : 'actions.play' }
             defaultMessage={ playing ? 'Pause' : 'Play'}
           />
diff --git a/src/components/Ayah/style.scss b/src/components/Ayah/style.scss
index 57842c1d6..09bf14987 100644
--- a/src/components/Ayah/style.scss
+++ b/src/components/Ayah/style.scss
@@ -145,11 +145,6 @@
     margin-top: 5px;
     margin-bottom: 25px;
   }
-
-  .urdu, .punjabi{
-    direction: rtl;
-    font-family: 'Nafees';
-  }
 }
 
 .word_font{
diff --git a/src/components/ContentDropdown/index.js b/src/components/ContentDropdown/index.js
index 190b2915c..3806ed6d7 100644
--- a/src/components/ContentDropdown/index.js
+++ b/src/components/ContentDropdown/index.js
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 
 import MenuItem from 'react-bootstrap/lib/MenuItem';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 const style = require('./style.scss');
 
@@ -524,18 +526,25 @@ export default class ContentDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Translations
+          <LocaleFormattedMessage id={'setting.translations.title'} defaultMessage={'Translations'}/>
+
           <span className="caret" />
         </button>
         <ul className="dropdown-menu" aria-labelledby="reciters-dropdown">
           {
             content.length &&
-              <MenuItem eventKey={1} onClick={this.handleRemoveContent}>Remove all</MenuItem>
+              <MenuItem eventKey={1} onClick={this.handleRemoveContent}>
+                <LocaleFormattedMessage id={'setting.translations.removeAll'} defaultMessage={'Remove all'}/>
+              </MenuItem>
           }
-          <MenuItem header>English</MenuItem>
+          <MenuItem header>
+            <LocaleFormattedMessage id={'setting.translations.english'} defaultMessage={'English'}/>
+          </MenuItem>
           {this.renderEnglishList()}
           <MenuItem divider />
-          <MenuItem header>Other Languages</MenuItem>
+          <MenuItem header>
+            <LocaleFormattedMessage id={'setting.translations.other'} defaultMessage={'Other Languages'}/>
+          </MenuItem>
           {this.renderLanguagesList()}
         </ul>
       </div>
diff --git a/src/components/Copy/index.js b/src/components/Copy/index.js
index 80c6171bb..eaefa42c9 100644
--- a/src/components/Copy/index.js
+++ b/src/components/Copy/index.js
@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
-import {FormattedMessage } from 'react-intl';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 export default class Copy extends Component {
   static propTypes = {
@@ -28,7 +28,7 @@ export default class Copy extends Component {
         data-metrics-event-name="Ayah:Copy"
       >
         <i className="ss-icon ss-attach" />
-        <FormattedMessage
+        <LocaleFormattedMessage
           id={ isCopied ? 'actions.copied' : 'actions.copy' }
           defaultMessage={ isCopied ? 'Copied!' : 'Copy'}
         />
diff --git a/src/components/FontSizeDropdown/index.js b/src/components/FontSizeDropdown/index.js
index a17fc75a4..3da3d8ba6 100644
--- a/src/components/FontSizeDropdown/index.js
+++ b/src/components/FontSizeDropdown/index.js
@@ -5,6 +5,8 @@ import Popover from 'react-bootstrap/lib/Popover';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 export default class FontSizeDropdown extends Component {
@@ -29,8 +31,10 @@ export default class FontSizeDropdown extends Component {
   }
 
   renderPopup() {
+    const title = <LocaleFormattedMessage id={'setting.fontSize'} defaultMessage={'Font size'}/>
+
     return (
-      <Popover id="FontSizeDropdown" title="Font Size" className={style.popover}>
+      <Popover id="FontSizeDropdown" title={title} className={style.popover}>
         <Row>
           <Col xs={3}>
             <a onClick={() => this.handleOptionSelected('arabic', -1)} className="pointer">
@@ -38,7 +42,7 @@ export default class FontSizeDropdown extends Component {
             </a>
           </Col>
           <Col xs={6} className="text-center">
-            Arabic
+            <LocaleFormattedMessage id={'setting.fontSize.arabic'} defaultMessage={'Arabic'}/>
           </Col>
           <Col xs={3} className="text-right">
             <a onClick={() => this.handleOptionSelected('arabic', 1)} className="pointer">
@@ -54,7 +58,7 @@ export default class FontSizeDropdown extends Component {
             </a>
           </Col>
           <Col xs={6} className="text-center">
-            Translations
+            <LocaleFormattedMessage id={'setting.translations.title'} defaultMessage={'Translations'}/>
           </Col>
           <Col xs={3} className="text-right">
             <a onClick={() => this.handleOptionSelected('translation', 1)} className="pointer">
@@ -74,7 +78,7 @@ export default class FontSizeDropdown extends Component {
           className="text-color"
           data-metrics-event-name="FontSizeDropdown"
         >
-          Font size
+          <LocaleFormattedMessage id={'setting.fontSize'} defaultMessage={'Font size'}/>
         </a>
       </OverlayTrigger>
     );
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 6b7300302..86f91199c 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -5,6 +5,8 @@ import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const styles = require('./style.scss');
 
 const Footer = () => (
@@ -15,17 +17,39 @@ const Footer = () => (
           <Col md={2} sm={4} xs={12} className={styles.about}>
             <p>Navigate</p>
             <ul className={`source-sans ${styles.list}`}>
-              <li><Link to="/about">About</Link></li>
-              <li><Link to="/contact">Contact</Link></li>
+              <li>
+                <Link to="/about">
+                  <LocaleFormattedMessage
+                    id={'nav.aboutUs'}
+                    defaultMessage={'About Us'}
+                  />
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact">
+                  <LocaleFormattedMessage
+                    id={'nav.contactUs'}
+                    defaultMessage={'Contact Us'}
+                  />
+                </Link>
+              </li>
               <li>
                 <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="Footer:Link:Developer">
-                  Developers
+                  <LocaleFormattedMessage
+                    id={'nav.developers'}
+                    defaultMessage={'Developers'}
+                  />
                 </a>
               </li>
             </ul>
           </Col>
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>Useful sites</p>
+            <p>
+              <LocaleFormattedMessage
+                id={'nav.usefulSites'}
+                defaultMessage={'USEFUL SITES'}
+              />
+            </p>
             <ul className={`source-sans ${styles.list}`}>
               <li><a target="_blank" href="http://sunnah.com/" data-metrics-event-name="Footer:Link:Sunnah">Sunnah.com</a></li>
               <li><a target="_blank" href="http://salah.com/" data-metrics-event-name="Footer:Link:Salah">Salah.com</a></li>
@@ -38,7 +62,12 @@ const Footer = () => (
             </ul>
           </Col>
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>Other links</p>
+            <p>
+              <LocaleFormattedMessage
+                id={'nav.otherLinks'}
+                defaultMessage={'Other links'}
+              />
+            </p>
             <ul className={`source-sans ${styles.list}`}>
               <li><a href="/sitemap.xml">Sitemap</a></li>
               <li>
@@ -63,8 +92,10 @@ const Footer = () => (
           </Col>
           <Col md={4} sm={12} xs={12} className={styles.links}>
             <p className="monserrat">
-              Quran.com ( also known as The Noble Quran, Al Quran, Holy Quran, Koran ){' '}
-              is a pro bono project.
+              <LocaleFormattedMessage
+                id={'nav.aboutQuranProject'}
+                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+              />
             </p>
 
             <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
diff --git a/src/components/Home/QuickSurahs/index.js b/src/components/Home/QuickSurahs/index.js
index 8def0c064..bd7a996a9 100644
--- a/src/components/Home/QuickSurahs/index.js
+++ b/src/components/Home/QuickSurahs/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import debug from 'helpers/debug';
 import Link from 'react-router/lib/Link';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const styles = require('containers/Home/style.scss');
 
 export default () => {
@@ -12,7 +14,7 @@ export default () => {
   return (
     <div className="">
       <h4 className={`text-muted ${styles.title}`}>
-        <span>Quick links:</span>
+        <LocaleFormattedMessage id={'surah.index.quickLinks'} defaultMessage={'Quick links :'}/>
         {
           isFriday &&
             <span>
diff --git a/src/components/IndexHeader/Nav/index.js b/src/components/IndexHeader/Nav/index.js
index 55396965c..1d683a34d 100644
--- a/src/components/IndexHeader/Nav/index.js
+++ b/src/components/IndexHeader/Nav/index.js
@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import Link from 'react-router/lib/Link';
 import { connect } from 'react-redux';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 export class IndexHeaderNav extends Component {
   static propTypes = {
     user: PropTypes.object
@@ -25,25 +27,42 @@ export class IndexHeaderNav extends Component {
       <ul className={classNames}>
         <li>
           <Link to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
-            Mobile
+            <LocaleFormattedMessage
+              id={'nav.mobile'}
+              defaultMessage={'Mobile'}
+            />
           </Link>
         </li>
         <li>
           <a href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
-            Developers
+            <LocaleFormattedMessage
+              id={'nav.developers'}
+              defaultMessage={'Developers'}
+            />
           </a>
         </li>
         <li>
-          <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">Legacy Quran.com</a>
+          <a href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">
+            <LocaleFormattedMessage
+              id={'nav.legacySite'}
+              defaultMessage={'Legacy Quran.com'}
+            />
+          </a>
         </li>
         <li>
           <Link to="/donations" data-metrics-event-name="IndexHeader:Link:Contribute">
-            Contribute
+            <LocaleFormattedMessage
+              id={'nav.contribute'}
+              defaultMessage={'Contribute'}
+            />
           </Link>
         </li>
         <li>
           <a href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-            Contact us
+            <LocaleFormattedMessage
+              id={'nav.contactUs'}
+              defaultMessage={'Contact Us'}
+            />
           </a>
         </li>
         {
diff --git a/src/components/InformationToggle/index.js b/src/components/InformationToggle/index.js
index ed027a98a..5d24d0462 100644
--- a/src/components/InformationToggle/index.js
+++ b/src/components/InformationToggle/index.js
@@ -1,5 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 export default class InformationToggle extends Component {
   static propTypes = {
     isShowingSurahInfo: PropTypes.bool.isRequired,
@@ -23,7 +25,7 @@ export default class InformationToggle extends Component {
         className={`${isShowingSurahInfo ? ' text-primary' : 'text-color'} pointer`}
         onClick={this.toggleInformationMode}
       >
-        Surah Info
+        <LocaleFormattedMessage id={'surah.info'} defaultMessage={'Surah Info'}/>
       </a>
     );
   }
diff --git a/src/components/LocaleFormattedMessage/index.js b/src/components/LocaleFormattedMessage/index.js
new file mode 100644
index 000000000..d3b0ef906
--- /dev/null
+++ b/src/components/LocaleFormattedMessage/index.js
@@ -0,0 +1,23 @@
+import React, { PropTypes, createElement } from 'react';
+import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+
+class LocaleFormattedMessage extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string,
+    intl: intlShape.isRequired
+  };
+
+  render() {
+    const {id, defaultMessage, intl, tag } = this.props;
+    const formattedMessage = intl.formatMessage({id: id, defaultMessage: defaultMessage});
+
+    return (
+      <span className={intl.messages.local}>
+        {formattedMessage}
+      </span>
+    );
+  }
+};
+
+export default injectIntl(LocaleFormattedMessage);
diff --git a/src/components/NightModeToggle/index.js b/src/components/NightModeToggle/index.js
index 1eaddaa7f..81ada91c9 100644
--- a/src/components/NightModeToggle/index.js
+++ b/src/components/NightModeToggle/index.js
@@ -1,42 +1,52 @@
 import React, { Component, PropTypes } from 'react';
+import { intlShape, injectIntl } from 'react-intl';
 
-import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-export default class NightModeToggle extends Component {
+import bindTooltip from 'utils/bindTooltip';
+
+class NightModeToggle extends Component {
   static propTypes = {
-    isNightMode: PropTypes.bool.isRequired,
-    onToggle: PropTypes.func.isRequired
+    intl: intlShape.isRequired
   };
 
-  static defaultProps = {
-    isNightMode: false
+  state = {
+    isNightMode: false,
   };
 
-  toggleNightMode = () => {
-    const { isNightMode } = this.props;
+  componentDidUpdate() {
+    bindTooltip();
+   }
 
-    if(isNightMode)
-      document.body.classList.add('night-mode');
-    else
-      document.body.classList.remove('night-mode');
+  toggleNightMode = () => {
+    document.body.classList.toggle('night-mode');
 
-    this.props.onToggle({isNightMode: !isNightMode});
+    this.setState({isNightMode: !this.state.isNightMode});
   }
 
   render() {
-    const { isNightMode } = this.props;
+    const { intl } = this.props;
+
+    let title =  intl.formatMessage({
+      id: this.state.isNightMode ? 'setting.nightMode.dayTip' : 'setting.nightMode.nightTip',
+      defaultMessage: this.state.isNightMode? 'Switch to day mode' : 'switch to night mode'
+    }) ;
 
     return(
     <div>
       <a
-        title={isNightMode ? "Switch to day mode" : "Switch to night mode"}
-        className={`${isNightMode ? 'text-primary' : 'text-color'} pointer`}
+        title={title}
+        rel="tooltip"
+        className={`${this.state.isNightMode ? 'text-primary' : 'text-color'} pointer`}
         onClick={this.toggleNightMode}
       >
-        Night Mode:{' '}
+        <LocaleFormattedMessage id={'setting.nightMode'} defaultMessage={'Night Mode'}/>
+        :{' '}
         <i className="ss-icon ss-lightbulb"/>
       </a>
     </div>
     );
   }
 }
+
+export default injectIntl(NightModeToggle);
diff --git a/src/components/QuranNav/index.js b/src/components/QuranNav/index.js
index 20bae9086..849b63db6 100644
--- a/src/components/QuranNav/index.js
+++ b/src/components/QuranNav/index.js
@@ -13,6 +13,9 @@ import { connect } from 'react-redux';
 
 import userType from 'types/userType';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+
 const styles = require('./style.scss');
 
 export const QuranNav = ({ user }) => (
@@ -25,22 +28,34 @@ export const QuranNav = ({ user }) => (
       <Nav pullRight>
         <LinkContainer to="/apps" data-metrics-event-name="IndexHeader:Link:Mobile">
           <NavItem>
-            Mobile
+            <LocaleFormattedMessage
+              id={'nav.mobile'}
+              defaultMessage={'Mobile'}
+            />
           </NavItem>
         </LinkContainer>
         <NavItem href="https://quran.zendesk.com/hc/en-us/articles/210090626-Development-help" target="_blank" data-metrics-event-name="IndexHeader:Link:Developer">
-          Developers
+          <LocaleFormattedMessage
+            id={'nav.developers'}
+            defaultMessage={'Developers'}
+          />
         </NavItem>
         <NavItem href="http://legacy.quran.com" data-metrics-event-name="IndexHeader:Link:Legacy">
           Legacy Quran.com
         </NavItem>
         <LinkContainer to="/donations" data-metrics-event-name="IndexHeader:Link:Contribute">
           <NavItem>
-            Contribute
+            <LocaleFormattedMessage
+              id={'nav.contribute'}
+              defaultMessage={'Contribute'}
+            />
           </NavItem>
         </LinkContainer>
         <NavItem href="https://quran.zendesk.com/hc/en-us" data-metrics-event-name="IndexHeader:Link:Contact">
-          Contact us
+          <LocaleFormattedMessage
+            id={'nav.contactUs'}
+            defaultMessage={'Contact Us'}
+          />
         </NavItem>
         {
           user &&
diff --git a/src/components/ReadingModeToggle/index.js b/src/components/ReadingModeToggle/index.js
index dcf91f146..c8b390dfc 100644
--- a/src/components/ReadingModeToggle/index.js
+++ b/src/components/ReadingModeToggle/index.js
@@ -1,10 +1,11 @@
 import React, { PropTypes } from 'react';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   <div>
-    Reading:{' '}
+    <LocaleFormattedMessage id={'setting.reading'} defaultMessage={'Reading'}/>:{' '}
     <SwitchToggle
       checked={isToggled}
       onToggle={onReadingModeToggle}
diff --git a/src/components/ReciterDropdown/index.js b/src/components/ReciterDropdown/index.js
index e6c697cd0..ccc89ca2c 100644
--- a/src/components/ReciterDropdown/index.js
+++ b/src/components/ReciterDropdown/index.js
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 // To save API calls.
@@ -229,7 +231,7 @@ export default class ReciterDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Reciters
+          <LocaleFormattedMessage id={'setting.reciters'} defaultMessage={'Reciters'}/>
           <span className="caret" />
         </button>
         <ul className="dropdown-menu" aria-labelledby="reciters-dropdown">
diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js
index 4340f2040..fa6ffad2b 100644
--- a/src/components/SearchInput/index.js
+++ b/src/components/SearchInput/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { PropTypes as MetricsPropTypes } from 'react-metrics';
 import { push } from 'react-router-redux';
 import { connect } from 'react-redux';
+import { intlShape, injectIntl } from 'react-intl';
 
 import SearchAutocomplete from 'components/SearchAutocomplete';
 
@@ -12,7 +13,8 @@ import debug from 'helpers/debug';
 class SearchInput extends Component {
   static propTypes = {
     push: PropTypes.func.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    intl: intlShape.isRequired
   };
 
   static contextTypes = {
@@ -91,7 +93,8 @@ class SearchInput extends Component {
 
   render() {
     const { showAutocomplete } = this.state;
-    const { className } = this.props;
+    const { className, intl } = this.props;
+    const placeholder = intl.formatMessage({id: 'search.placeholder', defaultMessage: 'Search'});
 
     debug('component:SearchInput', 'Render');
 
@@ -100,7 +103,7 @@ class SearchInput extends Component {
         <i className="ss-icon ss-search" onClick={this.search} />
         <input
           type="search"
-          placeholder="Search"
+          placeholder={placeholder}
           ref="search"
           onFocus={() => this.setState({showAutocomplete: true})}
           onKeyUp={this.search}
@@ -117,4 +120,4 @@ class SearchInput extends Component {
   }
 }
 
-export default connect(null, { push })(SearchInput);
+export default injectIntl(connect(null, { push })(SearchInput));
diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js
index 4d9859a9e..271bf8027 100644
--- a/src/components/SurahsDropdown/index.js
+++ b/src/components/SurahsDropdown/index.js
@@ -5,6 +5,9 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+
 const styles = require('./style.scss');
 
 export default class SurahsDropdown extends Component {
@@ -60,7 +63,7 @@ export default class SurahsDropdown extends Component {
           aria-haspopup="true"
           aria-expanded="false"
         >
-          Surahs
+          <LocaleFormattedMessage id={'setting.surahs'} defaultMessage={'Surahs'}/>
           <span className="caret"></span>
         </button>
         <ul className="dropdown-menu" aria-labelledby="surahs-dropdown">
diff --git a/src/components/TooltipDropdown/index.js b/src/components/TooltipDropdown/index.js
index db1b762a3..00c3aa0b6 100644
--- a/src/components/TooltipDropdown/index.js
+++ b/src/components/TooltipDropdown/index.js
@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import SwitchToggle from 'components/SwitchToggle';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('./style.scss');
 
@@ -25,19 +26,22 @@ export default class TooltipDropdown extends Component {
 
   renderPopup() {
     const { options: { tooltip }} = this.props;
+    const tooltipTitle = <LocaleFormattedMessage id={'setting.tooltip.title'} defaultMessage={'DISPLAY TOOLTIP'}/>;
 
     return (
-      <Popover id="TooltipDropdown" title="Tooltip display" className={style.popover}>
+      <Popover id="TooltipDropdown" title={tooltipTitle} className={style.popover}>
         <Row>
           <Col xs={12}>
-            Translation{' '}
+            <LocaleFormattedMessage id={'setting.tooltip.translation'} defaultMessage={'Translation'}/>
+            {' '}
             <SwitchToggle
               checked={tooltip === 'transliteration'}
               onToggle={this.handleOptionSelected}
               id="tooltip-toggle"
               flat
             />
-            {' '}Transliteration
+            {' '}
+            <LocaleFormattedMessage id={'setting.tooltip.transliteration'} defaultMessage={'Transliteration'}/>
           </Col>
         </Row>
       </Popover>
@@ -52,7 +56,7 @@ export default class TooltipDropdown extends Component {
           className="text-color"
           data-metrics-event-name="TooltipDropdown"
         >
-          Tooltip
+          <LocaleFormattedMessage id={'setting.tooltip'} defaultMessage={'Tooltip'} />
         </a>
       </OverlayTrigger>
     );
diff --git a/src/components/TopOptions/index.js b/src/components/TopOptions/index.js
index 39bad0aa7..47fc377db 100644
--- a/src/components/TopOptions/index.js
+++ b/src/components/TopOptions/index.js
@@ -46,10 +46,7 @@ const TopOptions = ({options, surah, actions}) => (
         </li>
         <li>|</li>
         <li>
-          <NightModeToggle
-            isNightMode={options.isNightMode}
-            onToggle={actions.options.setOption}
-          />
+          <NightModeToggle />
         </li>
         <li><Share surah={surah} /></li>
       </ul>
diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js
index 5bc448ece..1b578969b 100644
--- a/src/components/VersesDropdown/index.js
+++ b/src/components/VersesDropdown/index.js
@@ -2,6 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import { Link } from 'react-scroll';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 const style = require('./style.scss');
 
 export default class VersesDropdown extends Component {
@@ -55,9 +57,7 @@ export default class VersesDropdown extends Component {
     const { className } = this.props;
 
     const title = (
-      <span>
-        Go to verse
-      </span>
+      <LocaleFormattedMessage id={'setting.verses'} defaultMessage={'Go to verse'} />
     );
 
     return (
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 7b109ed9e..2830729b3 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -14,6 +14,7 @@ const NavbarHeader = Navbar.Header;
 
 import Helmet from 'react-helmet';
 import Sidebar from 'components/Sidebar';
+import {FormattedMessage} from 'react-intl';
 
 // components
 import LazyLoad from 'components/LazyLoad';
@@ -31,6 +32,7 @@ import SearchInput from 'components/SearchInput';
 import Bismillah from 'components/Bismillah';
 import TopOptions from 'components/TopOptions';
 
+
 // utils
 import scroller from 'utils/scroller';
 
@@ -280,26 +282,45 @@ class Surah extends Component {
               surah.id > 1 &&
                 <li className="previous">
                   <Link to={`/${surah.id * 1 - 1}`}>
-                    &larr; Previous Surah
+                    &larr;
+                    <FormattedMessage
+                      id='surah.previous'
+                      defaultMessage={ 'Previous Surah' }
+                      className="heyyyy"
+                    />
                   </Link>
                 </li>
             }
             <li className="text-center">
               <Link to={`/${surah.id}`}>
-                Beginning of Surah
+                <FormattedMessage
+                  id='surah.goToBeginning'
+                  defaultMessage={ 'Beginning of Surah' }
+                  className="heyyyy"
+                />
               </Link>
             </li>
             {
               surah.id < 114 &&
                 <li className="next">
                   <Link to={`/${surah.id * 1 + 1}`}>
-                    Next Surah &rarr;
+                    <FormattedMessage
+                      id='surah.next'
+                      defaultMessage={ 'Next Surah' }
+                    />
+                    &rarr;
                   </Link>
                 </li>
             }
           </ul>
         }
-        loadingComponent={<p>Loading...</p>}
+        loadingComponent={
+          <p className="text-center">
+            <FormattedMessage
+            id='app.loading'
+            defaultMessage={ 'Loading...' }
+            />
+          </p>}
       />
     );
   }
diff --git a/src/locale/en.js b/src/locale/en.js
index 4c979a28e..47b66db8d 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -25,6 +25,7 @@ export default {
     "surah.info": "Surah Info",
     "surah.index.heading": "SURAHS (CHAPTERS)",
     "surah.index.quickLinks": "Quick links",
+    "surah.goToBeginning": "Beginning of Surah",
 
     "player.currentAyah": "Ayah",
     "player.nextAyah": "Next Ayah",
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 60efc94d1..12706947d 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -3,7 +3,7 @@ export default {
   locales: ["ur"],
 
   messages: {
-    "local": "ur",
+    "local": "urdu",
     "setting.title": "اختیارات",
     "setting.surahs": "سورة",
     "setting.verses": "آیت منتخب کریں",
@@ -13,13 +13,19 @@ export default {
     "setting.translations.english": "انگریزی",
     "setting.translations.other": "دوسری زبانیں",
     "setting.fontSize": "حرف کا سائز",
+    "setting.fontSize.arabic": "عربی",
     "setting.reading": "پڑہائی",
     "setting.tooltip": "لفظ کے اوپر",
     "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
     "setting.tooltip.translation": "ترجمہ",
     "setting.tooltip.transliteration": "تلفظ",
+    "setting.nightMode": "رات کا وقت",
+    "setting.nightMode.dayTip": "دن کے موڈ میں دیکھیں",
+    "setting.nightMode.nightTip": "رات کے موڈ میں دیکھیں",
 
-    "search.placeholder": "تلاش",
+    "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
+
+    "search.placeholder": "تلاش کر یں",
     "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
     //TODO: "{total} میں سے {from} تا {to} نتائج"
     "search.noResult": "تلاش",
@@ -29,6 +35,7 @@ export default {
     "surah.info": "سورہ کی معلومات",
     "surah.index.heading": "سورتیں",
     "surah.index.quickLinks": "فوری لنک",
+    "surah.goToBeginning": "سورہ کے شروع میں جائیں",
 
     "player.currentAyah": "آیت",
     "player.nextAyah": "اگلی آیت",
@@ -42,10 +49,21 @@ export default {
     "player.repeat.loop": "چلاتے رہو",
     "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
 
-    "app.loading": "لوڈ ہو رہا ہے...",
+    "app.loading": "لوڈ ہو رہا ہے",
     "actions.copy": "کاپی",
     "actions.copied": "کاپی کر لیا",
     "actions.play": "چلاو",
-    "actions.pause": "روک دیں"
+    "actions.pause": "روک دیں",
+
+    "nav.contribute": "تعاون کریں",
+    "nav.aboutUs": "ہمارے متعلق",
+    "nav.developers": "ڈویلپرز",
+    "nav.usefulSites": "مفید سائٹس",
+    "nav.otherLinks": "دیگر لنکس",
+    "nav.contactUs": "ہم سے رابطہ",
+    "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
+    "nav.mobile": "موبائل",
+    "nav.legacySite": "پرانی سائٹ"
+
   }
 };
diff --git a/src/redux/modules/options.js b/src/redux/modules/options.js
index d1946f887..5ad635a28 100644
--- a/src/redux/modules/options.js
+++ b/src/redux/modules/options.js
@@ -4,7 +4,6 @@ import { TOGGLE_READING_MODE, SET_OPTION } from 'redux/constants/options.js';
 const initialState = {
   isReadingMode: false,
   isShowingSurahInfo: false,
-  isNightMode: false,
   audio: 8,
   quran: 1,
   content: [19],
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 92a9e2e6c..2c7fbcaad 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -168,3 +168,8 @@ li em{
   top: 0px;
   transform: translateY(-40%);
 }
+
+.urdu, .punjabi{
+  direction: rtl;
+  font-family: 'Nafees';
+}
diff --git a/src/utils/bindTooltip.js b/src/utils/bindTooltip.js
index 64e40759b..073bee437 100644
--- a/src/utils/bindTooltip.js
+++ b/src/utils/bindTooltip.js
@@ -13,7 +13,7 @@ export default function bindTooltip() {
       tooltip.id = 'tooltip';
 
       if (tip && tip !== '') {
-        target.removeAttribute('title');
+        //target.removeAttribute('title');
         tooltip.style.opacity = 0;
         tooltip.innerHTML = tip;
         document.body.appendChild(tooltip);
@@ -64,7 +64,7 @@ export default function bindTooltip() {
           if (document.querySelector('#tooltip')) {
             document.body.removeChild(document.querySelector('#tooltip'));
           }
-          target.setAttribute('title', tip);
+          //target.setAttribute('title', tip);
         };
 
         target.addEventListener('mouseleave', removeTooltip);

From ff4c393be826bc9ecd5c3b94f95eac00b6a74c79 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Thu, 15 Dec 2016 17:43:36 +0500
Subject: [PATCH 03/17] fixed search break and added other missing translation
 keys

---
 src/components/Ayah/index.js                  | 14 +++++------
 src/components/Loader/index.js                |  6 ++++-
 .../LocaleFormattedMessage/index.js           | 12 ++++++----
 src/containers/Home/index.js                  |  4 +++-
 src/containers/Search/index.js                | 22 ++++++++++++------
 src/containers/Surah/Header/index.js          | 10 ++++++--
 src/containers/Surah/index.js                 | 16 ++++++-------
 src/locale/en.js                              | 23 ++++++++++++++++---
 src/locale/ur.js                              |  9 +++-----
 src/styles/nightmode.scss                     |  2 +-
 src/styles/partials/_search-input.scss        |  6 +++++
 11 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index be8d89b6c..bf8b82cda 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -99,9 +99,9 @@ export default class Ayah extends Component {
   }
 
   renderMedia() {
-    const { ayah, mediaActions } = this.props;
+    const { ayah, mediaActions, isSearched } = this.props;
 
-    if (!!ayah.mediaContent) return false;
+    if (isSearched || !!ayah.mediaContent) return false;
 
     return (
       <div>
@@ -137,7 +137,7 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, audioActions: { setCurrentWord }, tooltip } = this.props;
+    const { ayah, audioActions, tooltip, isSearched } = this.props;
 
     if (!ayah.words[0].code) {
       return false;
@@ -165,7 +165,7 @@ export default class Ayah extends Component {
             key={word.code}
             id={id}
             rel="tooltip"
-            onClick={(event) => setCurrentWord(event.target.dataset.key)}
+            onClick={(event) => isSearched ? '' : audioActions.setCurrentWord(event.target.dataset.key)}
             data-key={`${word.ayahKey}:${position}`}
             className={`${className}`}
             title={tooltipContent}
@@ -177,7 +177,7 @@ export default class Ayah extends Component {
       return (
         <b
           id={id}
-          onClick={(event) => setCurrentWord(event.target.dataset.key)}
+          onClick={(event) => isSearched? '' : audioActions.setCurrentWord(event.target.dataset.key)}
           data-key={`${word.ayahKey}:${position}`}
           rel="tooltip"
           className={`${className} ${isLast} pointer`}
@@ -241,9 +241,9 @@ export default class Ayah extends Component {
   }
 
   renderBookmark() {
-    const { ayah, bookmarked, isAuthenticated, bookmarkActions } = this.props;
+    const { ayah, bookmarked, isAuthenticated, bookmarkActions, isSearched } = this.props;
 
-    if (!isAuthenticated) return false;
+    if (isSearched || !isAuthenticated) return false;
 
     if (bookmarked) {
       return (
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index 617baca42..8c75d82e2 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -1,13 +1,17 @@
 import React from 'react';
 
 const loading = require('../../../static/images/loading.gif');
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 const Loader = () => (
   <div className="loading" nghide="currentSurah.ayahs">
     <div className="row">
       <div className="colmd6 colmdoffset3 textcenter">
         <img src={loading} alt="Loader" />
-        <h3>Loading...</h3>
+        <h3>
+          <LocaleFormattedMessage id={'app.loading'} defaultMessage={'Loading...'}/>
+        </h3>
       </div>
     </div>
   </div>
diff --git a/src/components/LocaleFormattedMessage/index.js b/src/components/LocaleFormattedMessage/index.js
index d3b0ef906..dd492036a 100644
--- a/src/components/LocaleFormattedMessage/index.js
+++ b/src/components/LocaleFormattedMessage/index.js
@@ -1,16 +1,18 @@
-import React, { PropTypes, createElement } from 'react';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import React, { PropTypes } from 'react';
+import { intlShape, injectIntl } from 'react-intl';
 
 class LocaleFormattedMessage extends React.Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     defaultMessage: PropTypes.string,
-    intl: intlShape.isRequired
+    intl: intlShape.isRequired,
+    values: PropTypes.any
   };
 
   render() {
-    const {id, defaultMessage, intl, tag } = this.props;
-    const formattedMessage = intl.formatMessage({id: id, defaultMessage: defaultMessage});
+    const {id, defaultMessage, intl, values } = this.props;
+    const params = {id: id, defaultMessage: defaultMessage, values: {values}}
+    const formattedMessage = intl.formatMessage(params);
 
     return (
       <span className={intl.messages.local}>
diff --git a/src/containers/Home/index.js b/src/containers/Home/index.js
index 26b9f330f..463eee285 100644
--- a/src/containers/Home/index.js
+++ b/src/containers/Home/index.js
@@ -8,6 +8,8 @@ import { isAllLoaded, loadAll } from 'redux/actions/surahs.js';
 
 import SurahsList from 'components/Home/SurahsList';
 import QuickSurahs from 'components/Home/QuickSurahs';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 
 const styles = require('./style.scss');
 
@@ -24,7 +26,7 @@ function Home(props) {
           <div className="col-md-10 col-md-offset-1">
             <QuickSurahs />
             <h4 className={`text-muted ${styles.title}`}>
-              SURAHS (CHAPTERS)
+              <LocaleFormattedMessage id={'surah.index.heading'} defaultMessage={'SURAHS (CHAPTERS)'}/>
             </h4>
             <div className="row">
               <SurahsList surahs={Object.values(props.surahs).slice(0, 38)} />
diff --git a/src/containers/Search/index.js b/src/containers/Search/index.js
index 40e5de0ea..dcc0a9915 100644
--- a/src/containers/Search/index.js
+++ b/src/containers/Search/index.js
@@ -18,6 +18,9 @@ import CoreLoader from 'components/Loader';
 
 import { search } from 'redux/actions/search.js';
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import {FormattedHTMLMessage} from 'react-intl'
+
 const style = require('./style.scss');
 
 class Search extends Component {
@@ -61,6 +64,8 @@ class Search extends Component {
 
   renderStatsBar() {
     const { total, size, page, from, query } = this.props;
+    const values = {from: 2, to: from +size - 1, total: 10, query: query};
+
 
     if (total) {
       const pageNum = Math.ceil(total / size);
@@ -69,11 +74,12 @@ class Search extends Component {
         <div className={style.header}>
           <Grid>
             <Row>
-              <Col md={6} className="text-uppercase">
-                {from}-{from + size - 1} OF
-                <span className={style.colored}> {total} </span>
-                SEARCH RESULTS FOR:
-                <span className={style.colored}> {query}</span>
+              <Col md={6} className="text-uppercase search-status">
+                <FormattedHTMLMessage
+                  id={'search.resultHeading'}
+                  defaultMessage={"{from}-{to} OF {total} SEARCH RESULTS FOR: {query}"}
+                  values={values}
+                  />
               </Col>
               <Col className="text-right">
                 <ReactPaginate
@@ -114,13 +120,15 @@ class Search extends Component {
     if (isErrored) {
       return (
         <h3 className="text-center" style={{padding: '15%'}}>
-          Sorry, there was an error with your search.
+          <LocaleFormattedMessage id={'search.error'} defaultMessage={'Sorry, there was an error with your search.'}/>
         </h3>
       );
     }
 
     if (!total) {
-      return <h3 className="text-center" style={{padding: '15%'}}>No results found.</h3>;
+      return <h3 className="text-center" style={{padding: '15%'}}>
+        <LocaleFormattedMessage id={'search.noResult'} defaultMessage={'No results found.'}/>
+      </h3>;
     }
 
     if (isLoading) {
diff --git a/src/containers/Surah/Header/index.js b/src/containers/Surah/Header/index.js
index 756d236a4..b22f4b1c2 100644
--- a/src/containers/Surah/Header/index.js
+++ b/src/containers/Surah/Header/index.js
@@ -5,6 +5,8 @@ import Col from 'react-bootstrap/lib/Col';
 import Navbar from 'react-bootstrap/lib/Navbar';
 const Header = Navbar.Header;
 
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
 import debug from 'helpers/debug';
 
 // const ornamentLeft = require('../../../../static/images/ornament-left.png');
@@ -41,7 +43,9 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                         data-metrics-event-name="Title:PreviousSurah"
                         className="ss-icon ss-navigateleft"
                       />
-                      <span className="hidden-xs hidden-sm"> PREVIOUS SURAH </span>
+                      <span className="hidden-xs hidden-sm">
+                        <LocaleFormattedMessage id={'surah.previous'} defaultMessage={'PREVIOUS SURAH'} />
+                      </span>
                     </Link>
                 }
               </li>
@@ -61,7 +65,9 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                       className="navbar-text next-chapter"
                       to={`/${surah.id + 1}`}
                     >
-                      <span className="hidden-xs hidden-sm"> NEXT SURAH </span>
+                      <span className="hidden-xs hidden-sm">
+                        <LocaleFormattedMessage id={'surah.next'} defaultMessage={'NEXT SURAH'} />
+                      </span>
                       <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
                     </Link>
                 }
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 2830729b3..dc6897203 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -14,7 +14,6 @@ const NavbarHeader = Navbar.Header;
 
 import Helmet from 'react-helmet';
 import Sidebar from 'components/Sidebar';
-import {FormattedMessage} from 'react-intl';
 
 // components
 import LazyLoad from 'components/LazyLoad';
@@ -31,6 +30,7 @@ import Line from 'components/Line';
 import SearchInput from 'components/SearchInput';
 import Bismillah from 'components/Bismillah';
 import TopOptions from 'components/TopOptions';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 
 // utils
@@ -283,20 +283,18 @@ class Surah extends Component {
                 <li className="previous">
                   <Link to={`/${surah.id * 1 - 1}`}>
                     &larr;
-                    <FormattedMessage
+                    <LocaleFormattedMessage
                       id='surah.previous'
                       defaultMessage={ 'Previous Surah' }
-                      className="heyyyy"
                     />
                   </Link>
                 </li>
             }
             <li className="text-center">
               <Link to={`/${surah.id}`}>
-                <FormattedMessage
+                <LocaleFormattedMessage
                   id='surah.goToBeginning'
                   defaultMessage={ 'Beginning of Surah' }
-                  className="heyyyy"
                 />
               </Link>
             </li>
@@ -304,7 +302,7 @@ class Surah extends Component {
               surah.id < 114 &&
                 <li className="next">
                   <Link to={`/${surah.id * 1 + 1}`}>
-                    <FormattedMessage
+                    <LocaleFormattedMessage
                       id='surah.next'
                       defaultMessage={ 'Next Surah' }
                     />
@@ -316,7 +314,7 @@ class Surah extends Component {
         }
         loadingComponent={
           <p className="text-center">
-            <FormattedMessage
+            <LocaleFormattedMessage
             id='app.loading'
             defaultMessage={ 'Loading...' }
             />
@@ -379,7 +377,9 @@ class Surah extends Component {
       <div>
         <Navbar static fluid>
           <NavbarHeader>
-            <p className={`navbar-text ${style.sidebarTitle}`}>Options</p>
+            <p className={`navbar-text ${style.sidebarTitle}`}>
+              <LocaleFormattedMessage id={'setting.title'} defaultMessage={'Options'}/>
+            </p>
           </NavbarHeader>
         </Navbar>
         <SearchInput
diff --git a/src/locale/en.js b/src/locale/en.js
index 47b66db8d..9714cbed6 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -11,14 +11,21 @@ export default {
     "setting.translations.english": "English",
     "setting.translations.other": "Other Languages",
     "setting.fontSize": "Font size",
+    "setting.fontSize.arabic": "Arabic",
     "setting.reading": "Reading",
     "setting.tooltip.title": "TOOLTIP DISPLAY",
     "setting.tooltip.translation": "Translation",
     "setting.tooltip.transliteration": "Transliteration",
+    "setting.nightMode": "Night Mode",
+    "setting.nightMode.dayTip": "Switch to day mode",
+    "setting.nightMode.nightTip": "Switch to night mode",
+
+    "ayah.media.lectureFrom": "Watch lecture of {from}",
 
     "search.placeholder": "Search",
-    "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
-    "search.noResult": "Search",
+    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
+    "search.error": "Sorry, there was an error with your search.",
+    "search.noResult": "No results found.",
 
     "surah.next": "NEXT SURAH",
     "surah.previous": "PREVIOUS SURAH",
@@ -43,6 +50,16 @@ export default {
     "actions.copy": "Copy",
     "actions.copied": "Copied!",
     "actions.play": "Play",
-    "actions.pause": "Pause"
+    "actions.pause": "Pause",
+
+    "nav.contribute": "Contribute",
+    "nav.aboutUs": "About us",
+    "nav.developers": "developers",
+    "nav.usefulSites": "Useful sites",
+    "nav.otherLinks": "Other links",
+    "nav.contactUs": "Contact us",
+    "nav.aboutQuranProject": "Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.",
+    "nav.mobile": "Mobile",
+    "nav.legacySite": "Legacy Quran.com"
   }
 };
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 12706947d..d0f5e53b6 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -1,7 +1,5 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
-  locales: ["ur"],
-
   messages: {
     "local": "urdu",
     "setting.title": "اختیارات",
@@ -26,9 +24,9 @@ export default {
     "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
 
     "search.placeholder": "تلاش کر یں",
-    "search.resultHeading": "{from}-{to} OF <span class='colored'> {total} SEARCH RESULTS FOR: <span class='colored'>{query}</span>",
-    //TODO: "{total} میں سے {from} تا {to} نتائج"
-    "search.noResult": "تلاش",
+    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
+    "search.error": "معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.",
+    "search.noResult": "کوئی نتیجہ نہیں ملا",
 
     "surah.next": "اگلی سورت",
     "surah.previous": "پچھلی سورت",
@@ -64,6 +62,5 @@ export default {
     "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
     "nav.mobile": "موبائل",
     "nav.legacySite": "پرانی سائٹ"
-
   }
 };
diff --git a/src/styles/nightmode.scss b/src/styles/nightmode.scss
index 5344323f4..d0f562ae7 100644
--- a/src/styles/nightmode.scss
+++ b/src/styles/nightmode.scss
@@ -14,7 +14,7 @@
     background-color: #2d2d2d;
   }
 
-  .surah-info, .tooltip, .dropdown-menu{
+  .surah-info, .tooltip, .dropdown-menu, .popover-content{
     color: #000;
   }
 
diff --git a/src/styles/partials/_search-input.scss b/src/styles/partials/_search-input.scss
index 5969345a7..130bc127d 100644
--- a/src/styles/partials/_search-input.scss
+++ b/src/styles/partials/_search-input.scss
@@ -82,3 +82,9 @@
     }
   }
 }
+
+
+.search-status{
+  span span{color: #2CA4AB}
+}
+

From e722edc447763281bcb2a366c70d241b0df04a51 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Fri, 16 Dec 2016 00:09:04 +0500
Subject: [PATCH 04/17] added local switch

---
 src/client.js                            |  8 +--
 src/components/Footer/index.js           | 29 +++++++---
 src/components/Footer/style.scss         | 19 ++-----
 src/components/LocaleSwitcher/index.js   | 65 ++++++++++++++++++++++
 src/components/LocaleSwitcher/style.scss | 10 ++++
 src/components/SmartBanner/index.js      | 11 +++-
 src/config.js                            |  3 +-
 src/helpers/setLocal.js                  | 29 ++++++++++
 src/locale/ar.js                         | 69 ++++++++++++++++++++++++
 src/locale/en.js                         |  5 +-
 src/locale/ur.js                         |  3 ++
 src/server.js                            |  7 +--
 src/styles/main.scss                     |  2 +
 src/styles/partials/_local-switcher.scss | 16 ++++++
 14 files changed, 245 insertions(+), 31 deletions(-)
 create mode 100644 src/components/LocaleSwitcher/index.js
 create mode 100644 src/components/LocaleSwitcher/style.scss
 create mode 100644 src/helpers/setLocal.js
 create mode 100644 src/locale/ar.js
 create mode 100644 src/styles/partials/_local-switcher.scss

diff --git a/src/client.js b/src/client.js
index 9a91daca7..2f9ef3998 100644
--- a/src/client.js
+++ b/src/client.js
@@ -20,9 +20,8 @@ import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
-import localeData from './locale/ur.js';
+import getLocalMessages from './helpers/setLocal';
 
-const localMessages = localeData.messages;
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);
 const history = syncHistoryWithStore(browserHistory, store);
@@ -41,6 +40,9 @@ window.clearCookies = () => {
   reactCookie.remove('content');
   reactCookie.remove('audio');
   reactCookie.remove('isFirstTime');
+  reactCookie.remove('currentLocale');
+  reactCookie.remove('smartbanner-closed');
+  reactCookie.remove('smartbanner-installed');
 };
 
 match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => {
@@ -63,7 +65,7 @@ match({ history, routes: routes(store) }, (error, redirectLocation, renderProps)
   debug('client', 'React Rendering');
 
   ReactDOM.render(
-    <IntlProvider locale='en' messages={localMessages}>
+    <IntlProvider locale='en' messages={getLocalMessages()}>
       <Provider  store={store} key="provider">
       {component}
       </Provider>
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 86f91199c..eecfacf9c 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -6,6 +6,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+import LocaleSwitcher from 'components/LocaleSwitcher'
 
 const styles = require('./style.scss');
 
@@ -15,7 +16,7 @@ const Footer = () => (
       <Col md={10} mdOffset={1}>
         <Row>
           <Col md={2} sm={4} xs={12} className={styles.about}>
-            <p>Navigate</p>
+            <p className={styles.header}>Navigate</p>
             <ul className={`source-sans ${styles.list}`}>
               <li>
                 <Link to="/about">
@@ -43,8 +44,9 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>
+            <p className={styles.header}>
               <LocaleFormattedMessage
                 id={'nav.usefulSites'}
                 defaultMessage={'USEFUL SITES'}
@@ -61,8 +63,9 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={3} sm={4} xs={12} className={styles.links}>
-            <p>
+            <p className={styles.header}>
               <LocaleFormattedMessage
                 id={'nav.otherLinks'}
                 defaultMessage={'Other links'}
@@ -90,15 +93,27 @@ const Footer = () => (
               </li>
             </ul>
           </Col>
+
           <Col md={4} sm={12} xs={12} className={styles.links}>
-            <p className="monserrat">
+            <p className={styles.header}>
               <LocaleFormattedMessage
-                id={'nav.aboutQuranProject'}
-                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+                id={'local.selectLabel'}
+                defaultMessage={'Site Language'}
               />
             </p>
 
-            <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            <div className={styles.list}>
+              <LocaleSwitcher/>
+
+              <p className="monserrat">
+                <LocaleFormattedMessage
+                  id={'nav.aboutQuranProject'}
+                defaultMessage={'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.'}
+                />
+              </p>
+
+              <p className="monserrat">&copy; QURAN.COM. ALL RIGHTS RESERVED 2016</p>
+            </div>
           </Col>
         </Row>
       </Col>
diff --git a/src/components/Footer/style.scss b/src/components/Footer/style.scss
index ea87437a2..beabe666b 100644
--- a/src/components/Footer/style.scss
+++ b/src/components/Footer/style.scss
@@ -8,6 +8,11 @@
     padding-top: 30px;
     text-transform: uppercase;
 
+    .header{
+      line-height: 30px;
+      color: #fff;
+    }
+
     .list{
       padding-left: 0px;
       :global(li){
@@ -16,11 +21,6 @@
       }
     }
 
-    p{
-      line-height: 30px;
-      color: #fff;
-    }
-
     a{
       font-size: 13px;
       color: rgba(#fff, 0.5);
@@ -38,13 +38,4 @@
     -ms-transition: color .15s ease-in-out;
     transition: color .15s ease-in-out;
   }
-
-  .links {
-    &:last-child{
-      p{
-        color: rgba(#fff, 0.5);
-      }
-    }
-  }
-
 }
diff --git a/src/components/LocaleSwitcher/index.js b/src/components/LocaleSwitcher/index.js
new file mode 100644
index 000000000..1c646984a
--- /dev/null
+++ b/src/components/LocaleSwitcher/index.js
@@ -0,0 +1,65 @@
+import React, { Component, PropTypes } from "react";
+
+import { locales, defaultLocale } from "../../config";
+import cookie from 'react-cookie';
+import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
+
+export default class LocaleSwitcher extends Component {
+  state = {
+    currentLocale: defaultLocale,
+  };
+
+  componentDidMount() {
+    if (__CLIENT__) {
+      this.setState({currentLocale: cookie.load('currentLocale') || defaultLocale});
+    }
+  }
+
+  handleLocaleClick(locale, e) {
+    e.preventDefault();
+    let expireDate = new Date();
+    expireDate.setYear(expireDate.getFullYear()+1);
+
+    this.setState({currentLocale: locale});
+
+    cookie.save('currentLocale', locale, {
+      path: '/',
+      expires: new Date(expireDate),
+    });
+
+    window.location.reload();
+  }
+
+  renderLocaleLink(locale, native) {
+
+    let className = "local-switch-link";
+    if (locale === this.state.currentLocale) {
+      className = `btn ${className} ${className}-active`;
+    }
+
+    return (
+      <a key={ locale }
+         className={className}
+         onClick={ this.handleLocaleClick.bind(this, locale) }
+         href={ `?local=${locale}` }
+      >
+        { locales[locale] }
+      </a>
+    );
+  }
+
+  render() {
+    const keys = Object.keys(locales);
+
+    return (
+      <div className='local-switcher'>
+        <p>
+          <LocaleFormattedMessage id={'local.changeLocal'} defaultMessage={'Choose language '} />
+        </p>
+
+        { keys.map(this.renderLocaleLink, this) }
+      </div>
+    );
+  }
+
+}
diff --git a/src/components/LocaleSwitcher/style.scss b/src/components/LocaleSwitcher/style.scss
new file mode 100644
index 000000000..7b777ea43
--- /dev/null
+++ b/src/components/LocaleSwitcher/style.scss
@@ -0,0 +1,10 @@
+.local-switcher{
+  color: red;
+}
+.local-switch-link{
+
+}
+
+.local-switch-link-active{
+  color: #2CA4AB;
+}
diff --git a/src/components/SmartBanner/index.js b/src/components/SmartBanner/index.js
index ee306d183..640d57711 100644
--- a/src/components/SmartBanner/index.js
+++ b/src/components/SmartBanner/index.js
@@ -101,17 +101,24 @@ class SmartBanner extends Component {
 
   close() {
     this.hide();
+
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysHidden));
+
     cookie.save('smartbanner-closed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysHidden * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 
   install() {
+    let expireDate = new Date();
+    expireDate = new Date(expireDate.setDate(expireDate.getDate()+this.props.daysReminder));
+
     this.hide();
     cookie.save('smartbanner-installed', 'true', {
       path: '/',
-      expires: +new Date() + this.props.daysReminder * 1000 * 60 * 60 * 24,
+      expires: expireDate,
     });
   }
 
diff --git a/src/config.js b/src/config.js
index c546782fb..10a5db35b 100644
--- a/src/config.js
+++ b/src/config.js
@@ -19,7 +19,8 @@ module.exports = Object.assign({
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
   // Supported locales
-  locales: ["en", "ar", "ur"],
+  locales: {"en": 'English', "ar": 'العربية', "ur": 'اردو'},
+  defaultLocale: 'en',
   app: {
     head: {
       titleTemplate: `%s - ${title}`,
diff --git a/src/helpers/setLocal.js b/src/helpers/setLocal.js
new file mode 100644
index 000000000..306833510
--- /dev/null
+++ b/src/helpers/setLocal.js
@@ -0,0 +1,29 @@
+import config from "../config";
+import cookie from 'react-cookie';
+
+export function getLocalMessages(req) {
+  let currentLocal;
+  let expireDate = new Date();
+  expireDate.setYear(expireDate.getFullYear()+1);
+  const availableLocals = Object.keys(config.locales);
+
+  if (req && req.query.local) {
+    currentLocal =  req.query.local;
+  }
+  else{
+    currentLocal = cookie.load('currentLocale');
+  }
+
+  if(availableLocals.indexOf(currentLocal) == -1){
+    currentLocal = config.defaultLocale;
+  }
+
+  cookie.save('currentLocale', currentLocal, {
+    path: '/',
+    expires: new Date(expireDate),
+  });
+
+  let localeData = require('../locale/'+currentLocal+'.js');
+
+  return localeData.messages;
+}
diff --git a/src/locale/ar.js b/src/locale/ar.js
new file mode 100644
index 000000000..9b3c49c43
--- /dev/null
+++ b/src/locale/ar.js
@@ -0,0 +1,69 @@
+// jscs:disable disallowQuotedKeysInObjects
+export default {
+  messages: {
+    "local": "arabic",
+    "local.changeLocal": 'اختر اللغة التي تود عرض الموقع بها',
+    "local.navtiveName": 'العربية',
+    "local.selectLabel": 'اللغة',
+    "setting.title": "اختیارات",
+    "setting.surahs": "سورة",
+    "setting.verses": "آیت منتخب کریں",
+    "setting.reciters": "قاری منتخب کریں",
+    "setting.translations.title": "ترجمے",
+    "setting.translations.removeAll": "سب کو ہٹا دیں",
+    "setting.translations.english": "انگریزی",
+    "setting.translations.other": "دوسری زبانیں",
+    "setting.fontSize": "حرف کا سائز",
+    "setting.fontSize.arabic": "عربی",
+    "setting.reading": "پڑہائی",
+    "setting.tooltip": "لفظ کے اوپر",
+    "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
+    "setting.tooltip.translation": "ترجمہ",
+    "setting.tooltip.transliteration": "تلفظ",
+    "setting.nightMode": "رات کا وقت",
+    "setting.nightMode.dayTip": "دن کے موڈ میں دیکھیں",
+    "setting.nightMode.nightTip": "رات کے موڈ میں دیکھیں",
+
+    "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
+
+    "search.placeholder": "تلاش کر یں",
+    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
+    "search.error": "معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.",
+    "search.noResult": "کوئی نتیجہ نہیں ملا",
+
+    "surah.next": "اگلی سورت",
+    "surah.previous": "پچھلی سورت",
+    "surah.info": "سورہ کی معلومات",
+    "surah.index.heading": "سورتیں",
+    "surah.index.quickLinks": "فوری لنک",
+    "surah.goToBeginning": "سورہ کے شروع میں جائیں",
+
+    "player.currentAyah": "آیت",
+    "player.nextAyah": "اگلی آیت",
+    "player.previousAyah": "پچھلی آیت",
+    "player.repeat.title": " دہرائیں",
+    "player.repeat.single": "اکیلی آیت",
+    "player.repeat.range": "مخصوص آیات",
+    "player.repeat.rangeStart": "سے",
+    "player.repeat.rangeEnd": "تک",
+    "player.repeat.times": "کتنی بار",
+    "player.repeat.loop": "چلاتے رہو",
+    "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
+
+    "app.loading": "لوڈ ہو رہا ہے",
+    "actions.copy": "کاپی",
+    "actions.copied": "کاپی کر لیا",
+    "actions.play": "چلاو",
+    "actions.pause": "روک دیں",
+
+    "nav.contribute": "تعاون کریں",
+    "nav.aboutUs": "ہمارے متعلق",
+    "nav.developers": "ڈویلپرز",
+    "nav.usefulSites": "مفید سائٹس",
+    "nav.otherLinks": "دیگر لنکس",
+    "nav.contactUs": "ہم سے رابطہ",
+    "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
+    "nav.mobile": "موبائل",
+    "nav.legacySite": "پرانی سائٹ"
+  }
+};
diff --git a/src/locale/en.js b/src/locale/en.js
index 9714cbed6..ccfcd261a 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -1,7 +1,10 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    "local": 'en',
+    "local": "en",
+    "local.changeLocal": 'Choose the language you want the site to display with',
+    "local.navtiveName": 'English',
+    "local.selectLabel": 'Language',
     "setting.title": "Options",
     "setting.surahs": "Surahs",
     "setting.verses": "Go to verse",
diff --git a/src/locale/ur.js b/src/locale/ur.js
index d0f5e53b6..15095fcf1 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -2,6 +2,9 @@
 export default {
   messages: {
     "local": "urdu",
+    "local.changeLocal": 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
+    "local.navtiveName": 'اردو',
+    "local.selectLabel": 'زبان',
     "setting.title": "اختیارات",
     "setting.surahs": "سورة",
     "setting.verses": "آیت منتخب کریں",
diff --git a/src/server.js b/src/server.js
index f4fe55d97..8f60eed66 100644
--- a/src/server.js
+++ b/src/server.js
@@ -28,7 +28,7 @@ import Html from './helpers/Html';
 
 import { setUserAgent } from './redux/actions/audioplayer.js';
 import { setOption } from './redux/actions/options.js';
-import localeData from './locale/ur.js';
+import { getLocalMessages } from './helpers/setLocal';
 
 // Use varnish for the static routes, which will cache too
 server.use(raven.middleware.express.requestHandler(config.sentryServer));
@@ -38,6 +38,7 @@ server.use((req, res, next) => {
   const client = new ApiClient(req);
   const history = createHistory(req.originalUrl);
   const store = createStore(history, client);
+  const localMessages = getLocalMessages(req);
 
   if (process.env.NODE_ENV === 'development') {
     webpack_isomorphic_tools.refresh()
@@ -45,7 +46,7 @@ server.use((req, res, next) => {
 
   if (req.query.DISABLE_SSR) {
     return res.status(200).send('<!doctype html>\n' + ReactDOM.renderToString(
-        <IntlProvider locale='ur' messages={localData.messages}>
+        <IntlProvider locale='en' messages={localMessages}>
           <Html
           store={store}
           assets={webpack_isomorphic_tools.assets()}
@@ -72,7 +73,7 @@ server.use((req, res, next) => {
 
       loadOnServer({...renderProps, store, helpers: { client }}).then(() => {
         const component = (
-          <IntlProvider messages={localeData.messages} locale='en' >
+          <IntlProvider messages={localMessages} locale='en' >
             <Provider store={store}>
               <ReduxAsyncConnect {...renderProps}  />
             </Provider>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2c7fbcaad..2b9ac3ac5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,6 +14,8 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/modal';
 @import 'partials/tooltip';
 @import 'partials/highlight';
+@import 'partials/local-switcher';
+
 @import 'nightmode';
 
 html,body{
diff --git a/src/styles/partials/_local-switcher.scss b/src/styles/partials/_local-switcher.scss
new file mode 100644
index 000000000..87959d90e
--- /dev/null
+++ b/src/styles/partials/_local-switcher.scss
@@ -0,0 +1,16 @@
+.local-switch-link{
+  &:after{
+    content: '|';
+    margin: 0 5px;
+  }
+
+  &:last-child{
+    &:after{
+      content: '';
+    }
+  }
+}
+
+.local-switch-link-active{
+  color: #2CA4AB !important;
+}

From d5102a51b0a4187304a0ab52bd300fc502ef2d0f Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Fri, 16 Dec 2016 05:01:42 +0500
Subject: [PATCH 05/17] fixed the bug

---
 src/client.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client.js b/src/client.js
index 2f9ef3998..a2a4b9355 100644
--- a/src/client.js
+++ b/src/client.js
@@ -20,7 +20,7 @@ import config from './config';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
-import getLocalMessages from './helpers/setLocal';
+import {getLocalMessages} from './helpers/setLocal';
 
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);

From 8d776389d367439263fbf11b25adeabf3093dfee Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Fri, 16 Dec 2016 14:37:30 +0500
Subject: [PATCH 06/17] fixed noscript break

---
 src/components/NoScript/index.js              |  7 ++++++
 .../{NoScriptWarning => NoScript}/style.scss  |  0
 src/components/NoScriptWarning/index.js       | 23 -------------------
 src/containers/App/index.js                   | 16 +++++++++++--
 src/styles/main.scss                          |  2 +-
 src/styles/partials/_noscript-message.scss    | 11 +++++++++
 6 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 src/components/NoScript/index.js
 rename src/components/{NoScriptWarning => NoScript}/style.scss (100%)
 delete mode 100644 src/components/NoScriptWarning/index.js
 create mode 100644 src/styles/partials/_noscript-message.scss

diff --git a/src/components/NoScript/index.js b/src/components/NoScript/index.js
new file mode 100644
index 000000000..d5316a313
--- /dev/null
+++ b/src/components/NoScript/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+
+export default function NoScript(props) {
+  const staticMarkup = ReactDOM.renderToStaticMarkup(props.children);
+  return <noscript dangerouslySetInnerHTML={{__html: staticMarkup}} />;
+}
diff --git a/src/components/NoScriptWarning/style.scss b/src/components/NoScript/style.scss
similarity index 100%
rename from src/components/NoScriptWarning/style.scss
rename to src/components/NoScript/style.scss
diff --git a/src/components/NoScriptWarning/index.js b/src/components/NoScriptWarning/index.js
deleted file mode 100644
index b3d4c0dbb..000000000
--- a/src/components/NoScriptWarning/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'react-router/lib/Link';
-
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
-
-const styles = require('./style.scss');
-
-const NoScriptWarning = () => (
-  <noscript>
-    <Row>
-      <Col md={12} className={styles.noscript_warning}>
-        <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
-          For more instruction on how to enable javascript
-
-          <Link to="http://www.enable-javascript.com/"> Click here</Link>
-        </p>
-        </Col>
-      </Row>
-  </noscript>
-  );
-
-export default NoScriptWarning;
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
index c6adb6259..302692ec6 100644
--- a/src/containers/App/index.js
+++ b/src/containers/App/index.js
@@ -6,6 +6,9 @@ import { asyncConnect } from 'redux-connect';
 import Helmet from 'react-helmet';
 import Modal from 'react-bootstrap/lib/Modal';
 import SmartBanner from 'components/SmartBanner';
+import Link from 'react-router/lib/Link';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
 
 const ModalHeader = Modal.Header;
 const ModalTitle = Modal.Title;
@@ -16,7 +19,7 @@ import config from 'config';
 import metricsConfig from 'helpers/metrics';
 import { authConnect } from './connect';
 import Footer from 'components/Footer';
-import NoScriptWarning from 'components/NoScriptWarning';
+import NoScript from 'components/NoScript';
 
 import FontStyles from 'components/FontStyles';
 
@@ -42,7 +45,16 @@ class App extends Component {
       <div>
         <Helmet {...config.app.head} />
         <FontStyles />
-        <NoScriptWarning />
+        <NoScript>
+           <Row className='noscript-warning'>
+             <Col md={12}>
+               <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
+                  For more instruction on how to enable javascript
+                 <Link to="http://www.enable-javascript.com/"> Click here </Link>
+               </p>
+             </Col>
+           </Row>
+        </NoScript>
         {children}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install"/>
         <Footer />
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2b9ac3ac5..5beb272cb 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,8 +15,8 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/tooltip';
 @import 'partials/highlight';
 @import 'partials/local-switcher';
-
 @import 'nightmode';
+@import 'partials/noscript-message';
 
 html,body{
   height: 100%;
diff --git a/src/styles/partials/_noscript-message.scss b/src/styles/partials/_noscript-message.scss
new file mode 100644
index 000000000..3103fe18b
--- /dev/null
+++ b/src/styles/partials/_noscript-message.scss
@@ -0,0 +1,11 @@
+.noscript-message {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1201;
+  text-align: center;
+  color: #FFF;
+  background-color: #AE0000;
+  padding: 5px 0 5px 0;
+}

From 9058a4f77e81e71a0fe084aa0abfd417627be0f2 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 19 Dec 2016 16:41:13 +0500
Subject: [PATCH 07/17] added intl pollyfil

---
 src/config.js                              | 1 +
 src/styles/partials/_noscript-message.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/config.js b/src/config.js
index 10a5db35b..13f2c942d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -90,6 +90,7 @@ module.exports = Object.assign({
       /* SEO: https://developers.google.com/structured-data/slsb-overview#markup_examples */
       /* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */
       script: [
+        { src: "https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"},
         {
           type: 'application/ld+json',
           innerHTML: `{
diff --git a/src/styles/partials/_noscript-message.scss b/src/styles/partials/_noscript-message.scss
index 3103fe18b..77b53e224 100644
--- a/src/styles/partials/_noscript-message.scss
+++ b/src/styles/partials/_noscript-message.scss
@@ -1,4 +1,4 @@
-.noscript-message {
+.noscript-warning {
   position: fixed;
   top: 0;
   left: 0;

From 70d02766b0c0a9777069bf89e3ae62ec03c16878 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 19 Dec 2016 17:06:54 +0500
Subject: [PATCH 08/17] replaced double quote with single quote

---
 src/locale/ar.js | 116 +++++++++++++++++++++++------------------------
 src/locale/en.js | 114 +++++++++++++++++++++++-----------------------
 src/locale/ur.js | 116 +++++++++++++++++++++++------------------------
 3 files changed, 173 insertions(+), 173 deletions(-)

diff --git a/src/locale/ar.js b/src/locale/ar.js
index 9b3c49c43..bb56163a8 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -1,69 +1,69 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    "local": "arabic",
-    "local.changeLocal": 'اختر اللغة التي تود عرض الموقع بها',
-    "local.navtiveName": 'العربية',
-    "local.selectLabel": 'اللغة',
-    "setting.title": "اختیارات",
-    "setting.surahs": "سورة",
-    "setting.verses": "آیت منتخب کریں",
-    "setting.reciters": "قاری منتخب کریں",
-    "setting.translations.title": "ترجمے",
-    "setting.translations.removeAll": "سب کو ہٹا دیں",
-    "setting.translations.english": "انگریزی",
-    "setting.translations.other": "دوسری زبانیں",
-    "setting.fontSize": "حرف کا سائز",
-    "setting.fontSize.arabic": "عربی",
-    "setting.reading": "پڑہائی",
-    "setting.tooltip": "لفظ کے اوپر",
-    "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
-    "setting.tooltip.translation": "ترجمہ",
-    "setting.tooltip.transliteration": "تلفظ",
-    "setting.nightMode": "رات کا وقت",
-    "setting.nightMode.dayTip": "دن کے موڈ میں دیکھیں",
-    "setting.nightMode.nightTip": "رات کے موڈ میں دیکھیں",
+    'local': 'arabic',
+    'local.changeLocal': 'اختر اللغة التي تود عرض الموقع بها',
+    'local.navtiveName': 'العربية',
+    'local.selectLabel': 'اللغة',
+    'setting.title': 'اختیارات',
+    'setting.surahs': 'سورة',
+    'setting.verses': 'آیت منتخب کریں',
+    'setting.reciters': 'قاری منتخب کریں',
+    'setting.translations.title': 'ترجمے',
+    'setting.translations.removeAll': 'سب کو ہٹا دیں',
+    'setting.translations.english': 'انگریزی',
+    'setting.translations.other': 'دوسری زبانیں',
+    'setting.fontSize': 'حرف کا سائز',
+    'setting.fontSize.arabic': 'عربی',
+    'setting.reading': 'پڑہائی',
+    'setting.tooltip': 'لفظ کے اوپر',
+    'setting.tooltip.title': 'لفظ کے اوپر کیا ہو',
+    'setting.tooltip.translation': 'ترجمہ',
+    'setting.tooltip.transliteration': 'تلفظ',
+    'setting.nightMode': 'رات کا وقت',
+    'setting.nightMode.dayTip': 'دن کے موڈ میں دیکھیں',
+    'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
 
-    "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
+    'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
 
-    "search.placeholder": "تلاش کر یں",
-    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
-    "search.error": "معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.",
-    "search.noResult": "کوئی نتیجہ نہیں ملا",
+    'search.placeholder': 'تلاش کر یں',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
+    'search.noResult': 'کوئی نتیجہ نہیں ملا',
 
-    "surah.next": "اگلی سورت",
-    "surah.previous": "پچھلی سورت",
-    "surah.info": "سورہ کی معلومات",
-    "surah.index.heading": "سورتیں",
-    "surah.index.quickLinks": "فوری لنک",
-    "surah.goToBeginning": "سورہ کے شروع میں جائیں",
+    'surah.next': 'اگلی سورت',
+    'surah.previous': 'پچھلی سورت',
+    'surah.info': 'سورہ کی معلومات',
+    'surah.index.heading': 'سورتیں',
+    'surah.index.quickLinks': 'فوری لنک',
+    'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
 
-    "player.currentAyah": "آیت",
-    "player.nextAyah": "اگلی آیت",
-    "player.previousAyah": "پچھلی آیت",
-    "player.repeat.title": " دہرائیں",
-    "player.repeat.single": "اکیلی آیت",
-    "player.repeat.range": "مخصوص آیات",
-    "player.repeat.rangeStart": "سے",
-    "player.repeat.rangeEnd": "تک",
-    "player.repeat.times": "کتنی بار",
-    "player.repeat.loop": "چلاتے رہو",
-    "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
+    'player.currentAyah': 'آیت',
+    'player.nextAyah': 'اگلی آیت',
+    'player.previousAyah': 'پچھلی آیت',
+    'player.repeat.title': ' دہرائیں',
+    'player.repeat.single': 'اکیلی آیت',
+    'player.repeat.range': 'مخصوص آیات',
+    'player.repeat.rangeStart': 'سے',
+    'player.repeat.rangeEnd': 'تک',
+    'player.repeat.times': 'کتنی بار',
+    'player.repeat.loop': 'چلاتے رہو',
+    'player.scrollButtonTip': 'جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو',
 
-    "app.loading": "لوڈ ہو رہا ہے",
-    "actions.copy": "کاپی",
-    "actions.copied": "کاپی کر لیا",
-    "actions.play": "چلاو",
-    "actions.pause": "روک دیں",
+    'app.loading': 'لوڈ ہو رہا ہے',
+    'actions.copy': 'کاپی',
+    'actions.copied': 'کاپی کر لیا',
+    'actions.play': 'چلاو',
+    'actions.pause': 'روک دیں',
 
-    "nav.contribute": "تعاون کریں",
-    "nav.aboutUs": "ہمارے متعلق",
-    "nav.developers": "ڈویلپرز",
-    "nav.usefulSites": "مفید سائٹس",
-    "nav.otherLinks": "دیگر لنکس",
-    "nav.contactUs": "ہم سے رابطہ",
-    "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
-    "nav.mobile": "موبائل",
-    "nav.legacySite": "پرانی سائٹ"
+    'nav.contribute': 'تعاون کریں',
+    'nav.aboutUs': 'ہمارے متعلق',
+    'nav.developers': 'ڈویلپرز',
+    'nav.usefulSites': 'مفید سائٹس',
+    'nav.otherLinks': 'دیگر لنکس',
+    'nav.contactUs': 'ہم سے رابطہ',
+    'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
+    'nav.mobile': 'موبائل',
+    'nav.legacySite': 'پرانی سائٹ'
   }
 };
diff --git a/src/locale/en.js b/src/locale/en.js
index ccfcd261a..60013976a 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -1,68 +1,68 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    "local": "en",
-    "local.changeLocal": 'Choose the language you want the site to display with',
-    "local.navtiveName": 'English',
-    "local.selectLabel": 'Language',
-    "setting.title": "Options",
-    "setting.surahs": "Surahs",
-    "setting.verses": "Go to verse",
-    "setting.reciters": "Reciters",
-    "setting.translations.title": "Translations",
-    "setting.translations.removeAll": "Remove all",
-    "setting.translations.english": "English",
-    "setting.translations.other": "Other Languages",
-    "setting.fontSize": "Font size",
-    "setting.fontSize.arabic": "Arabic",
-    "setting.reading": "Reading",
-    "setting.tooltip.title": "TOOLTIP DISPLAY",
-    "setting.tooltip.translation": "Translation",
-    "setting.tooltip.transliteration": "Transliteration",
-    "setting.nightMode": "Night Mode",
-    "setting.nightMode.dayTip": "Switch to day mode",
-    "setting.nightMode.nightTip": "Switch to night mode",
+    'local': 'en',
+    'local.changeLocal': 'Choose the language you want the site to display with',
+    'local.navtiveName': 'English',
+    'local.selectLabel': 'Language',
+    'setting.title': 'Options',
+    'setting.surahs': 'Surahs',
+    'setting.verses': 'Go to verse',
+    'setting.reciters': 'Reciters',
+    'setting.translations.title': 'Translations',
+    'setting.translations.removeAll': 'Remove all',
+    'setting.translations.english': 'English',
+    'setting.translations.other': 'Other Languages',
+    'setting.fontSize': 'Font size',
+    'setting.fontSize.arabic': 'Arabic',
+    'setting.reading': 'Reading',
+    'setting.tooltip.title': 'TOOLTIP DISPLAY',
+    'setting.tooltip.translation': 'Translation',
+    'setting.tooltip.transliteration': 'Transliteration',
+    'setting.nightMode': 'Night Mode',
+    'setting.nightMode.dayTip': 'Switch to day mode',
+    'setting.nightMode.nightTip': 'Switch to night mode',
 
-    "ayah.media.lectureFrom": "Watch lecture of {from}",
+    'ayah.media.lectureFrom': 'Watch lecture of {from}',
 
-    "search.placeholder": "Search",
-    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
-    "search.error": "Sorry, there was an error with your search.",
-    "search.noResult": "No results found.",
+    'search.placeholder': 'Search',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.error': 'Sorry, there was an error with your search.',
+    'search.noResult': 'No results found.',
 
-    "surah.next": "NEXT SURAH",
-    "surah.previous": "PREVIOUS SURAH",
-    "surah.info": "Surah Info",
-    "surah.index.heading": "SURAHS (CHAPTERS)",
-    "surah.index.quickLinks": "Quick links",
-    "surah.goToBeginning": "Beginning of Surah",
+    'surah.next': 'NEXT SURAH',
+    'surah.previous': 'PREVIOUS SURAH',
+    'surah.info': 'Surah Info',
+    'surah.index.heading': 'SURAHS (CHAPTERS)',
+    'surah.index.quickLinks': 'Quick links',
+    'surah.goToBeginning': 'Beginning of Surah',
 
-    "player.currentAyah": "Ayah",
-    "player.nextAyah": "Next Ayah",
-    "player.previousAyah": "Previous Ayah",
-    "player.repeat.title": "TOGGLE REPEAT",
-    "player.repeat.single": "Single",
-    "player.repeat.range": "Range",
-    "player.repeat.rangeStart": "From",
-    "player.repeat.rangeEnd": "To",
-    "player.repeat.times": "Times",
-    "player.repeat.loop": "loop",
-    "player.scrollButtonTip": "Automatically scrolls to the currently playing ayah on transitions...",
+    'player.currentAyah': 'Ayah',
+    'player.nextAyah': 'Next Ayah',
+    'player.previousAyah': 'Previous Ayah',
+    'player.repeat.title': 'TOGGLE REPEAT',
+    'player.repeat.single': 'Single',
+    'player.repeat.range': 'Range',
+    'player.repeat.rangeStart': 'From',
+    'player.repeat.rangeEnd': 'To',
+    'player.repeat.times': 'Times',
+    'player.repeat.loop': 'loop',
+    'player.scrollButtonTip': 'Automatically scrolls to the currently playing ayah on transitions...',
 
-    "app.loading": "Loading ...",
-    "actions.copy": "Copy",
-    "actions.copied": "Copied!",
-    "actions.play": "Play",
-    "actions.pause": "Pause",
+    'app.loading': 'Loading ...',
+    'actions.copy': 'Copy',
+    'actions.copied': 'Copied!',
+    'actions.play': 'Play',
+    'actions.pause': 'Pause',
 
-    "nav.contribute": "Contribute",
-    "nav.aboutUs": "About us",
-    "nav.developers": "developers",
-    "nav.usefulSites": "Useful sites",
-    "nav.otherLinks": "Other links",
-    "nav.contactUs": "Contact us",
-    "nav.aboutQuranProject": "Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.",
-    "nav.mobile": "Mobile",
-    "nav.legacySite": "Legacy Quran.com"
+    'nav.contribute': 'Contribute',
+    'nav.aboutUs': 'About us',
+    'nav.developers': 'developers',
+    'nav.usefulSites': 'Useful sites',
+    'nav.otherLinks': 'Other links',
+    'nav.contactUs': 'Contact us',
+    'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.',
+    'nav.mobile': 'Mobile',
+    'nav.legacySite': 'Legacy Quran.com'
   }
 };
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 15095fcf1..9e0468b4d 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -1,69 +1,69 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    "local": "urdu",
-    "local.changeLocal": 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
-    "local.navtiveName": 'اردو',
-    "local.selectLabel": 'زبان',
-    "setting.title": "اختیارات",
-    "setting.surahs": "سورة",
-    "setting.verses": "آیت منتخب کریں",
-    "setting.reciters": "قاری منتخب کریں",
-    "setting.translations.title": "ترجمے",
-    "setting.translations.removeAll": "سب کو ہٹا دیں",
-    "setting.translations.english": "انگریزی",
-    "setting.translations.other": "دوسری زبانیں",
-    "setting.fontSize": "حرف کا سائز",
-    "setting.fontSize.arabic": "عربی",
-    "setting.reading": "پڑہائی",
-    "setting.tooltip": "لفظ کے اوپر",
-    "setting.tooltip.title": "لفظ کے اوپر کیا ہو",
-    "setting.tooltip.translation": "ترجمہ",
-    "setting.tooltip.transliteration": "تلفظ",
-    "setting.nightMode": "رات کا وقت",
-    "setting.nightMode.dayTip": "دن کے موڈ میں دیکھیں",
-    "setting.nightMode.nightTip": "رات کے موڈ میں دیکھیں",
+    'local': 'urdu',
+    'local.changeLocal': 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
+    'local.navtiveName': 'اردو',
+    'local.selectLabel': 'زبان',
+    'setting.title': 'اختیارات',
+    'setting.surahs': 'سورة',
+    'setting.verses': 'آیت منتخب کریں',
+    'setting.reciters': 'قاری منتخب کریں',
+    'setting.translations.title': 'ترجمے',
+    'setting.translations.removeAll': 'سب کو ہٹا دیں',
+    'setting.translations.english': 'انگریزی',
+    'setting.translations.other': 'دوسری زبانیں',
+    'setting.fontSize': 'حرف کا سائز',
+    'setting.fontSize.arabic': 'عربی',
+    'setting.reading': 'پڑہائی',
+    'setting.tooltip': 'لفظ کے اوپر',
+    'setting.tooltip.title': 'لفظ کے اوپر کیا ہو',
+    'setting.tooltip.translation': 'ترجمہ',
+    'setting.tooltip.transliteration': 'تلفظ',
+    'setting.nightMode': 'رات کا وقت',
+    'setting.nightMode.dayTip': 'دن کے موڈ میں دیکھیں',
+    'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
 
-    "ayah.media.lectureFrom": "{from} کے لیکچرو دیکھے",
+    'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
 
-    "search.placeholder": "تلاش کر یں",
-    "search.resultHeading": "{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>",
-    "search.error": "معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.",
-    "search.noResult": "کوئی نتیجہ نہیں ملا",
+    'search.placeholder': 'تلاش کر یں',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
+    'search.noResult': 'کوئی نتیجہ نہیں ملا',
 
-    "surah.next": "اگلی سورت",
-    "surah.previous": "پچھلی سورت",
-    "surah.info": "سورہ کی معلومات",
-    "surah.index.heading": "سورتیں",
-    "surah.index.quickLinks": "فوری لنک",
-    "surah.goToBeginning": "سورہ کے شروع میں جائیں",
+    'surah.next': 'اگلی سورت',
+    'surah.previous': 'پچھلی سورت',
+    'surah.info': 'سورہ کی معلومات',
+    'surah.index.heading': 'سورتیں',
+    'surah.index.quickLinks': 'فوری لنک',
+    'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
 
-    "player.currentAyah": "آیت",
-    "player.nextAyah": "اگلی آیت",
-    "player.previousAyah": "پچھلی آیت",
-    "player.repeat.title": " دہرائیں",
-    "player.repeat.single": "اکیلی آیت",
-    "player.repeat.range": "مخصوص آیات",
-    "player.repeat.rangeStart": "سے",
-    "player.repeat.rangeEnd": "تک",
-    "player.repeat.times": "کتنی بار",
-    "player.repeat.loop": "چلاتے رہو",
-    "player.scrollButtonTip": "جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو",
+    'player.currentAyah': 'آیت',
+    'player.nextAyah': 'اگلی آیت',
+    'player.previousAyah': 'پچھلی آیت',
+    'player.repeat.title': ' دہرائیں',
+    'player.repeat.single': 'اکیلی آیت',
+    'player.repeat.range': 'مخصوص آیات',
+    'player.repeat.rangeStart': 'سے',
+    'player.repeat.rangeEnd': 'تک',
+    'player.repeat.times': 'کتنی بار',
+    'player.repeat.loop': 'چلاتے رہو',
+    'player.scrollButtonTip': 'جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو',
 
-    "app.loading": "لوڈ ہو رہا ہے",
-    "actions.copy": "کاپی",
-    "actions.copied": "کاپی کر لیا",
-    "actions.play": "چلاو",
-    "actions.pause": "روک دیں",
+    'app.loading': 'لوڈ ہو رہا ہے',
+    'actions.copy': 'کاپی',
+    'actions.copied': 'کاپی کر لیا',
+    'actions.play': 'چلاو',
+    'actions.pause': 'روک دیں',
 
-    "nav.contribute": "تعاون کریں",
-    "nav.aboutUs": "ہمارے متعلق",
-    "nav.developers": "ڈویلپرز",
-    "nav.usefulSites": "مفید سائٹس",
-    "nav.otherLinks": "دیگر لنکس",
-    "nav.contactUs": "ہم سے رابطہ",
-    "nav.aboutQuranProject": "قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے",
-    "nav.mobile": "موبائل",
-    "nav.legacySite": "پرانی سائٹ"
+    'nav.contribute': 'تعاون کریں',
+    'nav.aboutUs': 'ہمارے متعلق',
+    'nav.developers': 'ڈویلپرز',
+    'nav.usefulSites': 'مفید سائٹس',
+    'nav.otherLinks': 'دیگر لنکس',
+    'nav.contactUs': 'ہم سے رابطہ',
+    'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
+    'nav.mobile': 'موبائل',
+    'nav.legacySite': 'پرانی سائٹ'
   }
 };

From 161ff10997b5bd827f8e1d0a791a8da19effdf81 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 19 Dec 2016 17:42:01 +0500
Subject: [PATCH 09/17] fixing specs

---
 .../Audioplayer/RepeatDropdown/spec.js        |  6 +--
 src/components/ContentDropdown/spec.js        |  4 +-
 src/components/Home/QuickSurahs/spec.js       |  7 +++-
 src/components/PageBreak/spec.js              |  4 +-
 tests/helpers/intl-enzyme-test-helper.js      | 41 +++++++++++++++++++
 5 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 tests/helpers/intl-enzyme-test-helper.js

diff --git a/src/components/Audioplayer/RepeatDropdown/spec.js b/src/components/Audioplayer/RepeatDropdown/spec.js
index 59ff9107a..5528ce645 100644
--- a/src/components/Audioplayer/RepeatDropdown/spec.js
+++ b/src/components/Audioplayer/RepeatDropdown/spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import RepeatDropdown from './index';
 
@@ -11,7 +11,7 @@ const surah = {
 makeComponent = (repeat) => {
   setRepeat = sinon.stub();
 
-  component = mount(
+  component = mountWithIntl(
     <RepeatDropdown
       repeat={repeat}
       setRepeat={setRepeat}
@@ -20,7 +20,7 @@ makeComponent = (repeat) => {
     />
   );
 
-  overlay = mount(component.find('OverlayTrigger').first().props().overlay);
+  overlay = mountWithIntl(component.find('OverlayTrigger').first().props().overlay);
 }
 
 describe('<RepeatDropdown />', () => {
diff --git a/src/components/ContentDropdown/spec.js b/src/components/ContentDropdown/spec.js
index e3cb8537b..7977bb975 100644
--- a/src/components/ContentDropdown/spec.js
+++ b/src/components/ContentDropdown/spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import ContentDropdown, { slugs } from './index';
 
@@ -11,7 +11,7 @@ let defaultOption = 19
 describe('<ContentDropdown />', () => {
   beforeEach(() => {
     onOptionChange = sinon.stub();
-    wrapper = shallow(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
+    wrapper = shallowWithIntl(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
   });
 
   it('should render', () => {
diff --git a/src/components/Home/QuickSurahs/spec.js b/src/components/Home/QuickSurahs/spec.js
index fe352eaf8..375c0fb0d 100644
--- a/src/components/Home/QuickSurahs/spec.js
+++ b/src/components/Home/QuickSurahs/spec.js
@@ -2,18 +2,21 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Link from 'react-router/lib/Link';
 import QuickSurahs from './index.js';
+import { mountWithIntl } from '../../../../tests/helpers/intl-enzyme-test-helper.js';
+
 
 describe("<QuickSurahs />", () => {
   const count = new Date().getDay() === 5 ? 5 : 4;
 
   it("Should render QuickSurahs component", () => {
-    let component = mount(<QuickSurahs />);
+    let component = mountWithIntl(<QuickSurahs />);
+
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
   });
 
   it("Should render QuickSurahs component with Surah Al-Kahf", () => {
-    let component = mount(<QuickSurahs />);
+    let component = mountWithIntl(<QuickSurahs />);
     expect(component).to.be.ok;
     expect(component.find('a').length).to.equal(count);
   })
diff --git a/src/components/PageBreak/spec.js b/src/components/PageBreak/spec.js
index 82dae4b56..d11f24d98 100644
--- a/src/components/PageBreak/spec.js
+++ b/src/components/PageBreak/spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
+import { shallowWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import PageBreak from './index';
 
@@ -9,7 +9,7 @@ let pageNum = 15;
 
 describe('<ContentDropdown />', () => {
   beforeEach(() => {
-    wrapper = shallow(<PageBreak pageNum={pageNum} />);
+    wrapper = shallowWithIntl(<PageBreak pageNum={pageNum} />);
   });
 
   it('should render', () => {
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
new file mode 100644
index 000000000..f3828157c
--- /dev/null
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -0,0 +1,41 @@
+
+/**
+ * Based on: https://gist.github.com/mirague/c05f4da0d781a9b339b501f1d5d33c37/
+ *
+ * Components using the react-intl module require access to the intl context.
+ * This is not available when mounting single components in Enzyme.
+ * These helper functions aim to address that and wrap a valid,
+ * English-locale intl context around them.
+ */
+
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+import { mount, shallow } from 'enzyme';
+
+// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
+const messages = require('../../src/locale/en'); // en.js
+
+// Create the IntlProvider to retrieve context for wrapping around.
+const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
+const { intl } = intlProvider.getChildContext();
+
+/**
+ * When using React-Intl `injectIntl` on components, props.intl is required.
+ */
+function nodeWithIntlProp(node) {
+  return React.cloneElement(node, { intl });
+}
+
+/**
+ * Export these methods.
+ */
+export function shallowWithIntl(node) {
+  return shallow(nodeWithIntlProp(node), { context: { intl } });
+}
+
+export function mountWithIntl(node) {
+  return mount(nodeWithIntlProp(node), {
+    context: { intl },
+    childContextTypes: { intl: intlShape }
+  });
+}

From b87506bb3f13abb03d0eeb3aaecb6f51ee6b4984 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 19 Dec 2016 17:59:06 +0500
Subject: [PATCH 10/17] formatting

---
 src/helpers/setLocal.js                  | 10 +++++-----
 src/locale/ar.js                         |  2 +-
 src/locale/en.js                         |  2 +-
 src/locale/ur.js                         |  2 +-
 tests/helpers/intl-enzyme-test-helper.js |  2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/helpers/setLocal.js b/src/helpers/setLocal.js
index 306833510..1aa95dfdc 100644
--- a/src/helpers/setLocal.js
+++ b/src/helpers/setLocal.js
@@ -1,20 +1,20 @@
-import config from "../config";
+import config from '../config';
 import cookie from 'react-cookie';
 
 export function getLocalMessages(req) {
   let currentLocal;
   let expireDate = new Date();
-  expireDate.setYear(expireDate.getFullYear()+1);
+  expireDate.setYear(expireDate.getFullYear() + 1);
   const availableLocals = Object.keys(config.locales);
 
   if (req && req.query.local) {
-    currentLocal =  req.query.local;
+    currentLocal = req.query.local;
   }
   else{
     currentLocal = cookie.load('currentLocale');
   }
 
-  if(availableLocals.indexOf(currentLocal) == -1){
+  if (availableLocals.indexOf(currentLocal) === -1){
     currentLocal = config.defaultLocale;
   }
 
@@ -23,7 +23,7 @@ export function getLocalMessages(req) {
     expires: new Date(expireDate),
   });
 
-  let localeData = require('../locale/'+currentLocal+'.js');
+  const localeData = require('../locale/' + currentLocal + '.js');
 
   return localeData.messages;
 }
diff --git a/src/locale/ar.js b/src/locale/ar.js
index bb56163a8..240bd61cd 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -1,7 +1,7 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    'local': 'arabic',
+    local: 'arabic',
     'local.changeLocal': 'اختر اللغة التي تود عرض الموقع بها',
     'local.navtiveName': 'العربية',
     'local.selectLabel': 'اللغة',
diff --git a/src/locale/en.js b/src/locale/en.js
index 60013976a..e32bc85e3 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -1,7 +1,7 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    'local': 'en',
+    local: 'english',
     'local.changeLocal': 'Choose the language you want the site to display with',
     'local.navtiveName': 'English',
     'local.selectLabel': 'Language',
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 9e0468b4d..847b044a2 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -1,7 +1,7 @@
 // jscs:disable disallowQuotedKeysInObjects
 export default {
   messages: {
-    'local': 'urdu',
+    local: 'urdu',
     'local.changeLocal': 'جس زبان میں سایٹ دیکہنا چاہتے ہیں اس زبان کا انتخاب کریں',
     'local.navtiveName': 'اردو',
     'local.selectLabel': 'زبان',
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
index f3828157c..de23cb374 100644
--- a/tests/helpers/intl-enzyme-test-helper.js
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -13,7 +13,7 @@ import { IntlProvider, intlShape } from 'react-intl';
 import { mount, shallow } from 'enzyme';
 
 // You can pass your messages to the IntlProvider. Optional: remove if unneeded.
-const messages = require('../../src/locale/en'); // en.js
+const messages = require('../../src/locale/en.js');
 
 // Create the IntlProvider to retrieve context for wrapping around.
 const intlProvider = new IntlProvider({ locale: 'en', messages }, {});

From 2bf0186370ee154bec3ff20d47a4cdc7030dbbbf Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Mon, 19 Dec 2016 19:23:27 +0500
Subject: [PATCH 11/17] more formatting

---
 src/helpers/setLocal.js                  | 8 ++++----
 src/locale/ar.js                         | 2 +-
 src/locale/en.js                         | 6 +++---
 src/locale/ur.js                         | 2 +-
 src/utils/bindTooltip.js                 | 4 ++--
 tests/helpers/intl-enzyme-test-helper.js | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/helpers/setLocal.js b/src/helpers/setLocal.js
index 1aa95dfdc..885fe74d1 100644
--- a/src/helpers/setLocal.js
+++ b/src/helpers/setLocal.js
@@ -3,18 +3,18 @@ import cookie from 'react-cookie';
 
 export function getLocalMessages(req) {
   let currentLocal;
-  let expireDate = new Date();
+  const expireDate = new Date();
   expireDate.setYear(expireDate.getFullYear() + 1);
   const availableLocals = Object.keys(config.locales);
 
   if (req && req.query.local) {
     currentLocal = req.query.local;
   }
-  else{
+  else { // eslint-disable-line
     currentLocal = cookie.load('currentLocale');
   }
 
-  if (availableLocals.indexOf(currentLocal) === -1){
+  if (availableLocals.indexOf(currentLocal) === -1) {
     currentLocal = config.defaultLocale;
   }
 
@@ -23,7 +23,7 @@ export function getLocalMessages(req) {
     expires: new Date(expireDate),
   });
 
-  const localeData = require('../locale/' + currentLocal + '.js');
+  const localeData = require('../locale/' + currentLocal + '.js'); // eslint-disable-line
 
   return localeData.messages;
 }
diff --git a/src/locale/ar.js b/src/locale/ar.js
index 240bd61cd..c3f9ac4b7 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -27,7 +27,7 @@ export default {
     'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
 
     'search.placeholder': 'تلاش کر یں',
-    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
     'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
     'search.noResult': 'کوئی نتیجہ نہیں ملا',
 
diff --git a/src/locale/en.js b/src/locale/en.js
index e32bc85e3..a96b2ec39 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -26,7 +26,7 @@ export default {
     'ayah.media.lectureFrom': 'Watch lecture of {from}',
 
     'search.placeholder': 'Search',
-    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
     'search.error': 'Sorry, there was an error with your search.',
     'search.noResult': 'No results found.',
 
@@ -47,7 +47,7 @@ export default {
     'player.repeat.rangeEnd': 'To',
     'player.repeat.times': 'Times',
     'player.repeat.loop': 'loop',
-    'player.scrollButtonTip': 'Automatically scrolls to the currently playing ayah on transitions...',
+    'player.scrollButtonTip': 'Automatically scrolls to the currently playing ayah on transitions...', // eslint-disable-line max-len
 
     'app.loading': 'Loading ...',
     'actions.copy': 'Copy',
@@ -61,7 +61,7 @@ export default {
     'nav.usefulSites': 'Useful sites',
     'nav.otherLinks': 'Other links',
     'nav.contactUs': 'Contact us',
-    'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.',
+    'nav.aboutQuranProject': 'Quran.com (also known as The Noble Quran, Al Quran, Holy Quran, Koran) is a pro bono project.', // eslint-disable-line max-len
     'nav.mobile': 'Mobile',
     'nav.legacySite': 'Legacy Quran.com'
   }
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 847b044a2..0479afff3 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -27,7 +27,7 @@ export default {
     'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
 
     'search.placeholder': 'تلاش کر یں',
-    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>',
+    'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
     'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
     'search.noResult': 'کوئی نتیجہ نہیں ملا',
 
diff --git a/src/utils/bindTooltip.js b/src/utils/bindTooltip.js
index 073bee437..82d0b4925 100644
--- a/src/utils/bindTooltip.js
+++ b/src/utils/bindTooltip.js
@@ -13,7 +13,7 @@ export default function bindTooltip() {
       tooltip.id = 'tooltip';
 
       if (tip && tip !== '') {
-        //target.removeAttribute('title');
+        // target.removeAttribute('title');
         tooltip.style.opacity = 0;
         tooltip.innerHTML = tip;
         document.body.appendChild(tooltip);
@@ -64,7 +64,7 @@ export default function bindTooltip() {
           if (document.querySelector('#tooltip')) {
             document.body.removeChild(document.querySelector('#tooltip'));
           }
-          //target.setAttribute('title', tip);
+          // target.setAttribute('title', tip);
         };
 
         target.addEventListener('mouseleave', removeTooltip);
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
index de23cb374..b6a5e0c19 100644
--- a/tests/helpers/intl-enzyme-test-helper.js
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -16,7 +16,7 @@ import { mount, shallow } from 'enzyme';
 const messages = require('../../src/locale/en.js');
 
 // Create the IntlProvider to retrieve context for wrapping around.
-const intlProvider = new IntlProvider({ locale: 'en', messages }, {});
+const intlProvider = new IntlProvider({ locale: 'en', messages: messages }, {});
 const { intl } = intlProvider.getChildContext();
 
 /**

From 11afb127c8167873ea5daa3383e22cb409543750 Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Tue, 20 Dec 2016 04:06:11 +0500
Subject: [PATCH 12/17] fixed noscript break

---
 src/components/NoScript/index.js              |  7 ++++++
 .../{NoScriptWarning => NoScript}/style.scss  |  0
 src/components/NoScriptWarning/index.js       | 23 -------------------
 src/containers/App/index.js                   | 16 +++++++++++--
 src/styles/main.scss                          |  2 +-
 src/styles/partials/_no-script.scss           | 11 +++++++++
 6 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 src/components/NoScript/index.js
 rename src/components/{NoScriptWarning => NoScript}/style.scss (100%)
 delete mode 100644 src/components/NoScriptWarning/index.js
 create mode 100644 src/styles/partials/_no-script.scss

diff --git a/src/components/NoScript/index.js b/src/components/NoScript/index.js
new file mode 100644
index 000000000..d5316a313
--- /dev/null
+++ b/src/components/NoScript/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom/server';
+
+export default function NoScript(props) {
+  const staticMarkup = ReactDOM.renderToStaticMarkup(props.children);
+  return <noscript dangerouslySetInnerHTML={{__html: staticMarkup}} />;
+}
diff --git a/src/components/NoScriptWarning/style.scss b/src/components/NoScript/style.scss
similarity index 100%
rename from src/components/NoScriptWarning/style.scss
rename to src/components/NoScript/style.scss
diff --git a/src/components/NoScriptWarning/index.js b/src/components/NoScriptWarning/index.js
deleted file mode 100644
index b3d4c0dbb..000000000
--- a/src/components/NoScriptWarning/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Link from 'react-router/lib/Link';
-
-import Row from 'react-bootstrap/lib/Row';
-import Col from 'react-bootstrap/lib/Col';
-
-const styles = require('./style.scss');
-
-const NoScriptWarning = () => (
-  <noscript>
-    <Row>
-      <Col md={12} className={styles.noscript_warning}>
-        <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
-          For more instruction on how to enable javascript
-
-          <Link to="http://www.enable-javascript.com/"> Click here</Link>
-        </p>
-        </Col>
-      </Row>
-  </noscript>
-  );
-
-export default NoScriptWarning;
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
index c6adb6259..0af9b76d0 100644
--- a/src/containers/App/index.js
+++ b/src/containers/App/index.js
@@ -6,6 +6,9 @@ import { asyncConnect } from 'redux-connect';
 import Helmet from 'react-helmet';
 import Modal from 'react-bootstrap/lib/Modal';
 import SmartBanner from 'components/SmartBanner';
+import Link from 'react-router/lib/Link';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
 
 const ModalHeader = Modal.Header;
 const ModalTitle = Modal.Title;
@@ -16,7 +19,7 @@ import config from 'config';
 import metricsConfig from 'helpers/metrics';
 import { authConnect } from './connect';
 import Footer from 'components/Footer';
-import NoScriptWarning from 'components/NoScriptWarning';
+import NoScript from 'components/NoScript';
 
 import FontStyles from 'components/FontStyles';
 
@@ -42,7 +45,16 @@ class App extends Component {
       <div>
         <Helmet {...config.app.head} />
         <FontStyles />
-        <NoScriptWarning />
+        <NoScript>
+          <Row className='noscript-warning'>
+            <Col md={12}>
+              <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
+               For more instruction on how to enable javascript
+               <Link to="http://www.enable-javascript.com/"> Click here </Link>
+              </p>
+            </Col>
+          </Row>
+        </NoScript>
         {children}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install"/>
         <Footer />
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f051a2e3c..547ae6ac5 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -15,7 +15,7 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
 @import 'partials/tooltip';
 @import 'partials/highlight';
 @import 'nightmode';
-
+@import 'partials/no-script';
 
 html,body{
   height: 100%;
diff --git a/src/styles/partials/_no-script.scss b/src/styles/partials/_no-script.scss
new file mode 100644
index 000000000..77b53e224
--- /dev/null
+++ b/src/styles/partials/_no-script.scss
@@ -0,0 +1,11 @@
+.noscript-warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1201;
+  text-align: center;
+  color: #FFF;
+  background-color: #AE0000;
+  padding: 5px 0 5px 0;
+}

From dbfeeb870bbbd5bf3b1d2a4c587e686c8966483a Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Tue, 20 Dec 2016 04:22:35 +0500
Subject: [PATCH 13/17] fixed the link

---
 src/containers/App/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/containers/App/index.js b/src/containers/App/index.js
index 0af9b76d0..956db28e9 100644
--- a/src/containers/App/index.js
+++ b/src/containers/App/index.js
@@ -50,7 +50,9 @@ class App extends Component {
             <Col md={12}>
               <p> Looks like either your browser does not support Javascript or its disabled. Quran.com workes best with JavaScript enabled.
                For more instruction on how to enable javascript
-               <Link to="http://www.enable-javascript.com/"> Click here </Link>
+                <a href="http://www.enable-javascript.com/">
+                  Click here
+                </a>
               </p>
             </Col>
           </Row>

From 85f7eeb1433ad0cfd7b3d3fd388194762aa09b6d Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Tue, 20 Dec 2016 05:30:31 +0500
Subject: [PATCH 14/17] fixed specs using mound instead of shallow

---
 src/components/ContentDropdown/spec.js   | 4 ++--
 src/components/PageBreak/spec.js         | 6 +++---
 tests/helpers/intl-enzyme-test-helper.js | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ContentDropdown/spec.js b/src/components/ContentDropdown/spec.js
index 7977bb975..a97516e36 100644
--- a/src/components/ContentDropdown/spec.js
+++ b/src/components/ContentDropdown/spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallowWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
+import { mountWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
 
 import ContentDropdown, { slugs } from './index';
 
@@ -11,7 +11,7 @@ let defaultOption = 19
 describe('<ContentDropdown />', () => {
   beforeEach(() => {
     onOptionChange = sinon.stub();
-    wrapper = shallowWithIntl(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
+    wrapper = mountWithIntl(<ContentDropdown options={{content: [defaultOption]}} onOptionChange={onOptionChange} />);
   });
 
   it('should render', () => {
diff --git a/src/components/PageBreak/spec.js b/src/components/PageBreak/spec.js
index d11f24d98..02621d5c8 100644
--- a/src/components/PageBreak/spec.js
+++ b/src/components/PageBreak/spec.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { shallowWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js';
+import {shallow} from 'enzyme';
 
 import PageBreak from './index';
 
 let wrapper;
 let pageNum = 15;
 
-describe('<ContentDropdown />', () => {
+describe('<PageBreak />', () => {
   beforeEach(() => {
-    wrapper = shallowWithIntl(<PageBreak pageNum={pageNum} />);
+    wrapper = shallow(<PageBreak pageNum={pageNum} />);
   });
 
   it('should render', () => {
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
index b6a5e0c19..6bd7b0162 100644
--- a/tests/helpers/intl-enzyme-test-helper.js
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -16,7 +16,7 @@ import { mount, shallow } from 'enzyme';
 const messages = require('../../src/locale/en.js');
 
 // Create the IntlProvider to retrieve context for wrapping around.
-const intlProvider = new IntlProvider({ locale: 'en', messages: messages }, {});
+const intlProvider = new IntlProvider({ locale: 'en', messages: messages.messages }, {});
 const { intl } = intlProvider.getChildContext();
 
 /**

From 18f3a019855f64774f70ade40f4c3178aafc3edd Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Sat, 24 Dec 2016 06:38:00 +0500
Subject: [PATCH 15/17] added arabic local

---
 .../LocaleFormattedMessage/index.js           |   8 +-
 src/locale/ar.js                              | 106 +++++++++---------
 src/locale/en.js                              |   1 +
 src/locale/ur.js                              |   2 +-
 4 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/components/LocaleFormattedMessage/index.js b/src/components/LocaleFormattedMessage/index.js
index dd492036a..3448f3756 100644
--- a/src/components/LocaleFormattedMessage/index.js
+++ b/src/components/LocaleFormattedMessage/index.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 
 class LocaleFormattedMessage extends React.Component {
   static propTypes = {
@@ -11,12 +11,10 @@ class LocaleFormattedMessage extends React.Component {
 
   render() {
     const {id, defaultMessage, intl, values } = this.props;
-    const params = {id: id, defaultMessage: defaultMessage, values: {values}}
-    const formattedMessage = intl.formatMessage(params);
-
+   
     return (
       <span className={intl.messages.local}>
-        {formattedMessage}
+        <FormattedMessage id={id} defaultMessage={defaultMessage} values={values}/>
       </span>
     );
   }
diff --git a/src/locale/ar.js b/src/locale/ar.js
index c3f9ac4b7..2808cf1a9 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -5,65 +5,65 @@ export default {
     'local.changeLocal': 'اختر اللغة التي تود عرض الموقع بها',
     'local.navtiveName': 'العربية',
     'local.selectLabel': 'اللغة',
-    'setting.title': 'اختیارات',
-    'setting.surahs': 'سورة',
-    'setting.verses': 'آیت منتخب کریں',
-    'setting.reciters': 'قاری منتخب کریں',
-    'setting.translations.title': 'ترجمے',
-    'setting.translations.removeAll': 'سب کو ہٹا دیں',
-    'setting.translations.english': 'انگریزی',
-    'setting.translations.other': 'دوسری زبانیں',
-    'setting.fontSize': 'حرف کا سائز',
-    'setting.fontSize.arabic': 'عربی',
-    'setting.reading': 'پڑہائی',
-    'setting.tooltip': 'لفظ کے اوپر',
-    'setting.tooltip.title': 'لفظ کے اوپر کیا ہو',
-    'setting.tooltip.translation': 'ترجمہ',
-    'setting.tooltip.transliteration': 'تلفظ',
-    'setting.nightMode': 'رات کا وقت',
-    'setting.nightMode.dayTip': 'دن کے موڈ میں دیکھیں',
-    'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
+    'setting.title': 'خيارات',
+    'setting.surahs': 'السورة',
+    'setting.verses': 'الذهاب إلى الآية',
+    'setting.reciters': 'القراء',
+    'setting.translations.title': 'الترجمات',
+    'setting.translations.removeAll': 'حذف الكل',
+    'setting.translations.english': 'الإنجليزية',
+    'setting.translations.other': 'لغات اخرى',
+    'setting.fontSize': 'حجم الخطز',
+    'setting.fontSize.arabic': 'العربية',
+    'setting.reading': 'قراءة',
+    'setting.tooltip': 'اتلميح',
+    'setting.tooltip.title': 'العرض تلميح الأدوات',
+    'setting.tooltip.translation': 'ترجمة',
+    'setting.tooltip.transliteration': 'حرفي',
+    'setting.nightMode': 'الوضع الليلي',
+    'setting.nightMode.dayTip': 'التبديل إلى الوضع اليوم',
+    'setting.nightMode.nightTip': 'التبديل إلى الوضع الليلي',
 
-    'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
+    'ayah.media.lectureFrom': 'مشاهدة محاضرة {from}',
 
-    'search.placeholder': 'تلاش کر یں',
+    'search.placeholder': 'بحث',
     'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
-    'search.error': 'معذرت، آپ کی تلاش کے ساتھ ایک خرابی پیش آگئی.',
-    'search.noResult': 'کوئی نتیجہ نہیں ملا',
+    'search.error': 'آسف، كان هناك خطأ مع بحثك.',
+    'search.noResult': 'لا توجد نتائج.ا',
 
-    'surah.next': 'اگلی سورت',
-    'surah.previous': 'پچھلی سورت',
-    'surah.info': 'سورہ کی معلومات',
-    'surah.index.heading': 'سورتیں',
-    'surah.index.quickLinks': 'فوری لنک',
-    'surah.goToBeginning': 'سورہ کے شروع میں جائیں',
+    'surah.next': 'تالية سورة',
+    'surah.previous': 'السابقة سورة',
+    'surah.info': 'سورہ معلومات',
+    'surah.index.heading': 'السور',
+    'surah.index.quickLinks': 'روابط سريعة',
+    'surah.goToBeginning': 'ابتداء من سورة',
 
-    'player.currentAyah': 'آیت',
-    'player.nextAyah': 'اگلی آیت',
-    'player.previousAyah': 'پچھلی آیت',
-    'player.repeat.title': ' دہرائیں',
-    'player.repeat.single': 'اکیلی آیت',
-    'player.repeat.range': 'مخصوص آیات',
-    'player.repeat.rangeStart': 'سے',
-    'player.repeat.rangeEnd': 'تک',
-    'player.repeat.times': 'کتنی بار',
-    'player.repeat.loop': 'چلاتے رہو',
-    'player.scrollButtonTip': 'جو آیت چل رہیی ہو اس کو  صفہ پر سامنے رکھو',
+    'player.currentAyah': 'آية',
+    'player.nextAyah': 'آية القادمة',
+    'player.previousAyah': 'آية السابقة',
+    'player.repeat.title': 'تكرار التبديل',
+    'player.repeat.single': 'وحيد',
+    'player.repeat.range': 'نطاق',
+    'player.repeat.rangeStart': 'من',
+    'player.repeat.rangeEnd': 'إلى',
+    'player.repeat.times': 'مرات',
+    'player.repeat.loop': 'أنشوطة',
+    'player.scrollButtonTip': 'مخطوطات تلقائيا إلى يلعب حاليا الآية على التحولات ...',
 
-    'app.loading': 'لوڈ ہو رہا ہے',
-    'actions.copy': 'کاپی',
-    'actions.copied': 'کاپی کر لیا',
-    'actions.play': 'چلاو',
-    'actions.pause': 'روک دیں',
+    'app.loading': 'جار التحميل ...',
+    'actions.copy': 'نسخ',
+    'actions.copied': 'نسخه',
+    'actions.play': 'لعب',
+    'actions.pause': 'وقفة',
 
-    'nav.contribute': 'تعاون کریں',
-    'nav.aboutUs': 'ہمارے متعلق',
-    'nav.developers': 'ڈویلپرز',
-    'nav.usefulSites': 'مفید سائٹس',
-    'nav.otherLinks': 'دیگر لنکس',
-    'nav.contactUs': 'ہم سے رابطہ',
-    'nav.aboutQuranProject': 'قرآن کریم ایک فلاں عامہ (عوامی بہبود کے لئے) منصوبہ ہے',
-    'nav.mobile': 'موبائل',
-    'nav.legacySite': 'پرانی سائٹ'
+    'nav.contribute': 'يساهم',
+    'nav.aboutUs': 'معلومات عنا',
+    'nav.developers': 'المطورين',
+    'nav.usefulSites': 'مواقع مفيدة',
+    'nav.otherLinks': 'روابط اخرى',
+    'nav.contactUs': 'اتصل بنا',
+    'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',
+    'nav.mobile': 'التليفون المحمول',
+    'nav.legacySite': 'الموقع القديم'
   }
 };
diff --git a/src/locale/en.js b/src/locale/en.js
index a96b2ec39..08840dc28 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -16,6 +16,7 @@ export default {
     'setting.fontSize': 'Font size',
     'setting.fontSize.arabic': 'Arabic',
     'setting.reading': 'Reading',
+    'setting.tooltip': 'tooltip',
     'setting.tooltip.title': 'TOOLTIP DISPLAY',
     'setting.tooltip.translation': 'Translation',
     'setting.tooltip.transliteration': 'Transliteration',
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 0479afff3..36eab85ab 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -24,7 +24,7 @@ export default {
     'setting.nightMode.dayTip': 'دن کے موڈ میں دیکھیں',
     'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
 
-    'ayah.media.lectureFrom': '{from} کے لیکچرو دیکھے',
+    'ayah.media.lectureFrom': 'کے لیکچر دیکھے  {from}',
 
     'search.placeholder': 'تلاش کر یں',
     'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len

From 18c392a123c325bab04373b7e8ebd4fb8e3cd61f Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Sat, 24 Dec 2016 08:29:52 +0500
Subject: [PATCH 16/17] PhantomJS don't support! fixed intl helper with vanilla
 js

---
 .eslintignore                            |  1 -
 karma.conf.js                            |  6 ++++--
 package.json                             |  3 ++-
 src/locale/ar.js                         |  2 +-
 tests/helpers/intl-enzyme-test-helper.js | 14 ++++++--------
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 1ee2668e7..e69de29bb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +0,0 @@
-src/components/SurahInfo/htmls/*
diff --git a/karma.conf.js b/karma.conf.js
index d21d97f4a..ac9b1aa40 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -13,17 +13,19 @@ module.exports = function(config) {
       'karma-sinon',
       'karma-webpack',
       'karma-chrome-launcher',
-      'karma-phantomjs-launcher'
+      'karma-phantomjs-launcher',
+      'karma-intl-shim'
     ],
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['mocha', 'chai-sinon', 'sinon'],
+    frameworks: ['mocha', 'chai-sinon', 'sinon', 'intl-shim'],
 
     // list of files / patterns to load in the browser
     files: [
       './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},
 
       // Actual tests here
diff --git a/package.json b/package.json
index 64392fe11..9c22ed569 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
-    "react-intl":"2.1.5",
+    "react-intl": "2.1.5",
     "winston": "1.1.2",
     "react-inlinesvg": "0.5.4"
   },
@@ -136,6 +136,7 @@
     "karma-chai": "0.1.0",
     "karma-chai-sinon": "0.1.5",
     "karma-chrome-launcher": "0.2.0",
+    "karma-intl-shim": "1.0.3",
     "karma-junit-reporter": "0.3.4",
     "karma-mocha": "0.2.0",
     "karma-phantomjs-launcher": "~0.2.1",
diff --git a/src/locale/ar.js b/src/locale/ar.js
index 2808cf1a9..562745121 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -62,7 +62,7 @@ export default {
     'nav.usefulSites': 'مواقع مفيدة',
     'nav.otherLinks': 'روابط اخرى',
     'nav.contactUs': 'اتصل بنا',
-    'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',
+    'nav.aboutQuranProject': 'Quran.com المعروف أيضا باسم القرآن الكريم، قناة القرآن الكريم، القرآن الكريم، القرآن الكريم) هو مشروع خيري)',  // eslint-disable-line max-len
     'nav.mobile': 'التليفون المحمول',
     'nav.legacySite': 'الموقع القديم'
   }
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
index 6bd7b0162..ba4c0d34b 100644
--- a/tests/helpers/intl-enzyme-test-helper.js
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -12,30 +12,28 @@ import React from 'react';
 import { IntlProvider, intlShape } from 'react-intl';
 import { mount, shallow } from 'enzyme';
 
-// You can pass your messages to the IntlProvider. Optional: remove if unneeded.
-const messages = require('../../src/locale/en.js');
 
 // Create the IntlProvider to retrieve context for wrapping around.
-const intlProvider = new IntlProvider({ locale: 'en', messages: messages.messages }, {});
-const { intl } = intlProvider.getChildContext();
+var intlProvider = new IntlProvider({ locale: 'en' }, {});
+var intl  = intlProvider.getChildContext();
 
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
 function nodeWithIntlProp(node) {
-  return React.cloneElement(node, { intl });
+  return React.cloneElement(node,  intl );
 }
 
-/**
+/**a
  * Export these methods.
  */
 export function shallowWithIntl(node) {
-  return shallow(nodeWithIntlProp(node), { context: { intl } });
+  return shallow(nodeWithIntlProp(node), { context: intl  });
 }
 
 export function mountWithIntl(node) {
   return mount(nodeWithIntlProp(node), {
-    context: { intl },
+    context: intl ,
     childContextTypes: { intl: intlShape }
   });
 }

From aae511807a7d893fc264c30ecdb90f2cb4240a5c Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Sun, 25 Dec 2016 03:44:44 +0500
Subject: [PATCH 17/17] added local for bookmark

---
 src/components/Ayah/index.js             | 20 ++++++++++++--------
 src/locale/ar.js                         |  2 ++
 src/locale/en.js                         |  2 ++
 src/locale/ur.js                         |  2 ++
 tests/helpers/intl-enzyme-test-helper.js |  2 +-
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index 28f9bef6c..6a9d18fa2 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -210,11 +210,6 @@ export default class Ayah extends Component {
   renderPlayLink() {
     const { isSearched, ayah, currentAyah, isPlaying } = this.props;
     const playing = ayah.ayahKey == currentAyah && isPlaying;
-    let icon = <i className="ss-icon ss-play" />
-
-    if (playing) {
-      icon = <i className="ss-icon ss-pause" />;
-    }
 
     if (!isSearched) {
       return (
@@ -222,7 +217,7 @@ export default class Ayah extends Component {
           onClick={() => this.handlePlay(ayah.ayahKey)}
           className="text-muted"
         >
-          {icon}
+          <i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'}`} />
           <LocaleFormattedMessage
             id={ playing ? 'actions.pause' : 'actions.play' }
             defaultMessage={ playing ? 'Pause' : 'Play'}
@@ -257,7 +252,12 @@ export default class Ayah extends Component {
           onClick={() => bookmarkActions.removeBookmark(ayah.ayahKey)}
           className="text-muted"
         >
-          <strong><i className="ss-icon ss-bookmark" /> Bookmarked </strong>
+          <strong><i className="ss-icon ss-bookmark" />
+            <LocaleFormattedMessage
+              id={'ayah.bookmarked'}
+              defaultMessage={"Bookmarked"}
+            />
+          </strong>
         </a>
       );
     }
@@ -267,7 +267,11 @@ export default class Ayah extends Component {
         onClick={() => bookmarkActions.addBookmark(ayah.ayahKey)}
         className="text-muted"
       >
-        <i className="ss-icon ss-bookmark" /> Bookmark
+        <i className="ss-icon ss-bookmark" />
+        <LocaleFormattedMessage
+          id={'ayah.bookmark'}
+          defaultMessage={"Bookmark"}
+        />
       </a>
     );
   }
diff --git a/src/locale/ar.js b/src/locale/ar.js
index 562745121..945ef68d2 100644
--- a/src/locale/ar.js
+++ b/src/locale/ar.js
@@ -25,6 +25,8 @@ export default {
     'setting.nightMode.nightTip': 'التبديل إلى الوضع الليلي',
 
     'ayah.media.lectureFrom': 'مشاهدة محاضرة {from}',
+    'ayah.bookmarked': 'إشارة مرجعية',
+    'ayah.bookmark': 'المرجعية',
 
     'search.placeholder': 'بحث',
     'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
diff --git a/src/locale/en.js b/src/locale/en.js
index 08840dc28..589ca585a 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -25,6 +25,8 @@ export default {
     'setting.nightMode.nightTip': 'Switch to night mode',
 
     'ayah.media.lectureFrom': 'Watch lecture of {from}',
+    'ayah.bookmarked': 'Bookmarked',
+    'ayah.bookmark': 'Bookmark',
 
     'search.placeholder': 'Search',
     'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
diff --git a/src/locale/ur.js b/src/locale/ur.js
index 36eab85ab..ebca72592 100644
--- a/src/locale/ur.js
+++ b/src/locale/ur.js
@@ -25,6 +25,8 @@ export default {
     'setting.nightMode.nightTip': 'رات کے موڈ میں دیکھیں',
 
     'ayah.media.lectureFrom': 'کے لیکچر دیکھے  {from}',
+    'ayah.bookmarked': 'حوالہ ہے',
+    'ayah.bookmark': 'حوالہ',
 
     'search.placeholder': 'تلاش کر یں',
     'search.resultHeading': '{from}-{to} OF <span> {total} </span> SEARCH RESULTS FOR: <span>{query}</span>', // eslint-disable-line max-len
diff --git a/tests/helpers/intl-enzyme-test-helper.js b/tests/helpers/intl-enzyme-test-helper.js
index ba4c0d34b..bc01b9079 100644
--- a/tests/helpers/intl-enzyme-test-helper.js
+++ b/tests/helpers/intl-enzyme-test-helper.js
@@ -24,7 +24,7 @@ function nodeWithIntlProp(node) {
   return React.cloneElement(node,  intl );
 }
 
-/**a
+/**
  * Export these methods.
  */
 export function shallowWithIntl(node) {