UI/UX improvements

3 weeks ago · ede1e976e4
parent bc4f1a3799
commit ede1e976e4
7 changed files with 61 additions and 35 deletions
--- a/assets/css/extra.css
+++ b/assets/css/extra.css
@ -1,18 +1,23 @@
+@font-face {
+	font-family: "JetBrains";
+	src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
+}
+
 :root[theme="light"] {
-	--background: #fff;
-	--text: rgb(45, 45, 45);
-	--box-main: #eef4f3;
+	--background: #f9fafb;
+	--text: #1f2937;
+	--box-main: #f3f4f6;
 	--box-toggle: rgb(215 238 233);
-	--box-separation: rgb(215 238 233);
-	--box-toggleOn: rgb(28 232 138);
+	--box-separation: #e5e7eb;
+	--box-toggleOn: rgb(127, 250, 172);
 	--item-bg: #dddddd;
 	--box-shadow: none;
-	--select: rgb(127, 253, 127);
-	--greenBtn: #6ade1d;
-	--greenBtn-bottom: #54a31f;
+	--select: #a7f3d0;
+	--greenBtn: #22c55e;
+	--greenBtn-bottom: #16a34a;
 	--redBtn: #d64d4f;
 	--redBtn-bottom: #854243;
-	--blueBtn: rgb(80, 128, 230);
+	--blueBtn: #3b82f6;
 	--blueBtn-bottom: rgb(44, 78, 180);
 }

@ -23,14 +28,14 @@
 	--box-toggle: #191919;
 	--box-separation: #2e2e2e;
 	--box-toggleOn: #2e2e2e;
-	--item-bg: #191919;
+	--item-bg: #2c2e31;
 	--box-shadow: none;
-	--select: rgb(68 214 141);
-	--greenBtn: #24D166;
-	--greenBtn-bottom: #3e6c20;
+	--select: #252426;
+	--greenBtn: #05aa76;
+	--greenBtn-bottom: #047652;
 	--redBtn: #c82b2d;
 	--redBtn-bottom: #803334;
-	--blueBtn: rgb(80, 128, 230);
+	--blueBtn: rgb(80, 140, 230);
 	--blueBtn-bottom: rgb(44, 78, 180);
 	--border: none;
 }
@ -43,7 +48,7 @@
 	--box-separation: #414559;
 	--box-toggleOn: #607dc1;
 	--item-bg: #414559;
-	--select: #8caaee;
+	--select: #3b3e4a;
 	--greenBtn: #78c346;
 	--greenBtn-bottom: #597844;
 	--redBtn: #d64d4f;
@ -54,12 +59,12 @@
 :root[theme="onedark"] {
 	--background: #282c34;
 	--text: #d2d6df;
-	--box-main: #4d515d;
+	--box-main: #3a3d46;
 	--box-toggle: #2f333d;
 	--box-separation: #2f333d;
 	--box-toggleOn: #13a3b7;
 	--item-bg: #4d515d;
-	--select: #57b6c2;
+	--select: #262c33;
 	--greenBtn: #85cf50;
 	--greenBtn-bottom: #406923;
 	--redBtn: #be2d39;
@ -75,7 +80,7 @@
 	--box-separation: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
-	--select: #00ff41;
+	--select: #08180f;
 	--greenBtn: #19b42b;
 	--greenBtn-bottom: #10701c;
 	--redBtn: #19b42b;
@ -126,7 +131,7 @@
 	--box-separation: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
-	--select: #2aa198;
+	--select: rgb(9, 57, 53);
 	--greenBtn: #859900;
 	--greenBtn-bottom: rgb(73, 84, 1);
 	--redBtn: #dc322f;
@ -181,6 +186,11 @@ input[type="text"],
 	background-color: var(--box-main);
 }

+#path {
+	font-family: "JetBrains";
+	font-size: medium;
+}
+
 #flatpakTxt {
 	margin: 0 15px;
 	padding: 20px 15px;
@ -289,12 +299,14 @@ input[type="checkbox"] {
 select {
 	padding: 15px;
 	background-color: var(--select);
+	color: var(--text);
 	border: none;
 	border-radius: 8px;
 	cursor: pointer;
 	font-size: large;
 	outline: none;
 	position: relative;
+	width: 160px;
 }
 #browserInfo {
 	cursor: pointer;
@ -318,4 +330,4 @@ body::-webkit-scrollbar-thumb {

 #proxyTxt:invalid {
 	border: 2px solid var(--redBtn);
-}
+}
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -40,12 +40,12 @@
 	--box-toggleOn: #2e2e2e;
 	--item-bg: #2c2e31;
 	--box-shadow: none;
-	--select: rgb(68 214 141);
-	--greenBtn: #24d166;
-	--greenBtn-bottom: #3e6c20;
+	--select: #252426;
+	--greenBtn: #05aa76;
+	--greenBtn-bottom: #047652;
 	--redBtn: #c82b2d;
 	--redBtn-bottom: #803334;
-	--blueBtn: rgb(80, 128, 230);
+	--blueBtn: rgb(80, 140, 230);
 	--blueBtn-bottom: rgb(44, 78, 180);
 	--border: none;
 }
@ -58,7 +58,7 @@
 	--box-separation: #414559;
 	--box-toggleOn: #607dc1;
 	--item-bg: #414559;
-	--select: #8caaee;
+	--select: #3b3e4a;
 	--greenBtn: #78c346;
 	--greenBtn-bottom: #597844;
 	--redBtn: #d64d4f;
@ -74,7 +74,7 @@
 	--box-separation: #2f333d;
 	--box-toggleOn: #13a3b7;
 	--item-bg: #4d515d;
-	--select: #57b6c2;
+	--select: #262c33;
 	--greenBtn: #85cf50;
 	--greenBtn-bottom: #406923;
 	--redBtn: #be2d39;
@ -90,7 +90,7 @@
 	--box-separation: #214338;
 	--box-toggleOn: #24782e;
 	--item-bg: #214338;
-	--select: #00ff41;
+	--select: #08180f;
 	--greenBtn: #19b42b;
 	--greenBtn-bottom: #10701c;
 	--redBtn: #19b42b;
@ -141,7 +141,7 @@
 	--box-separation: #2e4c52;
 	--box-toggleOn: #005a6f;
 	--item-bg: #003745;
-	--select: #2aa198;
+	--select: rgb(9, 57, 53);
 	--greenBtn: #859900;
 	--greenBtn-bottom: rgb(73, 84, 1);
 	--redBtn: #dc322f;
@ -464,6 +464,7 @@ img {
 .select {
 	padding: 12px 15px;
 	background-color: var(--select);
+	color: var(--text);
 	border: none;
 	border-radius: 12px;
 	cursor: pointer;
@ -744,6 +745,11 @@ button {
 	background-color: var(--item-bg);
 }

+#path {
+	font-family: "JetBrains";
+	font-size: medium;
+}
+
 #subHeader {
 	font-weight: bold;
 	margin-top: 0;
@ -1062,7 +1068,7 @@ body::-webkit-scrollbar-thumb {
 #range-highlight {
 	position: absolute;
 	height: 0.25rem;
-	background-color: #2dd4bf;
+	background-color: var(--blueBtn);
 	border-radius: 9999px;
 	z-index: 1;
 }
@ -1093,7 +1099,7 @@ input[type="range"]::-webkit-slider-thumb {
 	appearance: none;
 	width: 12px;
 	height: 32px;
-	background-color: #2dd4bf;
+	background-color: var(--blueBtn);;
 	border-radius: 9999px;
 	cursor: pointer;
 	pointer-events: auto;
--- a/html/history.html
+++ b/html/history.html
@ -109,7 +109,7 @@
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
-            color: var(--select, #54abde);
+            color: var(--text);
            word-break: break-word;
        }

--- a/main.js
+++ b/main.js
@ -164,6 +164,8 @@ function createSecondaryWindow(file) {
 			nodeIntegration: true,
 			contextIsolation: false,
 		},
+		width: 1000,
+		height: 800,
 	});

 	// appState.secondaryWindow.webContents.openDevTools();
@ -285,6 +287,14 @@ function registerIpcHandlers() {
 		}
 	});

+	ipcMain.on("open-folder", async (_event, folderPath) => {
+		try {
+			await fs.stat(folderPath);
+			shell.openPath(folderPath);
+		} catch (error) {
+		}
+	});
+
 	ipcMain.on("load-win", (_event, file) => {
 		appState.indexPageIsOpen = file.includes("index.html");
 		appState.mainWindow?.loadFile(file);
--- a/src/compressor.js
+++ b/src/compressor.js
@ -200,7 +200,7 @@ async function startCompression() {
 				const fileSavedElement = document.createElement("b");
 				fileSavedElement.textContent = "File saved. Click to open";
 				fileSavedElement.onclick = () => {
-					shell.showItemInFolder(outputPath);
+					ipcRenderer.send("show-file", outputPath);
 				};
 				getId(itemId + "_prog").appendChild(fileSavedElement);
 				currentItemId = "";
--- a/src/playlist.js
+++ b/src/playlist.js
@ -641,7 +641,7 @@ ipcRenderer.on("downloadPath", (event, downloadPath) => {
 });

 function openFolder(location) {
-	shell.openPath(location);
+	ipcRenderer.send("open-folder", location);
 }

 function closeMenu() {
--- a/src/preferences.js
+++ b/src/preferences.js
@ -262,5 +262,3 @@ const showMoreFormatOpts = localStorage.getItem("showMoreFormats");
 if (showMoreFormatOpts == "true") {
 	showMoreFormats.checked = true;
 }
-// Translation file
-require("../src/translate_preferences");