feature(theme-shared): add style class to confirmation and toast components

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

@@ -11,26 +11,25 @@ import { Toaster } from '../../models/toaster';
       (onClose)="close(dismiss)"
       [modal]="true"
       [baseZIndex]="1000"
-      styleClass=""
+      styleClass="abp-confirm"
     >
       <ng-template let-message pTemplate="message">
-        <div *ngIf="message.summary" class="modal-header">
-          <h4 class="modal-title">
-            {{ message.summary | abpLocalization: message.titleLocalizationParams }}
-          </h4>
+        <i class="fa fa-exclamation-circle abp-confirm-icon"></i>
+        <div *ngIf="message.summary" class="abp-confirm-summary">
+          {{ message.summary | abpLocalization: message.titleLocalizationParams }}
         </div>
-        <div class="modal-body">
+        <div class="abp-confirm-body">
           {{ message.detail | abpLocalization: message.messageLocalizationParams }}
         </div>
 
-        <div class="modal-footer justify-content-center">
-          <button *ngIf="!message.hideCancelBtn" type="button" class="btn btn-secondary" (click)="close(reject)">
+        <div class="abp-confirm-footer justify-content-center">
+          <button *ngIf="!message.hideCancelBtn" type="button" class="btn btn-sm btn-primary" (click)="close(reject)">
             {{ message.cancelCopy || 'AbpIdentity::Cancel' | abpLocalization }}
           </button>
           <button
             *ngIf="!message.hideYesBtn"
             type="button"
-            class="btn btn-secondary"
+            class="btn btn-sm btn-primary"
             (click)="close(confirm)"
             autofocus
           >

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

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'abp-toast',
   template: `
-    <p-toast position="bottom-right" key="abpToast" [baseZIndex]="1000">
+    <p-toast position="bottom-right" key="abpToast" styleClass="abp-toast" [baseZIndex]="1000">
       <ng-template let-message pTemplate="message">
         <span
           class="ui-toast-icon pi"

npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts

@@ -45,6 +45,111 @@ export default `
   white-space: nowrap;
 }
 
+.abp-toast .ui-toast-message {
+  box-sizing: border-box !important;
+  border: 2px solid transparent !important;
+  border-radius: 4px !important;
+  background-color: #f4f4f7 !important;
+  color: #1b1d29 !important;
+}
+
+.abp-toast .ui-toast-message-content {
+  padding: 10px !important;
+}
+
+.abp-toast .ui-toast-message-content .ui-toast-icon {
+  top: 0 !important;
+  left: 0 !important;
+  padding: 10px !important;
+}
+
+.abp-toast .ui-toast-summary {
+  margin: 0 !important;
+  font-weight: 700 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-error {
+  border-color: #ba1659 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-error .ui-toast-message-content .ui-toast-icon {
+  color: #ba1659 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-warning {
+  border-color: #ed5d98 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-warning .ui-toast-message-content .ui-toast-icon {
+  color: #ed5d98 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-success {
+  border-color: #1c9174 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-success .ui-toast-message-content .ui-toast-icon {
+  color: #1c9174 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-info {
+  border-color: #fccb31 !important;
+}
+
+.abp-toast .ui-toast-message.ui-toast-message-info .ui-toast-message-content .ui-toast-icon {
+  color: #fccb31 !important;
+}
+
+.abp-confirm .ui-toast-message {
+  box-sizing: border-box !important;
+  padding: 0px !important;
+  border:0 none !important;
+  border-radius: 4px !important;
+  background-color: #fff !important;
+  color: rgba(0, 0, 0, .65) !important;
+  font-family: "Poppins", sans-serif;
+  text-align: center !important;
+}
+
+.abp-confirm .ui-toast-message-content {
+  padding: 0px !important;
+}
+
+.abp-confirm .abp-confirm-icon {
+  margin: 32px 50px 5px !important;
+  color: #f8bb86 !important;
+  font-size: 52px !important;
+}
+
+.abp-confirm .ui-toast-close-icon {
+  display: none !important;
+}
+
+.abp-confirm .abp-confirm-summary {
+  display: block !important;
+  margin-bottom: 13px !important;
+  padding: 13px 16px 0px !important;
+  font-weight: 600 !important;
+  font-size: 18px !important;
+}
+
+.abp-confirm .abp-confirm-body {
+  display: inline-block !important;
+  padding: 0px 10px !important;
+}
+
+.abp-confirm .abp-confirm-footer {
+  display: block !important;
+  margin-top: 30px !important;
+  padding: 16px !important;
+  background-color: #f4f4f7 !important;
+  text-align: right !important;
+}
+
+.abp-confirm .abp-confirm-footer .btn {
+  margin-left: 10px !important;
+}
+
 /* <animations */
 
 .fade-in-top {