Refining code and design

18 files changed, 150 insertions, 252 deletions

diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js
index d7b65881..373929f6 100644
--- a/src/assets/javascripts/helpers/common.js
+++ b/src/assets/javascripts/helpers/common.js
@@ -28,7 +28,7 @@ function updateInstances() {
   if (request.status === 200) {
     const instances = JSON.parse(request.responseText);
 
-    youtubeHelper.setRedirects(instances.invidious);
+    youtubeHelper.setInvidiousRedirects(instances.invidious);
 
     twitterHelper.setRedirects(instances.nitter);
 
diff --git a/src/assets/javascripts/helpers/youtube/youtube.js b/src/assets/javascripts/helpers/youtube/youtube.js
index 547e2614..daea8b7e 100644
--- a/src/assets/javascripts/helpers/youtube/youtube.js
+++ b/src/assets/javascripts/helpers/youtube/youtube.js
@@ -105,12 +105,12 @@ function setInvidiousVideoQuality(val) {
 }
 const getInvidiousVideoQuality = () => invidiousVideoQuality;
 
-let invidiousDarkMode;
-const getInvidiousDarkMode = () => invidiousDarkMode;
-function setInvidiousDarkMode(val) {
-  invidiousDarkMode = val;
-  browser.storage.sync.set({ invidiousDarkMode })
-  console.log("invidiousDarkMode: ", invidiousDarkMode)
+let invidiousTheme;
+const getInvidiousTheme = () => invidiousTheme;
+function setInvidiousTheme(val) {
+  invidiousTheme = val;
+  browser.storage.sync.set({ invidiousTheme })
+  console.log("invidiousTheme: ", invidiousTheme)
 }
 
 let invidiousVolume;
@@ -179,7 +179,7 @@ async function init() {
     [
       "invidiousAlwaysProxy",
       "invidiousVideoQuality",
-      "invidiousDarkMode",
+      "invidiousTheme",
       "persistInvidiousPrefs",
       "disableYoutube",
       "invidiousInstance",
@@ -201,7 +201,7 @@ async function init() {
   invidiousAlwaysProxy = result.invidiousAlwaysProxy ?? true;
   invidiousOnlyEmbeddedVideo = result.invidiousOnlyEmbeddedVideo ?? false;
   invidiousVideoQuality = result.invidiousVideoQuality ?? 'medium';
-  invidiousDarkMode = result.invidiousDarkMode ?? true;
+  invidiousTheme = result.invidiousTheme ?? 'dark';
   invidiousVolume = result.invidiousVolume ?? 50;
   invidiousPlayerStyle = result.invidiousPlayerStyle ?? 'invidious';
   invidiousSubtitles = result.invidiousSubtitles || '';
@@ -250,7 +250,7 @@ function redirect(url, initiator, type) {
 
     url.searchParams.append("local", invidiousAlwaysProxy);
     url.searchParams.append("quality", invidiousVideoQuality);
-    url.searchParams.append("dark_mode", invidiousDarkMode);
+    url.searchParams.append("dark_mode", invidiousTheme);
     url.searchParams.append("volume", invidiousVolume);
     url.searchParams.append("player_style", invidiousPlayerStyle);
     url.searchParams.append("subtitles", invidiousSubtitles);
@@ -271,7 +271,6 @@ function redirect(url, initiator, type) {
   }
 }
 
-
 export default {
   invidiousInitCookies,
 
@@ -300,8 +299,8 @@ export default {
   setInvidiousVideoQuality,
   getInvidiousVideoQuality,
 
-  setInvidiousDarkMode,
-  getInvidiousDarkMode,
+  setInvidiousTheme,
+  getInvidiousTheme,
 
   setInvidiousVolume,
   getInvidiousVolume,
diff --git a/src/assets/javascripts/remove-twitter-sw.js b/src/assets/javascripts/remove-twitter-sw.js
index 36a8d9b3..cb8abc43 100644
--- a/src/assets/javascripts/remove-twitter-sw.js
+++ b/src/assets/javascripts/remove-twitter-sw.js
@@ -1,24 +1,5 @@
 "use strict";
 
-const nitterInstances = [
-  "https://nitter.net",
-  "https://nitter.snopyta.org",
-  "https://nitter.42l.fr",
-  "https://nitter.nixnet.services",
-  "https://nitter.pussthecat.org",
-  "https://nitter.dark.fail",
-  "https://nitter.tedomum.net",
-  "https://nitter.cattube.org",
-  "https://nitter.fdn.fr",
-  "https://nitter.1d4.us",
-  "https://nitter.kavin.rocks",
-  "https://tweet.lambda.dance",
-  "https://nitter.cc",
-  "https://nitter.vxempire.xyz",
-  "https://nitter.unixfox.eu",
-  "https://bird.trom.tf"
-];
-
 let disableTwitter;
 let nitterInstance;
 let redirectBypassFlag;
@@ -26,153 +7,67 @@ let exceptions;
 
 window.browser = window.browser || window.chrome;
 
-function getRandomInstance() {
-  return nitterInstances[~~(nitterInstances.length * Math.random())];
-}
-
-function isNotException(url) {
-  return !exceptions.some((regex) => regex.test(url.href));
-}
+Promise.all([
+  import(browser.extension.getURL("src/assets/javascripts/helpers/common.js")),
+  import(browser.extension.getURL("src/assets/javascripts/helpers/twitter.js")),
+]).then(
+  (helpers) => {
+    let commonHelper;
+    let twitterHelper;
+    [commonHelper, twitterHelper] = helpers;
 
-function shouldRedirect(url) {
-  return (!redirectBypassFlag && isNotException(url) && !disableTwitter && url.host !== nitterInstance && !url.pathname.includes("/home"));
-}
+    function shouldRedirect(url) {
+      return (
+        !redirectBypassFlag &&
+        !disableTwitter &&
+        url.host !== nitterInstance &&
+        !url.pathname.includes("/home")
+      );
+    }
 
-function redirectTwitter(url) {
-  if (url.host.split(".")[0] === "pbs") {
-    return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-  } else if (url.host.split(".")[0] === "video") {
-    return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
-  } else {
-    return `${nitterInstance}${url.pathname}${url.search}`;
-  }
-}
+    function redirectTwitter(url) {
+      if (url.host.split(".")[0] === "pbs")
+        return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
+      else if (url.host.split(".")[0] === "video")
+        return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
+      else
+        return `${nitterInstance}${url.pathname}${url.search}`;
+    }
 
-browser.storage.sync.get(
-  [
-    "nitterInstance",
-    "disableTwitter",
-    "removeTwitterSW",
-    "redirectBypassFlag",
-    "exceptions",
-  ],
-  (result) => {
-    redirectBypassFlag = result.redirectBypassFlag;
-    browser.storage.sync.set({ redirectBypassFlag: false });
-    if (!result.removeTwitterSW) {
-      disableTwitter = result.disableTwitter;
-      nitterInstance = result.nitterInstance || getRandomInstance();
-      exceptions = result.exceptions
-        ? result.exceptions.map((e) => {
-          return new RegExp(e);
-        })
-        : [];
-      navigator.serviceWorker.getRegistrations().then((registrations) => {
-        for (let registration of registrations) {
-          if (registration.scope === "https://twitter.com/") {
-            registration.unregister();
-            console.log("Unregistered Twitter SW", registration);
+    browser.storage.sync.get(
+      [
+        "nitterInstance",
+        "disableTwitter",
+        "removeTwitterSW",
+        "redirectBypassFlag",
+        "exceptions",
+      ],
+      (result) => {
+        redirectBypassFlag = result.redirectBypassFlag;
+        browser.storage.sync.set({ redirectBypassFlag: false });
+        if (!result.removeTwitterSW) {
+          disableTwitter = result.disableTwitter;
+          nitterInstance = result.nitterInstance ?? commonHelper.default.getRandomInstance(twitterHelper.default.redirects);
+          exceptions = result.exceptions ? result.exceptions.map((e) => new RegExp(e)) : [];
+          navigator.serviceWorker.getRegistrations().then((registrations) => {
+            for (let registration of registrations) {
+              if (registration.scope === "https://twitter.com/") {
+                registration.unregister();
+                console.log("Unregistered Twitter SW", registration);
+              }
+            }
+          });
+          const url = new URL(window.location);
+          if (shouldRedirect(url)) {
+            const redirect = redirectTwitter(url);
+            console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`);
+            window.location = redirect;
           }
         }
-      });
-      const url = new URL(window.location);
-      if (shouldRedirect(url)) {
-        const redirect = redirectTwitter(url);
-        console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`);
-        window.location = redirect;
       }
-    }
+    );
+  },
+  (error) => {
+    console.error(error);
   }
 );
-
-// Keeping this here until https://bugzilla.mozilla.org/show_bug.cgi?id=1536094 is fixed...
-//
-//"use strict";
-//
-//let disableTwitter;
-//let nitterInstance;
-//let redirectBypassFlag;
-//let exceptions;
-//
-//window.browser = window.browser || window.chrome;
-//
-//Promise.all([
-//  import(browser.extension.getURL("src/assets/javascripts/helpers/common.js")),
-//  import(browser.extension.getURL("src/assets/javascripts/helpers/twitter.js")),
-//]).then(
-//  (helpers) => {
-//    let commonHelper;
-//    let twitterHelper;
-//    [commonHelper, twitterHelper] = helpers;
-//
-//    function isNotException(url) {
-//      return !exceptions.some((regex) => regex.test(url.href));
-//    }
-//
-//    function shouldRedirect(url) {
-//      return (
-//        !redirectBypassFlag &&
-//        isNotException(url) &&
-//        !disableTwitter &&
-//        url.host !== nitterInstance &&
-//        !url.pathname.includes("/home")
-//      );
-//    }
-//
-//    function redirectTwitter(url) {
-//      if (url.host.split(".")[0] === "pbs") {
-//        return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`;
-//      } else if (url.host.split(".")[0] === "video") {
-//        return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`;
-//      } else {
-//        return `${nitterInstance}${url.pathname}${url.search}`;
-//      }
-//    }
-//
-//    browser.storage.sync.get(
-//      [
-//        "nitterInstance",
-//        "disableTwitter",
-//        "removeTwitterSW",
-//        "redirectBypassFlag",
-//        "exceptions",
-//      ],
-//      (result) => {
-//        redirectBypassFlag = result.redirectBypassFlag;
-//        browser.storage.sync.set({
-//          redirectBypassFlag: false,
-//        });
-//        if (!result.removeTwitterSW) {
-//          disableTwitter = result.disableTwitter;
-//          nitterInstance =
-//            result.nitterInstance ||
-//            commonHelper.default.getRandomInstance(
-//              twitterHelper.default.redirects
-//            );
-//          exceptions = result.exceptions
-//            ? result.exceptions.map((e) => {
-//                return new RegExp(e);
-//              })
-//            : [];
-//          navigator.serviceWorker.getRegistrations().then((registrations) => {
-//            for (let registration of registrations) {
-//              if (registration.scope === "https://twitter.com/") {
-//                registration.unregister();
-//                console.log("Unregistered Twitter SW", registration);
-//              }
-//            }
-//          });
-//          const url = new URL(window.location);
-//          if (shouldRedirect(url)) {
-//            const redirect = redirectTwitter(url);
-//            console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`);
-//            window.location = redirect;
-//          }
-//        }
-//      }
-//    );
-//  },
-//  (error) => {
-//    console.error(error);
-//  }
-//);
diff --git a/src/manifest.json b/src/manifest.json
index 161162e9..ce7bd608 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -47,7 +47,7 @@
     "open_in_tab": true
   },
   "web_accessible_resources": [
-    "assets/javascripts/helpers/*"
+    "assets/javascripts/helpers/youtube/invidious-cookies.js"
   ],
   "browser_specific_settings": {
     "gecko": {
diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 8c46c40b..3a7e8cf2 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -38,8 +38,8 @@
         <span>Update Instances</span>
       </a>
     </div>
-    <hr>
-    <section class="settings-block">
+    <!-- <hr> -->
+    <!-- <section class="settings-block">
       <p data-localise="__MSG_exceptionsDescriptionP1__">
         Enter a URL or Regular Expression to be excluded from redirects.
       </p>
@@ -95,11 +95,11 @@
       </table>
     </section>
     <ul id="exceptions-items"></ul>
-  </section>
+  </section> -->
 
 
-  <script type="module" src="./general.js"></script>
   <script type="module" src="../init.js"></script>
+  <script type="module" src="./general.js"></script>
   <!-- <script src="../../assets/javascripts/localise.js"></script> -->
 </body>
 
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 4f111469..23c739aa 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -11,66 +11,66 @@ let themeElement = document.getElementById("theme");
 
 window.browser = window.browser || window.chrome;
 
-function prependExceptionsItem(item, index) {
-  const li = document.createElement("li");
-  li.appendChild(document.createTextNode(item.toString()));
-  const button = document.createElement("button");
-  li.appendChild(button);
-  document.getElementById("exceptions-items").prepend(li);
-  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
-      <line x1='368' y1='368' x2='144' y2='144'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-      <line x1='368' y1='144' x2='144' y2='368'
-        style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
-    </svg>`;
-  button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
-  button.addEventListener("click", () => {
-    exceptions.splice(index, 1);
-    browser.storage.sync.set({ exceptions: exceptions });
-    li.remove();
-  });
-}
+// function prependExceptionsItem(item, index) {
+//   const li = document.createElement("li");
+//   li.appendChild(document.createTextNode(item.toString()));
+//   const button = document.createElement("button");
+//   li.appendChild(button);
+//   document.getElementById("exceptions-items").prepend(li);
+//   const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
+//       <line x1='368' y1='368' x2='144' y2='144'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//       <line x1='368' y1='144' x2='144' y2='368'
+//         style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
+//     </svg>`;
+//   button.appendChild(domparser.parseFromString(svg, "image/svg+xml").documentElement);
+//   button.addEventListener("click", () => {
+//     exceptions.splice(index, 1);
+//     browser.storage.sync.set({ exceptions: exceptions });
+//     li.remove();
+//   });
+// }
 
 browser.storage.sync.get(
   [
-    "exceptions",
+    // "exceptions",
     "theme",
   ],
   (result) => {
     data.theme = result.theme || "";
     themeElement.value = result.theme || "";
     if (result.theme) document.body.classList.add(result.theme);
-    data.exceptions = result.exceptions || [];
-    data.exceptions.forEach(prependExceptionsItem);
+    // data.exceptions = result.exceptions || [];
+    // data.exceptions.forEach(prependExceptionsItem);
     shared.autocompletes.forEach((value) => {
     });
   }
 );
 
-function addToExceptions() {
-  const input = document.getElementById("new-exceptions-item");
-  const type = document.querySelector('input[name="type"]:checked').value;
-  if (input.value) {
-    try {
-      let value = input.value;
-      new RegExp(input.value);
-      if (type === "URL")
-        value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+// function addToExceptions() {
+//   const input = document.getElementById("new-exceptions-item");
+//   const type = document.querySelector('input[name="type"]:checked').value;
+//   if (input.value) {
+//     try {
+//       let value = input.value;
+//       new RegExp(input.value);
+//       if (type === "URL")
+//         value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
 
-      exceptions.push(value);
-      browser.storage.sync.set({
-        exceptions: exceptions,
-      });
-      prependExceptionsItem(value, exceptions.indexOf(value));
-      input.value = "";
-    } catch (error) {
-      input.setCustomValidity("Invalid RegExp");
-    }
-  } else {
-    input.setCustomValidity("Invalid RegExp");
-  }
-}
-document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
+//       exceptions.push(value);
+//       browser.storage.sync.set({
+//         exceptions: exceptions,
+//       });
+//       prependExceptionsItem(value, exceptions.indexOf(value));
+//       input.value = "";
+//     } catch (error) {
+//       input.setCustomValidity("Invalid RegExp");
+//     }
+//   } else {
+//     input.setCustomValidity("Invalid RegExp");
+//   }
+// }
+// document.getElementById("add-to-exceptions").addEventListener("click", addToExceptions);
 
 themeElement.addEventListener("change", (event) => {
   const value = event.target.options[theme.selectedIndex].value;
@@ -92,8 +92,12 @@ themeElement.addEventListener("change", (event) => {
 
 document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances())
+  if (commonHelper.updateInstances()) {
     document.querySelector("#update-instances").innerHTML = 'Done!';
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+    )
+  }
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });
diff --git a/src/pages/options/instagram/instagram.html b/src/pages/options/instagram/instagram.html
index dfbbd7f7..1f09cab7 100644
--- a/src/pages/options/instagram/instagram.html
+++ b/src/pages/options/instagram/instagram.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-bibliogram" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/maps/maps.html b/src/pages/options/maps/maps.html
index 7702d019..79aa08ea 100644
--- a/src/pages/options/maps/maps.html
+++ b/src/pages/options/maps/maps.html
@@ -26,7 +26,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-osm" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/medium/medium.html b/src/pages/options/medium/medium.html
index 877d704e..abf149c0 100644
--- a/src/pages/options/medium/medium.html
+++ b/src/pages/options/medium/medium.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-scribe" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index b3f9c7c7..9dd59d73 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -27,7 +27,7 @@
     <section class="option-block">
 
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-reddit" type="checkbox" checked />
         </div>
 
diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index 863a3472..af7d3946 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-search" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 3b6d7580..7d4ba006 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -24,7 +24,7 @@
     </section>
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-simplyTranslate" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/twitter/twitter.html b/src/pages/options/twitter/twitter.html
index b695a8b2..b13d02dd 100644
--- a/src/pages/options/twitter/twitter.html
+++ b/src/pages/options/twitter/twitter.html
@@ -27,7 +27,7 @@
     <section class="option-block">
 
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-nitter" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/twitter/twitter.js b/src/pages/options/twitter/twitter.js
index 08fabb20..4316b456 100644
--- a/src/pages/options/twitter/twitter.js
+++ b/src/pages/options/twitter/twitter.js
@@ -5,12 +5,6 @@ disableTwitterElement.addEventListener("change",
     (event) => twitterHelper.setDisableTwitter(!event.target.checked)
 );
 
-let removeTwitterSWElement = document.getElementById("remove-twitter-sw");
-removeTwitterSWElement.addEventListener("change", (event) => {
-    browser.storage.sync.set({ removeTwitterSW: !event.target.checked }); // Problem
-});
-
 twitterHelper.init().then(() => {
-    disableTwitterElement.checked = !twitterHelper.getDisableTwitter();
-    removeTwitterSWElement.checked = !remove.getRemoveTwitterSW; // Problem
+    disableTwitterElement.checked = !twitterHelper.getDisableTwitter(); 
 });
\ No newline at end of file
diff --git a/src/pages/options/wikipedia/wikipedia.html b/src/pages/options/wikipedia/wikipedia.html
index 1a4ea8d5..a68f36a6 100644
--- a/src/pages/options/wikipedia/wikipedia.html
+++ b/src/pages/options/wikipedia/wikipedia.html
@@ -25,7 +25,7 @@
 
     <section class="option-block">
         <div class="some-block option-block">
-            <h1>Enable</h1>
+            <h4>Enable</h4>
             <input id="disable-wikipedia" type="checkbox" checked />
         </div>
         <!-- <div class="some-block option-block">
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 15688873..6facdb4c 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -60,6 +60,14 @@
 
         <div id="invidious">
             <div class="some-block option-block">
+                <h4>Theme</h4>
+                <select id="invidious-theme">
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
+                </select>
+            </div>
+
+            <div class="some-block option-block">
                 <h4>Player Style</h4>
                 <select id="invidious-player-style">
                     <option value="invidious">Invidious</option>
@@ -67,11 +75,6 @@
                 </select>
             </div>
 
-            <div class="some-block option-block">
-                <h4>Dark mode</h4>
-                <input id="invidious-dark-mode" type="checkbox" checked />
-            </div>
-
             <div class="some-block">
                 <h4>Volume: <span id="volume-value">50%</span></h4>
                 <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
@@ -90,10 +93,9 @@
             <div class="some-block option-block">
                 <h4>Video Quality</h4>
                 <select id="video-quality">
-                    <option value="">Default</option>
                     <option value="hd720">720p</option>
                     <option value="medium">480p</option>
-                    <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                    <option value="dash">DASH (adaptive quality)</option>
                     </option>
                 </select>
             </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index c1d526da..5c909578 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -32,9 +32,9 @@ disableYoutubeElement.addEventListener("change",
     (event) => youtubeHelper.setDisableYoutube(!event.target.checked)
 );
 
-let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
-invidiousDarkModeElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked)
+let invidiousThemeElement = document.getElementById("invidious-theme");
+invidiousThemeElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
 );
 
 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
@@ -86,7 +86,7 @@ invidiousVideoQualityElement.addEventListener("change",
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
-    invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
+    invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
     persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
     invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
     invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;
diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js
index bd8a5057..221d9c2a 100644
--- a/src/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -88,8 +88,12 @@ disableMediumElement.addEventListener("change",
 
 document.querySelector("#update-instances").addEventListener("click", () => {
   document.querySelector("#update-instances").innerHTML = '...';
-  if (commonHelper.updateInstances())
+  if (commonHelper.updateInstances()) {
     document.querySelector("#update-instances").innerHTML = 'Done!';
+    new Promise(resolve => setTimeout(resolve, 1500)).then( // Sleep 1500ms
+      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+    )
+  }
   else
     document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
 });