SDA-3237 Additional colors use-cases

src/renderer/components/notification-comp.tsx

@@ -23,11 +23,15 @@ const Colors = {
     regularFlashingNotificationBgColor: '#27588e',
     notificationBackgroundColor: '#27292c',
     notificationBorderColor: '#717681',
+    mentionBackgroundColor: '#99342c',
+    mentionBorderColor: '#ff5d50',
   },
   light: {
     regularFlashingNotificationBgColor: '#aad4f8',
     notificationBackgroundColor: '#f1f1f3',
     notificationBorderColor: 'transparent',
+    mentionBackgroundColor: '#fcc1b9',
+    mentionBorderColor: 'transparent',
   },
 };
 
@@ -460,9 +464,23 @@ export default class NotificationComp extends React.Component<
     const { theme, flash, isExternal, hasMention, color } = this.state;
     const currentColors =
       theme === Themes.DARK ? { ...Colors.dark } : { ...Colors.light };
+    const externalFlashingBackgroundColor =
+      theme === Themes.DARK ? '#70511f' : '#f6e5a6';
     if (flash && theme) {
       if (isExternal) {
-        currentColors.notificationBorderColor = '#F7CA3B';
+        if (!hasMention) {
+          currentColors.notificationBorderColor = '#F7CA3B';
+          currentColors.notificationBackgroundColor = externalFlashingBackgroundColor;
+          if (this.isCustomColor(color)) {
+            currentColors.notificationBorderColor = this.getThemedCustomBorderColor(
+              theme,
+              color,
+            );
+            currentColors.notificationBackgroundColor = color;
+          }
+        } else {
+          currentColors.notificationBorderColor = '#F7CA3B';
+        }
       } else if (hasMention) {
         currentColors.notificationBorderColor =
           currentColors.notificationBorderColor;
@@ -474,13 +492,26 @@ export default class NotificationComp extends React.Component<
           ? color
           : currentColors.regularFlashingNotificationBgColor;
         currentColors.notificationBorderColor = this.isCustomColor(color)
-          ? color
+          ? this.getThemedCustomBorderColor(theme, color)
           : theme === Themes.DARK
           ? '#2996fd'
           : 'transparent';
       }
-    } else if (!flash && color) {
-      currentColors.notificationBackgroundColor = currentColors.notificationBorderColor = color;
+    } else if (!flash) {
+      if (hasMention) {
+        currentColors.notificationBackgroundColor =
+          currentColors.mentionBackgroundColor;
+        currentColors.notificationBorderColor =
+          currentColors.mentionBorderColor;
+      } else if (this.isCustomColor(color)) {
+        currentColors.notificationBackgroundColor = color;
+        currentColors.notificationBorderColor = this.getThemedCustomBorderColor(
+          theme,
+          color,
+        );
+      } else if (isExternal) {
+        currentColors.notificationBorderColor = '#F7CA3B';
+      }
     }
     return currentColors;
   }
@@ -548,4 +579,44 @@ export default class NotificationComp extends React.Component<
     }
     return false;
   }
+
+  /**
+   * Function that allows to increase color brightness
+   * @param hex hes color
+   * @param percent percent
+   * @returns new hex color
+   */
+  private increaseBrightness(hex: string, percent: number) {
+    // strip the leading # if it's there
+    hex = hex.replace(/^\s*#|\s*$/g, '');
+    const r = parseInt(hex.substr(0, 2), 16);
+    const g = parseInt(hex.substr(2, 2), 16);
+    const b = parseInt(hex.substr(4, 2), 16);
+
+    return (
+      '#' +
+      // tslint:disable-next-line: no-bitwise
+      (0 | ((1 << 8) + r + ((256 - r) * percent) / 100))
+        .toString(16)
+        .substr(1) +
+      // tslint:disable-next-line: no-bitwise
+      (0 | ((1 << 8) + g + ((256 - g) * percent) / 100))
+        .toString(16)
+        .substr(1) +
+      // tslint:disable-next-line: no-bitwise
+      (0 | ((1 << 8) + b + ((256 - b) * percent) / 100)).toString(16).substr(1)
+    );
+  }
+
+  /**
+   * Returns custom border color
+   * @param theme current theme
+   * @param customColor color
+   * @returns custom border color
+   */
+  private getThemedCustomBorderColor(theme: string, customColor: string) {
+    return theme === Themes.DARK
+      ? this.increaseBrightness(customColor, 50)
+      : 'transparent';
+  }
 }

src/renderer/styles/notification-comp.less

@@ -143,13 +143,14 @@ body {
         cursor: default;
         text-overflow: ellipsis;
         color: var(--text-color);
+        white-space: pre-line;
       }
     }
   }
 }
 
 .external-border {
-  border: 2px solid #f7ca3b !important;
+  border: 2px solid #f7ca3b;
 }
 
 .header:lang(fr-FR) {

src/renderer/styles/notifications-animations.less

@@ -64,19 +64,15 @@
 }
 
 @keyframes light-ext-flashing {
-  0% {
-    background-color: @light-notification-bg-color;
-  }
   50% {
-    background-color: @light-external-flash-mention-bg-color;
+    background-color: @light-notification-bg-color;
+    border-color: @light-external-flash-border-color;
   }
 }
 
 @keyframes dark-ext-flashing {
-  0% {
-    background-color: @dark-notification-bg-color;
-  }
   50% {
-    background-color: @dark-external-flash-bg-color;
+    background-color: @dark-notification-bg-color;
+    border-color: @dark-external-flash-border-color;
   }
 }

src/renderer/styles/variables.less

@@ -14,4 +14,4 @@
 @light-mention-flash-mention-bg-color: #fcc1b9;
 @light-mention-flash-border-color: #ff5d50;
 @light-external-flash-border-color: #f7ca3b;
-@light-external-flash-mention-bg-color: #f6e5a6;
+@light-external-flash-bg-color: #f6e5a6;