Resolve visual regression in error modal icon animation

bigcommerce · Jan 15, 2020 · 70fcc10 · 70fcc10
1 parent 516dc54
commit 70fcc10
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Resolve visual regression in error modal icon animation [#1619](https://github.com/bigcommerce/cornerstone/pull/1619)
 - Update sweetalert2 library to latest version [#1617](https://github.com/bigcommerce/cornerstone/pull/1617)
 - Allow alert text color editing from theme editor and update default alert text color for Bold variation [#1565](https://github.com/bigcommerce/cornerstone/pull/1565)
 - Add jquery-migrate to Modal test [#1599](https://github.com/bigcommerce/cornerstone/pull/1599)

diff --git a/assets/scss/components/vendor/sweetalert2/_sweetalert2.scss b/assets/scss/components/vendor/sweetalert2/_sweetalert2.scss
@@ -98,3 +98,7 @@
         margin-left: $button-adjacentButton-marginLeft;
     }
 }
+
+.swal2-icon {
+	display: flex;
+}
diff --git a/templates/components/common/alert-modal.html b/templates/components/common/alert-modal.html
@@ -1,5 +1,5 @@
 <div id="alert-modal" class="modal modal--alert modal--small" data-reveal data-prevent-quick-search-close>
-    <div class="swal2-icon swal2-error swal2-animate-error-icon"><span class="swal2-x-mark swal2-animate-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>
+    <div class="swal2-icon swal2-error swal2-icon-show"><span class="swal2-x-mark"><span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>
 
     <div class="modal-content"></div>