From 96241a8a3b23e8f2b09d5a3953f00ed7ef72dbf7 Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Wed, 20 Dec 2023 14:53:27 -0800
Subject: [PATCH] added error alert to edit textbox page

---
 .../sass/uswds/_uswds-theme-custom-styles.scss    |  4 ++++
 app/templates/components/textbox.html             | 15 ++++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 516fa6c89..341ee6d9a 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -475,3 +475,7 @@ details form {
   padding-left: 5px;
   letter-spacing: 0.04em;
 }
+
+.edit-textbox-error-mt {
+   margin-top: 1.5rem;
+}
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index c7bc28d45..3e479cbce 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -19,17 +19,22 @@
     class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
+    {% if field.errors %}
+      <div class="usa-alert usa-alert--error edit-textbox-error-mt" role="alert">
+        <div class="usa-alert__body">
+          <h4 class="usa-alert__heading">Error message</h4>
+          <p class="usa-alert__text" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
+            {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
+          </p>
+        </div>
+      </div>
+    {% endif %}
     <label class="usa-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
       {% else %}
         {{ field.label.text }}
       {% endif %}
-      {% if field.errors %}
-        <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
-          {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
-        </span>
-      {% endif %}
     </label>
     {% if hint %}
       <div class="usa-hint">