SDA-4503 (Add federated green theme for notifications 🟢) (#2114)

* SDA-4503 - Add federated green theme for notifications

* SDA-4503 - Update light theme green color

src/app/init.ts

@@ -38,6 +38,7 @@ if (isDevEnv) {
       'string',
       '1234-5678-910',
     );
+    systemPreferences.setUserDefault('devToolsEnabled', 'boolean', true);
   }
   logger.info(`init: Setting user data path to`, devDataPath);
   app.setPath('userData', devDataPath);

src/common/api-interface.ts

@@ -275,6 +275,7 @@ export interface INotificationData {
   hasIgnore?: boolean;
   hasReply?: boolean;
   hasMention?: boolean;
+  isFederatedEnabled?: boolean;
 }
 
 /**

src/demo/index.html

@@ -207,6 +207,8 @@
         <div class="input-container">
           <label for="isExternal">External</label>
           <input type="checkbox" id="isExternal" />
+          <label for="isFederatedEnabled">isFederatedEnabled</label>
+          <input type="checkbox" id="isFederatedEnabled" />
         </div>
         <div class="input-container">
           <label for="isUpdated">Is updated</label>
@@ -624,6 +626,8 @@ Writes some thing to the file</textarea
       var imageUrl = document.getElementById('image').value;
       var shouldFlash = document.getElementById('flash').checked;
       var isExternal = document.getElementById('isExternal').checked;
+      var isFederatedEnabled =
+        document.getElementById('isFederatedEnabled').checked;
       var isUpdated = document.getElementById('isUpdated').checked;
       var hasMention = document.getElementById('hasMention').checked;
       var shouldStick = document.getElementById('sticky').checked;
@@ -646,6 +650,7 @@ Writes some thing to the file</textarea
         color: color,
         sticky: shouldStick,
         isExternal: isExternal,
+        isFederatedEnabled: isFederatedEnabled,
         isUpdated,
         theme: theme,
         data: {
@@ -710,6 +715,8 @@ Writes some thing to the file</textarea
       var imageUrl = document.getElementById('image').value;
       var shouldFlash = document.getElementById('flash').checked;
       var isExternal = document.getElementById('isExternal').checked;
+      var isFederatedEnabled =
+        document.getElementById('isFederatedEnabled').checked;
       var color = document.getElementById('color').value;
       var company = document.getElementById('company').value;
       num++;
@@ -723,6 +730,7 @@ Writes some thing to the file</textarea
         color: color,
         flash: shouldFlash,
         isExternal: isExternal,
+        isFederatedEnabled: isFederatedEnabled,
         theme: theme,
         data: {
           hello: `Notification with id ${num} clicked')`,

src/renderer/components/call-notification.tsx

@@ -35,6 +35,7 @@ interface ICallNotificationState {
   theme: Theme;
   isPrimaryTextOverflowing: boolean;
   isSecondaryTextOverflowing: boolean;
+  isFederatedEnabled: boolean;
 }
 
 type mouseEventButton =
@@ -76,6 +77,7 @@ export default class CallNotification extends React.Component<
       theme: '',
       isPrimaryTextOverflowing: false,
       isSecondaryTextOverflowing: false,
+      isFederatedEnabled: false,
     };
     this.state = { ...this.defaultState };
     this.updateState = this.updateState.bind(this);
@@ -118,6 +120,7 @@ export default class CallNotification extends React.Component<
       icon,
       isPrimaryTextOverflowing,
       isSecondaryTextOverflowing,
+      isFederatedEnabled,
     } = this.state;
 
     let themeClassName;
@@ -129,12 +132,20 @@ export default class CallNotification extends React.Component<
       themeClassName =
         color && color.match(whiteColorRegExp) ? Themes.LIGHT : Themes.DARK;
     }
-    const themeColors = getThemeColors(theme, flash, isExternal, false, color);
+    const themeColors = getThemeColors(
+      theme,
+      flash,
+      isExternal,
+      false,
+      color,
+      isFederatedEnabled,
+    );
     const customCssClasses = getContainerCssClasses(
       theme,
       flash,
       isExternal,
       false,
+      isFederatedEnabled,
     );
     let containerCssClass = `container ${themeClassName} `;
     customCssClasses.push(isMac ? 'mac' : 'windows');

src/renderer/components/notification-comp.tsx

@@ -31,6 +31,7 @@ interface INotificationState {
   isInputHidden: boolean;
   containerHeight: number;
   canSendMessage: boolean;
+  isFederatedEnabled?: boolean;
 }
 
 type mouseEventButton =
@@ -84,6 +85,7 @@ export default class NotificationComp extends React.Component<
       hasMention: false,
       containerHeight: CONTAINER_HEIGHT,
       canSendMessage: false,
+      isFederatedEnabled: false,
     };
     this.updateState = this.updateState.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
@@ -123,6 +125,7 @@ export default class NotificationComp extends React.Component<
       containerHeight,
       flash,
       icon,
+      isFederatedEnabled,
     } = this.state;
     let themeClassName;
     if (theme) {
@@ -139,6 +142,7 @@ export default class NotificationComp extends React.Component<
       isExternal,
       hasMention,
       color,
+      isFederatedEnabled,
     );
     const closeImgFilePath = `../renderer/assets/close-icon-${themeClassName}.svg`;
     let containerCssClass = `container ${themeClassName} `;
@@ -147,6 +151,7 @@ export default class NotificationComp extends React.Component<
       flash,
       isExternal,
       hasMention,
+      isFederatedEnabled,
     );
     containerCssClass += customCssClasses.join(' ');
     return (

src/renderer/notification-theme.ts

@@ -61,10 +61,18 @@ export const getContainerCssClasses = (
   flash,
   isExternal,
   hasMention,
+  isFederatedEnabled = false,
 ): string[] => {
   const customClasses: string[] = [];
   if (flash && theme) {
-    if (isExternal) {
+    if (isFederatedEnabled) {
+      customClasses.push('federated-border');
+      if (hasMention) {
+        customClasses.push(`${theme}-federated-mention-flashing`);
+      } else {
+        customClasses.push(`${theme}-federated-flashing`);
+      }
+    } else if (isExternal) {
       customClasses.push('external-border');
       if (hasMention) {
         customClasses.push(`${theme}-ext-mention-flashing`);
@@ -131,13 +139,32 @@ export const getThemeColors = (
   isExternal,
   hasMention,
   color,
+  isFederatedEnabled = false,
 ): { [key: string]: string } => {
   const currentColors =
     theme === Themes.DARK ? { ...Colors.dark } : { ...Colors.light };
   const externalFlashingBackgroundColor =
     theme === Themes.DARK ? '#70511f' : '#f6e5a6';
+
+  const federatedFlashingBackgroundColor =
+    theme === Themes.DARK ? '#32602F' : '#D6EBD5';
   if (flash && theme) {
-    if (isExternal) {
+    if (isFederatedEnabled) {
+      if (!hasMention) {
+        currentColors.notificationBorderColor = '#65C862';
+        currentColors.notificationBackgroundColor =
+          federatedFlashingBackgroundColor;
+        if (isCustomColor(color)) {
+          currentColors.notificationBorderColor = getThemedCustomBorderColor(
+            theme,
+            color,
+          );
+          currentColors.notificationBackgroundColor = color;
+        }
+      } else {
+        currentColors.notificationBorderColor = '#65C862';
+      }
+    } else if (isExternal) {
       if (!hasMention) {
         currentColors.notificationBorderColor = '#F7CA3B';
         currentColors.notificationBackgroundColor =
@@ -179,6 +206,8 @@ export const getThemeColors = (
         theme,
         color,
       );
+    } else if (isFederatedEnabled) {
+      currentColors.notificationBorderColor = '#65C862';
     } else if (isExternal) {
       currentColors.notificationBorderColor = '#F7CA3B';
     }

src/renderer/notification.ts

@@ -279,6 +279,7 @@ class Notification extends NotificationHandler {
       hasIgnore,
       hasReply,
       hasMention,
+      isFederatedEnabled,
     } = data;
     notificationWindow.webContents.send('notification-data', {
       title,
@@ -295,6 +296,7 @@ class Notification extends NotificationHandler {
       hasIgnore,
       hasReply,
       hasMention,
+      isFederatedEnabled,
     });
     notificationWindow.showInactive();
   }

src/renderer/styles/call-notification.less

@@ -350,6 +350,14 @@ text {
   animation: light-ext-flashing 1s infinite !important;
 }
 
+.dark-federated-flashing {
+  animation: dark-federated-flashing 1s infinite !important;
+}
+
+.light-federated-flashing {
+  animation: light-federated-flashing 1s infinite !important;
+}
+
 .dark-mention-flashing {
   animation: dark-mention-flashing 1s infinite !important;
 }
@@ -365,3 +373,11 @@ text {
 .light-ext-mention-flashing {
   animation: light-ext-mention-flashing 1s infinite !important;
 }
+
+.dark-federated-mention-flashing {
+  animation: dark-federated-mention-flashing 1s infinite !important;
+}
+
+.light-federated-mention-flashing {
+  animation: light-federated-mention-flashing 1s infinite !important;
+}

src/renderer/styles/notification-comp.less

@@ -167,6 +167,10 @@ body {
   }
 }
 
+.federated-border {
+  border: 2px solid #65c862;
+}
+
 .external-border {
   border: 2px solid #f7ca3b;
 }
@@ -359,6 +363,14 @@ body {
   animation: light-ext-flashing 1s infinite !important;
 }
 
+.dark-federated-flashing {
+  animation: dark-federated-flashing 1s infinite !important;
+}
+
+.light-federated-flashing {
+  animation: light-federated-flashing 1s infinite !important;
+}
+
 .dark-mention-flashing {
   animation: dark-mention-flashing 1s infinite !important;
 }
@@ -374,3 +386,11 @@ body {
 .light-ext-mention-flashing {
   animation: light-ext-mention-flashing 1s infinite !important;
 }
+
+.dark-federated-mention-flashing {
+  animation: dark-federated-mention-flashing 1s infinite !important;
+}
+
+.light-federated-mention-flashing {
+  animation: light-federated-mention-flashing 1s infinite !important;
+}

src/renderer/styles/notifications-animations.less

@@ -49,6 +49,30 @@
   }
 }
 
+@keyframes dark-federated-mention-flashing {
+  0% {
+    background-color: @dark-notification-bg-color;
+    border-color: @dark-federated-flash-border-color;
+  }
+  50% {
+    background-color: @dark-mention-flash-bg-color;
+    border: 2px solid @dark-mention-flash-border-color;
+    box-shadow: 0px 2px 4px rgba(5, 6, 6, 0.16),
+      0px 12px 28px rgba(5, 6, 6, 0.64);
+  }
+}
+
+@keyframes light-federated-mention-flashing {
+  0% {
+    background-color: @light-notification-bg-color;
+    border-color: @light-federated-flash-border-color;
+  }
+  50% {
+    background-color: @light-mention-flash-mention-bg-color;
+    border-color: @light-mention-flash-border-color;
+  }
+}
+
 @keyframes light-flashing {
   50% {
     background-color: @light-notification-bg-color;
@@ -76,3 +100,17 @@
     border-color: @dark-external-flash-border-color;
   }
 }
+
+@keyframes light-federated-flashing {
+  50% {
+    background-color: @light-notification-bg-color;
+    border-color: @light-federated-flash-border-color;
+  }
+}
+
+@keyframes dark-federated-flashing {
+  50% {
+    background-color: @dark-notification-bg-color;
+    border-color: @dark-federated-flash-border-color;
+  }
+}

src/renderer/styles/variables.less

@@ -6,6 +6,7 @@
 @dark-mention-flash-bg-color: #99342c;
 @dark-mention-flash-border-color: #ff5d50;
 @dark-external-flash-border-color: #f7ca3b;
+@dark-federated-flash-border-color: #65c862;
 @dark-external-flash-bg-color: #70511f;
 
 @light-notification-bg-color: #f1f1f3;
@@ -14,4 +15,5 @@
 @light-mention-flash-mention-bg-color: #fcc1b9;
 @light-mention-flash-border-color: #ff5d50;
 @light-external-flash-border-color: #f7ca3b;
+@light-federated-flash-border-color: #65c862;
 @light-external-flash-bg-color: #f6e5a6;