Prefer using our icons for notifications

3 files changed, 17 insertions, 7 deletions

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 6969329e8..629c04e6b 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -53,9 +53,7 @@
         <p>{{ message.detail }}</p>
       </div>
 
-      <span *ngIf="message.severity === 'success'" class="glyphicon glyphicon-ok"></span>
-      <span *ngIf="message.severity === 'info'" class="glyphicon glyphicon-info-sign"></span>
-      <span *ngIf="message.severity === 'error'" class="glyphicon glyphicon-remove"></span>
+      <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
     </div>
   </ng-template>
 </p-toast>
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index a60138af9..8fdab0c40 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -31,6 +31,7 @@ import { BroadcastMessageLevel, HTMLServerConfig, UserRole } from '@shared/model
 import { MenuService } from './core/menu/menu.service'
 import { POP_STATE_MODAL_DISMISS } from './helpers'
 import { InstanceService } from './shared/shared-instance'
+import { GlobalIconName } from './shared/shared-icons'
 
 @Component({
   selector: 'my-app',
@@ -150,6 +151,17 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.screenService.isBroadcastMessageDisplayed = false
   }
 
+  getNotificationIcon (message: { severity: 'success' | 'error' | 'info' }): GlobalIconName {
+    switch (message.severity) {
+      case 'error':
+        return 'cross'
+      case 'success':
+        return 'tick'
+      case 'info':
+        return 'help'
+    }
+  }
+
   private initRouteEvents () {
     const eventsObs = this.router.events
 
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index a66e4485b..ef117ae34 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -927,19 +927,19 @@ p-toast {
     box-shadow: 0 2px 12px 0 rgba(0, 0 , 0, .1);
     overflow: hidden;
 
-    &.p-toast-message-success .glyphicon {
+    &.p-toast-message-success my-global-icon {
       color: #8BC34A !important;
     }
 
-    &.p-toast-message-error .glyphicon {
+    &.p-toast-message-error my-global-icon {
       color: #F44336 !important;
     }
 
-    &.p-toast-message-warn .glyphicon {
+    &.p-toast-message-warn my-global-icon {
       color: #F1680D !important;
     }
 
-    &.p-toast-message-info .glyphicon {
+    &.p-toast-message-info my-global-icon {
       color: #03A9F4 !important;
     }