Add a new banner for telling you about trial mode

We’ve found in research that developers have no idea they’re in trial
mode until they hit an error. And even then they don’t really know what
trial mode means.

So this commit:
- adds a message to the API integration page about trial mode
- puts it in a really yellow banner to draw attention to it
- adds the same banner to the settings page

app/templates/views/api/index.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, hidden_field_heading %}
 {% from "components/api-key.html" import api_key %}
+{% from "components/banner.html" import banner_wrapper %}
 
 {% block page_title %}
   API integration – GOV.UK Notify
@@ -12,6 +13,15 @@
     API integration
   </h1>
 
+  {% if current_service.restricted %}
+    {% call banner_wrapper(type='warning') %}
+      <h2 class="heading-medium">Your service is in trial mode</h2>
+      <p>
+        You can only send messages to people in your team.
+      </p>
+    {% endcall %}
+  {% endif %}
+
   <nav class="grid-row">
     <div class="column-half">
       <a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>

app/templates/views/service-settings.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/banner.html" import banner_wrapper %}
 {% from "components/browse-list.html" import browse_list %}
 {% from "components/table.html" import mapping_table, row, text_field, edit_field, field %}
 
@@ -10,6 +11,23 @@
 
     <h1 class="heading-large">Settings</h1>
 
+    {% if current_service.restricted %}
+      {% call banner_wrapper(type='warning') %}
+        <h2 class="heading-medium">Your service is in trial mode</h2>
+
+        <ul class='list list-bullet'>
+          <li>you can only send messages to yourself</li>
+          <li>you can add people to your team, then you can send messages to them too</li>
+          <li>you can only send 50 messages per day</li>
+        </ul>
+
+        <p>
+          To remove these restrictions
+          <a href="{{ url_for('.service_request_to_go_live', service_id=current_service.id) }}">request to go live</a>.
+        </p>
+      {% endcall %}
+    {% endif %}
+
     <div class="bottom-gutter-2">
 
       {% call mapping_table(
@@ -39,25 +57,6 @@
       {% endcall %}
     </div>
 
-    {% if current_service.restricted %}
-      <div class="bottom-gutter-2">
-
-        <h2 class="heading-medium">Your service is in trial mode</h2>
-
-        <ul class='list list-bullet'>
-          <li>you can only send messages to yourself</li>
-          <li>you can add people to your team, then you can send messages to them too</li>
-          <li>you can only send 50 messages per day</li>
-        </ul>
-
-        <p>
-          To remove these restrictions
-          <a href="{{ url_for('.service_request_to_go_live', service_id=current_service.id) }}">request to go live</a>.
-        </p>
-
-      </div>
-    {% endif %}
-
     {% if current_user.has_permissions([], admin_override=True) %}
 
       <h2 class="heading-medium">Platform admin settings</h2>