[ACS-7448] Fix wrong notifications colors

lib/core/src/lib/notifications/services/notification.service.ts

@@ -21,7 +21,7 @@ import { TranslationService } from '../../translation/translation.service';
 import { Subject } from 'rxjs';
 import { NotificationModel } from '../models/notification.model';
 import { info, warning, error } from '../helpers/notification.factory';
-import { SnackbarContentComponent }  from '../../snackbar-content';
+import { SnackbarContentComponent } from '../../snackbar-content';
 import { SnackBarData } from '../../snackbar-content/snack-bar-data';
 
 const INFO_SNACK_CLASS = 'adf-info-snackbar';
@@ -34,9 +34,7 @@ const ERROR_SNACK_CLASS = 'adf-error-snackbar';
 export class NotificationService {
     notifications$: Subject<NotificationModel> = new Subject();
 
-    constructor(private snackBar: MatSnackBar,
+    constructor(private snackBar: MatSnackBar, private translationService: TranslationService) {}
-                private translationService: TranslationService) {
-    }
 
     /**
      * Opens a SnackBar notification to show a message.
@@ -46,7 +44,11 @@ export class NotificationService {
      * @param interpolateArgs The interpolation parameters to add for the translation
      * @returns Information/control object for the SnackBar
      */
-    openSnackMessage(message: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
+    openSnackMessage(
+        message: string,
+        config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
+        interpolateArgs?: any
+    ): MatSnackBarRef<any> {
         return this.dispatchNotification(message, null, config, interpolateArgs);
     }
 
@@ -59,7 +61,12 @@ export class NotificationService {
      * @param interpolateArgs The interpolation parameters to add for the translation
      * @returns Information/control object for the SnackBar
      */
-    openSnackMessageAction(message: string, action: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any): MatSnackBarRef<any> {
+    openSnackMessageAction(
+        message: string,
+        action: string,
+        config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
+        interpolateArgs?: any
+    ): MatSnackBarRef<any> {
         return this.dispatchNotification(message, action, config, interpolateArgs);
     }
 
@@ -73,12 +80,17 @@ export class NotificationService {
      * @returns snackbar reference
      */
     showError(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
-        return this.dispatchNotification(message, action, {
+        return this.dispatchNotification(
-            panelClass: ERROR_SNACK_CLASS,
+            message,
-            data: {
+            action,
-                showAction
+            {
-            }
+                panelClass: ERROR_SNACK_CLASS,
-        }, interpolateArgs);
+                data: {
+                    showAction
+                }
+            },
+            interpolateArgs
+        );
     }
 
     /**
@@ -91,12 +103,17 @@ export class NotificationService {
      * @returns snackbar reference
      */
     showInfo(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
-        return this.dispatchNotification(message, action, {
+        return this.dispatchNotification(
-            panelClass: INFO_SNACK_CLASS,
+            message,
-            data: {
+            action,
-                showAction
+            {
-            }
+                panelClass: INFO_SNACK_CLASS,
-        }, interpolateArgs);
+                data: {
+                    showAction
+                }
+            },
+            interpolateArgs
+        );
     }
 
     /**
@@ -109,12 +126,17 @@ export class NotificationService {
      * @returns snackbar reference
      */
     showWarning(message: string, action?: string, interpolateArgs?: any, showAction = true): MatSnackBarRef<any> {
-        return this.dispatchNotification(message, action, {
+        return this.dispatchNotification(
-            panelClass: WARN_SNACK_CLASS,
+            message,
-            data: {
+            action,
-                showAction
+            {
-            }
+                panelClass: WARN_SNACK_CLASS,
-        }, interpolateArgs);
+                data: {
+                    showAction
+                }
+            },
+            interpolateArgs
+        );
     }
 
     /**
@@ -133,25 +155,30 @@ export class NotificationService {
         this.notifications$.next(notification);
     }
 
-    private dispatchNotification(message: string, action?: string, config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>, interpolateArgs?: any):  MatSnackBarRef<any> {
+    private dispatchNotification(
-            const translatedMessage: string = this.translationService.instant(message, interpolateArgs);
+        message: string,
-            const translatedAction: string = this.translationService.instant(action, interpolateArgs);
+        action?: string,
-            const createNotification = this.getNotificationCreator(config);
+        config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>,
-            this.notifications$.next(createNotification(translatedMessage));
+        interpolateArgs?: any
-            return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
+    ): MatSnackBarRef<any> {
-                ...(typeof config === 'number' && {duration: config}),
+        const translatedMessage: string = this.translationService.instant(message, interpolateArgs);
-                panelClass: INFO_SNACK_CLASS,
+        const translatedAction: string = this.translationService.instant(action, interpolateArgs);
-                ...( (typeof config === 'object') ? config : {} ),
+        const createNotification = this.getNotificationCreator(config);
-                data: {
+        this.notifications$.next(createNotification(translatedMessage));
-                  actionLabel: translatedAction,
+        return this.snackBar.openFromComponent<SnackbarContentComponent, SnackBarData>(SnackbarContentComponent, {
-                  actionIcon: 'close',
+            ...(typeof config === 'number' && { duration: config }),
-                  actionIconAriaLabel: 'CLOSE',
+            panelClass: INFO_SNACK_CLASS,
-                  message: translatedMessage,
+            ...(typeof config === 'object' ? config : {}),
-                  showAction: true,
+            data: {
-                  callActionOnIconClick: false,
+                actionLabel: translatedAction,
-                  ...( (typeof config === 'object') ? config.data : {} )
+                actionIcon: 'close',
-                }
+                actionIconAriaLabel: 'CLOSE',
-            });
+                message: translatedMessage,
+                showAction: true,
+                callActionOnIconClick: false,
+                ...(typeof config === 'object' ? config.data : {})
+            }
+        });
     }
 
     private getNotificationCreator(config?: number | MatSnackBarConfig<Omit<SnackBarData, 'actionLabel' | 'message'>>) {

lib/core/src/lib/styles/snackbar.theme.scss

@@ -1,13 +1,24 @@
 @mixin adf-snackbar-theme() {
-    .adf-error-snackbar {
+    /* stylelint-disable selector-class-pattern */
-        background-color: var(--theme-warn-color);
+    .mat-mdc-snack-bar-container {
-    }
+        &.adf-warning-snackbar,
+        &.adf-info-snackbar,
+        &.adf-error-snackbar {
+            --mat-mdc-snack-bar-button-color: #fff;
+            --mdc-snackbar-supporting-text-color: #fff;
+            --mdc-text-button-label-text-color: #fff;
+        }
 
-    .adf-warning-snackbar {
+        &.adf-warning-snackbar {
-        background-color: var(--theme-accent-color);
+            --mdc-snackbar-container-color: var(--theme-accent-color);
-    }
+        }
 
-    .adf-info-snackbar {
+        &.adf-info-snackbar {
-        background-color: var(--theme-primary-color);
+            --mdc-snackbar-container-color: var(--theme-primary-color);
+        }
+
+        &.adf-error-snackbar {
+            --mdc-snackbar-container-color: var(--theme-warn-color);
+        }
     }
 }