From 38b20f83501c92e7e814cbf203b453a483566e7c Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Thu, 16 Jan 2020 13:14:01 +0300
Subject: [PATCH 1/3] refactor(theme-shared): remove confirmation colors

---
 .../confirmation/confirmation.component.html  |  6 +--
 .../confirmation/confirmation.component.scss  | 47 ++-----------------
 2 files changed, 6 insertions(+), 47 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 07faa3a8a7..f2b1417f14 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,4 +1,4 @@
-<div class="confirmation show" *ngIf="visible">
+<div class="confirmation" *ngIf="visible">
   <div class="confirmation-backdrop"></div>
   <div class="confirmation-dialog">
     <div class="icon-container" [ngClass]="data.severity" *ngIf="data.severity">
@@ -15,7 +15,7 @@
     <div class="footer">
       <button
         id="cancel"
-        class="confirmation-button confirmation-button-reject"
+        class="confirmation-button confirmation-button--reject"
         *ngIf="!data?.options?.hideCancelBtn"
         (click)="close(reject)"
       >
@@ -23,7 +23,7 @@
       </button>
       <button
         id="confirm"
-        class="confirmation-button confirmation-button-approve"
+        class="confirmation-button confirmation-button--approve"
         *ngIf="!data?.options?.hideYesBtn"
         (click)="close(confirm)"
       >
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 752bb22eee..a28dd3a7c3 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
@@ -4,19 +4,16 @@
   right: 0;
   bottom: 0;
   left: 0;
-  display: none;
-  place-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 1060;
-  &.show {
-    display: grid;
-  }
   .confirmation-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: rgba(#000, 0.7);
     z-index: 1061 !important;
   }
   .confirmation-dialog {
@@ -24,12 +21,8 @@
     flex-direction: column;
     margin: 20px auto;
     padding: 0;
-    border: none;
-    border-radius: 10px;
     width: 450px;
     min-height: 300px;
-    background-color: #fff;
-    box-shadow: 0 0 10px -5px rgba(#000, 0.5);
     z-index: 1062 !important;
     .icon-container {
       display: flex;
@@ -41,28 +34,9 @@
         width: 100px;
         height: 100px;
         stroke-width: 1;
-        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 {
       flex-grow: 1;
@@ -79,7 +53,6 @@
         display: block;
         margin: 10px auto;
         padding: 20px;
-        color: #777;
         font-size: 16px;
         font-weight: 400;
         text-align: center;
@@ -98,22 +71,8 @@
         padding: 10px 20px;
         border: none;
         border-radius: 6px;
-        color: #777;
         font-size: 14px;
         font-weight: 600;
-        background-color: #eee;
-        &:hover {
-          background-color: darken(#eee, 5);
-        }
-        &-reject {
-        }
-        &-approve {
-          background-color: #2f96b4;
-          color: #fff;
-          &:hover {
-            background-color: darken(#2f96b4, 5);
-          }
-        }
       }
     }
   }

From 09a56ef0b0b78e656bc14072e514c2f485ac85ba Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Thu, 16 Jan 2020 13:14:29 +0300
Subject: [PATCH 2/3] feat(theme-basic): add confirmation component styles

---
 .../theme-basic/src/lib/constants/styles.ts   | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
index be67bece5a..c49b9b9223 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
@@ -73,4 +73,64 @@ export default `
 background-color: rgba(0, 0, 0, 0.6);
 }
 
+.confirmation {
+    .confirmation-backdrop {
+        background: rgba(0, 0, 0, 0.7) !important;
+    }
+    .confirmation-dialog {
+        border: none;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 0 10px -5px rgba(#000, 0.5);
+        .icon-container {
+            .icon {
+                stroke: #fff;
+                color: #fff;
+            }
+            &.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 {
+            .title {
+                color: #222;
+            }
+            .message {
+                color: #777;
+            }
+        }
+        .footer {
+            background: transparent;
+            .confirmation-button {
+                background-color: #eee;
+                color: #777;
+                &:hover, &:focus, &:active {
+                    background-color: #bbb;
+                }
+                &--reject {
+                }
+                &--confirm {
+                    background-color: #2f96b4;
+                    color: #fff;
+                    &:hover {
+                        background-color: #2e819b;
+                    }
+                }
+            }
+        }
+    }
+}
 `;

From 996defcc00a4e28685fe3af66270a6be62fa2763 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Thu, 16 Jan 2020 13:23:51 +0300
Subject: [PATCH 3/3] refactor(theme-basic): change scss styles to css

---
 .../theme-basic/src/lib/constants/styles.ts   | 110 ++++++++----------
 1 file changed, 51 insertions(+), 59 deletions(-)

diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
index c49b9b9223..ed0ab1b467 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts
@@ -73,64 +73,56 @@ export default `
 background-color: rgba(0, 0, 0, 0.6);
 }
 
-.confirmation {
-    .confirmation-backdrop {
-        background: rgba(0, 0, 0, 0.7) !important;
-    }
-    .confirmation-dialog {
-        border: none;
-        border-radius: 10px;
-        background-color: #fff;
-        box-shadow: 0 0 10px -5px rgba(#000, 0.5);
-        .icon-container {
-            .icon {
-                stroke: #fff;
-                color: #fff;
-            }
-            &.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 {
-            .title {
-                color: #222;
-            }
-            .message {
-                color: #777;
-            }
-        }
-        .footer {
-            background: transparent;
-            .confirmation-button {
-                background-color: #eee;
-                color: #777;
-                &:hover, &:focus, &:active {
-                    background-color: #bbb;
-                }
-                &--reject {
-                }
-                &--confirm {
-                    background-color: #2f96b4;
-                    color: #fff;
-                    &:hover {
-                        background-color: #2e819b;
-                    }
-                }
-            }
-        }
-    }
+.confirmation .confirmation-backdrop {
+	 background: rgba(0, 0, 0, 0.7) !important;
+}
+ .confirmation .confirmation-dialog {
+	 border: none;
+	 border-radius: 10px;
+	 background-color: #fff;
+	 box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
+}
+ .confirmation .confirmation-dialog .icon-container .icon {
+	 stroke: #fff;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .icon-container.info .icon {
+	 stroke: #2f96b4;
+	 color: #2f96b4;
+}
+ .confirmation .confirmation-dialog .icon-container.success .icon {
+	 stroke: #51a351;
+	 color: #51a351;
+}
+ .confirmation .confirmation-dialog .icon-container.warning .icon {
+	 stroke: #f89406;
+	 color: #f89406;
+}
+ .confirmation .confirmation-dialog .icon-container.error .icon {
+	 stroke: #bd362f;
+	 color: #bd362f;
+}
+ .confirmation .confirmation-dialog .content .title {
+	 color: #222;
+}
+ .confirmation .confirmation-dialog .content .message {
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer {
+	 background: transparent;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button {
+	 background-color: #eee;
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button:hover, .confirmation .confirmation-dialog .footer .confirmation-button:focus, .confirmation .confirmation-dialog .footer .confirmation-button:active {
+	 background-color: #bbb;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm {
+	 background-color: #2f96b4;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm:hover {
+	 background-color: #2e819b;
 }
 `;