Merge pull request #419 from Cequallium/main

help link(resolves issue #388)

Extensions/combined/popup.css

@@ -49,8 +49,8 @@ button:hover {
   bottom: 1.15rem;
   right: 1.15rem;
   background: var(--secondary);
-  border-radius: .25rem;
-  padding: .25rem .5rem;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
 }
 
 #advancedToggle {
@@ -58,7 +58,8 @@ button:hover {
   background: none;
   box-shadow: none;
   color: var(--lightGrey);
-  top: 26px; right: 26px;
+  top: 26px;
+  right: 26px;
   padding: 2px;
   z-index: 69;
   height: 2rem;
@@ -77,12 +78,13 @@ button:hover {
 #advancedSettings {
   opacity: 0;
   pointer-events: none;
-  transition-duration: .15s;
+  transition-duration: 0.15s;
   transition-timing-function: ease-in-out;
   transform: scale(1.1);
   position: fixed;
   background: var(--background);
-  top: 10px; right: 14px;
+  top: 10px;
+  right: 14px;
   width: calc(100% - 65px);
   height: calc(100% - 58px);
   border: 2px solid var(--secondary);

Extensions/combined/popup.html

@@ -26,15 +26,13 @@
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
-
       <br />
-
       <button style="margin-top: 0.3rem" id="link_faq">FAQ</button>
       <button style="margin-top: 0.3em" id="link_donate">Donate</button>
+      <button style="margin-top: 0.3em" id="link_help">Help</button>
 
       <br />
       <br />
-
       <p style="display: none">API Status: <b id="status"></b></p>
       <img
         id="server-status"
@@ -42,7 +40,7 @@
         src="./icons/server.svg"
         alt=""
       />
-
+      
       <br />
       <br />
     </center>

Extensions/combined/popup.js

@@ -12,30 +12,24 @@ const config = {
     discord: "https://discord.gg/mYnESY4Md5",
     donate: "https://returnyoutubedislike.com/donate",
     faq: "https://returnyoutubedislike.com/faq",
+    help: "https://returnyoutubedislike.com/help"
   },
 };
 
-/*   Links   */
-document.getElementById("link_website").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.website });
-});
-
-document.getElementById("link_github").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.github });
-});
-
-document.getElementById("link_discord").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.discord });
-});
-
-document.getElementById("link_faq").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.faq });
-});
-
-document.getElementById("link_donate").addEventListener("click", () => {
-  chrome.tabs.create({ url: config.links.donate });
-});
 
+/*   Links   */
+createLink(config.links.website,"link_website")
+createLink(config.links.github,"link_github")
+createLink(config.links.discord,"link_discord")
+createLink(config.links.faq,"link_faq")
+createLink(config.links.donate,"link_donate")
+createLink(config.links.help,"link_help")
+
+function createLink(url,id) {
+  document.getElementById(id).addEventListener("click",()=>{
+    chrome.tabs.create({ url: url})
+  })
+}
 document
   .getElementById("disable_vote_submission")
   .addEventListener("click", (ev) => {
@@ -114,6 +108,7 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   }
 })();
 
+
 /* popup-script.js
 document.querySelector('#login')
 .addEventListener('click', function () {

Website/pages/help.vue

@@ -89,7 +89,7 @@
           <li>
             Take screenshot of extensions page of your browser with extension
             installed. <br />
-            To see extensions put this into adress bar:
+            To see extensions put this into address bar:
             <br />
             <code>about:addons</code> for Firefox
             <br />