SDA-4997 - Add specific notification style for macOS tahoe (#2471)

src/app/notifications/call-notification.ts

@@ -5,7 +5,7 @@ import {
   ICallNotificationData,
   NotificationActions,
 } from '../../common/api-interface';
-import { isDevEnv, isMac, isWindowsOS } from '../../common/env';
+import { isDevEnv, isMac, isTahoe, isWindowsOS } from '../../common/env';
 import { logger } from '../../common/logger';
 import { notification } from '../../renderer/notification';
 import {
@@ -69,10 +69,10 @@ class CallNotification {
       this.callNotificationWindow.notificationData = callNotificationData;
       this.callNotificationWindow.winName = apiName.notificationWindowName;
       this.notificationCallbacks.set(callNotificationData.id, callback);
-      this.callNotificationWindow.webContents.send(
-        'call-notification-data',
-        callNotificationData,
-      );
+      this.callNotificationWindow.webContents.send('call-notification-data', {
+        ...callNotificationData,
+        isTahoe,
+      });
       return;
     }
 
@@ -111,10 +111,10 @@ class CallNotification {
       notification.stack();
       this.callNotificationWindow.webContents.setZoomFactor(1);
       this.callNotificationWindow.webContents.setVisualZoomLevelLimits(1, 1);
-      this.callNotificationWindow.webContents.send(
-        'call-notification-data',
-        callNotificationData,
-      );
+      this.callNotificationWindow.webContents.send('call-notification-data', {
+        ...callNotificationData,
+        isTahoe,
+      });
       this.callNotificationWindow.showInactive();
     });
 

src/common/api-interface.ts

@@ -312,6 +312,8 @@ export interface INotificationData {
   hasMention?: boolean;
   isFederatedEnabled?: boolean;
   zoomFactor: number;
+  // Flag passed from main process: true if running on latest macOS "Tahoe" (Darwin 25+)
+  isTahoe?: boolean;
 }
 
 /**
@@ -342,6 +344,8 @@ export interface ICallNotificationData {
   zoomFactor: number;
   callerNumber: string;
   callerName?: string;
+  // Flag passed from main process: true if running on latest macOS "Tahoe" (Darwin 25+)
+  isTahoe?: boolean;
 }
 
 export enum NotificationActions {

src/common/env.ts

@@ -17,3 +17,5 @@ export const isElectronQA = !!process.env.ELECTRON_QA;
 
 export const isMac = process.platform === 'darwin';
 export const isLinux = process.platform === 'linux';
+// Node's os.release() returns "25.0.0" on macOS Tahoe. we use the major component
+export const isTahoe = isMac && parseInt(release().split('.')[0], 10) >= 25;

src/renderer/components/call-notification.tsx

@@ -42,6 +42,7 @@ interface ICallNotificationState {
   notificationType?: string;
   callerNumber?: string;
   callerName?: string;
+  isTahoe?: boolean;
 }
 
 type mouseEventButton =
@@ -161,6 +162,9 @@ export default class CallNotification extends React.Component<
     );
     let containerCssClass = `container ${themeClassName} `;
     customCssClasses.push(isMac ? 'mac' : 'windows');
+    if (isMac && this.state.isTahoe) {
+      customCssClasses.push('tahoe');
+    }
     containerCssClass += customCssClasses.join(' ');
 
     const acceptText = acceptButtonText

src/renderer/components/notification-comp.tsx

@@ -34,6 +34,7 @@ interface INotificationState {
   canSendMessage: boolean;
   isFederatedEnabled?: boolean;
   zoomFactor?: number;
+  isTahoe?: boolean;
 }
 
 type mouseEventButton =
@@ -160,6 +161,9 @@ export default class NotificationComp extends React.Component<
       isFederatedEnabled,
     );
     customCssClasses.push(isMac ? 'mac' : 'windows');
+    if (isMac && this.state.isTahoe) {
+      customCssClasses.push('tahoe');
+    }
     containerCssClass += customCssClasses.join(' ');
     return (
       <div

src/renderer/notification.ts

@@ -20,7 +20,7 @@ import {
   NOTIFICATION_WINDOW_TITLE,
   NotificationActions,
 } from '../common/api-interface';
-import { isMac, isWindowsOS } from '../common/env';
+import { isMac, isTahoe, isWindowsOS } from '../common/env';
 import { logger } from '../common/logger';
 import NotificationHandler, { ICorner } from './notification-handler';
 
@@ -298,6 +298,7 @@ class Notification extends NotificationHandler {
       hasMention,
       isFederatedEnabled,
       zoomFactor: data?.zoomFactor,
+      isTahoe,
     });
     notificationWindow.showInactive();
     if (callNotification.isCallNotificationOpen()) {

src/renderer/styles/call-notification.less

@@ -44,6 +44,10 @@
   --container-border-radius: 10px;
 }
 
+.mac.tahoe {
+  --container-border-radius: 16px;
+}
+
 .windows {
   --button-width: 72px;
   --button-with-other: 94px;

src/renderer/styles/notification-comp.less

@@ -17,6 +17,10 @@
   --container-border-radius: 10px;
 }
 
+.mac.tahoe {
+  --container-border-radius: 16px;
+}
+
 .windows {
   --container-border-radius: 2px;
 }