update: toastr styles

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html

@@ -1,11 +1,11 @@
 <div class="abp-toast" [ngClass]="severityClass" (click)="tap()">
   <div class="abp-toast-icon">
-    <i class="fa icon" [ngClass]="iconClass" aria-hidden="true"></i>
+    <i class="bi icon" [ngClass]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
     @if (toast.options?.closable) {
       <button class="abp-toast-close-button" (click)="close()">
-        <i class="fa fa-times" aria-hidden="true"></i>
+        <i class="bi bi-x fs-4" aria-hidden="true"></i>
       </button>
     }
     <div class="abp-toast-title">

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss

@@ -14,35 +14,39 @@ $toastClass: abp-toast;
 
 .#{$toastClass} {
   display: grid;
-  grid-template-columns: 50px 1fr;
+  grid-template-columns: 35px 1fr;
   gap: 10px;
   margin: 5px 0;
-  padding: 10px;
+  padding: 7px;
-  border-radius: 0px;
   width: 350px;
   user-select: none;
   box-shadow: 0 0 10px -5px rgba(#000, 0.4);
   z-index: 9999;
+  color: #fff;
+  border-radius: 8px;
+  font-size: 14px;
+  box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
+
   @include fillColor(#f0f0f0, #000);
   opacity: 1;
   &.#{$toastClass}-success {
-    @include fillColor(#51a351, #fff);
+    @include fillColor(#4fbf67, #fff);
   }
   &.#{$toastClass}-info {
-    @include fillColor(#2f96b4, #fff);
+    @include fillColor(#438aa7, #fff);
   }
   &.#{$toastClass}-warning {
-    @include fillColor(#f89406, #fff);
+    @include fillColor(#ff9f38, #fff);
   }
   &.#{$toastClass}-error {
-    @include fillColor(#bd362f, #fff);
+    @include fillColor(#c00d49, #fff);
   }
   .#{$toastClass}-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     .icon {
-      font-size: 36px;
+      font-size: 32px;
     }
   }
   .#{$toastClass}-content {

npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts

@@ -18,22 +18,22 @@ export class ToastComponent implements OnInit {
 
   get iconClass(): string {
     const { iconClass } = this.toast.options || {};
-    
+
     if (iconClass) {
       return iconClass;
     }
 
     switch (this.toast.severity) {
       case 'success':
-        return 'fa-check-circle';
+        return 'bi-check';
       case 'info':
-        return 'fa-info-circle';
+        return 'bi-info-circle';
       case 'warning':
-        return 'fa-exclamation-triangle';
+        return 'bi-exclamation-triangle';
       case 'error':
-        return 'fa-times-circle';
+        return 'bi-shield-exclamation';
       default:
-        return 'fa-exclamation-circle';
+        return 'bi-exclamation-triangle';
     }
   }