settings menu UI change, rebase to latest

Extensions/combined/popup.css

@@ -5,7 +5,7 @@
 
   --background: #111;
   --secondary: #272727;
-  --tertiary: #333333;
+  --tertiary: #424242;
   --lightGrey: #999;
   --white: #fff;
 }
@@ -43,12 +43,36 @@ button:hover {
 }
 
 #advancedToggle {
-  margin-top: 1em;
-  margin-bottom: 2em;
+  position: fixed;
+  background: none;
+  box-shadow: none;
+  color: var(--lightGrey);
+  top: 22px; right: 22px;
+  padding: 2px;
+  z-index: 69;
+  height: 2rem;
+  width: 2rem;
+}
+
+#advancedToggle:hover {
+  color: var(--white);
+  transform: rotate(-90deg);
+}
+
+#advancedToggle:active {
+  transform: scale(1.5);
 }
 
 #advancedSettings {
-  display: none;
+  opacity: 0;
+  transition-duration: .15s;
+  transition-timing-function: ease-in-out;
+  transform: scale(1.1);
+  position: fixed;
+  background: var(--background);
+  top: 4px; right: 9px;
+  width: calc(100% - 55px);
+  height: calc(100% - 48px);
   border: 2px solid var(--secondary);
   border-radius: 0.5rem;
   padding: 1rem;

Extensions/combined/popup.html

@@ -25,6 +25,9 @@
       <p>API Status: <span id="status"></span></p>
       <p>by Dmitrii Selivanov & Community</p>
       <p id="ext-version"></p>
+      <svg width="48" viewBox="0 0 24 24"><path d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" fill="red"/><path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/></svg>
+      <h1 style="margin-bottom: 0;">Return YouTube Dislike</h1>
+      <p style="color: var(--lightGrey); margin-top: .25rem;">by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
       <button id="link_github">GitHub</button>
@@ -38,8 +41,14 @@
       <br />
       <button id="advancedToggle">Show Settings</button>
       <br />
+      <br>
+      
     </center>
 
+    <button id="advancedToggle">
+      <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>
+    </button>
+
     <fieldset id="advancedSettings">
       <legend id="advancedLegend">Settings</legend>
 
@@ -49,12 +58,16 @@
         <span class="switchLabel">Disable like/dislike submission</span>
       </label>
       <br />
+        <span class="switchLabel">Green/Red Ratio Bar</span> </label
+      ><br />
 
       <!-- <label class="switch">
         <input type="checkbox" id="disable_api_unlisted" />
         <span class="slider" />
         <span class="switchLabel">Lorem ipsum dolor sit amet</span> </label
       ><br /> -->
+        <span class="switchLabel">5-star Rating Bar</span> </label
+      ><br />
     </fieldset>
   </body>
   <script src="popup.js"></script>

Extensions/combined/popup.js

@@ -5,6 +5,9 @@ const config = {
   hideAdvancedMessage: "Hide Settings",
   disableVoteSubmission: false,
   
+  showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
+  hideAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#f44"><rect fill="none" height="24" width="24"/><path d="M3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5z M16.3,16.29L16.3,16.29 c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.89,2.89c-0.39,0.39-1.02,0.39-1.41,0l0,0c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L7.7,9.11 c-0.39-0.39-0.39-1.02,0-1.41l0,0c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.89-2.88c0.39-0.39,1.02-0.39,1.41,0l0,0 c0.39,0.39,0.39,1.02,0,1.41L13.41,12l2.89,2.88C16.68,15.27,16.68,15.91,16.3,16.29z"/></svg>',
+
   links: {
     website: "https://returnyoutubedislike.com",
     github: "https://github.com/Anarios/return-youtube-dislike",
@@ -46,11 +49,15 @@ const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
   const adv = document.getElementById("advancedSettings");
   if (config.advanced) {
-    adv.style.display = "none";
+    adv.style.transform = "scale(1.1)";
+    adv.style.pointerEvents = "none";
+    adv.style.opacity = "0";
     advancedToggle.innerHTML = config.showAdvancedMessage;
     config.advanced = false;
   } else {
-    adv.style.display = "block";
+    adv.style.transform = "scale(1)";
+    adv.style.pointerEvents = "auto";
+    adv.style.opacity = "1";
     advancedToggle.innerHTML = config.hideAdvancedMessage;
     config.advanced = true;
   }