Remove log of activity from single notification

Having the full history of the message is more information than is necessary.
We should only show what stage the message is at, and the time that it reached
that stage.

We can do research later on to find out if users understand or care about the
different stages.

app/assets/stylesheets/components/sms-message.scss

@@ -42,7 +42,7 @@
   &-recipient {
     @include copy-19;
     color: $secondary-text-colour;
-    margin: 0;
+    margin: -$gutter-half 0 $gutter 0;
   }
 
   &-history {
@@ -50,29 +50,20 @@
     background: $turquoise;
     color: $white;
     padding: $gutter-half;
-    @include core-16;
-    margin-bottom: $gutter;
-    @extend %contain-floats;
+    @include bold-19;
+    margin: 0 0 $gutter 0;
 
     &-heading {
-      @include bold-16;
-      margin-bottom: 10px;
-    }
 
-    &-status {
-      float: left;
-      margin: 0 0 10px 0;
-      padding: 0;
-      width: 66%;
-    }
+      @include bold-19;
+      margin: 0;
+
+      &-time {
+        @include inline-block;
+        margin-left: 10px;
+        font-weight: normal;
+      }
 
-    &-time {
-      float: left;
-      clear: left;
-      padding: 0;
-      width: 33%;
-      min-width: 3.2em;
-      max-width: 4.8em;
     }
 
   }

app/main/views/jobs.py

@@ -75,10 +75,6 @@ def shownotification(notification_id):
         message=[
             message for message in messages if message['id'] == notification_id
         ][0],
-        history=[
-            {'time': now, 'status': 'Delivered'},
-            {'time': now, 'status': 'Received by handset'},
-            {'time': now, 'status': 'Accepted by network'},
-            {'time': now, 'status': 'Sent'},
-        ]
+        delivered_at=now,
+        uploaded_at=now
     )

app/templates/components/sms-message.html

@@ -1,22 +1,20 @@
 {% macro sms_message(body, recipient) %}
-  {% if recipient %}
-    <p class="sms-message-recipient">
-      {{ recipient }}
-    </p>
-  {% endif %}
   <div class="sms-message">
     <div class="sms-message-wrapper">
       {{ body|placeholders }}
     </div>
   </div>
+  {% if recipient %}
+    <p class="sms-message-recipient">
+      {{ recipient }}
+    </p>
+  {% endif %}
 {% endmacro %}
 
-{% macro message_history(title, log, heading_level=2) %}
-  <dl class="sms-message-history">
-    <h{{heading_level}} class="sms-message-history-heading">{{ title }}</h{{heading_level}}>
-    {% for update in log %}
-      <dt class="sms-message-history-time">{{ update.time }}</dt>
-      <dd class="sms-message-history-status">{{ update.status }}</dd>
-    {% endfor %}
-  </dl>
+{% macro message_status(status, time) %}
+  <div class="sms-message-history">
+    <p class="sms-message-history-heading">
+      {{ status }} <span class="sms-message-history-heading-time">{{ time }}</span>
+    </p>
+  </div>
 {% endmacro %}

app/templates/views/notification.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/sms-message.html" import sms_message, message_history %}
+{% from "components/sms-message.html" import sms_message, message_status %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -17,7 +17,7 @@ GOV.UK Notify | Notifications activity
 				{{ sms_message(message.message, message.phone) }}
 			</div>
 			<div class="column-one-third">
-				{{ message_history("Message history", history) }}
+				{{ message_status(message.status, delivered_at) }}
 			</div>
 		</div>