[40147] Snackbar/toast informing users of new notifications has the wrong icon

config/locales/js-en.yml

@@ -693,7 +693,7 @@ en:
           no_selection: "Click on a notification to view all activity details."
         new_notifications:
           message: "There are new notifications."
-          link_text: "Click here to load them"
+          link_text: "Click here to load them."
       menu:
         accountable: "Accountable"
         by_project: "Unread by project"

frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts

@@ -330,6 +330,7 @@ export class IanCenterService extends UntilDestroyedMixin {
 
       this.activeReloadToast = this.toastService.add({
         type: 'info',
+        icon: 'bell',
         message: this.I18n.t('js.notifications.center.new_notifications.message'),
         link: {
           text: this.I18n.t('js.notifications.center.new_notifications.link_text'),

frontend/src/app/shared/components/toaster/toast.component.html

@@ -1,4 +1,4 @@
-<div class="op-toast -{{ type }}" tabindex="0">
+<div class="op-toast -{{ type }} {{ icon }}" tabindex="0">
   <div class="op-toast--content" role="alert" aria-atomic="true">
     <ng-container *ngIf="type === 'loading'">
       <p [textContent]="toast.message"></p>

frontend/src/app/shared/components/toaster/toast.component.ts

@@ -59,6 +59,8 @@ export class ToastComponent implements OnInit {
 
   public type:ToastType;
 
+  public icon?:string;
+
   public uploadCount = 0;
 
   public show = false;
@@ -77,6 +79,7 @@ export class ToastComponent implements OnInit {
 
   ngOnInit():void {
     this.type = this.toast.type;
+    this.icon = this.toast.icon ? `toast-icon icon-${this.toast.icon}` : '';
 
     this.removable = !['upload', 'loading'].includes(this.type);
 

frontend/src/app/shared/components/toaster/toast.service.ts

@@ -46,6 +46,7 @@ export const OPToastEvent = 'op:toasters:add';
 
 export interface IToast {
   message:string;
+  icon?:string;
   link?:{ text:string, target:() => void };
   type:ToastType;
   data?:unknown;
@@ -183,6 +184,7 @@ export class ToastService {
         message: toast.message,
         type,
         link: toast.link,
+        icon: toast.icon,
         data: toast.data,
       };
   }

frontend/src/global_styles/content/_toast.sass

@@ -46,7 +46,7 @@ $nm-color-warning-border: #ef9e56
 $nm-color-warning-icon: #ef9e56
 $nm-color-warning-background: #ffe6c6
 
-$nm-color-info-icon: #333
+$nm-color-info-icon: #155282
 
 $nm-color-border: #8fc0db
 $nm-color-background: #e3f5ff
@@ -78,7 +78,6 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 
 %nm-icon-info
   @include icon-mixin-info1
-  color: $nm-color-info-icon
 
 %error-placeholder
   background-color: $nm-color-error-background
@@ -145,31 +144,38 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   &.-error
     @extend %error-placeholder
 
-    &::before
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-error
 
   &.-success
     @extend %success-placeholder
 
-    &::before
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-success
 
   &.-warning
     @extend %warning-placeholder
 
-    &::before
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-warning
 
   &.-info
     @extend %info-placeholder
 
     &::before
+      color: $nm-color-info-icon
+
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-info
 
+  &.toast-icon
+    &::before
+      @include messages-icon
+
   &.-loading
     @extend %info-placeholder
 

spec/support/pages/notifications/center.rb

@@ -143,15 +143,15 @@ def bell_element
       end
 
       def expect_no_toaster
-        expect(page).to have_no_css('.op-toast.-info', wait: 10)
+        expect(page).to have_no_css(".op-toast.-notification-icon", wait: 10)
       end
 
       def expect_toast
-        expect(page).to have_css('.op-toast.-info', wait: 10)
+        expect(page).to have_css(".op-toast.-notification-icon", wait: 10)
       end
 
       def update_via_toaster
-        page.find('.op-toast.-info a', wait: 10).click
+        page.find(".op-toast.-notification-icon a", wait: 10).click
       end
     end
   end