Content and styling updates to CSV upload page

app/templates/views/send.html

@@ -7,7 +7,7 @@
 <script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
 
 {% block service_page_title %}
-  Upload a list of {{ 999|recipient_count_label(template.template_type) }}
+  Upload your bulk-sending spreadsheet
 {% endblock %}
 
 
@@ -22,7 +22,7 @@
     },
     {
       "svg_src": "#check_circle",
-      "card_heading": "Double check it’s the only column with Phone number as its label",
+      "card_heading": "Double check it's the only column with Phone number as its label",
     },
     {
       "svg_src": "#check_circle",
@@ -47,28 +47,29 @@
   {
     "svg_src": "#check_circle",
     "card_heading": "Fill in each conditional placeholder column with a Yes (Y) or No (N) to “answer” whether the recipient meets its criteria",
+  },
+  {
+    "svg_src": "#check_circle",
+    "card_heading": "Fill in each personalized placeholder with the appropriate data or information",
   }
   ]
 %}
 
 {% block maincolumn_content %}
 
-  {{ page_header('Upload a list of {}'.format(999|recipient_count_label(template.template_type))) }}
-
-  <h2 class="font-body-lg margin-bottom-2">Populate your template</h2>
-  <p>Template: {{ template.name }}</p>
-  {{ template|string }}
+  {{ page_header('Upload your bulk-sending spreadsheet')}}
+  <p class="font-sans-lg text-base">Organize phone numbers and information in a single spreadsheet and upload when you have multiple messages to send. Column headers in the spreadsheet will place the data in the right spots within the template that's selected.</p>
 
   <div class="page-footer bottom-gutter margin-top-3">
     {{file_upload(
       form.file,
       allowed_file_extensions=allowed_file_extensions,
-      button_text='Choose a file',
+      button_text='Choose and upload a spreadsheet',
       show_errors=False
     )}}
   </div>
 
-  <h2 class="font-body-lg">Use our example file</h2>
+  <h2 class="font-body-lg">A spreadsheet is available to use</h2>
 
   <div class="spreadsheet" data-module="fullscreen-table">
     {% call(item, row_number) list_table(
@@ -84,7 +85,7 @@
     {% endcall %}
   </div>
   <p class="hint">
-    Each template saved in Notify is given an example <abbr title="Comma Separated Values">CSV</abbr> formatted spreadsheet like this. It’s the most reliable file format for uploading your contact list. Use it to populate your template with the right data items. Start by downloading this example for your message template. Then save it as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging.
+    Each template saved in Notify is given an example <abbr title="Comma Separated Values">CSV</abbr> formatted spreadsheet like this. It's the most reliable file format for uploading your contact list. Use this example to populate your template with the right data items. Start by downloading this example for your message template. Start by downloading this example for your message template. Then save it as a <abbr title="Comma Separated Values">CSV</abbr> file for bulk messaging.
   </p>
   <p class="table-show-more-link">
     <a class="usa-link display-flex margin-top-1" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)
@@ -93,8 +94,8 @@
   </p>
   <h2 class="font-body-lg">Your bulk-sending spreadsheet checklist</h2>
   <div class="grid-container margin-top-2 padding-0">
-    <div class="grid-row grid-gap-4">
-      <div class="grid-col-5">
+    <div class="grid-row">
+      <div class="grid-col-12">
         <h3>Phone numbers</h3>
         <ul class="usa-icon-list">
           {% for item in phone_numbers %}
@@ -111,7 +112,7 @@
           {% endfor %}
         </ul>
       </div>
-      <div class="grid-col-5 margin-left-4 padding-x-4 padding-bottom-4">
+      <div class="grid-col-12">
         <h3>Additional data</h3>
         <ul class="usa-icon-list">
           {% for item in additional_data %}
@@ -128,7 +129,27 @@
           {% endfor %}
         </ul>
       </div>
+      <div class="grid-col-12">
+        <h3>If an error occurs</h3>
+        <ul class="usa-icon-list">
+          <li class="usa-icon-list__item">
+            <div class="usa-icon-list__icon text-red">
+              <svg aria-hidden="true" focusable="false" role="img" class="usa-icon">
+                <use xlink:href="{{ asset_url('img/sprite.svg') }}#error"></use>
+              </svg>
+            </div>
+            <div class="usa-icon-list__content">
+              If you're receiving any errors, double check your file format and make sure your data is pasted in with values only.
+            </div>
+          </li>
+        </ul>
+        </div>
     </div>
   </div>
 
+  <h2 class="font-body-lg margin-bottom-2">You are filling in this template</h2>
+  <p>Template: {{ template.name }}</p>
+  {{ template|string }}
+
+
 {% endblock %}