From 910d79d830dc3d2c34a258f8087ca82179feac51 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 4 Jan 2024 15:31:47 -0500
Subject: [PATCH] Fix toast styling

---
 netbox/project-static/dist/netbox.js     | Bin 456669 -> 456654 bytes
 netbox/project-static/dist/netbox.js.map | Bin 370710 -> 370710 bytes
 netbox/project-static/src/messages.ts    |   2 +-
 netbox/templates/inc/messages.html       |  32 ++++-------------------
 netbox/templates/inc/toast.html          |  12 +++++++++
 5 files changed, 18 insertions(+), 28 deletions(-)
 create mode 100644 netbox/templates/inc/toast.html

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 5ce7bf337e230044163bb15e01c4e291cb24f33f..acb084e6a0f7ee38490cfc3ae755fdbaafa84afd 100644
GIT binary patch
delta 29
lcmccnUi#d7>4p}@7N!>F7M3ln_rJ8i`@*{Y-50j^OaR+z4&(p;

delta 44
zcmX^2Ui$8P>4p}@7N!>F7M3ln_rLI^WF_XM=j-OC78fU`r?%hw!n*z57q$;f0Kume
ASO5S3

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index d1a9f3aee1c8df0dab0b0234edd09109757dc284..040483b0f76c5900bc02fe1e775d26718b1d3b2e 100644
GIT binary patch
delta 26
icmbPsL2TLuv4$4L7N!>FEi5jVm<*h^yIo?ra1{WK(h9}^

delta 26
icmbPsL2TLuv4$4L7N!>FEi5jVm?~YiyIo?ra1{WNAqx-y

diff --git a/netbox/project-static/src/messages.ts b/netbox/project-static/src/messages.ts
index e2ccabf5b..d17541e5f 100644
--- a/netbox/project-static/src/messages.ts
+++ b/netbox/project-static/src/messages.ts
@@ -5,7 +5,7 @@ import { Toast } from 'bootstrap';
  */
 export function initMessages(): void {
   const elements = document.querySelectorAll<HTMLDivElement>(
-    'body > div#django-messages > div.django-message.toast',
+    'body > div#django-messages > div.toast',
   );
   for (const element of elements) {
     if (element !== null) {
diff --git a/netbox/templates/inc/messages.html b/netbox/templates/inc/messages.html
index b5d03135f..acf4f0d5b 100644
--- a/netbox/templates/inc/messages.html
+++ b/netbox/templates/inc/messages.html
@@ -1,39 +1,17 @@
 {% load helpers %}
 
-<div id="django-messages" class="toast-container">
+<div id="django-messages" class="toast-container position-fixed bottom-0 end-0 p-3">
 
   {# Non-Field Form Errors #}
   {% if form and form.non_field_errors %}
     {% for error in form.non_field_errors.get_json_data %}
-      <div class="django-message toast align-items-center border-0 bg-danger" data-django-type="non-field-error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
-        <div class="d-flex">
-          <div class="toast-body">
-            <i class="mdi mdi-{{ "danger"|icon_from_status }} me-1"></i>
-            {{ error.message }}
-          </div>
-          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-      </div>
+      {% include 'inc/toast.html' with status="danger" title="Error" message=error.message %}
     {% endfor %}
   {% endif %}
 
   {# Django Messages #}
-  {% if messages %}
-    {% for message in messages %}
-      {% with message.level_tag|status_from_tag as status %}
-      {% with status|icon_from_status as icon %}
-        <div class="django-message toast align-items-center border-0 bg-{{ status }}" data-django-type="message" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
-          <div class="d-flex">
-            <div class="toast-body">
-              <i class="mdi mdi-{{ icon }} me-1"></i>
-              {{ message }}
-            </div>
-            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-          </div>
-        </div>
-      {% endwith %}
-      {% endwith %}
-    {% endfor %}
-  {% endif %}
+  {% for message in messages %}
+    {% include 'inc/toast.html' with status=message.level_tag|status_from_tag %}
+  {% endfor %}
 
 </div>
diff --git a/netbox/templates/inc/toast.html b/netbox/templates/inc/toast.html
new file mode 100644
index 000000000..85eff2d7a
--- /dev/null
+++ b/netbox/templates/inc/toast.html
@@ -0,0 +1,12 @@
+{% load helpers %}
+
+<div class="toast shadow-sm" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
+  <div class="toast-header text-bg-{{ status }}">
+    <i class="mdi mdi-{{ status|icon_from_status }} me-1"></i>
+    {{ title }}
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    {{ message }}
+  </div>
+</div>