Prettier boolean options

Author: rgantzos

extras/popup/popup.css

@@ -429,3 +429,29 @@ span.new-feature-tag.beta {
   transform: scale(1.5);
   top: 0.1rem;
 }
+
+.special-switch {
+  position: relative;
+  width: 55px;
+  height: 28px;
+  transform: scale(80%);
+  float: right;
+  position: relative;
+  top: -0.25rem;
+  margin: 0px;
+}
+
+.feature table,
+.feature table tr {
+  width: 100%;
+}
+
+.feature table {
+  margin-top: .5rem;
+}
+
+.special-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}

extras/popup/popup.js

@@ -682,11 +682,34 @@ async function getFeatures() {
         input.type = ["text", "checkbox", "number", "color"][option.type || 0];
         var optionData = (await chrome.storage.sync.get(option.id))[option.id];
         input.value = optionData || "";
+        if (input.type === "checkbox") {
+          var specialLabel = document.createElement("label");
+          specialLabel.className = "special-switch";
+          input.className = "checkbox"
+          var span = document.createElement("span");
+          span.className = "slider round";
+          specialLabel.appendChild(input);
+          specialLabel.appendChild(span);
+        } else {
         div.appendChild(input);
+        }
         if (input.type === "checkbox") {
+          let table = document.createElement("table")
+          let tr = document.createElement("tr")
+          table.appendChild(tr)
+
+          let td1 = document.createElement("td")
+          tr.appendChild(td1)
+          let td2 = document.createElement("td")
+          tr.appendChild(td2)
+
+          div.appendChild(table)
+
           var label = document.createElement("label");
           label.textContent = option.name;
-          div.appendChild(label);
+          label.style.marginLeft = "0px"
+          td1.appendChild(label);
+          td2.appendChild(specialLabel)
           input.checked = optionData || false;
         }
         input.dataset.validation = btoa(

extras/style.css

@@ -783,3 +783,29 @@ span.new-feature-tag.beta {
   transform: scale(1.8);
   cursor: pointer;
 }
+
+.special-switch {
+  position: relative;
+  width: 55px;
+  height: 28px;
+  margin: 0px;
+  transform: scale(80%);
+  float: right;
+  position: relative;
+  top: -0.25rem;
+}
+
+.feature table,
+.feature table tr {
+  width: 100%;
+}
+
+.special-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.feature table {
+  margin-top: .5rem;
+}