alerts moved to the bottom center of the page

Author: MartinCervenkaSB

src/django_smartbase_admin/static/sb_admin/src/css/_base.css

@@ -104,4 +104,12 @@
     mark {
         @apply text-dark-900 bg-notice-100;
     }
+
+    #notification-messages {
+        @apply z-1000 fixed bottom-72 left-24 right-24 mx-auto max-w-1180 mb-24 flex flex-col items-center gap-16 overflow-y-auto;
+        max-height: calc(100vh - 6rem);
+        @screen xl {
+            left: 17.75rem;
+        }
+    }
 }

src/django_smartbase_admin/templates/sb_admin/includes/notifications.html

@@ -1,5 +1,4 @@
-<div id="notification-messages" hx-swap-oob="beforeend"
-     class="messagelist z-1000 fixed right-0 left-0 xl:left-260 mx-24{% if classes %} {{ classes }}{% endif %}">
+<div id="notification-messages" hx-swap-oob="beforeend" class="messagelist{% if classes %} {{ classes }}{% endif %}">
     {% for message in messages %}
         {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
             {% include 'sb_admin/partials/messages/alert_success.html' with text=message %}
@@ -8,7 +7,7 @@
         {% elif message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
             {% include 'sb_admin/partials/messages/alert_error.html' with text=message %}
         {% else %}
-            {% include 'sb_admin/partials/messages/alert_success.html' with text=message %}
+            {% include 'sb_admin/partials/messages/alert_info.html' with text=message %}
         {% endif %}
     {% endfor %}
 </div>

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_base.html

@@ -1,17 +1,19 @@
 {% block content %}
-    <div {% block attributes %}{% endblock %} class="alert border mb-16 shadow {% block colors %}bg-notice-50 border-notice-100 text-notice-900{% endblock %}">
+    <div {% block attributes %}{% endblock %} class="alert border shadow {% block colors %}bg-notice-50 border-notice-100 text-notice-900{% endblock %}">
         {% if OVERRIDE_CONTENT_OF_NOTIFICATION in message.extra_tags %}
             {{ text|safe }}
         {% else %}
             <div class="flex">
                 {% block icon %}
-                    <svg class="w-20 h-20 mr-12 text-notice">
+                    <svg class="w-20 h-20 mr-12 text-notice shrink-0">
                         <use xlink:href="#Info"></use>
                     </svg>
                 {% endblock %}
                 <h5 class="font-semibold">{{ text|safe }}</h5>
                 <div class="flex ml-auto items-center">
-                    {% include 'sb_admin/partials/messages/alert_close.html' %}
+                    {% block close %}
+                    	{% include 'sb_admin/partials/messages/alert_close.html' with css_class="hover:text-notice" %}
+                    {% endblock %}
                 </div>
             </div>
         {% endif %}

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_close.html

@@ -1,3 +1,5 @@
-<svg class="w-16 h-16 ml-24 cursor-pointer hover:text-notice js-alert-close">
-    <use xlink:href="#Close"></use>
-</svg>
+<div class="ml-16 flex-center js-alert-close p-8 -m-8 cursor-pointer group">
+    <svg class="w-16 h-16 transition-colors {{ css_class|default:'' }}">
+        <use xlink:href="#Close"></use>
+    </svg>
+</div>

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_error.html

@@ -3,7 +3,11 @@
 {% block colors %}bg-negative-50 border-negative-100 text-negative-900{% endblock %}
 
 {% block icon %}
-    <svg class="w-20 h-20 mr-12 text-negative">
-        <use xlink:href="#Info"></use>
+    <svg class="w-20 h-20 mr-12 text-negative shrink-0">
+        <use xlink:href="#Close-one"></use>
     </svg>
 {% endblock %}
+
+{% block close %}
+    {% include 'sb_admin/partials/messages/alert_close.html' with css_class="group-hover:text-negative" %}
+{% endblock %}

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_info.html

@@ -1,9 +1,14 @@
 {% extends 'sb_admin/partials/messages/alert_base.html' %}
 
 {% block colors %}bg-notice-50 border-notice-100 text-notice-900{% endblock %}
+{% block attributes %}remove-me="5s"{% endblock %}
 
 {% block icon %}
-    <svg class="w-20 h-20 mr-12 text-notice">
+    <svg class="w-20 h-20 mr-12 text-notice shrink-0">
         <use xlink:href="#Info"></use>
     </svg>
 {% endblock %}
+
+{% block close %}
+    {% include 'sb_admin/partials/messages/alert_close.html' with css_class="group-hover:text-notice" %}
+{% endblock %}

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_success.html

@@ -4,7 +4,11 @@
 {% block attributes %}remove-me="5s"{% endblock %}
 
 {% block icon %}
-    <svg class="w-20 h-20 mr-12 text-success">
-        <use xlink:href="#Info"></use>
+    <svg class="w-20 h-20 mr-12 text-success shrink-0">
+        <use xlink:href="#Check-one"></use>
     </svg>
 {% endblock %}
+
+{% block close %}
+    {% include 'sb_admin/partials/messages/alert_close.html' with css_class="group-hover:text-success" %}
+{% endblock %}

src/django_smartbase_admin/templates/sb_admin/partials/messages/alert_warning.html

@@ -1,10 +1,13 @@
 {% extends 'sb_admin/partials/messages/alert_base.html' %}
 
 {% block colors %}bg-warning-50 border-warning-100 text-warning-900{% endblock %}
-{% block attributes %}remove-me="5s"{% endblock %}
 
 {% block icon %}
-    <svg class="w-20 h-20 mr-12 text-warning">
-        <use xlink:href="#Info"></use>
+    <svg class="w-20 h-20 mr-12 text-warning shrink-0">
+        <use xlink:href="#Attention"></use>
     </svg>
 {% endblock %}
+
+{% block close %}
+    {% include 'sb_admin/partials/messages/alert_close.html' with css_class="group-hover:text-warning" %}
+{% endblock %}