Improved UI and added dark mode

html/partials/random.html

@@ -47,7 +47,7 @@
 
         function random() {
             if (randomUrls.length == 0) {
-                window.location.reload();
+                load("/partials/random.html");
             } else {
                 var id = Math.floor(Math.random() * (randomUrls.length - 0)) + 0;
                 setView(randomUrls[id]);

html/partials/settings.html

@@ -1,26 +1,51 @@
 <h1 class="title">Settings</h1>
 <div class="columns is-mobile">
     <div class="column">
-        <h6 class="title is-6">Credits</h6>
+        <p class="mb-1">
-        Code by <a href="https://arnweb.nl">McArn</a><br>
+            <span class="has-text-weight-semibold">Credits</span><br>
-        Assets by Cirkel
+            Code by <a href="https://arnweb.nl">McArn</a><br>
+            Assets by Cirkel
+        </p>
     </div>
     <div class="column">
-        <h6 class="title is-6">Theme</h6>
+        <p class="mb-1">
+            <span class="has-text-weight-semibold">Theme</span><br>
+            Use a theme with SkinSwitcher, changing this will reload your current session
+        </p>
         <div class="buttons has-addons">
             <button class="button" id="light">Light</button>
-            <button class="button is-dark" id="dark">Dark</button>
+            <button class="button" id="dark">Dark</button>
-            <p>
-                Use a theme with SkinSwitcher.
-            </p>
         </div>
 
-        <h6 class="title is-6">Reset all settings</h6>
+        <p class="mb-1">
+            <span class="has-text-weight-semibold">Reset all settings</span><br>
+            Resetting will delete all settings, credentials and saved skins.
+        </p>
         <div class="buttons">
             <button class="button is-danger" id="reset">Reset</button>
-            <p>
-                Resetting will delete all settings, credentials and saved skins.
-            </p>
         </div>
     </div>
 </div>
+
+<script>
+    switch (settings.theme) {
+        case "light":
+            $("button#light").addClass("is-primary is-selected")
+            break;
+        case "dark":
+            $("button#dark").addClass("is-primary is-selected")
+            break;
+    }
+
+    $("button#light").on("click", () => {
+        settings.theme = "light";
+        save();
+        location.reload();
+    });
+
+    $("button#dark").on("click", () => {
+        settings.theme = "dark";
+        save();
+        location.reload();
+    });
+</script>

package-lock.json

@@ -665,10 +665,10 @@
       "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz",
       "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ=="
     },
-    "bulma-prefers-dark": {
+    "bulmaswatch": {
-      "version": "0.1.0-beta.0",
+      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.0.tgz",
+      "resolved": "https://registry.npmjs.org/bulmaswatch/-/bulmaswatch-0.8.1.tgz",
-      "integrity": "sha512-EeDW8pQrkYEOXo2l3WykfghbUzi8jlQWGI+Cu2HwmXwQHMcoGF6yiKYCNShttN+8z3atq8fLWh3B7pqXUV4fBA=="
+      "integrity": "sha512-7HGm5v9If6gzxbTht4/oVS0dhySp6g/JyTrxmpSXHXgDQXivvxiuVmcJOZo3PFv9GAOn4om7SK36I2V8W81sgw=="
     },
     "cacheable-request": {
       "version": "6.1.0",
@@ -3811,11 +3811,6 @@
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
     },
-    "unix-timestamp": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/unix-timestamp/-/unix-timestamp-0.2.0.tgz",
-      "integrity": "sha1-4c3CgI32Mn0n5jXZNR5ygVKIcz4="
-    },
     "unused-filename": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-2.1.0.tgz",

package.json

@@ -19,7 +19,7 @@
     "@fortawesome/fontawesome-free": "^5.13.1",
     "axios": "^0.19.2",
     "bulma": "^0.9.0",
-    "bulma-prefers-dark": "0.1.0-beta.0",
+    "bulmaswatch": "^0.8.1",
     "cross-env": "^7.0.2",
     "electron": "^8.2.5",
     "electron-builder": "^22.6.0",
@@ -33,7 +33,6 @@
     "pngjs": "^5.0.0",
     "skinview3d": "^2.0.0-alpha.1",
     "three": "^0.116.1",
-    "unix-timestamp": "^0.2.0",
     "uuid": "^8.2.0"
   },
   "devDependencies": {},

src/index.js

@@ -15,6 +15,20 @@ const MojangAPI = require(path.join(__dirname + "/../src/api.js"));
 var settings = JSON.parse(fs.readFileSync(path.join(__dirname + "/../assets/data.json")));
 var api;
 
+var theme = document.createElement("link");
+theme.rel = "stylesheet";
+
+switch (settings.theme) {
+case "light":
+    theme.href = "../node_modules/bulmaswatch/default/bulmaswatch.min.css";
+    break;
+case "dark":
+    theme.href = "../node_modules/bulmaswatch/cyborg/bulmaswatch.min.css";
+    break;
+}
+
+document.head.appendChild(theme);
+
 if (settings.clientId == "") {
     notify("warning", "Generating client id");
     settings.clientId = uuid.v4().replace(/-/g, "");
@@ -30,7 +44,7 @@ function load(url) {
     if (re.test(url)) {
         shell.openExternal(url);
     } else {
-        if (!api.accessToken &&  url != "/partials/auth.html") {
+        if (!api.accessToken && url != "/partials/auth.html") {
             notify("warning", "You need to login first");
         } else {
             $("#content").load(path.join(__dirname + url), () => {
@@ -40,7 +54,7 @@ function load(url) {
                         event.preventDefault();
                         load(e.getAttribute("href"));
                     });
-    
+
                     if (!re.test($(e).attr("href"))) {
                         if ($(e).is("div.tabs > ul > li > a")) {
                             if (url == $(e).attr("href")) {
@@ -92,5 +106,4 @@ function save() {
     });
 }
 
-load("/partials/auth.html");
+load("/partials/auth.html");
-