From 8eed94ccd945ce6701a18a564ac3264cf452ea39 Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Thu, 11 Jan 2024 14:07:44 -0500
Subject: [PATCH] Update & standardize alert styling

---
 netbox/templates/base/layout.html             | 14 ++---------
 netbox/templates/generic/bulk_delete.html     | 22 ++++++++++-------
 netbox/templates/generic/bulk_remove.html     | 22 ++++++++---------
 netbox/templates/home.html                    | 24 ++++++++++---------
 netbox/templates/inc/alerts/danger.html       | 15 ++++++++++++
 netbox/templates/inc/alerts/info.html         | 15 ++++++++++++
 netbox/templates/inc/alerts/success.html      | 15 ++++++++++++
 netbox/templates/inc/alerts/warning.html      | 15 ++++++++++++
 .../templates/inc/missing_prerequisites.html  | 18 ++++++++------
 netbox/templates/inc/sync_warning.html        | 15 ++++++++----
 10 files changed, 119 insertions(+), 56 deletions(-)
 create mode 100644 netbox/templates/inc/alerts/danger.html
 create mode 100644 netbox/templates/inc/alerts/info.html
 create mode 100644 netbox/templates/inc/alerts/success.html
 create mode 100644 netbox/templates/inc/alerts/warning.html

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index 6eadb0b55..36caa0039 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -126,21 +126,11 @@ Blocks:
         {% endif %}
 
         {% if settings.DEBUG and not settings.DEVELOPER %}
-          <div class="alert alert-warning bg-warning-subtle text-center mx-3" role="alert">
-            <h4 class="alert-title"><i class="mdi mdi-alert"></i> {% trans "Debug mode is enabled" %}.</h4>
-            <div class="text-secondary">
-              {% trans "Performance may be limited. Debugging should never be enabled on a production system." %}
-            </div>
-          </div>
+          {% include 'inc/alerts/warning.html' with title="Debug mode is enabled" message="Performance may be limited. Debugging should never be enabled on a production system." %}
         {% endif %}
 
         {% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
-          <div class="alert alert-warning bg-warning-subtle text-center mx-3" role="alert">
-            <h4 class="alert-title"><i class="mdi mdi-alert"></i> {% trans "Maintenance Mode" %}</h4>
-            <div class="text-secondary">
-              {{ config.BANNER_MAINTENANCE|escape }}
-            </div>
-          </div>
+          {% include 'inc/alerts/warning.html' with title="Maintenance Mode" message=config.BANNER_MAINTENANCE|escape %}
         {% endif %}
         {# /Banners #}
 
diff --git a/netbox/templates/generic/bulk_delete.html b/netbox/templates/generic/bulk_delete.html
index 6015747d0..120ad53ae 100644
--- a/netbox/templates/generic/bulk_delete.html
+++ b/netbox/templates/generic/bulk_delete.html
@@ -38,15 +38,19 @@ Context:
 
   {# Confirmation form #}
   <div class="tab-pane show active" id="delete-form" role="tabpanel" aria-labelledby="delete-form-tab">
-    <div class="alert alert-danger mb-3" role="alert">
-      <h4 class="alert-heading">{% trans "Confirm Bulk Deletion" %}</h4>
-      <hr />
-      <strong>{% trans "Warning" context "Noun" %}:</strong>
-      {% blocktrans trimmed with count=table.rows|length type_plural=model|meta:"verbose_name_plural" %}
-        The following operation will delete <strong>{{ count }}</strong> {{ type_plural }}. Please
-        carefully review the selected objects and confirm this action.
-      {% endblocktrans %}
-      {% block message_extra %}{% endblock %}
+    <div class="alert alert-danger bg-danger-subtle" role="alert">
+      <div class="d-flex">
+        <div>
+          <i class="mdi mdi-alert-octagon p-2"></i>
+        </div>
+        <div>
+          <h4 class="alert-title">{% trans "Confirm Bulk Deletion" %}</h4>
+          {% blocktrans trimmed with count=table.rows|length type_plural=model|meta:"verbose_name_plural" %}
+            The following operation will delete <strong>{{ count }}</strong> {{ type_plural }}. Please
+            carefully review the selected objects and confirm this action.
+          {% endblocktrans %}
+        </div>
+      </div>
     </div>
 
     <div class="row mt-3">
diff --git a/netbox/templates/generic/bulk_remove.html b/netbox/templates/generic/bulk_remove.html
index a1412849f..1403bfddc 100644
--- a/netbox/templates/generic/bulk_remove.html
+++ b/netbox/templates/generic/bulk_remove.html
@@ -8,20 +8,18 @@
 {% endblock %}
 
 {% block content %}
-<div class="container-md px-0">
-  <div class="alert alert-danger" role="alert">
-    <h4 class="alert-heading">{% trans "Confirm Bulk Removal" %}</h4>
-    <p>
+<div class="alert alert-danger bg-danger-subtle" role="alert">
+  <div class="d-flex">
+    <div>
+      <i class="mdi mdi-alert-octagon p-2"></i>
+    </div>
+    <div>
+      <h4 class="alert-title">{% trans "Confirm Bulk Removal" %}</h4>
       {% blocktrans trimmed with count=table.rows|length %}
-        <strong>Warning:</strong> The following operation will remove {{ count }} {{ obj_type_plural }} from {{ parent_obj }}.
+        The following operation will remove {{ count }} {{ obj_type_plural }} from {{ parent_obj }}. Please
+        carefully review the {{ obj_type_plural }} to be removed and confirm below.
       {% endblocktrans %}
-    </p>
-    <hr />
-    <p class="mb-0">
-      {% blocktrans trimmed %}
-        Please carefully review the {{ obj_type_plural }} to be removed and confirm below.
-      {% endblocktrans %}
-    </p>
+    </div>
   </div>
 </div>
 <div class="container-xl px-0">
diff --git a/netbox/templates/home.html b/netbox/templates/home.html
index 32ba0743a..2ee054a59 100644
--- a/netbox/templates/home.html
+++ b/netbox/templates/home.html
@@ -5,17 +5,19 @@
 
 {% block header %}
   {% if new_release %}
-    {# new_release is set only if the current user is a superuser or staff member #}
-    <div class="header-alert-container">
-      <div class="alert alert-info text-center mw-md-50" role="alert">
-        <h6 class="alert-heading">
-          <i class="mdi mdi-information-outline"></i><br/>{% trans "New Release Available" %}
-        </h6>
-        <small><a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> {% trans "is available" %}.</small>
-        <hr class="my-2" />
-        <small class="mb-0">
-          <a href="https://docs.netbox.dev/en/stable/installation/upgrading/">{% trans "Upgrade Instructions" context "Document title" %}</a>
-        </small>
+    <div class="alert alert-info bg-info-subtle mx-3" role="alert">
+      <div class="d-flex">
+        <div>
+          <i class="mdi mdi-information-outline p-2"></i>
+        </div>
+        <div>
+          <h4 class="alert-title">{% trans "New Release Available" %}</h4>
+          <a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> {% trans "is available" %}.
+          <a href="https://docs.netbox.dev/en/stable/installation/upgrading/" target="_blank">
+            {% trans "Upgrade Instructions" context "Document title" %}
+            <i class="mdi mdi-open-in-new"></i>
+          </a>
+        </div>
       </div>
     </div>
   {% endif %}
diff --git a/netbox/templates/inc/alerts/danger.html b/netbox/templates/inc/alerts/danger.html
new file mode 100644
index 000000000..44a8ca704
--- /dev/null
+++ b/netbox/templates/inc/alerts/danger.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+
+<div class="alert alert-danger bg-danger-subtle mx-3" role="alert">
+  <div class="d-flex">
+    <div>
+      <i class="mdi mdi-alert-octagon p-2"></i>
+    </div>
+    <div>
+      <h4 class="alert-title">{% block title %}{% trans title %}{% endblock %}</h4>
+      {% block content %}
+        <div class="text-secondary">{% trans message %}</div>
+      {% endblock content %}
+    </div>
+  </div>
+</div>
diff --git a/netbox/templates/inc/alerts/info.html b/netbox/templates/inc/alerts/info.html
new file mode 100644
index 000000000..94ace3bd6
--- /dev/null
+++ b/netbox/templates/inc/alerts/info.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+
+<div class="alert alert-info bg-info-subtle mx-3" role="alert">
+  <div class="d-flex">
+    <div>
+      <i class="mdi mdi-information-outline p-2"></i>
+    </div>
+    <div>
+      <h4 class="alert-title">{% block title %}{% trans title %}{% endblock %}</h4>
+      {% block content %}
+        <div class="text-secondary">{% trans message %}</div>
+      {% endblock content %}
+    </div>
+  </div>
+</div>
diff --git a/netbox/templates/inc/alerts/success.html b/netbox/templates/inc/alerts/success.html
new file mode 100644
index 000000000..5fcb23dba
--- /dev/null
+++ b/netbox/templates/inc/alerts/success.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+
+<div class="alert alert-success bg-success-subtle mx-3" role="alert">
+  <div class="d-flex">
+    <div>
+      <i class="mdi mdi-check-bold p-2"></i>
+    </div>
+    <div>
+      <h4 class="alert-title">{% block title %}{% trans title %}{% endblock %}</h4>
+      {% block content %}
+        <div class="text-secondary">{% trans message %}</div>
+      {% endblock content %}
+    </div>
+  </div>
+</div>
diff --git a/netbox/templates/inc/alerts/warning.html b/netbox/templates/inc/alerts/warning.html
new file mode 100644
index 000000000..73eefd2d0
--- /dev/null
+++ b/netbox/templates/inc/alerts/warning.html
@@ -0,0 +1,15 @@
+{% load i18n %}
+
+<div class="alert alert-warning bg-warning-subtle mx-3" role="alert">
+  <div class="d-flex">
+    <div>
+      <i class="mdi mdi-alert p-2"></i>
+    </div>
+    <div>
+      <h4 class="alert-title">{% block title %}{% trans title %}{% endblock %}</h4>
+      {% block content %}
+        <div class="text-secondary">{% trans message %}</div>
+      {% endblock content %}
+    </div>
+  </div>
+</div>
diff --git a/netbox/templates/inc/missing_prerequisites.html b/netbox/templates/inc/missing_prerequisites.html
index 00b6591c8..7a28a7fe0 100644
--- a/netbox/templates/inc/missing_prerequisites.html
+++ b/netbox/templates/inc/missing_prerequisites.html
@@ -1,12 +1,16 @@
 {% load buttons %}
 {% load i18n %}
 
-<div class="alert alert-warning text-end" role="alert">
-  <div class="float-start">
-    <i class="mdi mdi-alert"></i>
-    {% blocktrans trimmed with model=model|meta:"verbose_name" prerequisite_model=prerequisite_model|meta:"verbose_name" %}
-      Before you can add a {{ model }} you must first create a <strong>{{ prerequisite_model }}</strong>.
-    {% endblocktrans %}
+<div class="alert alert-warning" role="alert">
+  <div class="d-flex justify-content-between">
+    <div>
+      <i class="mdi mdi-alert p-2"></i>
+      {% blocktrans trimmed with model=model|meta:"verbose_name" prerequisite_model=prerequisite_model|meta:"verbose_name" %}
+        Before you can add a {{ model }} you must first create a <strong>{{ prerequisite_model }}</strong>.
+      {% endblocktrans %}
+    </div>
+    <div>
+      {% add_button prerequisite_model %}
+    </div>
   </div>
-  {% add_button prerequisite_model %}
 </div>
diff --git a/netbox/templates/inc/sync_warning.html b/netbox/templates/inc/sync_warning.html
index 6d992a009..b6846e905 100644
--- a/netbox/templates/inc/sync_warning.html
+++ b/netbox/templates/inc/sync_warning.html
@@ -4,11 +4,16 @@
 
 {% if object.data_file and object.data_file.last_updated > object.data_synced %}
   <div class="alert alert-warning" role="alert">
-    <i class="mdi mdi-alert"></i> {% trans "Data is out of sync with upstream file" %} (<a href="{{ object.data_file.get_absolute_url }}">{{ object.data_file }}</a>).
-    {% if request.user|can_sync:object %}
-      <div class="float-end">
-        {% sync_button object %}
+    <div class="d-flex justify-content-between">
+      <div>
+        <i class="mdi mdi-alert"></i>
+        {% trans "Data is out of sync with upstream file" %} (<a href="{{ object.data_file.get_absolute_url }}">{{ object.data_file }}</a>).
       </div>
-    {% endif %}
+      {% if request.user|can_sync:object %}
+        <div>
+          {% sync_button object %}
+        </div>
+      {% endif %}
+    </div>
   </div>
 {% endif %}