Merge pull request #15252 from opf/40147-snackbar-toast-informing-use…

…rs-of-new-notifications-has-the-wrong-icon [40147] Snackbar/toast informing users of new notifications has the wrong icon
opf · Apr 17, 2024 · ae23279 · ae23279
2 parents 31d1df9 + 3a73b1c
commit ae23279
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
@@ -695,7 +695,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"

diff --git a/frontend/src/app/features/in-app-notifications/center/state/ian-center.service.ts b/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'),

diff --git a/frontend/src/app/shared/components/toaster/toast.component.html b/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>

diff --git a/frontend/src/app/shared/components/toaster/toast.component.ts b/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);
 

diff --git a/frontend/src/app/shared/components/toaster/toast.service.ts b/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,
       };
   }

diff --git a/frontend/src/global_styles/content/_toast.sass b/frontend/src/global_styles/content/_toast.sass
@@ -46,7 +46,8 @@ $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-error-icon: var(--content-form-danger-zone-bg-color)
 
 $nm-color-border: #8fc0db
 $nm-color-background: #e3f5ff
@@ -66,19 +67,15 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 
 %nm-icon-error
   @include icon-mixin-error
-  color: var(--content-form-danger-zone-bg-color)
 
 %nm-icon-success
   @include icon-mixin-checkmark
-  color: $nm-color-success-icon
 
 %nm-icon-warning
   @include icon-mixin-warning
-  color: $nm-color-warning-icon
 
 %nm-icon-info
   @include icon-mixin-info1
-  color: $nm-color-info-icon
 
 %error-placeholder
   background-color: $nm-color-error-background
@@ -146,30 +143,46 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
     @extend %error-placeholder
 
     &::before
+      color: $nm-color-error-icon
+
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-error
 
   &.-success
     @extend %success-placeholder
 
     &::before
+      color: $nm-color-success-icon
+
+    &:not(.toast-icon)::before
       @include messages-icon
       @extend %nm-icon-success
 
   &.-warning
     @extend %warning-placeholder
 
     &::before
+      color: $nm-color-warning-icon
+
+    &: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
 
@@ -372,7 +385,7 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 
     &::before
       @extend %nm-icon-error
-      color: var(--content-form-danger-zone-bg-color)
+      color: $nm-color-error-icon
 
   &.info
     @extend %info-placeholder