Updates to ‘send SMS’ page

Based on discussion with Pete.

Make the blue banner an ‘important’ banner (copied from Register to Vote, used
because it’s not as boxy and fits on the page better).

Remove the back button because you haven’t changed any data yet. If you need to
go back you can just press back or start again.

Make the filename stand out more.

Remove the ‘download example’ link. Will need to revist the best way of doing
this.

Make text messages consistently 2/3rd width.

app/templates/components/file-upload.html

@@ -1,4 +1,4 @@
-{% macro file_upload(field) %}
+{% macro file_upload(field, button_text="Choose file") %}
   <div class="form-group{% if field.errors %} error{% endif %}" data-module="file-upload">
     <label class="file-upload-label" for="{{ field.name }}">
       {{ field.label }}
@@ -17,7 +17,7 @@
       'class': 'file-upload-field'
     }) }}
     <label class="file-upload-button" for="{{ field.name }}">
-      Choose file
+      {{ button_text }}
     </label>
     <label class="file-upload-filename" for="{{ field.name }}"></label>
   </div>

app/templates/views/add-service.html

@@ -16,7 +16,8 @@ GOV.UK Notify | Set up service
     </h1>
 
     <p>
-      Users will see your service name:
+      Users will see your service name when they receive messages through GOV.UK
+      Notify:
     </p>
 
     <ul class="list-bullet bottom-gutter">
@@ -30,7 +31,7 @@ GOV.UK Notify | Set up service
     </ul>
 
     <form autocomplete="off" method="post">
-      {{ textbox(form.name) }}
+      {{ textbox(form.name, hint="You can change this later") }}
       {{ page_footer('Continue') }}
     </form>
 

app/templates/views/check-sms.html

@@ -21,9 +21,13 @@
 
   {% else %}
 
-    {{ sms_message(
-      message_template|replace_placeholders(upload_result.valid[0])
-    )}}
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(
+          message_template|replace_placeholders(upload_result.valid[0])
+        )}}
+      </div>
+    </div>
 
     <form method="POST" enctype="multipart/form-data">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

app/templates/views/job.html

@@ -25,7 +25,7 @@
     <ul class="grid-row job-totals">
       <li class="column-one-quarter">
         {{ big_number(
-          counts.total, 'queued'
+          1, 'queued'
         )}}
       </li>
       <li class="column-one-quarter">

app/templates/views/manage-templates.html

@@ -14,7 +14,7 @@ GOV.UK Notify | Manage templates
 
     {% if not has_jobs %}
       {{ banner(
-        '<a href="{}">Try sending a text message</a>'.format(
+        '<a href="{}">Send yourself a text message</a>'.format(
           url_for(".choose_sms_template", service_id=service_id)
         )|safe,
         subhead='Next step',

app/templates/views/send-sms.html

@@ -13,25 +13,23 @@
 
   <form method="POST" enctype="multipart/form-data">
 
-    {{ sms_message(template.content) }}
+    <div class="grid-row">
+      <div class="column-two-thirds">
+        {{ sms_message(template.content) }}
+      </div>
+    </div>
 
-    {{file_upload(form.file)}}
-
-    <p>
-      <a href="#">Download an example CSV file</a>
-    </p>
+    {{file_upload(form.file, button_text='Choose a CSV file')}}
 
     {{ banner(
       'You can only send messages to yourself until you <a href="{}">request to go live</a>'.format(
         url_for('.service_request_to_go_live', service_id=service_id)
       )|safe,
-      type='info'
+      type='important'
     ) }}
 
     {{ page_footer(
-      "Continue to preview",
-      back_link=url_for(".choose_sms_template", service_id=service_id),
-      back_link_text="Back"
+      "Continue to preview"
     ) }}
 
   </form>