UI improvements 🎨

- Code refactoring (and improvements) 🥵
oyedejioyewole · Apr 3, 2023 · 01af9f3 · 01af9f3
1 parent 64b6d63
commit 01af9f3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 19 deletions.
diff --git a/components/Modal.vue b/components/Modal.vue
@@ -390,14 +390,22 @@ watch(
                     <input
                       type="number"
                       placeholder="%"
-                      class="placeholder:text-center dark:placeholder:text-black/70 p-1 rounded-full backdrop-blur-lg bg-transparent dark:bg-white dark:bg-opacity-70 outline-none text-center focus-visible:ring-2 dark:focus-visible:ring-2 dark:focus-visible:ring-green-500 dark:focus-visible:ring-offset-2 form-input border-0"
+                      class="placeholder:text-center dark:placeholder:text-black/70 p-1 rounded-full backdrop-blur-lg bg-transparent dark:bg-white dark:bg-opacity-70 outline-none text-center focus-visible:ring-2 form-input border-0 transition"
                       max="100"
                       min="0"
                       :class="{
                         'focus-visible:ring-green-900': status > 50,
                         'focus-visible:ring-orange-900':
                           status >= 30 && status <= 50,
                         'focus-visible:ring-red-900': status < 30,
+                        'dark:focus-visible:ring-green-700':
+                          status > 50 && $colorMode.value === 'dark',
+                        'dark:focus-visible:ring-orange-700':
+                          status >= 30 &&
+                          status <= 50 &&
+                          $colorMode.value === 'dark',
+                        'dark:focus-visible:ring-red-700':
+                          status < 30 && $colorMode.value === 'dark',
                       }"
                       v-model="userProvidedBatteryLevel"
                     />
@@ -474,7 +482,24 @@ watch(
                     v-if="settings.notifyOnBatteryLevels.length > 0"
                   >
                     <h3
-                      class="px-2 py-1 bg-green-300 rounded-full cursor-pointer hover:bg-green-400 transition"
+                      class="px-2 py-1 rounded-full cursor-pointer transition"
+                      :class="{
+                        'bg-green-300': status > 50,
+                        'bg-orange-300': status >= 30 && status <= 50,
+                        'bg-red-300': status < 30,
+                        'dark:bg-green-500':
+                          status > 50 && $colorMode.value === 'dark',
+                        'dark:bg-orange-500':
+                          status >= 30 &&
+                          status <= 50 &&
+                          $colorMode.value === 'dark',
+                        'dark:bg-red-500':
+                          status < 30 && $colorMode.value === 'dark',
+                        'hover:bg-green-500': status > 50,
+                        'hover:bg-orange-500': status >= 30 && status <= 50,
+                        'hover:bg-red-500': status < 30,
+                        'hover:opacity-70': $colorMode.value === 'dark',
+                      }"
                       @click="showBatteryLevelOptions(level)"
                     >
                       {{ level }}%

diff --git a/electron/main.ts b/electron/main.ts
@@ -41,19 +41,21 @@ if (app.isPackaged) {
 }
 
 const configPath = resolve(app.getPath("userData"), "config.json");
+const icon =
+  process.platform === "linux"
+    ? join(__dirname, "../build/icons/icon.png")
+    : join(__dirname, "../build/icons/icon.ico");
+const preload = app.isPackaged
+  ? join(__dirname, "./preload.js")
+  : join(__dirname, "../out/preload.js");
 
 const createWindow = () => {
   const window = new BrowserWindow({
     webPreferences: {
-      preload: app.isPackaged
-        ? join(__dirname, "./preload.js")
-        : join(__dirname, "../out/preload.js"),
+      preload,
       nodeIntegration: true,
     },
-    icon:
-      process.platform === "linux"
-        ? join(__dirname, "../build/icons/icon.png")
-        : join(__dirname, "../build/icons/icon.ico"),
+    icon,
   });
 
   window.loadURL(
@@ -64,11 +66,7 @@ const createWindow = () => {
 };
 
 const createTrays = () => {
-  const tray = new Tray(
-    process.platform === "linux"
-      ? join(__dirname, "../build/icons/icon.png")
-      : join(__dirname, "../build/icons/icon.ico")
-  );
+  const tray = new Tray(icon);
 
   const trayMenu = Menu.buildFromTemplate([
     { label: "Open", click: () => createWindow() },
@@ -92,10 +90,7 @@ const ref = <T>(initialValue: T) => {
         target[key] = newValue;
 
         const notification = new Notification({
-          icon:
-            process.platform === "linux"
-              ? join(__dirname, "../public/build/icons/icon.png")
-              : join(__dirname, "../public/build/icons/icon.ico"),
+          icon,
         });
 
         const batteryLevel = Number((newValue.level * 100).toFixed(0));

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -17,6 +17,7 @@ export default defineNuxtConfig({
           ? { src: "http://localhost:8098", tagPosition: "bodyClose" }
           : {},
       ],
+      title: "Javabattery",
     },
   },
   tailwindcss: {

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "name": "OyewoleOyedeji",
     "email": "[email protected]"
   },
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": true,
   "main": "out/main.js",
   "productName": "Javabattery",