mgr/dashboard: Fix color issue of notification panel

The global header css of navigation panel was overriding the color of notifications.

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
index 03135a10b5e2a55ca3ab0639839706384d40c7c0..8dd5a48e7d78b0377d68c821cf2cd3ca5cfa6e6a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
@@ -1,11 +1,10 @@
-<!-- Reusable notification item template -->
 <ng-template #notificationItemTemplate
              let-notification="notification"
              let-last="last">
   <div class="notification-wrapper">
     <div class="notification-item">
       <div class="notification-icon">
-        <cd-icon [type]="notificationIconMap[notification.type] || 'info'">
+        <cd-icon [type]="notificationIconMap[notification.type] || notificationIconMap['default']">
         </cd-icon>
       </div>
       <div class="notification-content">

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
index 8bba8a443df8887ff92e998ec374913a9a57f131..4330990616d99852bf75a62de0fc0cb90a3986e7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
@@ -16,9 +16,10 @@ export class NotificationAreaComponent implements OnInit, OnDestroy {
 
   readonly notificationIconMap = {
     [NotificationType.success]: 'success',
-    [NotificationType.error]: 'danger',
-    [NotificationType.info]: 'info',
-    [NotificationType.warning]: 'warning'
+    [NotificationType.error]: 'error',
+    [NotificationType.info]: 'infoCircle',
+    [NotificationType.warning]: 'warning',
+    default: 'infoCircle'
   } as const;
 
   constructor(private notificationService: NotificationService) {}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
index ed6aecdcec051d5647106c7ebc8f99931ab36a1f..8daf9176b309a9ae6a512a0ccb27d528b15f25cc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
@@ -3,9 +3,9 @@
    [ngClass]="{ 'running': hasRunningTasks }"
    (click)="togglePanel($event)">
   <div class="notification-icon-wrapper">
-    <svg cdsIcon="notification"
-         size="20"
-         title="notification"></svg>
+    <cd-icon type="notification"
+             size="20">
+    </cd-icon>
     <span class="notification-count"
           *ngIf="notificationCount > 0">
       {{ notificationCount }}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
index a10d058b8a7c1f676ca135a3af21ae04eaa11743..544c16f6a2429d01fd409bb12e71ed214568bc00 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss
@@ -1,27 +1,40 @@
 @use '@carbon/styles/scss/theme';
 
+/*
+!important required to override the parent component's carbon css.
+
+e.g. carbon header adds following which changes colors of notification panel icons:
+
+.cds--btn.cds--btn--icon-only.cds--header__action svg {
+    fill: var(--cds-icon-secondary, #c6c6c6);
+ }
+
+Also  using 'fill' as that is coming from carbon (see above example).
+Using `color` in css and seyting svg will fill="currentColor does not work.
+*/
+
 .success-icon {
-  color: theme.$support-success;
+  fill: theme.$support-success !important;
 }
 
 .danger-icon {
-  color: theme.$support-error;
+  fill: theme.$support-error !important;
 }
 
 //@TODO: this naming needs to be changed
 // Do this after converting Icons enum to const
 .infoCircle-icon {
-  color: theme.$support-info;
+  fill: theme.$support-info !important;
 }
 
 .warning-icon {
-  color: theme.$support-caution-major;
+  fill: theme.$support-caution-major !important;
 }
 
 .error-icon {
-  color: theme.$support-error;
+  fill: theme.$support-error !important;
 }
 
 .info-icon {
-  color: theme.$support-info;
+  fill: theme.$support-info !important;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 197e1ab2396589c660674d8fd1ef0124969ca7cc..697fc17d101887117dbe320408a633c5d8b00725 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -99,7 +99,9 @@ export enum Icons {
   stack2x = 'fa fa-stack-2x', // To stack regularly sized icon
   pulse = 'fa fa-pulse', // To have spinner rotate with 8 steps
   spin = 'fa fa-spin', //  To get any icon to rotate
-  inverse = 'fa fa-inverse' // To get an alternative icon color
+  inverse = 'fa fa-inverse', // To get an alternative icon color
+  notification = 'notification',
+  error = 'error--filled'
 }
 
 export enum IconSize {
@@ -110,11 +112,13 @@ export enum IconSize {
 }
 
 export const ICON_TYPE = {
+  check: 'check',
   copy: 'copy',
   danger: 'danger',
+  edit: 'edit',
+  error: 'error--filled',
   infoCircle: 'info-circle',
+  notification: 'notification',
   success: 'success',
-  warning: 'warning',
-  edit: 'edit',
-  check: 'check'
+  warning: 'warning'
 } as const;