Simplify check and send SMS page

This commit:
- removes the row numbering so it’s easier to scan the list of phone numbers
- adds subheadings for 'first three' and 'last three'
- puts the 'see all' link at the end

app/assets/stylesheets/components/submit-form.scss

@@ -1,6 +1,8 @@
-.button {
+.submit-form {
 
-  &-secondary {
+  margin-bottom: 50px;
+
+  &-back-link {
     @include button($grey-1);
     padding: 0.52632em 0.78947em 0.26316em 0.78947em;
     @include inline-block;

app/assets/stylesheets/main.scss

@@ -31,7 +31,7 @@
 @import "components/template-picker";
 @import "components/placeholder";
 @import "components/sms-message";
-@import "components/button";
+@import "components/submit-form";
 @import "components/table";
 
 // TODO: break this up

app/templates/components/submit-form.html

@@ -0,0 +1,11 @@
+{% macro submit_form(button_text, back_link) %}
+  <div class="submit-form">
+    <form method="POST" enctype="multipart/form-data">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+      <input type="submit" class="button" value="{{ button_text }}" />
+      {% if back_link %}
+        <a class="submit-form-back-link" role="button" href="{{ back_link }}">Back</a>
+      {% endif %}
+    </form>
+  </div>
+{% endmacro %}

app/templates/views/check-sms.html

@@ -2,6 +2,7 @@
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/table.html" import table, field %}
 {% from "components/placeholder.html" import placeholder %}
+{% from "components/submit-form.html" import submit_form %}
 
 {% block page_title %}
 	GOV.UK Notify | Send text messages
@@ -15,31 +16,28 @@
 
 			<h2 class="heading-medium">Check and confirm</h2>
 
-	  	<p>
-				<form method="POST" enctype="multipart/form-data">
-					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-			  	<input type="submit" class="button" value="Send {{ number_of_recipients }} text messages" />
-					<a class="button-secondary" role="button" href="{{ url_for(".sendsms") }}">Back</a>
-				</form>
-	  	</p>
+			{{ submit_form(
+				"Send {} text messages".format(number_of_recipients),
+				url_for(".sendsms")
+			) }}
+
+			<h3 class="heading-small">First 3 messages</h2>
 
 			{% if recipients.first_three and recipients.last_three %}
 
 				{% for recipient in recipients.first_three %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
-				<p>
-					<a href="#">See rows 4 to {{ number_of_recipients - 3 }}</a>
-				</p>
+				<h3 class="heading-small">Last 3 messages</h2>
 
 				{% for recipient in recipients.last_three %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(number_of_recipients - 3 + loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
@@ -48,20 +46,21 @@
 				{% for recipient in recipients.all %}
 					{{ sms_message(
 						message_template|replace_placeholders(recipient),
-						"Row {} {}".format(loop.index, recipient['phone'])
+						"{}".format(recipient['phone'])
 					) }}
 				{% endfor %}
 
 			{% endif %}
 
 			<p>
-				<form method="POST" enctype="multipart/form-data">
-					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-					<input type="submit" class="button" value="Send {{ number_of_recipients }} text messages" />
-					<a class="button-secondary" role="button" href="{{ url_for(".sendsms") }}">Back</a>
-				</form>
+				<a href="#">See all</a>
 			</p>
 
+			{{ submit_form(
+				"Send {} text messages".format(number_of_recipients),
+				url_for(".sendsms")
+			) }}
+
 		</div>
 	</div>