Added no script warning (#527)

* added no script warning

* fixed messaging

* minor css changes

* removed font size

Author: naveed-ahmad

src/components/NoScriptWarning/index.js

@@ -0,0 +1,23 @@
+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;

src/components/NoScriptWarning/style.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;
+}

src/containers/App/index.js

@@ -16,6 +16,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 FontStyles from 'components/FontStyles';
 
@@ -41,6 +42,7 @@ class App extends Component {
       <div>
         <Helmet {...config.app.head} />
         <FontStyles />
+        <NoScriptWarning />
         {children}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install"/>
         <Footer />