SDA-4664 - Add border color light theme (#2201)

SDA-4660 - Fix stacking

src/app/notifications/call-notification.ts

@@ -108,6 +108,7 @@ class CallNotification {
       ) {
         return;
       }
+      notification.stack();
       this.callNotificationWindow.webContents.setZoomFactor(1);
       this.callNotificationWindow.webContents.setVisualZoomLevelLimits(1, 1);
       this.callNotificationWindow.webContents.send(
@@ -119,8 +120,8 @@ class CallNotification {
 
     this.callNotificationWindow.once('closed', () => {
       this.callNotificationWindow = undefined;
+      notification.unstack();
     });
-    notification.stack();
   };
 
   /**
@@ -129,7 +130,6 @@ class CallNotification {
    * @param clientId {number}
    */
   public notificationClicked(clientId: number): void {
-    notification.unstack();
     const browserWindow = this.callNotificationWindow;
     if (
       browserWindow &&
@@ -150,7 +150,6 @@ class CallNotification {
    * @param clientId {number}
    */
   public onCallNotificationOnAccept(clientId: number): void {
-    notification.unstack();
     const browserWindow = this.callNotificationWindow;
     if (
       browserWindow &&
@@ -171,7 +170,6 @@ class CallNotification {
    * @param clientId {number}
    */
   public onCallNotificationOnReject(clientId: number): void {
-    notification.unstack();
     const browserWindow = this.callNotificationWindow;
     if (
       browserWindow &&
@@ -191,7 +189,6 @@ class CallNotification {
    * Close the notification window
    */
   public closeNotification(clientId: number): void {
-    notification.unstack();
     const browserWindow = this.callNotificationWindow;
     if (browserWindow && windowExists(browserWindow)) {
       if (
@@ -213,6 +210,15 @@ class CallNotification {
     return;
   }
 
+  /**
+   * Checks if the call notification window is open.
+   *
+   * @returns {boolean} True if the call notification window is open, false otherwise.
+   */
+  public isCallNotificationOpen(): boolean {
+    return !!this.callNotificationWindow;
+  }
+
   private getCallNotificationOpts =
     (): Electron.BrowserWindowConstructorOptions => {
       const callNotificationOpts: Electron.BrowserWindowConstructorOptions = {

src/renderer/notification-handler.ts

@@ -1,5 +1,6 @@
 import { app, BrowserWindow, screen } from 'electron';
 
+import { callNotification } from '../app/notifications/call-notification';
 import { windowExists } from '../app/window-utils';
 import { isLinux, isMac } from '../common/env';
 
@@ -42,7 +43,6 @@ export default class NotificationHandler {
   };
 
   private externalDisplay: Electron.Display | undefined;
-  private isNotificationStacked: boolean = false;
 
   constructor(opts: ISettings) {
     this.settings = opts as ISettings;
@@ -70,6 +70,7 @@ export default class NotificationHandler {
     if (window && !window.isDestroyed()) {
       try {
         window.setPosition(parseInt(String(x), 10), parseInt(String(y), 10));
+        window.moveTop();
       } catch (err) {
         console.warn(
           `Failed to set window position. x: ${x} y: ${y}. Contact the developers for more details`,
@@ -191,8 +192,6 @@ export default class NotificationHandler {
         });
         break;
     }
-
-    this.isNotificationStacked = true;
   }
 
   /**
@@ -235,8 +234,6 @@ export default class NotificationHandler {
       // Set the position of the notification window
       this.setWindowPosition(notificationWindow, newX, newY);
     });
-
-    this.isNotificationStacked = false;
   }
 
   /**
@@ -255,7 +252,7 @@ export default class NotificationHandler {
           height > this.settings.height
             ? NEXT_INSERT_POSITION_WITH_INPUT
             : NEXT_INSERT_POSITION;
-        if (this.isNotificationStacked) {
+        if (callNotification.isCallNotificationOpen()) {
           // When stacked, only consider padding separation for next insert position
           nextNotificationY += NOTIFICATIONS_PADDING_SEPARATION;
         } else {
@@ -314,7 +311,7 @@ export default class NotificationHandler {
       let newY;
       const newX = this.settings.firstPos.x;
 
-      if (this.isNotificationStacked) {
+      if (callNotification.isCallNotificationOpen()) {
         if (isReset) {
           switch (this.settings.startCorner) {
             case 'upper-right':

src/renderer/notification-theme.ts

@@ -26,7 +26,7 @@ export const Colors = {
     notificationBackgroundColor: '#f1f1f3',
     notificationBorderColor: '#717681',
     mentionBackgroundColor: '#fcc1b9',
-    mentionBorderColor: 'transparent',
+    mentionBorderColor: '#ff8f80',
   },
 };
 
@@ -117,17 +117,11 @@ export const increaseBrightness = (hex: string, percent: number) => {
 
 /**
  * Returns custom border color
- * @param theme current theme
  * @param customColor color
  * @returns custom border color
  */
-export const getThemedCustomBorderColor = (
-  theme: string,
-  customColor: string,
-) => {
-  return theme === Themes.DARK
-    ? increaseBrightness(customColor, 50)
-    : 'transparent';
+export const getThemedCustomBorderColor = (customColor: string) => {
+  return increaseBrightness(customColor, 50);
 };
 
 /**
@@ -155,10 +149,8 @@ export const getThemeColors = (
         currentColors.notificationBackgroundColor =
           federatedFlashingBackgroundColor;
         if (isCustomColor(color)) {
-          currentColors.notificationBorderColor = getThemedCustomBorderColor(
-            theme,
-            color,
-          );
+          currentColors.notificationBorderColor =
+            getThemedCustomBorderColor(color);
           currentColors.notificationBackgroundColor = color;
         }
       } else {
@@ -170,10 +162,8 @@ export const getThemeColors = (
         currentColors.notificationBackgroundColor =
           externalFlashingBackgroundColor;
         if (isCustomColor(color)) {
-          currentColors.notificationBorderColor = getThemedCustomBorderColor(
-            theme,
-            color,
-          );
+          currentColors.notificationBorderColor =
+            getThemedCustomBorderColor(color);
           currentColors.notificationBackgroundColor = color;
         }
       } else {
@@ -190,10 +180,8 @@ export const getThemeColors = (
         ? color
         : currentColors.regularFlashingNotificationBgColor;
       currentColors.notificationBorderColor = isCustomColor(color)
-        ? getThemedCustomBorderColor(theme, color)
-        : theme === Themes.DARK
-        ? '#2996fd'
-        : 'transparent';
+        ? getThemedCustomBorderColor(color)
+        : '#2996fd';
     }
   } else if (!flash) {
     if (hasMention) {
@@ -202,10 +190,7 @@ export const getThemeColors = (
       currentColors.notificationBorderColor = currentColors.mentionBorderColor;
     } else if (isCustomColor(color)) {
       currentColors.notificationBackgroundColor = color;
-      currentColors.notificationBorderColor = getThemedCustomBorderColor(
-        theme,
-        color,
-      );
+      currentColors.notificationBorderColor = getThemedCustomBorderColor(color);
     } else if (isFederatedEnabled) {
       currentColors.notificationBorderColor = '#65C862';
     } else if (isExternal) {

src/renderer/notification.ts

@@ -6,6 +6,7 @@ import {
   ToastNotificationActionTypes,
 } from '../app/bi/interface';
 import { config } from '../app/config-handler';
+import { callNotification } from '../app/notifications/call-notification';
 import {
   AUX_CLICK,
   IS_NODE_INTEGRATION_ENABLED,
@@ -300,6 +301,9 @@ class Notification extends NotificationHandler {
       zoomFactor: data?.zoomFactor,
     });
     notificationWindow.showInactive();
+    if (callNotification.isCallNotificationOpen()) {
+      notification.stackNotifications(this.activeNotifications);
+    }
   }
 
   /**
@@ -586,6 +590,7 @@ class Notification extends NotificationHandler {
       windowId: notificationWindow.id,
     });
     this.activeNotifications.push(notificationWindow);
+    notificationWindow.moveTop();
   }
 
   /**