feat: shadow dom to isolate achievements window and custom css refactor

src/main/services/window-manager.ts

@@ -289,6 +289,21 @@ export class WindowManager {
     const display = screen.getPrimaryDisplay();
     const { width, height } = display.workAreaSize;
 
+    console.log(
+      width,
+      height,
+      this.NOTIFICATION_WINDOW_HEIGHT,
+      this.NOTIFICATION_WINDOW_WIDTH,
+      position
+    );
+
+    if (position === "bottom-left") {
+      return {
+        x: 0,
+        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
+      };
+    }
+
     if (position === "bottom-center") {
       return {
         x: (width - this.NOTIFICATION_WINDOW_WIDTH) / 2,
@@ -310,13 +325,6 @@ export class WindowManager {
       };
     }
 
-    if (position === "bottom-left") {
-      return {
-        x: 0,
-        y: height - this.NOTIFICATION_WINDOW_HEIGHT,
-      };
-    }
-
     if (position === "top-right") {
       return {
         x: width - this.NOTIFICATION_WINDOW_WIDTH,
@@ -372,8 +380,13 @@ export class WindowManager {
     // this.notificationWindow.setVisibleOnAllWorkspaces(true, {
     //   visibleOnFullScreen: true,
     // });
+
     this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
     this.loadNotificationWindowURL();
+
+    if (isStaging) {
+      this.notificationWindow.webContents.openDevTools();
+    }
   }
 
   public static async showAchievementTestNotification() {