#4442 Change style of alert messages

addons/default/visiosoft/base-theme/resources/views/partials/messages.twig

@@ -1,57 +1,53 @@
-<div id="messages">
+<script>
+    const Toast = Swal.mixin({
+        toast: true,
+        position: 'top-end',
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+        didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+        }
+    })
 
-    <!-- Success Messages -->
+    // Success Messages
     {% if message_exists('success') %}
-        <div class="alert alert-success alert-dismissible">
-            <button type="button" class="close" data-dismiss="alert">
-                <span>&times;</span><span class="sr-only">Close</span>
-            </button>
-
-            {% for message in message_pull('success') %}
-                {{ trans(message)|markdown }}
-            {% endfor %}
-        </div>
+        {% for message in message_pull('success') %}
+            Toast.fire({
+                icon: 'success',
+                title: `{{ trans(message)|markdown }}`,
+            })
+        {% endfor %}
     {% endif %}
 
-    <!-- Informational Messages -->
+    // Informational Messages
     {% if message_exists('info') %}
-        <div class="alert alert-info alert-dismissible">
-            <button type="button" class="close" data-dismiss="alert">
-                <span>&times;</span><span class="sr-only">Close</span>
-            </button>
-
-            {% for message in message_pull('info') %}
-                {{ trans(message)|markdown }}
-            {% endfor %}
-        </div>
+        {% for message in message_pull('info') %}
+            Toast.fire({
+                icon: 'info',
+                title: `{{ trans(message)|markdown }}`,
+            })
+        {% endfor %}
     {% endif %}
 
-
-    <!-- Warning Messages -->
+    // Warning Messages
     {% if message_exists('warning') %}
-        <div class="alert alert-warning alert-dismissible">
-            <button type="button" class="close" data-dismiss="alert">
-                <span>&times;</span><span class="sr-only">Close</span>
-            </button>
-
-            {% for message in message_pull('warning') %}
-                {{ trans(message)|markdown }}
-            {% endfor %}
-        </div>
+        {% for message in message_pull('warning') %}
+            Toast.fire({
+                icon: 'warning',
+                title: `{{ trans(message)|markdown }}`,
+            })
+        {% endfor %}
     {% endif %}
 
-
-    <!-- Error Messages -->
+    // Error Messages
     {% if message_exists('error') %}
-        <div class="alert alert-danger alert-dismissible">
-            <button type="button" class="close" data-dismiss="alert">
-                <span>&times;</span><span class="sr-only">Close</span>
-            </button>
-
-            {% for message in message_pull('error') %}
-                {{ trans(message)|markdown }}
-            {% endfor %}
-        </div>
+        {% for message in message_pull('error') %}
+            Toast.fire({
+                icon: 'error',
+                title: `{{ trans(message)|markdown }}`,
+            })
+        {% endfor %}
     {% endif %}
-
-</div>
+</script>

addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig

@@ -22,6 +22,7 @@
 {{ asset_style("visiosoft.theme.base::css/offline.scss") }}
 
 <script src="{{ asset_path('visiosoft.theme.base::js/vendor/jquery.min.js') }}"></script>
+{{ asset_script('visiosoft.theme.base::js/sweetalert2.all.min.js') }}
 {{ asset_script('visiosoft.theme.base::js/visiosoft.js') }}
 
 {{ asset_style("theme.css") }}