From e0f8b89233f31c81ddf53bceeaf5568882cb1808 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 15:00:49 -0500
Subject: Win7 warning, docs styling fixes, page width fixes

---
 Website/layouts/default.vue         | 14 ++++++--
 Website/pages/docs.vue              | 11 +++---
 Website/pages/docs/endpoints.vue    |  2 +-
 Website/pages/docs/fetching.vue     | 70 +++++++++++++++++++------------------
 Website/pages/docs/index.vue        |  4 +--
 Website/pages/docs/url.vue          |  2 +-
 Website/pages/docs/usage-rights.vue |  2 +-
 Website/pages/faq.vue               |  7 ++--
 Website/pages/help.vue              | 15 ++++----
 9 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 35f1318..9d263b8 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -73,7 +73,7 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // check if browser version out of date
+      // Chrome < 70
       if (
         window.navigator.userAgent.indexOf("Chrome") > -1 &&
         window.navigator.userAgent.indexOf("Edge") === -1
@@ -85,6 +85,8 @@ export default {
           this.alert.show = true;
         }
       }
+
+      // FF < 60
       if (window.navigator.userAgent.indexOf("Firefox") > -1) {
         let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
         let firefoxVersion = firefox ? firefox[1] : 0;
@@ -93,11 +95,18 @@ export default {
           this.alert.show = true;
         }
       }
-      // check for IE browser
+
+      // IE
       if (window.navigator.userAgent.indexOf("MSIE") > -1) {
         this.alert.html = `Looks like you're using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Internet Explorer</b>. Stop it, get some help.`;
         this.alert.show = true;
       }
+
+      // Win7
+      if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Update Windows, or install Linux :)`;
+        this.alert.show = true;
+      }
     }, 1000);
   },
 };
@@ -162,6 +171,7 @@ body {
 .title-text {
   font-size: 3rem;
 }
+
 @media (max-width: 768px) {
   /* mobile */
   .title-text {
diff --git a/Website/pages/docs.vue b/Website/pages/docs.vue
index 04abbd2..a1ef277 100644
--- a/Website/pages/docs.vue
+++ b/Website/pages/docs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row wrap justify-center full-width" style="max-width: 100%">
+  <div class="row wrap justify-center full-width mx-auto" style="width: 80vw">
     <!--   Left Section // "Sections" Card   -->
     <v-card
       class="col-xs-12 mx-2 elevation-0"
@@ -8,6 +8,7 @@
         height: max-content;
         position: sticky;
         top: 5.5rem;
+        max-width: 500px;
       "
     >
       <!-- <v-card-title style="padding-bottom: 0 !important; color: #aaa">
@@ -24,12 +25,12 @@
           color="primary"
           style="overflow: hidden; border-radius: 0.75rem"
         >
+          <v-list-item-title style="text-align: right">
+            <v-list-item-title v-text="item.text" />
+          </v-list-item-title>
           <v-list-item-icon>
             <v-icon v-text="item.icon" />
           </v-list-item-icon>
-          <v-list-item-title style="text-align: left">
-            <v-list-item-title v-text="item.text" />
-          </v-list-item-title>
         </v-list-item>
       </v-list>
     </v-card>
@@ -41,7 +42,7 @@
         height: max-content;
         background-color: #222;
         border-radius: 0.75rem;
-        max-width: 90%;
+        width: 90%;
       "
     >
       <NuxtChild />
diff --git a/Website/pages/docs/endpoints.vue b/Website/pages/docs/endpoints.vue
index ef94c10..2933af1 100644
--- a/Website/pages/docs/endpoints.vue
+++ b/Website/pages/docs/endpoints.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Available Endpoints</h1>
     List of available endpoints is available here:<br />
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index c295eb3..7f67f3e 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -1,49 +1,49 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
     <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
       >kxOuG8jMIgI</a
-    ><br /><br />
+    >
 
     <h2>Example Request:</h2>
-    <span><b>Request URL:</b></span>
+    <span>Request URL:</span>
     <a
       :href="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
       target="_blank"
       v-text="apiUrl + '/votes?videoId=kxOuG8jMIgI'"
-    /><br />
-    <span
-      ><b>Request Method:</b>
+    />
+    <br />
+    <span>
+      Request Method:
       <a
         href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"
         target="_blank"
         >HTTP/GET</a
-      ></span
-    ><br />
-    <span><b>Headers:</b></span
-    ><br />
-    <code class="code">
+      >
+    </span>
+    <br />
+    <span>Headers:</span>
+    <br />
+    <div class="code pa-4">
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9<br />
       Pragma: no-cache<br />
       Cache-Control: no-cache<br />
-      Connection: keep-alive </code
-    ><br />
-    <span><b>Response:</b></span
-    ><br />
-    <div class="code">
-      <code style="background-color: rgba(0, 0, 0, 0)">
-        {<br />
-        "id": "kxOuG8jMIgI",<br />
-        "dateCreated": "2021-12-20T12:25:54.418014Z",<br />
-        "likes": 27326,<br />
-        "dislikes": 498153,<br />
-        "rating": 1.212014408444885,<br />
-        "viewCount": 3149885,<br />
-        "deleted": false<br />
-        }
-      </code>
+      Connection: keep-alive
+    </div>
+    <span>Response:</span><br />
+    <div class="code pa-4">
+      {
+      <br />
+      &nbsp;"id": "kxOuG8jMIgI",<br />
+      &nbsp;"dateCreated": "2021-12-20T12:25:54.418014Z",<br />
+      &nbsp;"likes": 27326,<br />
+      &nbsp;"dislikes": 498153,<br />
+      &nbsp;"rating": 1.212014408444885,<br />
+      &nbsp;"viewCount": 3149885,<br />
+      &nbsp;"deleted": false<br />
+      }
     </div>
     <br /><br />
     <v-alert border="left" color="orange" text type="info">
@@ -59,13 +59,6 @@
   </div>
 </template>
 
-<style scoped>
-.code {
-  background: #353535;
-  border-radius: 0.25rem;
-}
-</style>
-
 <script>
 export default {
   data() {
@@ -75,3 +68,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.code {
+  color: #aaa;
+  background: #353535;
+  border-radius: 0.25rem;
+  font-family: monospace;
+}
+</style>
diff --git a/Website/pages/docs/index.vue b/Website/pages/docs/index.vue
index e84dd73..1a18bb8 100644
--- a/Website/pages/docs/index.vue
+++ b/Website/pages/docs/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1>
       Welcome to the <span class="primary--text">official RYD docs</span>!
     </h1>
-    <p>&lt;- To get started, select a section on the left.</p>
+    To get started, select a section from the menu.
   </div>
 </template>
diff --git a/Website/pages/docs/url.vue b/Website/pages/docs/url.vue
index e95f542..3de1158 100644
--- a/Website/pages/docs/url.vue
+++ b/Website/pages/docs/url.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">URL Information</h1>
     The API is accessible over the following base URL:<br />
     <a :href="apiUrl" target="_blank" v-text="apiUrl" />
diff --git a/Website/pages/docs/usage-rights.vue b/Website/pages/docs/usage-rights.vue
index 09bf581..25fa8c1 100644
--- a/Website/pages/docs/usage-rights.vue
+++ b/Website/pages/docs/usage-rights.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="line-height: 3rem">
     <h1 class="primary--text">Usage Rights</h1>
     <p>
       Third party use of this open API is allowed with the following
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 493d3fd..25660fe 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div style="width: 90vw" class="mx-auto">
     <h1 class="title-text">Frequently Asked Questions</h1>
     <p style="color: #999; margin-top: 0.5rem; margin-bottom: 1.5rem">
       Still have questions? Feel free to join our Discord!
     </p>
 
-    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-7">
+    <v-expansion-panels class="col-xs-12 col-sm-11 col-md-9 col-lg-8">
       <v-expansion-panel v-for="(item, i) in items" :key="i">
         <v-expansion-panel-header>
           {{ item.question }}
@@ -49,8 +49,7 @@ export default {
           "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API. The extension then displays the dislike count and ratio on the page. If you like or dislike a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-
-        question:"Can I share my dislike count with you?",
+        question: "Can I share my dislike count with you?",
 
         answer:
           "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
index eaed8af..5373d9b 100644
--- a/Website/pages/help.vue
+++ b/Website/pages/help.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div
+    style="width: 80vw"
+    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
+  >
     <h1 class="title-text pt-12">Troubleshooting</h1>
-    <ol
-      class="col-xs-12 col-sm-11 col-md-9 col-lg-7 q-mx-auto text-left"
-      style="line-height: 3rem; color: #aaa"
-    >
+    <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
         Make sure you have latest version of extension installed,
         <code style="color: #eee">
@@ -88,7 +88,8 @@
 
           <li>
             Take screenshot of extensions page of your browser with extension
-            installed. <br />
+            installed.
+            <br />
             To see extensions put this into adress bar:
             <br />
             <code>about:addons</code> for Firefox
@@ -114,7 +115,7 @@ export default {
       : "swoop-right";
   },
   data: () => ({
-    version: "2.0.0.3",
+    version: "loading",
     platform: "Unknown platform",
     discordLink: "https://discord.gg/mYnESY4Md5",
   }),
-- 
cgit v1.2.3


From 69c66c8345f538d076007a9f1845d771f8e5accd Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 15:41:51 -0500
Subject: custom user agent parser replaced by Nuxt

---
 Website/pages/docs/fetching.vue |  4 +-
 Website/pages/help.vue          | 83 +++++++++++++----------------------------
 2 files changed, 28 insertions(+), 59 deletions(-)

diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index 7f67f3e..16b380a 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -45,7 +45,7 @@
       &nbsp;"deleted": false<br />
       }
     </div>
-    <br /><br />
+    <br />
     <v-alert border="left" color="orange" text type="info">
       <span>An invalid YouTube ID will return status code 404 "Not Found".</span
       ><br />
@@ -73,7 +73,7 @@ export default {
 .code {
   color: #aaa;
   background: #353535;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
   font-family: monospace;
 }
 </style>
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
index 5373d9b..e08fabb 100644
--- a/Website/pages/help.vue
+++ b/Website/pages/help.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    style="width: 80vw"
-    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
-  >
+  <div style="width: 80vw" class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto">
     <h1 class="title-text pt-12">Troubleshooting</h1>
     <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
@@ -13,8 +10,8 @@
         right now
       </li>
       <li>
-        Try removing extension and installing it again, then restarting the
-        browser (all active windows, not just one tab).
+        Try removing extension and installing it again, then restarting the browser (all
+        active windows, not just one tab).
       </li>
       <li>
         Make sure that this link opens:
@@ -28,9 +25,8 @@
         , <br />
         you should see plain text: <br />
         <span style="color: #eee">
-          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
-          "likes":2907, "dislikes":215, "rating":4.725641025641026,
-          "viewCount":28222, "deleted":false}
+          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z", "likes":2907,
+          "dislikes":215, "rating":4.725641025641026, "viewCount":28222, "deleted":false}
         </span>
       </li>
       <li>
@@ -71,13 +67,14 @@
                 >mdi-content-copy</v-icon
               >
               <span style="color: #f44"> Detected: </span>
-              &nbsp;{{ platform }}
+              &nbsp;
+              {{ platform }}
             </v-btn>
           </li>
 
           <li style="position: relative; width: 100%">
-            Take screenshot of page with problem (i.e. youtube video page) with
-            console open (press <code>F12</code>) - example screenshot below.
+            Take screenshot of page with problem (i.e. youtube video page) with console
+            open (press <code>F12</code>) - example screenshot below.
             <img
               width="100%"
               style="border-radius: 1rem; border: 2px solid #333"
@@ -87,15 +84,13 @@
           </li>
 
           <li>
-            Take screenshot of extensions page of your browser with extension
-            installed.
+            Take screenshot of extensions page of your browser with extension installed.
             <br />
             To see extensions put this into adress bar:
             <br />
             <code>about:addons</code> for Firefox
             <br />
-            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera,
-            Vivaldi
+            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera, Vivaldi
           </li>
         </ol>
       </li>
@@ -114,11 +109,20 @@ export default {
       ? "swoop-left"
       : "swoop-right";
   },
-  data: () => ({
-    version: "loading",
-    platform: "Unknown platform",
-    discordLink: "https://discord.gg/mYnESY4Md5",
-  }),
+  data() {
+    return {
+      platform:
+        this.$ua._parsed.os +
+        " " +
+        this.$ua._parsed.os_version +
+        ", " +
+        this.$ua._parsed.name +
+        " " +
+        this.$ua._parsed.version,
+      version: "loading",
+      discordLink: "https://discord.gg/mYnESY4Md5",
+    };
+  },
   mounted() {
     fetch(
       "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
@@ -128,45 +132,10 @@ export default {
         this.version = json.version;
       });
     // .catch(console.error);
-
-    // This script sets OSName variable as follows:
-    // "Windows"    for all versions of Windows
-    // "MacOS"      for all versions of Macintosh OS
-    // "Linux"      for all versions of Linux
-    // "UNIX"       for all other UNIX flavors
-    // "Unknown OS" indicates failure to detect the OS
-
-    var OSName = "Unknown OS";
-    if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
-    if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
-    if (navigator.appVersion.indexOf("X11") != -1) OSName = "UNIX";
-    if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
-
-    // browser parcer
-    navigator.sayswho = (function () {
-      var ua = navigator.userAgent;
-      var tem;
-      var M =
-        ua.match(
-          /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
-        ) || [];
-      if (/trident/i.test(M[1])) {
-        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
-        return "IE " + (tem[1] || "");
-      }
-      if (M[1] === "Chrome") {
-        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
-        if (tem != null) return tem.slice(1).join(" ").replace("OPR", "Opera");
-      }
-      M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, "-?"];
-      if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
-      return M.join(" ");
-    })();
-    this.platform = OSName + ", " + navigator.sayswho;
   },
   methods: {
     copyToClipboard(text) {
-      navigator.clipboard.writeText(text);
+      navigator.clipboard.writeText("```" + text + "```");
     },
   },
 };
-- 
cgit v1.2.3


From 5cd76e1ed7bc23eb0c2cde16503b501fb2539027 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 15:49:33 -0500
Subject: fixed native scrolling. overflow: auto broke it

---
 Website/layouts/default.vue | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 9d263b8..e14ede8 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -40,13 +40,7 @@
       <span class="my-auto" v-html="alert.html"></span>
 
       <template #action="{ attrs }">
-        <v-btn
-          v-bind="attrs"
-          color="primary"
-          text
-          icon
-          @click="alert.show = false"
-        >
+        <v-btn v-bind="attrs" color="primary" text icon @click="alert.show = false">
           <v-icon>mdi-close-circle-outline</v-icon>
         </v-btn>
       </template>
@@ -119,7 +113,6 @@ body {
   background: #111; /* for MacOS/iOS overscroll */
   height: -webkit-fill-available;
   background: #111;
-  overflow: auto;
 }
 
 ::selection {
@@ -178,9 +171,7 @@ body {
     font-size: 2rem;
   }
   .topBar {
-    width: calc(
-      100vw - 2rem
-    ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
+    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
   }
 }
-- 
cgit v1.2.3


From af661431f86113f56b4fd9641da8a265ec685b5b Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 16:34:16 -0500
Subject: cooler Chrome scrollbar, custom FF scrollbar

---
 Website/layouts/default.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index e14ede8..1e38e4e 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -110,9 +110,9 @@ export default {
 html,
 body {
   height: 100%;
-  background: #111; /* for MacOS/iOS overscroll */
-  height: -webkit-fill-available;
   background: #111;
+  height: -webkit-fill-available; /* for MacOS/iOS overscroll */
+  scrollbar-color: #424242 #111;
 }
 
 ::selection {
@@ -130,14 +130,18 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background-color: #333; /* color of the scroll thumb */
-  border-radius: 20px; /* roundness of the scroll thumb */
-  border: 4px solid #111; /* creates padding around scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: #f22; /* color of the scroll thumb */
-  border-radius: 20px; /* roundness of the scroll thumb */
-  border: 4px solid #111; /* creates padding around scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 .debug {
@@ -156,9 +160,11 @@ body {
 .topBar {
   padding: 0 3rem;
   width: fit-content !important;
-  background-color: #222 !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background: rgba(42, 42, 42, 0.75) !important;
   border-radius: 1rem !important;
-  border-radius: 0.75rem;
+  /* border: 1px solid #222; */
   overflow: hidden;
 }
 .title-text {
@@ -187,7 +193,7 @@ body {
 .swoop-right-leave-active {
   transition-duration: 0.1s;
   transition-property: opacity, transform;
-  /* overflow: hidden; */
+  overflow: hidden;
 }
 
 .swoop-left-enter,
-- 
cgit v1.2.3


From 7c9a80a62987291f6af2b9334e486ee34937af2a Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 17:12:53 -0500
Subject: added version debugger and toggle hover explainer

---
 Extensions/combined/popup.css  | 38 +++++++++++++++++++++++++++++++++++++-
 Extensions/combined/popup.html |  9 ++++++---
 Extensions/combined/popup.js   | 13 +++++++++++++
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index b56ca6a..54dd6c3 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -43,14 +43,50 @@ button:hover {
 }
 
 #ext-version {
+  padding: .25rem .5rem;
+}
+
+#ext-update {
+  cursor: pointer;
+  color: var(--white);
+  text-decoration: none;
+  background: var(--primary);
+  border-radius: .25rem;
+}
+#ext-update:hover {
+  text-decoration: underline;
+}
+
+#ext {
+  padding: .25rem 0;
   z-index: 69;
   position: fixed;
+  background: var(--secondary);
   margin: 0;
   bottom: 1.15rem;
   right: 1.15rem;
-  background: var(--secondary);
   border-radius: .25rem;
+}
+
+.switch::before {
+  content: attr(data-hover);
+  visibility: hidden;
+  opacity: 0;
+  width: 250px;
+  background-color: var(--secondary);
+  border-radius: .5rem;
   padding: .25rem .5rem;
+  transition: opacity .2 ease-in-out;
+
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 160%;
+}
+
+.switch:hover::before {
+  opacity: 1;
+  visibility: visible;
 }
 
 #advancedToggle {
diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html
index fc15114..99e28e9 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -65,16 +65,19 @@
     </button>
 
     <!-- bottom-right -->
-    <p id="ext-version"></p>
+    <div id="ext">
+      <a href="https://returnyoutubedislike.com/install" target="_blank" id="ext-update"></a>
+      <span id="ext-version"></span>
+    </div>
 
     <!-- dialog box -->
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
-      <label class="switch">
+      <label class="switch" data-hover="Stops counting your likes and dislikes.">
         <input type="checkbox" id="disable_vote_submission" />
         <span class="slider" />
-        <span class="switchLabel">Disable like/dislike submission</span>
+        <span class="switchLabel">Disable vote submission</span>
       </label>
       <!-- <br />
       <label class="switch">
diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js
index 4ccfdf2..ccef31f 100644
--- a/Extensions/combined/popup.js
+++ b/Extensions/combined/popup.js
@@ -71,6 +71,19 @@ function initConfig() {
 function initializeVersionNumber() {
   const version = chrome.runtime.getManifest().version;
   document.getElementById('ext-version').innerHTML = 'v' + version;
+
+  fetch(
+    "https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
+  )
+    .then((response) => response.json())
+    .then((json) => {
+      if (version !== json.version) {
+        document.getElementById('ext-update').innerHTML = 'update to v' + json.version;
+        document.getElementById('ext-update').style.padding = '.25rem .5rem';
+      }
+    });
+  // .catch(console.error);
+
 }
 
 function initializeDisableVoteSubmission() {
-- 
cgit v1.2.3


From 93d9b941e640630628d0dff59779da2607238f07 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 10 Jan 2022 17:22:16 -0500
Subject: better hover styling

---
 Extensions/combined/popup.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index 54dd6c3..d99b951 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -68,15 +68,13 @@ button:hover {
   border-radius: .25rem;
 }
 
-.switch::before {
+.switch:before {
   content: attr(data-hover);
   visibility: hidden;
-  opacity: 0;
   width: 250px;
   background-color: var(--secondary);
   border-radius: .5rem;
-  padding: .25rem .5rem;
-  transition: opacity .2 ease-in-out;
+  padding: .5rem;
 
   position: absolute;
   z-index: 1;
@@ -84,8 +82,7 @@ button:hover {
   top: 160%;
 }
 
-.switch:hover::before {
-  opacity: 1;
+.switch:hover:before {
   visibility: visible;
 }
 
-- 
cgit v1.2.3


From 7a01751faac12a10539475b9e422acfe8dbc3247 Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Wed, 12 Jan 2022 12:57:30 -0500
Subject: compact code blocks, more polite unsupported platform warnings

---
 Website/layouts/default.vue     | 10 ++++++----
 Website/pages/docs/fetching.vue | 13 ++++---------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 1e38e4e..86c231a 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -75,7 +75,7 @@ export default {
         let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
         let chromeVersion = chrome ? chrome[1] : 0;
         if (chromeVersion < 70) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
           this.alert.show = true;
         }
       }
@@ -85,7 +85,7 @@ export default {
         let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
         let firefoxVersion = firefox ? firefox[1] : 0;
         if (firefoxVersion < 60) {
-          this.alert.html = `You are using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b>. Please update to the latest version.`;
+          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
           this.alert.show = true;
         }
       }
@@ -98,7 +98,7 @@ export default {
 
       // Win7
       if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
-        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Update Windows, or install Linux :)`;
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
         this.alert.show = true;
       }
     }, 1000);
@@ -177,7 +177,9 @@ body {
     font-size: 2rem;
   }
   .topBar {
-    width: calc(100vw - 2rem) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
+    width: calc(
+      100vw - 2rem
+    ) !important; /* (2rem = mx-4) 1rem on left, 1rem on right */
     padding: 0;
   }
 }
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index 16b380a..96eac2e 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -3,9 +3,7 @@
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
-    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
-      >kxOuG8jMIgI</a
-    >
+    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">kxOuG8jMIgI</a>
 
     <h2>Example Request:</h2>
     <span>Request URL:</span>
@@ -47,12 +45,8 @@
     </div>
     <br />
     <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
-      ><br />
-      <span
-        >An incorrectly formatted YouTube ID will return 400 "Bad
-        Request".</span
-      >
+      <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br />
+      <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
     </v-alert>
 
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
@@ -75,5 +69,6 @@ export default {
   background: #353535;
   border-radius: 0.5rem;
   font-family: monospace;
+  line-height: 2rem;
 }
 </style>
-- 
cgit v1.2.3


From 9f8fe1bd104e08edff08886cb446b601892a122a Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Wed, 12 Jan 2022 13:19:59 -0500
Subject: more concise unsupported platform detector

---
 Website/layouts/default.vue     | 42 ++++++++++++++++-------------------------
 Website/pages/docs/fetching.vue | 12 +++++++++---
 Website/pages/help.vue          | 24 ++++++++++++++---------
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 86c231a..7382b5e 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -40,7 +40,13 @@
       <span class="my-auto" v-html="alert.html"></span>
 
       <template #action="{ attrs }">
-        <v-btn v-bind="attrs" color="primary" text icon @click="alert.show = false">
+        <v-btn
+          v-bind="attrs"
+          color="primary"
+          text
+          icon
+          @click="alert.show = false"
+        >
           <v-icon>mdi-close-circle-outline</v-icon>
         </v-btn>
       </template>
@@ -67,38 +73,22 @@ export default {
   }),
   mounted() {
     setTimeout(() => {
-      // Chrome < 70
+      // Chrome < 70 or FF < 60
       if (
-        window.navigator.userAgent.indexOf("Chrome") > -1 &&
-        window.navigator.userAgent.indexOf("Edge") === -1
+        (this.$ua._parsed.name == "Chrome" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 70) ||
+        (this.$ua._parsed.name == "Firefox" &&
+          parseInt(this.$ua._parsed.version.slice(0, 2)) < 60)
       ) {
-        let chrome = window.navigator.userAgent.match(/Chrome\/(\d+)/);
-        let chromeVersion = chrome ? chrome[1] : 0;
-        if (chromeVersion < 70) {
-          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
-          this.alert.show = true;
-        }
-      }
-
-      // FF < 60
-      if (window.navigator.userAgent.indexOf("Firefox") > -1) {
-        let firefox = window.navigator.userAgent.match(/Firefox\/(\d+)/);
-        let firefoxVersion = firefox ? firefox[1] : 0;
-        if (firefoxVersion < 60) {
-          this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">${this.$ua._parsed.name} ${this.$ua._parsed.version}</b> is not supported. Consider updating to the latest version.`;
-          this.alert.show = true;
-        }
-      }
-
-      // IE
-      if (window.navigator.userAgent.indexOf("MSIE") > -1) {
-        this.alert.html = `Looks like you're using <b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Internet Explorer</b>. Stop it, get some help.`;
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .25rem .25rem .5rem; margin: 0 .25rem;">
+        ${this.$ua._parsed.name} ${this.$ua._parsed.version.slice(0, 2)}
+        </b> is not supported. Consider upgrading to the latest version.`;
         this.alert.show = true;
       }
 
       // Win7
       if (window.navigator.userAgent.indexOf("Windows NT 6.1") > -1) {
-        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
+        this.alert.html = `<b style="background: #222; border-radius: .5rem; padding: .25rem .5rem; margin: 0 .25rem;">Windows 7</b> is not supported. Consider upgrading Windows, or installing Linux.`;
         this.alert.show = true;
       }
     }, 1000);
diff --git a/Website/pages/docs/fetching.vue b/Website/pages/docs/fetching.vue
index 96eac2e..f3d9d1b 100644
--- a/Website/pages/docs/fetching.vue
+++ b/Website/pages/docs/fetching.vue
@@ -3,7 +3,9 @@
     <h1 class="primary--text">Basic Fetching Tutorial</h1>
 
     <span>Example to get votes of a given YouTube video ID:</span>
-    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank">kxOuG8jMIgI</a>
+    <a href="https://youtube.com/watch?v=kxOuG8jMIgI" target="_blank"
+      >kxOuG8jMIgI</a
+    >
 
     <h2>Example Request:</h2>
     <span>Request URL:</span>
@@ -45,8 +47,12 @@
     </div>
     <br />
     <v-alert border="left" color="orange" text type="info">
-      <span>An invalid YouTube ID will return status code 404 "Not Found".</span><br />
-      <span>An incorrectly formatted YouTube ID will return 400 "Bad Request".</span>
+      <span>An invalid YouTube ID will return status code 404 "Not Found".</span
+      ><br />
+      <span
+        >An incorrectly formatted YouTube ID will return 400 "Bad
+        Request".</span
+      >
     </v-alert>
 
     <a :href="endpointUrl" target="_blank" v-text="endpointUrl" />
diff --git a/Website/pages/help.vue b/Website/pages/help.vue
index e08fabb..82ca645 100644
--- a/Website/pages/help.vue
+++ b/Website/pages/help.vue
@@ -1,5 +1,8 @@
 <template>
-  <div style="width: 80vw" class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto">
+  <div
+    style="width: 80vw"
+    class="col-xs-12 col-sm-11 col-md-9 col-lg-7 mx-auto"
+  >
     <h1 class="title-text pt-12">Troubleshooting</h1>
     <ol style="line-height: 3rem; color: #aaa" class="text-left">
       <li>
@@ -10,8 +13,8 @@
         right now
       </li>
       <li>
-        Try removing extension and installing it again, then restarting the browser (all
-        active windows, not just one tab).
+        Try removing extension and installing it again, then restarting the
+        browser (all active windows, not just one tab).
       </li>
       <li>
         Make sure that this link opens:
@@ -25,8 +28,9 @@
         , <br />
         you should see plain text: <br />
         <span style="color: #eee">
-          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z", "likes":2907,
-          "dislikes":215, "rating":4.725641025641026, "viewCount":28222, "deleted":false}
+          {"id":"QOFEgexls14", "dateCreated":"2021-12-15T16:54:12.250813Z",
+          "likes":2907, "dislikes":215, "rating":4.725641025641026,
+          "viewCount":28222, "deleted":false}
         </span>
       </li>
       <li>
@@ -73,8 +77,8 @@
           </li>
 
           <li style="position: relative; width: 100%">
-            Take screenshot of page with problem (i.e. youtube video page) with console
-            open (press <code>F12</code>) - example screenshot below.
+            Take screenshot of page with problem (i.e. youtube video page) with
+            console open (press <code>F12</code>) - example screenshot below.
             <img
               width="100%"
               style="border-radius: 1rem; border: 2px solid #333"
@@ -84,13 +88,15 @@
           </li>
 
           <li>
-            Take screenshot of extensions page of your browser with extension installed.
+            Take screenshot of extensions page of your browser with extension
+            installed.
             <br />
             To see extensions put this into adress bar:
             <br />
             <code>about:addons</code> for Firefox
             <br />
-            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera, Vivaldi
+            <code>chrome://extensions</code> for Chrome, Edge, Brave, Opera,
+            Vivaldi
           </li>
         </ol>
       </li>
-- 
cgit v1.2.3