Update & standardize alert styling

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">
+          {% 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." %}
-            <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>
         {% endif %}
 
         {% if config.MAINTENANCE_MODE and config.BANNER_MAINTENANCE %}
-          <div class="alert alert-warning bg-warning-subtle text-center mx-3" role="alert">
+          {% include 'inc/alerts/warning.html' with title="Maintenance Mode" message=config.BANNER_MAINTENANCE|escape %}
-            <h4 class="alert-title"><i class="mdi mdi-alert"></i> {% trans "Maintenance Mode" %}</h4>
-            <div class="text-secondary">
-              {{ config.BANNER_MAINTENANCE|escape }}
-            </div>
-          </div>
         {% endif %}
         {# /Banners #}
 

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">
+    <div class="alert alert-danger bg-danger-subtle" role="alert">
-      <h4 class="alert-heading">{% trans "Confirm Bulk Deletion" %}</h4>
+      <div class="d-flex">
-      <hr />
+        <div>
-      <strong>{% trans "Warning" context "Noun" %}:</strong>
+          <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 %}
-      {% block message_extra %}{% endblock %}
+        </div>
+      </div>
     </div>
 
     <div class="row mt-3">

netbox/templates/generic/bulk_remove.html

@@ -8,20 +8,18 @@
 {% endblock %}
 
 {% block content %}
-<div class="container-md px-0">
+<div class="alert alert-danger bg-danger-subtle" role="alert">
-  <div class="alert alert-danger" role="alert">
+  <div class="d-flex">
-    <h4 class="alert-heading">{% trans "Confirm Bulk Removal" %}</h4>
+    <div>
-    <p>
+      <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>
+    </div>
-    <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 class="container-xl px-0">

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="alert alert-info bg-info-subtle mx-3" role="alert">
-    <div class="header-alert-container">
+      <div class="d-flex">
-      <div class="alert alert-info text-center mw-md-50" role="alert">
+        <div>
-        <h6 class="alert-heading">
+          <i class="mdi mdi-information-outline p-2"></i>
-          <i class="mdi mdi-information-outline"></i><br/>{% trans "New Release Available" %}
+        </div>
-        </h6>
+        <div>
-        <small><a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> {% trans "is available" %}.</small>
+          <h4 class="alert-title">{% trans "New Release Available" %}</h4>
-        <hr class="my-2" />
+          <a href="{{ new_release.url }}">NetBox v{{ new_release.version }}</a> {% trans "is available" %}.
-        <small class="mb-0">
+          <a href="https://docs.netbox.dev/en/stable/installation/upgrading/" target="_blank">
-          <a href="https://docs.netbox.dev/en/stable/installation/upgrading/">{% trans "Upgrade Instructions" context "Document title" %}</a>
+            {% trans "Upgrade Instructions" context "Document title" %}
-        </small>
+            <i class="mdi mdi-open-in-new"></i>
+          </a>
+        </div>
       </div>
     </div>
   {% endif %}

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>

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>

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>

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>

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="alert alert-warning" role="alert">
-  <div class="float-start">
+  <div class="d-flex justify-content-between">
-    <i class="mdi mdi-alert"></i>
+    <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>
 </div>

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>).
+    <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>
       {% if request.user|can_sync:object %}
-      <div class="float-end">
+        <div>
           {% sync_button object %}
         </div>
       {% endif %}
     </div>
+  </div>
 {% endif %}