From 6217cd1d62e22659f13b15bac407f595ce13fe11 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 10 Jan 2020 10:34:42 +0300
Subject: [PATCH 1/5] feat(theme-basic): add toast-container component to
 layout

related issue: #2537
---
 .../src/lib/components/empty-layout/empty-layout.component.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
index c6082aadd4..4f1dac52ca 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
@@ -6,7 +6,7 @@ import { eLayoutType } from '@abp/ng.core';
   template: `
     <router-outlet></router-outlet>
     <abp-confirmation></abp-confirmation>
-    <abp-toast></abp-toast>
+    <abp-toast-container right="30px" bottom="30px"></abp-toast-container>
   `,
 })
 export class EmptyLayoutComponent {

From 6b3d7433cbc7ab50e575c989bec1780df1874d4e Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 10 Jan 2020 10:35:11 +0300
Subject: [PATCH 2/5] refactor(theme-shared): change opacity and icon size

related issue: #2537
---
 .../src/lib/components/toast/toast.component.scss            | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
index 98ce628954..1bd780815c 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
@@ -18,9 +18,11 @@
   padding: 10px;
   border-radius: 0px;
   width: 350px;
-  @include fillColor(#f0f0f0, #000);
   user-select: none;
   box-shadow: 0 0 10px -5px rgba(#000, 0.4);
+  z-index: 9999;
+  @include fillColor(#f0f0f0, #000);
+  opacity: 1;
   &.toast-success {
     @include fillColor(#51a351, #fff);
   }
@@ -38,6 +40,7 @@
     align-items: center;
     justify-content: center;
     .icon {
+      font-size: 36px;
     }
   }
   .toast-content {

From 835a17b513ecafc1f257ec7bd9ed8f98c08c21fd Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 10 Jan 2020 10:35:55 +0300
Subject: [PATCH 3/5] fix(theme-shared): correct css class names for
 confirmation icons

related issue: #2537
---
 .../components/confirmation/confirmation.component.ts  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
index 564c570904..4f16d528af 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.ts
@@ -20,15 +20,15 @@ export class ConfirmationComponent {
   get iconClass(): string {
     switch (this.data.severity) {
       case 'info':
-        return 'info-circle';
+        return 'fa-info-circle';
       case 'success':
-        return 'check-circle';
+        return 'fa-check-circle';
       case 'warning':
-        return 'exclamation-triangle';
+        return 'fa-exclamation-triangle';
       case 'error':
-        return 'times-circle';
+        return 'fa-times-circle';
       default:
-        return 'question-circle-o';
+        return 'fa-question-circle';
     }
   }
 

From f0158d4d50cb7f06dab401b6dcbb6d4c862ad296 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 10 Jan 2020 10:36:47 +0300
Subject: [PATCH 4/5] feat(theme-shared): change icon color to severity color

related issue: #2537
---
 .../confirmation/confirmation.component.html  |  2 +-
 .../confirmation/confirmation.component.scss  | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
index e2bffd53d4..07faa3a8a7 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.html
@@ -1,7 +1,7 @@
 <div class="confirmation show" *ngIf="visible">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
-    <div class="icon-container">
+    <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
       <i class="fa icon" [ngClass]="iconClass"></i>
     </div>
     <div class="content">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
index 047b516d15..3b43c170de 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
@@ -40,8 +40,27 @@
         width: 100px;
         height: 100px;
         stroke-width: 1;
-        stroke: #f89406;
         fill: #fff;
+        font-size: 80px;
+        text-align: center;
+      }
+      &.neutral .icon {
+      }
+      &.info .icon {
+        stroke: #2f96b4;
+        color: #2f96b4;
+      }
+      &.success .icon {
+        stroke: #51a351;
+        color: #51a351;
+      }
+      &.warning .icon {
+        stroke: #f89406;
+        color: #f89406;
+      }
+      &.error .icon {
+        stroke: #bd362f;
+        color: #bd362f;
       }
     }
     .content {

From 3e40fc3a7b78aa2821b957a61ee0fb03555d124d Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 10 Jan 2020 10:45:00 +0300
Subject: [PATCH 5/5] fix(theme-shared): change z-index of container element

related issue: #2537
---
 .../lib/components/confirmation/confirmation.component.scss  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
index 3b43c170de..04bc4d6f84 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/confirmation/confirmation.component.scss
@@ -6,6 +6,7 @@
   left: 0;
   display: none;
   place-items: center;
+  z-index: 1060;
   &.show {
     display: grid;
   }
@@ -16,7 +17,7 @@
     width: 100vw;
     height: 100vh;
     background-color: rgba(#000, 0.7);
-    z-index: 1040;
+    z-index: 1061 !important;
   }
   .confirmation-dialog {
     display: flex;
@@ -29,7 +30,7 @@
     min-height: 300px;
     background-color: #fff;
     box-shadow: 0 0 10px -5px rgba(#000, 0.5);
-    z-index: 1050;
+    z-index: 1062 !important;
     .icon-container {
       display: flex;
       align-items: center;