#6372: Fix missing new release alert

netbox/project-static/styles/netbox.scss

@@ -102,7 +102,7 @@
   cursor: pointer;
 }
 
-// Use proper contrasting color for badge & progress-bar foreground color.
+// Use proper contrasting color foreground color for special components.
 @each $color, $value in $theme-colors {
   .badge,
   .toast,
@@ -111,6 +111,16 @@
       color: color-contrast($value);
     }
   }
+  // Use proper foreground color in the alert body. Note: this is applied to a, p, & small because
+  // we *don't* want to override the h1-h6 colors for alerts, since those are set to a color
+  // similar to the alert color.
+  .alert.alert-#{$color} {
+    a,
+    p,
+    small {
+      color: color-contrast($value);
+    }
+  }
 }
 
 // Ensure progress bars (utilization graph) in tables aren't too narrow to display the percentage.
@@ -149,6 +159,31 @@ table td > .progress {
   }
 }
 
+// Primarily used for the new release notification, but could be used for other alerts as needed.
+// Wrap any alerts in .header-alert-container to ensure the layout is consistent.
+.header-alert-container {
+  // Center-align the alert(s).
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // Apply the same spacing that's applied to the #content div's first child (.px-3).
+  padding: 0 $spacer;
+
+  // By default, alerts inside .header-alert-container should take up the full width.
+  .alert {
+    width: 100%;
+
+    // Adjust the max-width for larger screens so there's not a big ugly blue blob taking up the
+    // entire screen.
+    @include media-breakpoint-up(md) {
+      max-width: 75%;
+    }
+    @include media-breakpoint-up(lg) {
+      max-width: 50%;
+    }
+  }
+}
+
 span.profile-button .dropdown-menu {
   transition: opacity 0.2s ease-in-out;
   display: block !important;