different colored switches

When a red switch is placed besides a red button that says "Remove", it
makes it seem far more destructive to click that switch, even if it's
not, and a blue color doesn't fit in very well either (perhaps we need
more colors). And so because of all that the modlist switches are now
orange, and we can easily add more colors.

The switch colors overall are also far more vibrant now, as it looks far
better that way.

5 files changed, 27 insertions, 16 deletions

diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 6d7e223..d92c42e 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -61,11 +61,11 @@ a:hover {
 	background: rgb(var(--red)) !important;
 }
 
-.blue {background: rgb(var(--blue)) !important}
-.blue2 {background: rgb(var(--blue2)) !important}
+.bg-blue {background: rgb(var(--blue)) !important}
+.bg-blue2 {background: rgb(var(--blue2)) !important}
 
-.orange {background: rgb(var(--orange)) !important}
-.orange2 {background: rgb(var(--orange2)) !important}
+.bg-orange {background: rgb(var(--orange)) !important}
+.bg-orange2 {background: rgb(var(--orange2)) !important}
 
-.red {background: rgb(var(--red)) !important}
-.red2 {background: rgb(var(--red2)) !important}
+.bg-red {background: rgb(var(--red)) !important}
+.bg-red2 {background: rgb(var(--red2)) !important}
diff --git a/src/app/index.html b/src/app/index.html
index 0e96486..30bee9e 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -230,10 +230,10 @@
 						<div class="line">
 							<div class="text" id="modcount">%%gui.mods%%</div>
 							<div class="buttons modbtns">
-								<button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
-								<button id="toggleall" class="orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
-								<button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
-								<button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+								<button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
+								<button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
+								<button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button>
+								<button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
 						</div>
 
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index 05bf01d..c859024 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -263,6 +263,10 @@ var Browser = {
 	}
 }
 
+if (navigator.onLine) {
+	Browser.loadfront();
+}
+
 function openExternal(url) {
 	require("electron").shell.openExternal(url);
 }
@@ -362,7 +366,7 @@ function BrowserEl(properties) {
 		<div class="text">
 			<div class="title">${properties.title}</div>
 			<div class="description">${properties.description}</div>
-			<button class="install blue" onclick=''>${installstr}</button>
+			<button class="install bg-blue" onclick=''>${installstr}</button>
 			<button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button>
 			<button class="visual">${properties.version}</button>
 			<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 6c2fc22..a2e4492 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -34,8 +34,8 @@ mods.load = (mods_obj) => {
 			<div class="text">
 				<div class="title">${mod.Name}</div>
 				<div class="description">${mod.Description}</div>
-				<button class="switch on"></button>
-				<button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
+				<button class="switch on orange"></button>
+				<button class="bg-red" onclick="mods.remove('${mod.Name}')">Remove</button>
 				<button class="visual">${mod.Version}</button>
 				<button class="visual">by ${mod.Author || "Unknown"}</button>
 			</div>
diff --git a/src/app/main.css b/src/app/main.css
index 671be13..5779fa8 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -120,7 +120,8 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
 }
 
 .switch.on {
-	background: rgba(var(--red), 0.2) !important;
+	--on-color: var(--red);
+	background: rgba(var(--on-color), 0.4) !important;
 }
 
 .switch::after {
@@ -139,10 +140,16 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
 .switch.on::after {
 	left: 15px;
 	width: 20px;
-	opacity: 0.5;
-	background: rgb(var(--red));
+	opacity: 0.8;
+	background: rgb(var(--on-color));
 }
 
+.switch.on.red2 {--on-color: var(--red2)}
+.switch.on.blue {--on-color: var(--blue)}
+.switch.on.blue2 {--on-color: var(--blue2)}
+.switch.on.orange {--on-color: var(--orange)}
+.switch.on.orange2 {--on-color: var(--orange2)}
+
 .switch.on:hover::after {
 	transform: scale(1.2);
 }