From 75401e0f5a9f965e01592bb7fda6382231df42bd Mon Sep 17 00:00:00 2001
From: Naveed Ahmad <naveedahmada036@gmail.com>
Date: Fri, 16 Dec 2016 05:04:50 +0500
Subject: [PATCH] Added no script warning (#527)

* added no script warning

* fixed messaging

* minor css changes

* removed font size
---
 src/components/NoScriptWarning/index.js   | 23 +++++++++++++++++++++++
 src/components/NoScriptWarning/style.scss | 11 +++++++++++
 src/containers/App/index.js               |  2 ++
 3 files changed, 36 insertions(+)
 create mode 100644 src/components/NoScriptWarning/index.js
 create mode 100644 src/components/NoScriptWarning/style.scss

diff --git a/src/components/NoScriptWarning/index.js b/src/components/NoScriptWarning/index.js
new file mode 100644
index 000000000..b3d4c0dbb
--- /dev/null
+++ b/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;
diff --git a/src/components/NoScriptWarning/style.scss b/src/components/NoScriptWarning/style.scss
new file mode 100644
index 000000000..edd0d5113
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/App/index.js b/src/containers/App/index.js
index 8ed722076..c6adb6259 100644
--- a/src/containers/App/index.js
+++ b/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 />