Differentiate badge icon/color for indirect notifications (#590)

* feat: Differentiate between indirect and direct notifications
  - Windows - Replace the icon used for showing indirect notifications in the taskbar to a blue(#0088cc) color (like slack, google chat etd)
  - All Platforms - Replace the red color used for indirect notifications in tabbed view for a service to #0088cc (Blue) color

* Indirect notification icons in tray and tabs

Co-authored-by: Feiko Joosten <feiko_joosten@hotmail.com>
Co-authored-by: Sampath Kumar Krishnan <sampathBlam@users.noreply.github.com>

14 files changed, 21 insertions, 5 deletions

diff --git a/src/assets/images/taskbar/win32/taskbar-alert.ico b/src/assets/images/taskbar/win32/taskbar-alert.ico
index 5b349c2b6..d80333711 100644
--- a/src/assets/images/taskbar/win32/taskbar-alert.ico
+++ b/src/assets/images/taskbar/win32/taskbar-alert.ico
diff --git a/src/assets/images/tray/darwin-dark/tray-indirect-active.png b/src/assets/images/tray/darwin-dark/tray-indirect-active.png
new file mode 100644
index 000000000..b0f68c1ea
--- /dev/null
+++ b/src/assets/images/tray/darwin-dark/tray-indirect-active.png
diff --git a/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png b/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png
new file mode 100644
index 000000000..c863fd144
--- /dev/null
+++ b/src/assets/images/tray/darwin-dark/tray-indirect-active@2x.png
diff --git a/src/assets/images/tray/darwin-dark/tray-indirect.png b/src/assets/images/tray/darwin-dark/tray-indirect.png
new file mode 100644
index 000000000..b0f68c1ea
--- /dev/null
+++ b/src/assets/images/tray/darwin-dark/tray-indirect.png
diff --git a/src/assets/images/tray/darwin-dark/tray-indirect@2x.png b/src/assets/images/tray/darwin-dark/tray-indirect@2x.png
new file mode 100644
index 000000000..c863fd144
--- /dev/null
+++ b/src/assets/images/tray/darwin-dark/tray-indirect@2x.png
diff --git a/src/assets/images/tray/darwin/tray-indirect-active.png b/src/assets/images/tray/darwin/tray-indirect-active.png
new file mode 100644
index 000000000..b0f68c1ea
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-indirect-active.png
diff --git a/src/assets/images/tray/darwin/tray-indirect-active@2x.png b/src/assets/images/tray/darwin/tray-indirect-active@2x.png
new file mode 100644
index 000000000..c863fd144
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-indirect-active@2x.png
diff --git a/src/assets/images/tray/darwin/tray-indirect.png b/src/assets/images/tray/darwin/tray-indirect.png
new file mode 100644
index 000000000..d7667600b
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-indirect.png
diff --git a/src/assets/images/tray/darwin/tray-indirect@2x.png b/src/assets/images/tray/darwin/tray-indirect@2x.png
new file mode 100644
index 000000000..bc5910bc7
--- /dev/null
+++ b/src/assets/images/tray/darwin/tray-indirect@2x.png
diff --git a/src/assets/images/tray/linux/tray-indirect.png b/src/assets/images/tray/linux/tray-indirect.png
new file mode 100644
index 000000000..9f5c357eb
--- /dev/null
+++ b/src/assets/images/tray/linux/tray-indirect.png
diff --git a/src/assets/images/tray/linux/tray-indirect@2x.png b/src/assets/images/tray/linux/tray-indirect@2x.png
new file mode 100644
index 000000000..495c7e1cc
--- /dev/null
+++ b/src/assets/images/tray/linux/tray-indirect@2x.png
diff --git a/src/assets/images/tray/win32/tray-indirect.ico b/src/assets/images/tray/win32/tray-indirect.ico
new file mode 100644
index 000000000..bc48a4eef
--- /dev/null
+++ b/src/assets/images/tray/win32/tray-indirect.ico
diff --git a/src/lib/Tray.js b/src/lib/Tray.js
index 3700cca27..8928c97bc 100644
--- a/src/lib/Tray.js
+++ b/src/lib/Tray.js
@@ -6,6 +6,7 @@ import path from 'path';
 const FILE_EXTENSION = process.platform === 'win32' ? 'ico' : 'png';
 const INDICATOR_TRAY_PLAIN = 'tray';
 const INDICATOR_TRAY_UNREAD = 'tray-unread';
+const INDICATOR_TRAY_INDIRECT = 'tray-indirect';
 
 export default class TrayIcon {
   trayIcon = null;
@@ -103,14 +104,23 @@ export default class TrayIcon {
     this._refreshIcon();
   }
 
+  _getAssetFromIndicator(indicator) {
+    if (indicator === '•') {
+      return INDICATOR_TRAY_INDIRECT;
+    } if (indicator !== 0) {
+      return INDICATOR_TRAY_UNREAD;
+    }
+    return INDICATOR_TRAY_PLAIN;
+  }
+
   _refreshIcon() {
     if (!this.trayIcon) return;
 
-    this.trayIcon.setImage(this._getAsset('tray', this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN));
+    this.trayIcon.setImage(this._getAsset('tray', this._getAssetFromIndicator(this.indicator)));
 
     if (process.platform === 'darwin') {
       this.trayIcon.setPressedImage(
-        this._getAsset('tray', `${this.indicator !== 0 ? INDICATOR_TRAY_UNREAD : INDICATOR_TRAY_PLAIN}-active`),
+        this._getAsset('tray', `${this._getAssetFromIndicator(this.indicator)}-active`),
       );
     }
   }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 5bd0555d2..65ca97a54 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -52,7 +52,7 @@
 
   .tab-item__message-count {
     align-items: center;
-    background: $theme-brand-danger;
+    background: #0088cc;
     border-radius: 20px;
     bottom: 8px;
     color: #FFF;
@@ -65,7 +65,10 @@
     position: absolute;
     right: 8px;
 
-    &.is-indirect { padding-top: 0; }
+    &.is-indirect { 
+      padding-top: 0;
+      background: #0088cc;
+        }
     &.hibernating { 
       padding-top: 0; 
       background: $theme-gray; 
@@ -92,7 +95,10 @@
     right: 8px;
     width: 17px;
 
-    &.is-indirect { padding-top: 0; }
+    &.is-indirect { 
+      padding-top: 0;
+      background: #0088cc;
+        }
   }
 
   &.is-reordering { z-index: 99999; }