Update styleguide

app/assets/stylesheets/components/table.scss

@@ -56,6 +56,7 @@
 .table-empty-message {
   @include core-16;
   color: $secondary-text-colour;
+  border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
-  padding: 5px 0 8px 0;
+  padding: 0.75em 0 0.5625em 0;
 }

app/templates/admin_template.html

@@ -72,19 +72,9 @@
   <main id="content" role="main" class="page-container">
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
-          <ul class="banner-dangerous">
-            {% for category, message in messages %}
-              <li class="flash-message">
-                {{ message }}
-                {% if 'delete' == category %}
-                  <form method='post'>
-                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                    <input type="submit" class="button" name="delete" value="Yes, delete this template" />
-                  </form>
-                {% endif %}
-              </li>
-            {% endfor %}
-          </ul>
+          {% for category, message in messages %}
+            {{ banner(message, 'dangerous', delete_button="Yes, delete this template" if 'delete' == category else None)}}
+          {% endfor %}
         {% endif %}
       {% endwith %}
       {% block fullwidth_content %}{% endblock %}

app/templates/components/banner.html

@@ -1,5 +1,11 @@
-{% macro banner(body, type=None, with_tick=False) %}
+{% macro banner(body, type=None, with_tick=False, delete_button=None) %}
   <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
     {{ body }}
+    {% if delete_button %}
+      <form method='post'>
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <input type="submit" class="button" name="delete" value="{{ delete_button }}" />
+      </form>
+    {% endif %}
   </div>
 {% endmacro %}

app/templates/views/styleguide.html

@@ -22,14 +22,25 @@
   <p><a href="https://github.com/alphagov/notifications-admin/blob/master/app/templates/views/styleguide.html">View source</a></p>
 
   <h2 class="heading-large">Banner</h2>
-  <p>Used to show the result of a user’s action.</p>
-  {{ banner("This is a banner", with_tick=True) }}
+  <p>Used to show the status of a thing or action.</p>
+
+  {{ banner("You sent 1,234 text messages", with_tick=True) }}
+
   <div class="grid-row">
     <div class="column-one-third">
       {{ banner("Delivered 10:20") }}
     </div>
   </div>
 
+  {{ banner(
+    'Your service is in restricted mode. You can only send notifications to yourself.',
+    'info'
+  ) }}
+
+  {{ banner('You’re not allowed to do this', 'dangerous')}}
+
+  {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
+
   <h2 class="heading-large">Big number</h2>
 
   <p>Used to show some important statistics.</p>