fixed noscript break (#535)

* fixed noscript break

* fixed the link

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}} />;
+}

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,18 @@ 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
+                <a href="http://www.enable-javascript.com/">
+                  Click here
+                </a>
+              </p>
+            </Col>
+          </Row>
+        </NoScript>
         {children}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install"/>
         <Footer />

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%;

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;
+}