Revise emergency banner colors and update code documentation

cisagov · Nov 14, 2024 · c876071 · c876071
1 parent 55cb076
commit c876071
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 9 deletions.
diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss
@@ -1,3 +1,4 @@
+@use "uswds-core" as *;
 @use "base" as *;
 
 // Fixes some font size disparities with the Figma
@@ -29,3 +30,24 @@
 .usa-alert__body--widescreen {
   max-width: $widescreen-max-width !important;
 }
+
+.usa-site-alert--hot-pink {
+  .usa-alert {
+    background-color: $hot-pink;
+    border-left-color: $hot-pink;
+    .usa-alert__body {
+      color: color('base-darkest');
+      background-color: $hot-pink;
+    }
+  }
+}
+
+@supports ((-webkit-mask:url()) or (mask:url())) {
+  .usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+    background-color: color('base-darkest');
+  }
+}
+
+.usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+  background-image: url('../img/usa-icons-bg/error.svg');
+}
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
@@ -2,6 +2,7 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
+$hot-pink: #FFC3F9;
 
 /* Styles for making visible to screen reader / AT users only. */
 .sr-only {

diff --git a/src/registrar/assets/sass/_theme/_uswds-theme.scss b/src/registrar/assets/sass/_theme/_uswds-theme.scss
@@ -119,7 +119,7 @@ in the form $setting: value,
   /*---------------------------
   ## Emergency state
   ----------------------------*/ 
-  $theme-color-emergency: #FFC3F9,
+  $theme-color-emergency: "red-warm-60v",
 
   /*---------------------------
   # Input settings 

diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
@@ -76,17 +76,24 @@
   {% endif %}
 
   {% comment %}
-    Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner. 
+    <!-- Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner.
+    DO NOT FORGET TO EDIT THE BANNER CONTENT -->
+
+    <!-- Red banner with exclamation mark in a circle: -->
     {% include "includes/banner-error.html" %}
+
+    <!-- Blue banner with 'i'' mark in a circle: -->
     {% include "includes/banner-info.html" %}
+
+    <!-- Marron banner with exclamation mark in a circle: -->
     {% include "includes/banner-service-disruption.html" %}
     {% include "includes/banner-site-alert.html" %}
     {% include "includes/banner-system-outage.html" %}
+
+    <!-- Yellow banner with exclamation mark in a triangle: -->
     {% include "includes/banner-warning.html" %}
   {% endcomment %}
 
-  {% include "includes/banner-info.html" %}
-
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">

diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
@@ -1,7 +1,9 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--error">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Header</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
             Text here
         </p>

diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
@@ -1,9 +1,11 @@
 <section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Announcement:</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
-            Katherine & Rachid are now ruling the world!
+            Text here
         </p>
       </div>
     </div>

diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
@@ -1,4 +1,4 @@
-<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+<section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
         <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <p class="usa-alert__text maxw-none">

diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
@@ -1,7 +1,9 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--warning">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Header</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
             Text here
         </p>