added id and also refactor error message on templates page

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -932,3 +932,7 @@ li.linked-card:hover svg,
    font-size: units(3);
    font-weight: bold;
 }
+
+.form-control-error {
+   border: 4px solid #b10e1e
+}

app/templates/components/textbox.html

@@ -16,19 +16,9 @@
   placeholder=''
 ) %}
   <div
-    class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
+    class="usa-form-group{% if field.errors %} usa-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 }}
@@ -41,6 +31,12 @@
         {{ hint }}
       </div>
     {% endif %}
+    {% if field.errors %}
+    <span class="usa-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 %}
+
     {%
       if highlight_placeholders or autosize
     %}

app/templates/views/edit-sms-template.html

@@ -32,7 +32,7 @@
         <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
           {{ form.name(param_extensions={
             "extra_form_group_classes": "margin-bottom-2",
-            "hint": {"text": "Your recipients will not see this"}
+            "id": "template-name"
           }) }}
           {{ textbox(
             form.template_content,
@@ -41,7 +41,7 @@
             hint=content_hint,
             rows=5,
             extra_form_group_classes='margin-bottom-1',
-            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
+            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!',
           ) }}
           {% if current_user.platform_admin %}
             {{ form.process_type }}

app/templates/views/send-test.html

@@ -25,7 +25,7 @@
   ) %}
     <div class="grid-row">
       <div class="grid-col-12 {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
-        {{ form.placeholder_value(param_extensions={"classes": ""}) }}
+        {{ form.placeholder_value(param_extensions={"id": "phone-number"}) }}
       </div>
       {% if skip_link or link_to_upload %}
         <div class="grid-col-12 margin-top-1">

app/templates/views/templates/template.html

@@ -88,8 +88,4 @@
 
   </div>
 
-  <!--<div class="">
-    {{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
-  </div>-->
-
 {% endblock %}