From 594e1095f70852e70656432f4ea687cb54e9c8f3 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jbobel@flexion.us>
Date: Mon, 18 Sep 2023 12:14:28 -0400
Subject: [PATCH] Styling update to fix broken link when status is failing

---
 app/assets/sass/uswds/_uswds-theme-custom-styles.scss | 3 +++
 app/templates/components/big-number.html              | 2 +-
 app/templates/components/status-box.html              | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index bc5cd2b5c..049ea8b3e 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -259,6 +259,9 @@ td.table-empty-message {
          background: color("green-cool-40v");
          display: flex; 
          padding: units(1) units(2);
+         &--failing {
+            background: color("red-warm-50v");
+         }
       }
    }
    .usa-table {
diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html
index 5bf4baa08..52b0dadbe 100644
--- a/app/templates/components/big-number.html
+++ b/app/templates/components/big-number.html
@@ -39,7 +39,7 @@
   <span class="big-number-with-status">
     {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
     {% if show_failures %}
-      <span class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      <span class="big-number-status{% if danger_zone %} big-number-status--failing{% endif %}">
         {% if failures %}
           {% if failure_link %}
             <a class="usa-link" href="{{ failure_link }}">
diff --git a/app/templates/components/status-box.html b/app/templates/components/status-box.html
index 1832fe1fd..5fbc5d78e 100644
--- a/app/templates/components/status-box.html
+++ b/app/templates/components/status-box.html
@@ -1,6 +1,6 @@
 {% macro status_box(number, label, failing=false, percentage=None, url=None) %}
   <div class="big-number-with-status">
-    <div class="big-number-status{% if failing %}-failing{% endif %}">
+    <div class="big-number-status{% if failing %} big-number-status--failing{% endif %}">
       {% if url %}
         <a class="usa-link" href="{{ url }}">{{ number }} {{ label }}</a>
       {% else %}