Use file list pattern for notifications

Most of our tables are now lists which have:
- a thing you click on
- some secondary info about that thing underneath
- some extra numbers/status on the right hand side

Since these are so similar, they should share the same pattern, which
this commit does (using the `file-list` pattern).

Visually this means:
- the secondary text on the inbox becomes grey not black, for
  consistency
- the status bit of the notifications tables bottom align like the
  status of messages in the inbox

These both seem like OK changes to make for the sake of consistency.

app/assets/stylesheets/views/dashboard.scss

@@ -96,5 +96,6 @@
 }
 
 .align-with-message-body {
+  display: block;
   margin-top: $gutter * 5 / 6;
 }

app/templates/components/table.html

@@ -120,6 +120,7 @@
 
 {% macro notification_status_field(notification) %}
   {% call field(status=notification.status|format_notification_status_as_field_status, align='right') %}
+    {% if notification.status in ['created', 'sending', 'delivered'] %}<span class="align-with-message-body">{% endif %}
     {% if notification.status|format_notification_status_as_url %}
       <a href="{{ notification.status|format_notification_status_as_url }}">
     {% endif %}
@@ -135,6 +136,7 @@
         (notification.updated_at or notification.created_at)|format_datetime_short
       ) }}
     </span>
+    {% if notification.status in ['created', 'sending', 'delivered'] %}</span>{% endif %}
   {% endcall %}
 {% endmacro %}
 

app/templates/partials/jobs/notifications.html

@@ -50,8 +50,8 @@
         field_headings_visible=False
       ) %}
         {% call row_heading() %}
-          <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
-          <p>
+          <a class="file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
+          <p class="file-list-hint">
             {{ item.preview_of_content }}
           </p>
         {% endcall %}

app/templates/views/activity/notifications.html

@@ -17,10 +17,8 @@
     ) %}
 
       {% call row_heading() %}
-        <p>
-          <a href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
-        </p>
-        <p>
+        <a class="file-list-filename" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=item.id) }}">{{ item.to }}</a>
+        <p class="file-list-hint">
           {{ item.preview_of_content }}
         </p>
       {% endcall %}

app/templates/views/dashboard/inbox.html

@@ -31,10 +31,10 @@
         >
           {{ item.user_number | format_phone_number_human_readable }}
         </a>
-        <span class="wide-left-hand-column">{{ item.content }}</span>
+        <span class="file-list-hint">{{ item.content }}</span>
       {% endcall %}
       {% call field(align='right') %}
-        <span class="file-list-hint align-with-message-body">
+        <span class="align-with-message-body">
           {{ item.created_at | format_delta }}
         </span>
       {% endcall %}