From 777d15423ce0798b516e5bbc818bcbcb910efc3e Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 17 Jan 2022 21:19:17 +0100
Subject: [PATCH] Backend notification functionality and styling.

---
 assets/css/layouts/backend_layout.scss |  9 +++++----
 assets/js/layouts/backend_layout.js    | 12 ++++++------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/assets/css/layouts/backend_layout.scss b/assets/css/layouts/backend_layout.scss
index a0fd0582..fa0b4ece 100644
--- a/assets/css/layouts/backend_layout.scss
+++ b/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 {
diff --git a/assets/js/layouts/backend_layout.js b/assets/js/layouts/backend_layout.js
index 61645915..a13d7c56 100644
--- a/assets/js/layouts/backend_layout.js
+++ b/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');