Merge pull request #1245 from sbenmoussati/SDA-3268

SDA-3268 Ext room name length fix

src/renderer/components/notification-comp.tsx

@@ -58,6 +58,8 @@ type keyboardEvent = React.KeyboardEvent<HTMLInputElement>;
 // Notification container height
 const CONTAINER_HEIGHT = 100;
 const CONTAINER_HEIGHT_WITH_INPUT = 142;
+const LIGHT_THEME = '#EAEBEC';
+const DARK_THEME = '#25272B';
 
 export default class NotificationComp extends React.Component<
   {},
@@ -466,10 +468,12 @@ export default class NotificationComp extends React.Component<
           currentColors.notificationBorderColor;
       } else {
         // in case of regular message without mention
-        currentColors.notificationBackgroundColor = color
+        // FYI: SDA versions prior to 9.2.3 do not support theme color properly, reason why SFE-lite is pushing notification default background color.
+        // For this reason, to be backward compatible, we check if sent color correspond to 'default' background color. If yes, we should ignore it and not consider it as a custom color.
+        currentColors.notificationBackgroundColor = this.isCustomColor(color)
           ? color
           : currentColors.regularFlashingNotificationBgColor;
-        currentColors.notificationBorderColor = color
+        currentColors.notificationBorderColor = this.isCustomColor(color)
           ? color
           : theme === Themes.DARK
           ? '#2996fd'
@@ -514,6 +518,7 @@ export default class NotificationComp extends React.Component<
     const { flash, theme, hasMention, isExternal } = this.state;
     if (flash && theme) {
       if (isExternal) {
+        customClasses.push('external-border');
         if (hasMention) {
           customClasses.push(`${theme}-ext-mention-flashing`);
         } else {
@@ -530,4 +535,17 @@ export default class NotificationComp extends React.Component<
     }
     return customClasses;
   }
+
+  /**
+   * SDA versions prior to 9.2.3 do not support theme color properly, reason why SFE-lite is pushing notification default background color and theme.
+   * For that reason, we try to identify if provided color is the default one or not.
+   * @param color color sent through SDABridge
+   * @returns boolean
+   */
+  private isCustomColor(color: string): boolean {
+    if (color && color !== LIGHT_THEME && color !== DARK_THEME) {
+      return true;
+    }
+    return false;
+  }
 }

src/renderer/styles/notification-comp.less

@@ -184,6 +184,7 @@ body {
   height: 16px;
   width: 26px;
   margin-left: 8px;
+  padding-top: 1px;
   align-items: center;
 }
 
@@ -269,20 +270,18 @@ body {
       border: none;
       color: var(--text-color);
     }
-
+  }
+}
 .rte-send-button {
   width: 25px;
   height: 25px;
   align-self: center;
   padding: 3px;
-      background: url('../assets/notification-send-button-enabled.svg')
+  background: url('../assets/notification-send-button-enabled.svg') no-repeat
-        no-repeat center;
+    center;
   border: none;
   color: var(--text-color);
 }
-  }
-}
-
 .rte-thumbsup-button:focus,
 .rte-send-button:focus {
   outline: none;
@@ -298,7 +297,7 @@ body {
 }
 
 .external-border .title {
-  max-width: 142px;
+  max-width: 142px !important;
 }
 
 .company {