fixing multiple theme + theme selector + adding previews and black theme in electron

7 files changed, 21 insertions, 29 deletions

diff --git a/css/black/design-common.css b/css/black/design-common.css
index 1732dd5..be54e23 100644
--- a/css/black/design-common.css
+++ b/css/black/design-common.css
@@ -50,7 +50,9 @@
     background: rgba(158, 158, 158, .9);
 }
 
-
+.mdl-radio__outer-circle {
+    border: 2px solid white;
+}
 
 :root{
     --note-none: #000000;
diff --git a/css/dark/design-dark-common.css b/css/dark/design-dark-common.css
index 3280e98..5ce44cb 100644
--- a/css/dark/design-dark-common.css
+++ b/css/dark/design-dark-common.css
@@ -51,6 +51,10 @@
     background: rgba(158, 158, 158, .9);
 }
 
+.mdl-radio__outer-circle {
+    border: 2px solid white;
+}
+
 
 
 :root{
diff --git a/css/yaru/design-browser.css b/css/yaru/design-browser.css
index e15df3a..19658c4 100644
--- a/css/yaru/design-browser.css
+++ b/css/yaru/design-browser.css
@@ -14,12 +14,8 @@
 
 }
 html{
-    margin: 20px;
     background: inherit;
-    max-width: calc(100% - 40px);
-    max-height: calc(100% - 40px);
-    box-shadow: 0 0 30px black;
-    border-radius: 10px;
+
 }
 
 body {
@@ -27,7 +23,6 @@ body {
 }
 
 #browser {
-    border-radius: 10px;
 }
 
 #close-button, #minus-button, #size-button {
diff --git a/css/yaru/design-common.css b/css/yaru/design-common.css
index ad4907a..5ca6c44 100644
--- a/css/yaru/design-common.css
+++ b/css/yaru/design-common.css
@@ -50,6 +50,9 @@
     background: rgba(158, 158, 158, .9);
 }
 
+.mdl-radio__outer-circle {
+    border: 2px solid white;
+}
 
 
 :root{
diff --git a/server/server.js b/server/server.js
index 4db3e16..eeb3a7f 100644
--- a/server/server.js
+++ b/server/server.js
@@ -42,7 +42,7 @@ var handle = function (method, path, data, callback) {
                 callback(false, "");
                 return;
             case "/settings/themes":
-                callback(false, '[{"name":"Carnet", "path":"css/carnet", "preview":"css/carnet/preview.png"}, {"name":"Dark", "path":"css/dark", "preview":"css/dark/preview.png"}, {"name":"Yaru", "path":"css/yaru", "preview":"css/yaru/preview.png"}]');
+                callback(false, '[{"name":"Carnet", "path":"css/carnet", "preview":"css/carnet/preview.png"}, {"name":"Dark", "path":"css/dark", "preview":"css/dark/preview.png"}, {"name":"Black", "path":"css/black", "preview":"css/black/preview.png"}, {"name":"Yaru", "path":"css/yaru", "preview":"css/yaru/preview.png"}]');
                 return;
             case "/settings/browser_css":
                 callback(false, settingsHelper.getBrowserCss())
diff --git a/settings.html b/settings.html
index ad895c9..1446acf 100644
--- a/settings.html
+++ b/settings.html
@@ -65,13 +65,14 @@
             margin-left: calc(50% - 200px);
             width: 400px;
         }
+        
 
         .theme-selector {
             width: 100%;
             padding-top: 15px;
             padding-bottom: 15px;
             border-bottom: 1px rgba(128, 128, 128, 0.2) solid;
-
+            cursor: pointer;
         }
 
         .theme-selector .mdl-radio {
@@ -88,7 +89,7 @@
             margin-top: 20px;
             overflow-y: auto;
             margin-bottom: 20px;
-            max-height: 100%;
+            max-height: calc(100% - 70px);
 
         }
 
diff --git a/settings/settings.js b/settings/settings.js
index b4e3a30..07a7aa5 100644
--- a/settings/settings.js
+++ b/settings/settings.js
@@ -77,31 +77,19 @@ $(document).ready(function () {
     var id = Math.random().toString(36).substring(7);
     var selector = document.createElement("div");
     selector.classList.add("theme-selector")
-    var label = document.createElement("label");
-    label.classList.add("mdl-radio")
-    label.classList.add("mdl-js-radio")
-    label.classList.add("mdl-js-ripple-effect")
-    label.for = id;
-    selector.appendChild(label)
-    var input = document.createElement("input");
-    input.type = "radio"
-    input.id = id
-    input.classList.add("mdl-radio__button")
-    input.name = "theme"
-    input.value = url;
 
-    label.appendChild(input)
+
+   
     var span = document.createElement("span");
     span.classList.add("mdl-radio__label")
     span.innerHTML = name
-    label.appendChild(span)
+    selector.appendChild(span)
     var img = document.createElement("img")
     img.src = preview;
     selector.appendChild(img)
     document.getElementById("theme-list").appendChild(selector)
-    var mat = new window['MaterialRadio'](label)
-    input.onchange = function () {
-      if (input.checked) {
+    selector.onclick = function () {
+    
         console.log(name)
         RequestBuilder.sRequestBuilder.post("/settings/app_theme", {
           url: url
@@ -109,9 +97,8 @@ $(document).ready(function () {
           document.getElementById("theme-dialog").close()
           window.location.reload(true)
         })
-      }
+      
     }
-    label['MaterialRadio'] = mat
   }
 
   RequestBuilder.sRequestBuilder.get("/settings/themes", function (error, data) {