From 96377c72ed9825aeaa730b88eeced4332d778d23 Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Wed, 28 Oct 2020 18:39:29 +0000
Subject: [PATCH] Fix things and add new noscript message

---
 package.json                                  |  4 +--
 public/index.html                             | 25 +++++++++++++++-
 src/components/modals/settings/Section.jsx    |  2 +-
 .../settings/sections/BackgroundSettings.jsx  |  2 +-
 .../settings/sections/SearchSettings.jsx      |  2 +-
 src/scss/index.scss                           | 29 +++++++++----------
 6 files changed, 43 insertions(+), 21 deletions(-)
diff --git a/package.json b/package.json
index b13de57f..360ace46 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "fontsource-lexend-deca": "^3.0.10",
     "fontsource-roboto": "^3.0.3",
     "lodash.merge": "4.6.2",
-    "react": "16.14.0",
+    "react": "17.0.1",
     "react-clock": "^2.4.0",
-    "react-dom": "16.14.0",
+    "react-dom": "17.0.1",
     "react-modal": "3.11.2",
     "react-toastify": "6.0.9",
     "supports-webp": "2.0.1"
diff --git a/public/index.html b/public/index.html
index dc5ffe63..c81fe2ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,30 @@
   </head>
 
   <body>
-    <noscript>You need to enable JavaScript to use Mue.</noscript>
+    <noscript>
+      <style>
+        @font-face {
+          font-family: 'Lexend Deca';
+          src: url('./static/media/lexend-deca-latin-400-normal.35a9aeba.woff2');
+        }
+
+        *, a {
+          font-family: 'Lexend Deca', sans-serif;
+          text-align: center;
+          color: black
+        }
+
+        @media (prefers-color-scheme: dark) {
+          *, a {
+            color: white;
+            background: #2f3640;
+          }
+        }
+      </style>
+      <h1>Error</h1>
+      <h2>You need to enable JavaScript to use Mue</h2>
+      <p>Having trouble? Contact us: <a href='https://muetab.com/contact.html'>https://muetab.com/contact</a></p>
+    </noscript>
     <div id='root'></div>
   </body>
 
diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx
index 7b71cab5..611b4dae 100644
--- a/src/components/modals/settings/Section.jsx
+++ b/src/components/modals/settings/Section.jsx
@@ -40,7 +40,7 @@ export default class Section extends React.PureComponent {
             <h4 className={noDropdown} onClick={() => this.toggleSection()}>{this.props.title}</h4>
             {expandMore}
             {slider}
-            <div style={{display: this.state.display}}>
+            <div style={{ display: this.state.display }}>
               {extraHTML}
             </div>
         </div>
diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx
index 4d912d89..95336a50 100644
--- a/src/components/modals/settings/sections/BackgroundSettings.jsx
+++ b/src/components/modals/settings/sections/BackgroundSettings.jsx
@@ -162,7 +162,7 @@ export default class BackgroundSettings extends React.PureComponent {
           </ul>
           <ul>
             <Dropdown
-              label={this.props.language.background.API}
+              label={this.props.language.background.api}
               name='backgroundapi'
               id='backgroundAPI'
               onChange={() => localStorage.setItem('backgroundAPI', document.getElementById('backgroundAPI').value)}
diff --git a/src/components/modals/settings/sections/SearchSettings.jsx b/src/components/modals/settings/sections/SearchSettings.jsx
index e9f0ecde..10c9d79b 100644
--- a/src/components/modals/settings/sections/SearchSettings.jsx
+++ b/src/components/modals/settings/sections/SearchSettings.jsx
@@ -29,7 +29,7 @@ export default class SearchSettings extends React.PureComponent {
       <React.Fragment>
         <Section title={this.props.language.searchbar.title} name='searchBar'>
           <ul>
-            <Dropdown label={this.props.language.searchbar.searchengine}
+            <Dropdown label={this.props.language.searchbar.search_engine}
               name='searchEngine'
               id='searchEngine'
               onChange={() => SettingsFunctions.setSearchEngine(document.getElementById('searchEngine').value)}
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 63d5a442..8470cb88 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -19,14 +19,13 @@
 body {
     background: #2f3640;
     margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: 'Lexend Deca', sans-serif;
     overflow: hidden;
 }
 
 * {
     font-family: 'Lexend Deca', 'Roboto' !important;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     outline: none;
 }
 
@@ -52,6 +51,10 @@ body {
     opacity: 1;
 }
 
+::selection {
+    background-color: #c2c2c2;
+}
+
 #root {
     min-height: 100vh;
     display: grid;
@@ -66,6 +69,14 @@ body {
     background-attachment: fixed;
 }
 
+#backgroundVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+}
+
 .fade-in {
     @include animation('fadein 2s');
 }
@@ -88,16 +99,4 @@ body {
 .creditlink {
     text-decoration: none;
     color: white;
-}
-
-::selection {
-    background-color: #c2c2c2;
-}
-
-#backgroundVideo {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
 }
\ No newline at end of file
