Decided not to use the template and include the USWDS alert one-by-one

app/templates/partials/check/message-too-long.html

@@ -1,7 +1,9 @@
-<h1 class='banner-title'>
+<div class="usa-alert usa-alert--error" role="alert">
-  Message too long
+  <div class="usa-alert__body">
-</h1>
+    <h1 class="usa-alert__heading">Message too long</h1>
-<p class="usa-body">
+    <p class="usa-alert__text">
       Text messages cannot be longer than {{ SMS_CHAR_COUNT_LIMIT }} characters.
       Your message is {{ template.content_count }} characters.
-</p>
+    </p>
+  </div>
+</div>

app/templates/partials/check/not-allowed-to-send-to.html

@@ -1,12 +1,16 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="Trial mode: bad recipients" data-error-label="{{ upload_id }}">
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">
       You cannot send to
       {{ 'this' if count_of_recipients == 1 else 'these' }}
       {{ template_type_label }}
       {%- if count_of_recipients != 1 -%}
       {{ 'es' if 'email address' == template_type_label else 's' }}
       {%- endif %}
-</h1>
+    </h1>
-<p class="usa-body">
+    <p class="usa-alert__text">
       In <a class="usa-link" href="{{ url_for('.trial_mode_new') }}">trial mode</a> you can only
       send to yourself and members of your team
-</p>
+    </p>
+  </div>
+</div>

app/templates/partials/check/sent-previously.html

@@ -1,6 +1,8 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="File previously sent" data-error-label="{{ upload_id }}">
+<div class="usa-alert usa-alert--error" role="alert">
-  These messages have already been sent today
+  <div class="usa-alert__body">
-</h1>
+    <h1 class="usa-alert__heading">These messages have already been sent today</h1>
-<p class="usa-body">
+    <p class="usa-alert__text">
       If you need to resend them, rename the file and upload it again.
-</p>
+    </p>
+  </div>
+</div>

app/templates/partials/check/too-many-messages.html

@@ -1,23 +1,30 @@
-<h1 class='banner-title' data-module="track-error" data-error-type="Trial mode: too many recipients" data-error-label="{{ upload_id }}">
+<div class="usa-alert usa-alert--error" role="alert">
+  <div class="usa-alert__body">
+    <h1 class="usa-alert__heading">
       {% if original_file_name %}
       Too many recipients
       {% else %}
       Daily limit reached
       {% endif %}
-</h1>
+    </h1>
-<p class="usa-body">
+    <p class="usa-alert__text">
       You can only send {{ current_service.message_limit|format_thousands }} messages per day
       {%- if current_service.trial_mode %}
       in <a class="usa-link" href="{{ url_for('.trial_mode_new')}}">trial mode</a>
       {%- endif -%}
       .
-</p>
+    </p>
-{% if original_file_name %}
+    {% if original_file_name %}
-  <p class="usa-body">
+    <p class="usa-alert__text">
       {% if current_service.message_limit != remaining_messages %}
       You can still send {{ remaining_messages|format_thousands }} messages today, but
       {% endif %}
       ‘{{ original_file_name }}’ contains
       {{ count_of_recipients|recipient_count(template.template_type) }}.
     </p>
-{% endif %}
+    {% endif %}
+  </div>
+</div>
+
+
+

app/templates/views/check/column-errors.html

@@ -4,97 +4,109 @@
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/file-upload.html" import file_upload %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
-{% from "components/components/alert/macro.njk" import usaAlert %}
-
 
 {% block service_page_title %}
-  Error
+Error
 {% endblock %}
 
 {% block backLink %}
-  {{ usaBackLink({ "href": back_link }) }}
+{{ usaBackLink({ "href": back_link }) }}
 {% endblock %}
 
 {% block maincolumn_content %}
 
-  <div class="">
+<div class="">
   {% call banner_wrapper(type='dangerous') %}
 
   {% if recipients.too_many_rows %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">
+  <div class="usa-alert usa-alert--error" role="alert">
-          Your file has too many rows
+    <div class="usa-alert__body">
-        </h1>
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Too many rows" data-error-label="{{ upload_id }}">Your file has too many rows</h1>
-        <p>
+      <p class="usa-alert__text">
           Notify can process up to
           {{ "{:,}".format(recipients.max_rows) }} rows at once. Your
           file has {{ "{:,}".format(recipients|length) }} rows.
       </p>
+    </div>
+  </div>
 
   {% elif not count_of_recipients %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="No rows" data-error-label="{{ upload_id }}">
+  <div class="usa-alert usa-alert--error" role="alert">
-          Your file is missing some rows
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="No rows"
+        data-error-label="{{ upload_id }}">Your file is missing some rows
       </h1>
       {% if recipients.missing_column_headers %}
-          <p>
+      <p class="usa-alert-text">
         It needs at least one row of data, and {{ recipients.missing_column_headers | sort() | formatted_list(
         prefix='a column called',
         prefix_plural='columns called'
         ) }}.
       </p>
       {% else %}
-          <p>
+      <p class="usa-alert-text">
         It needs at least one row of data.
       </p>
       {% endif %}
+    </div>
+  </div>
 
   {% elif not recipients.has_recipient_columns %}
 
-        <h1 class='banner-title' data-module="track-error" data-error-type="Missing recipient columns" data-error-label="{{ upload_id }}">
+  <div class="usa-alert usa-alert--error" role="alert">
-          There’s a problem with your column names
+    <div class="usa-alert__body">
-        </h1>
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Missing recipient columns"
-          <p>
+        data-error-label="{{ upload_id }}">There’s a problem with your column names</h1>
+      <p class="usa-alert-text">
         Your file needs a column called ‘{{ first_recipient_column }}’.
       </p>
-          <p>
+      <p class="usa-alert-text">
         Right now it has {{ recipients.column_headers | formatted_list(
         prefix='one column, called ',
         prefix_plural='columns called '
         ) }}.
       </p>
+    </div>
+  </div>
 
   {% elif recipients.duplicate_recipient_column_headers %}
 
-      {% set duplicate_recipient_column_headers = recipients.duplicate_recipient_column_headers
+  <div class="usa-alert usa-alert--error" role="alert">
-        | formatted_list(
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Duplicate recipient columns"
+        data-error-label="{{ upload_id }}">There’s a problem with your column names</h1>
+      <p class="usa-alert__text">
+        We found more than one column called {{ (
+        recipients.duplicate_recipient_column_headers
+        ) | formatted_list(
         conjunction='or',
         prefix='',
         prefix_plural=''
-      ) %}
+        ) }}.
-      
+      </p>
-      {{ usaAlert({
+      <p class="usa-alert__text">
-          "heading": "There’s a problem with your column names",
+        Delete or rename one of these columns and try again.
-          "text": "We found more than one column called " + duplicate_recipient_column_headers + ". Delete or rename one of these columns and try again.",
+      </p>
-          "type": "error",
+    </div>
-        })
+  </div>
-      }}
 
   {% elif recipients.missing_column_headers %}
 
-      {% set missing_column_headers = recipients.missing_column_headers | formatted_list(
+  <div class="usa-alert usa-alert--error" role="alert">
+    <div class="usa-alert__body">
+      <h1 class="usa-alert__heading banner-title" data-module="track-error" data-error-type="Missing placeholder columns"
+        data-error-label="{{ upload_id }}">Your column names need to match the double brackets in your template</h1>
+      <p class="usa-alert__text">
+        Your file is missing {{ recipients.missing_column_headers | formatted_list(
         conjunction='and',
         prefix='a column called ',
         prefix_plural='columns called '
-      )%}
+        ) }}.
-
+      </p>
-      {{ usaAlert({
+    </div>
-        "heading": "Your column names need to match the double brackets in your template",
+  </div>
-        "text": "Your file is missing " + missing_column_headers + ".",
-        "type": "error",
-        }) 
-      }}
-
 
   {% elif sent_previously %}
 
@@ -116,10 +128,10 @@
   {% endif %}
 
   {% endcall %}
-  </div>
+</div>
 
 
-  <div class="js-stick-at-top-when-scrolling">
+<div class="js-stick-at-top-when-scrolling">
   <div class="form-group">
     {% if not request.args.from_test %}
     {{ file_upload(
@@ -131,15 +143,16 @@
     {% endif %}
   </div>
   <a href="#content" class="usa-link back-to-top-link">Back to top</a>
-  </div>
+</div>
 
-  {% if not request.args.from_test %}
+{% if not request.args.from_test %}
 
-    {% set column_headers = recipients._raw_column_headers if recipients.duplicate_recipient_column_headers else recipients.column_headers %}
+{% set column_headers = recipients._raw_column_headers if recipients.duplicate_recipient_column_headers else
+recipients.column_headers %}
 
-    <h2 class="font-body-lg" id="file-preview">{{ original_file_name }}</h2>
+<h2 class="font-body-lg" id="file-preview">{{ original_file_name }}</h2>
 
-    <div class="fullscreen-content" data-module="fullscreen-table">
+<div class="fullscreen-content" data-module="fullscreen-table">
   {% call(item, row_number) list_table(
   recipients.displayed_rows,
   caption=original_file_name,
@@ -175,14 +188,13 @@
   {% endif %}
   {% endcall %}
   {% endif %}
-  </div>
+</div>
 
-  {% if recipients.too_many_rows %}
+{% if recipients.too_many_rows %}
-    <p class="table-show-more-link">
+<p class="table-show-more-link">
   Only showing the first {{ count_of_displayed_recipients }} rows
-    </p>
+</p>
-  {% elif count_of_displayed_recipients < count_of_recipients %}
+{% elif count_of_displayed_recipients < count_of_recipients %} <p class="table-show-more-link">
-    <p class="table-show-more-link">
   {% if row_errors and not recipients.missing_column_headers %}
   Only showing the first {{ count_of_displayed_recipients }} rows with errors
   {% else %}
@@ -198,4 +210,4 @@
   <h2 class="font-body-lg">Preview of {{ template.name }}</h2>
   {{ template|string }}
 
-{% endblock %}
+  {% endblock %}