added icons to more buttons

12 files changed, 78 insertions, 14 deletions

diff --git a/src/app/css/grid.css b/src/app/css/grid.css
index d44784b..188f32a 100644
--- a/src/app/css/grid.css
+++ b/src/app/css/grid.css
@@ -78,6 +78,7 @@
 }
 
 .popup .misc button img {
+	margin: 0px;
 	opacity: 0.6;
 	width: var(--height);
 	transform: scale(0.5);
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 913e732..c43bce1 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -285,6 +285,40 @@
 	background: rgb(var(--red)) !important;
 }
 
+button:has(img):not(img:only-child) {
+	top: 2px;
+	position: relative;
+	align-items: center;
+	display: inline-flex;
+	justify-content: center;
+}
+
+button:has(img):not(img:only-child) img {
+	width: 1em;
+	height: 1em;
+	height: fit-content;
+	margin-right: calc(var(--padding) / 3)
+}
+
+button:has(img):has(span) img {
+	opacity: 0.0;
+	transition: opacity 0.2s ease-in-out;
+}
+
+button:has(img):has(span):hover img {
+	opacity: 1.0;
+}
+
+button:has(img):has(span) span {
+	right: 0.8em;
+	position: relative;
+	transition: right 0.2s ease-in-out;
+}
+
+button:has(img):has(span):hover span {
+	right: 0.1em;
+}
+
 button:disabled {
 	opacity: 0.5;
 	pointer-events: none;
diff --git a/src/app/icons/down.png b/src/app/icons/down.png
new file mode 100644
index 0000000..b1f9abd
--- /dev/null
+++ b/src/app/icons/down.png
diff --git a/src/app/icons/downloads.png b/src/app/icons/downloads.png
new file mode 100644
index 0000000..8b10638
--- /dev/null
+++ b/src/app/icons/downloads.png
diff --git a/src/app/icons/open.png b/src/app/icons/open.png
new file mode 100644
index 0000000..8569c81
--- /dev/null
+++ b/src/app/icons/open.png
diff --git a/src/app/icons/redo.png b/src/app/icons/redo.png
new file mode 100644
index 0000000..6777696
--- /dev/null
+++ b/src/app/icons/redo.png
diff --git a/src/app/icons/search.png b/src/app/icons/search.png
new file mode 100644
index 0000000..698545f
--- /dev/null
+++ b/src/app/icons/search.png
diff --git a/src/app/icons/toggles.png b/src/app/icons/toggles.png
new file mode 100644
index 0000000..3f118d1
--- /dev/null
+++ b/src/app/icons/toggles.png
diff --git a/src/app/icons/trash.png b/src/app/icons/trash.png
new file mode 100644
index 0000000..d915eb3
--- /dev/null
+++ b/src/app/icons/trash.png
diff --git a/src/app/index.html b/src/app/index.html
index 9f0297d..016b708 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -290,10 +290,22 @@
 							<div class="line">
 								<div class="text" id="modcount">%%gui.mods.title%%</div>
 								<div class="buttons modbtns">
-									<button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.remove_all%%</button>
-									<button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggle_all%%</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>
+									<button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">
+										<img src="icons/trash.png">
+										%%gui.mods.remove_all%%
+									</button>
+									<button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">
+										<img src="icons/toggles.png">
+										%%gui.mods.toggle_all%%
+									</button>
+									<button id="installmod" class="bg-blue" onclick="installmod()">
+										<img src="icons/downloads.png">
+										%%gui.mods.install%%
+									</button>
+									<button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">
+										<img src="icons/search.png">
+										%%gui.mods.find%%
+									</button>
 								</div>
 							</div>
 						</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index caeb8c2..06dc244 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -232,7 +232,11 @@ var Browser = {
 			return
 		}
 
-		Browser.msg(`<button id="loadmore">${lang("gui.browser.load_more")}</button>`);
+		Browser.msg(`<button id="loadmore">` +
+				`<img src="icons/down.png">` +
+				`<span>${lang("gui.browser.load_more")}</span>` +
+			`</button>`);
+
 		loadmore.addEventListener("click", () => {
 			Browser.loadpkgs(pkgs);
 			Browser.endoflist(! pkgs.length);
@@ -261,18 +265,23 @@ var Browser = {
 			Browser.loading(lang("gui.browser.no_results"));
 		}
 	},
-	setbutton: (mod, string) => {
+	setbutton: (mod, string, icon) => {
 		mod = normalize(mod);
 		if (browserEntries.querySelector(`#mod-${mod}`)) {
 			let elems = browserEntries.querySelectorAll(`.el#mod-${mod}`);
 
 			for (let i = 0; i < elems.length; i++) {
+				if (icon) {
+					string = `<img src="icons/${icon}.png">` +
+						`<span>${string}</span>`;
+				}
+
 				elems[i].querySelector(".text button").innerHTML = string;
 			}
 		} else {
 			let make = (str) => {
 				if (browserEntries.querySelector(`#mod-${str}`)) {
-					return Browser.setbutton(str, string);
+					return Browser.setbutton(str, string, icon);
 				} else {
 					return false;
 				}
@@ -392,6 +401,7 @@ function BrowserEl(properties) {
 		browserEntries.innerHTML = "";
 	}
 
+	let installicon = "downloads";
 	let installstr = lang("gui.browser.install");
 	let normalized_mods = [];
 
@@ -400,9 +410,11 @@ function BrowserEl(properties) {
 	}
 
 	if (properties.pkg.local_version) {
+		installicon = "redo";
 		installstr = lang("gui.browser.reinstall");
 
 		if (properties.pkg.has_update) {
+			installicon = "downloads";
 			installstr = lang("gui.browser.update");
 		}
 	}
@@ -420,10 +432,12 @@ function BrowserEl(properties) {
 			<div class="title">${properties.title}</div>
 			<div class="description">${properties.description}</div>
 			<button class="install bg-blue" onclick=''>
-				${installstr}
+				<img src="icons/${installicon}.png">
+				<span>${installstr}</span>
 			</button>
 			<button class="info" onclick="Preview.set('${properties.url}')">
-				${lang('gui.browser.view')}
+				<img src="icons/open.png">
+				<span>${lang('gui.browser.view')}</span>
 			</button>
 
 			<button class="visual">${properties.version}</button>
@@ -454,9 +468,10 @@ function add_recent_toast(name, timeout = 3000) {
 
 ipcRenderer.on("removed-mod", (event, mod) => {
 	setButtons(true);
-	Browser.setbutton(mod.name, lang("gui.browser.install"));
+	Browser.setbutton(mod.name, lang("gui.browser.install"), "downloads");
+
 	if (mod.manifest_name) {
-		Browser.setbutton(mod.manifest_name, lang("gui.browser.install"));
+		Browser.setbutton(mod.manifest_name, lang("gui.browser.install"), "downloads");
 	}
 })
 
@@ -503,7 +518,7 @@ ipcRenderer.on("installed-mod", (event, mod) => {
 	let name = mod.fancy_name || mod.name;
 
 	setButtons(true);
-	Browser.setbutton(name, lang("gui.browser.reinstall"));
+	Browser.setbutton(name, lang("gui.browser.reinstall"), "redo");
 
 	if (mod.malformed) {
 		new Toast({
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 445fc84..182bddf 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -55,10 +55,12 @@ mods.load = (mods_obj) => {
 				<div class="description">${mod_details.description}</div>
 				<button class="switch on orange"></button>
 				<button class="update bg-blue">
-					${lang("gui.browser.update")}
+					<img src="icons/downloads.png">
+					<span>${lang("gui.browser.update")}</span>
 				</button>
 				<button class="bg-red remove">
-					${lang("gui.mods.remove")}
+					<img src="icons/trash.png">
+					<span>${lang("gui.mods.remove")}</span>
 				</button>
 
 				<button class="visual">${version.format(mod_details.version)}</button>