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/assets/stylesheets/components/banner.scss

@@ -82,3 +82,14 @@
   }
 
 }
+
+.banner-important {
+  @extend %banner;
+  background: $white;
+  color: $text-colour;
+  background-image: file-url("icon-important-2x.png");
+  background-size: 34px 34px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  padding: 7px 0 5px 50px;
+}

app/assets/stylesheets/components/file-upload.scss

@@ -29,6 +29,7 @@
     &-filename {
       display: inline-block;
       padding-left: $gutter-half;
+      @include bold-19;
     }
 
   }

app/assets/stylesheets/main.scss

@@ -1,3 +1,6 @@
+// Path to assets for use with file-url()
+$path: '/static/images/';
+
 // Dependencies from GOV.UK Frontend Toolkit
 // https://github.com/alphagov/govuk_frontend_toolkit/
 @import 'conditionals';

app/main/forms.py

@@ -217,7 +217,7 @@ class ChangePasswordForm(Form):
 
 
 class CsvUploadForm(Form):
-    file = FileField('Add your recipients by uploading a CSV file', validators=[DataRequired(
+    file = FileField('Add recipients', validators=[DataRequired(
                      message='Please pick a file'), CsvFileValidator()])
 
 

app/main/views/add_service.py

@@ -10,8 +10,8 @@ from app.main.forms import AddServiceForm
 def add_service():
     form = AddServiceForm(services_dao.find_all_service_names)
     services = services_dao.get_services(current_user.id)
-    if len(services) == 0:
-        heading = 'Set up notifications for your service'
+    if len(services['data']) == 0:
+        heading = 'Which service do you want to set up notifications for?'
     else:
         heading = 'Add a new service'
     if form.validate_on_submit():

app/main/views/dashboard.py

@@ -29,7 +29,7 @@ def service_dashboard(service_id):
     return render_template(
         'views/service_dashboard.html',
         jobs=list(reversed(jobs)),
-        free_text_messages_remaining='25,000',
+        free_text_messages_remaining='250,000',
         spent_this_month='0.00',
         template_count=len(templates),
         service_id=str(service_id))

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>