[PS-2841] remove SweetAlert2 dependency (#6191)

* remove swal from app.component

* remove dep

* remove unused swal css

apps/web/src/scss/base.scss

@@ -173,9 +173,7 @@ code {
 }
 
 .btn:focus,
-.swal2-popup .swal2-actions button:focus,
 .btn.focus,
-.swal2-popup .swal2-actions button.focus,
 .form-control:focus {
   @include themify($themes) {
     box-shadow: 0 0 0 0.2rem themed("focus");

apps/web/src/scss/buttons.scss

@@ -1,5 +1,4 @@
-.btn-primary,
-.swal2-confirm {
+.btn-primary {
   @include themify($themes) {
     background-color: themed("btnPrimary");
     border-color: themed("btnPrimary");
@@ -37,8 +36,7 @@
   }
 }
 
-.btn-secondary,
-.swal2-cancel {
+.btn-secondary {
   @include themify($themes) {
     background-color: themed("btnSecondary");
     border-color: themed("btnSecondaryBorder");
@@ -103,8 +101,7 @@
   }
 }
 
-.btn-danger,
-.swal2-deny {
+.btn-danger {
   @include themify($themes) {
     background-color: themed("btnDanger");
     border-color: themed("btnDanger");

apps/web/src/scss/plugins.scss

@@ -130,96 +130,6 @@
   }
 }
 
-// SweetAlert2
-
-[class*="swal2-"] {
-  &:not(.swal2-container, .swal2-confirm, .swal2-cancel, .swal2-deny) {
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-      color: themed("textColor");
-    }
-  }
-}
-
-.swal2-container {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.swal2-popup {
-  @include themify($themes) {
-    background-color: themed("backgroundColor");
-    color: themed("textColor");
-  }
-  border: $modal-content-border-width solid #9a9a9a;
-  @include border-radius($modal-content-border-radius);
-  padding: 15px 0 0;
-  width: 34em; // slightly bigger than the hardcoded 478px in v1.
-
-  .swal2-header {
-    padding: 0 15px;
-  }
-
-  .swal2-icon {
-    border: none;
-    height: auto;
-    margin: 0 auto;
-    width: auto;
-  }
-
-  .swal2-content {
-    font-size: $font-size-base;
-    padding-bottom: 15px;
-    @include themify($themes) {
-      border-bottom: $modal-footer-border-width solid themed("separator");
-    }
-  }
-
-  i.swal-custom-icon {
-    display: block;
-    font-size: 35px;
-    margin: 0 auto;
-  }
-
-  .swal2-title {
-    font-size: $font-size-lg;
-    margin: 0;
-    padding: 10px 0 15px;
-    @include themify($themes) {
-      color: themed("textHeadingColor");
-    }
-  }
-
-  .swal2-content {
-    font-size: $font-size-base;
-    padding: 0 15px 15px;
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .swal2-actions {
-    @include border-radius($modal-content-border-radius);
-    display: flex;
-    flex-direction: row;
-    font-size: $font-size-base;
-    justify-content: flex-start;
-    margin: 0;
-    padding: 15px;
-    @include themify($themes) {
-      background-color: themed("backgroundColor");
-    }
-
-    button {
-      margin-right: 10px;
-      @extend .btn;
-    }
-  }
-
-  .swal2-validation-message {
-    margin: 0 -15px;
-  }
-}
-
 date-input-polyfill {
   &[data-open="true"] {
     z-index: 10000 !important;

apps/web/src/scss/styles.scss

@@ -44,7 +44,6 @@
 @import "~bootstrap/scss/_print";
 
 @import "~ngx-toastr/toastr";
-@import "~#sweetalert2";
 
 @import "./base";
 @import "./buttons";