Backend notification functionality and styling.

assets/css/layouts/backend_layout.scss

@@ -83,22 +83,23 @@ root {
     margin-right: 15px;
 }
 
-#notification .alert button {
+#notification .alert button:not(.btn-close) {
     margin-right: 15px;
 }
 
+#notification .alert .btn-close {
+    margin-top: 5px;
+}
+
 #notification .alert {
     margin-bottom: 0;
     background-color: #f5e8a8;
     color: #9e9980;
     box-shadow: 1px 1px 1px #a0a0a0;
-    padding: 15px;
     position: fixed;
     z-index: 200;
     right: 15px;
     bottom: 15px;
-    min-width: 300px;
-    max-width: 750px;
 }
 
 #notification .close {

assets/js/layouts/backend_layout.js

@@ -73,15 +73,15 @@ window.App.Layouts.Backend = (function () {
         $notification.empty();
 
         const $instance = $('<div/>', {
-            'class': 'notification alert',
+            'class': 'notification alert alert-dismissible fade show',
             'html': [
+                $('<strong/>', {
+                    'html': message
+                }),
                 $('<button/>', {
                     'type': 'button',
                     'class': 'btn-close',
-                    'data-dismiss': 'alert'
-                }),
-                $('<strong/>', {
-                    'html': message
+                    'data-bs-dismiss': 'alert'
                 })
             ]
         }).appendTo($notification);
@@ -93,7 +93,7 @@ window.App.Layouts.Backend = (function () {
                 'on': {
                     'click': action.function
                 }
-            }).appendTo($instance);
+            }).prependTo($instance);
         });
 
         $notification.show('fade');