Various tweaks

- remove black border from banner
- make banners have internal columns
- make nav 2/3rd width, 19px text and more spaced out
- only show the ‘restricted mode’ banner where it’s needed
- rename ‘restricted mode’ to ‘trial mode’

app/assets/stylesheets/app.scss

@@ -1,26 +1,5 @@
 // Extra CSS overlaying elements
 
-.form-control-2-3, .form-control-1-4 {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  font-family: "nta", Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.25;
-  font-weight: 400;
-  text-transform: none;
-  padding: 4px;
-  background-color: #fff;
-  border: 2px solid #6f777b;
-}
-
-@media (min-width: 641px) {
-  .form-control-2-3, .form-control-1-4 {
-    font-size: 19px;
-    line-height: 1.31579;
-  }
-}
-
 #global-header-bar {
   background-color: $red;
 }

app/assets/stylesheets/components/banner.scss

@@ -8,7 +8,7 @@
   display: block;
   padding: $gutter-half;
   margin: $gutter-half 0 $gutter 0;
-  text-align: center;
+  text-align: left;
   position: relative;
 
 }
@@ -16,7 +16,7 @@
 .banner-with-tick {
 
   @extend %banner;
-  padding: $gutter-half $gutter;
+  padding: $gutter-half ($gutter + $gutter-half);
 
   &:before {
     @include core-24;
@@ -58,7 +58,6 @@
   background: $yellow;
   color: $text-colour;
   text-align: left;
-  border: 5px solid $text-colour;
   font-weight: bold;
 
   a:link, a:visited {

app/assets/stylesheets/components/navigation.scss

@@ -1,13 +1,13 @@
 .navigation {
 
-  padding: 3px 0 0 0;
+  padding: 20px 0 0 0;
 
   ul, h2 {
-    @include core-16;
+    @include core-19;
     border-bottom: 1px solid $border-colour;
-    margin: 10px 20px 0 0;
+    margin: 10px 20px 15px 0;
     list-style-type: none;
-    padding: 0 0 8px 0;
+    padding: 0 0 10px 0;
   }
 
   h2 {
@@ -15,7 +15,7 @@
   }
 
   li {
-    margin: 7px 0 0 0;
+    margin: 10px 0 0 0;
   }
 
   a:link,

app/main/views/dashboard.py

@@ -30,5 +30,5 @@ def service_dashboard(service_id):
         jobs=jobs,
         free_text_messages_remaining='25,000',
         spent_this_month='0.00',
-        has_templates=bool(len(templates)),
+        template_count=len(templates),
         service_id=str(service_id))

app/templates/components/banner.html

@@ -1,6 +1,19 @@
-{% macro banner(body, type=None, with_tick=False, delete_button=None) %}
+{% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
   <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
+    {% if subhead %}
+      <div class="grid-row">
+        <div class="column-one-third">
+          {{ subhead }}
+        </div>
+        <div class="column-two-thirds">
+    {% endif %}
+
     {{ body }}
+
+    {% if subhead %}
+        </div>
+      </div>
+    {% endif %}
     {% if delete_button %}
       <form method='post'>
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

app/templates/views/api-keys.html

@@ -22,6 +22,12 @@
     developer documentation</a>.
   </p>
 
+  {{ banner(
+    'You can only send notifications to yourself',
+    subhead='Trial mode',
+    type='info'
+  ) }}
+
   <h2 class="api-key-name">
     Service ID
   </h2>

app/templates/views/manage-templates.html

@@ -9,14 +9,19 @@ GOV.UK Notify | Manage templates
 
 {% block maincolumn_content %}
 
+    <h1 class="heading-large">Templates</h1>
+
+    {{ banner(
+      '<a href="{}">Try sending a text message</a>'.format(
+        url_for(".send_sms", service_id=service_id)
+      )|safe,
+      subhead='Next step',
+      type="tip"
+    )}}
+
     <div class="grid-row">
       <div class="column-two-thirds">
 
-        <h1 class="heading-large">Templates</h1>
-
-        <p>
-          <a href="{{ url_for('.add_service_template', service_id=service_id) }}">Add new template</a>
-
         {% for template in templates %}
           {% if template.get_field('template_type') == 'sms' %}
             {{ sms_message(
@@ -35,6 +40,10 @@ GOV.UK Notify | Manage templates
           {% endif %}
         {% endfor %}
 
+        <p>
+          <a href="{{ url_for('.add_service_template', service_id=service_id) }}" class="button">Add new template</a>
+        </p>
+
       </div>
     </div>
 

app/templates/views/send-sms.html

@@ -10,37 +10,34 @@
 {% block maincolumn_content %}
   <form method="POST" enctype="multipart/form-data">
 
-    <div class="grid-row">
-      <div class="column-three-quarters">
-
         <h1 class="heading-large">Send text messages</h1>
 
-        <fieldset class='form-group'>
+    <fieldset class='form-group'>
-          <legend class="heading-medium">1. Choose text message template</legend>
+      <legend class="heading-medium">1. Choose text message template</legend>
-          {% for template in templates %}
+      {% for template in templates %}
-            {{ sms_message(
+        {{ sms_message(
-              template.content, name=template.name, input_name='template', input_index=template.id
+          template.content, name=template.name, input_name='template', input_index=template.id
-            ) }}
+        ) }}
-          {% endfor %}
+      {% endfor %}
-        </fieldset>
+    </fieldset>
 
-        <h2 class="heading-medium">2. Add recipients</h2>
+    <h2 class="heading-medium">2. Add recipients</h2>
+    {{ banner(
+      'You can only send notifications to yourself',
+      subhead='Trial mode',
+      type='info'
+    ) }}
+    <p>
+      Upload a CSV file to add your recipients’ details.
+    </p>
+    <p>
+      You can also <a href="#">download an example CSV</a>.
+    </p>
+    <p>
+      {{textbox(form.file)}}
+    </p>
 
-        <p>
+    {{ page_footer("Continue") }}
-          Upload a CSV file to add your recipients’ details.
-        </p>
-        <p>
-          You can also <a href="#">download an example CSV</a>.
-        </p>
-        <p>
-          {{textbox(form.file)}}
-        </p>
-
-        {{ page_footer("Continue") }}
-
-      </div>
-    </div>
 
   </form>
-
 {% endblock %}

app/templates/views/service_dashboard.html

@@ -8,15 +8,6 @@
 
 {% block maincolumn_content %}
 
-    {% if not has_templates %}
-      {{ banner(
-        '<a href="{}">Add a template</a> to start sending notifications'.format(
-          url_for(".add_service_template", service_id=service_id)
-        )|safe,
-        type="tip"
-      )}}
-    {% endif %}
-
     <ul class="grid-row job-totals">
       <li class="column-half">
         {{ big_number(
@@ -32,24 +23,44 @@
       </li>
     </ul>
 
-    {% call(item) list_table(
+    {% if not template_count %}
-      [],
+      {{ banner(
-      caption="Recent text messages",
+        '<a href="{}">Add a text message template</a>'.format(
-      empty_message='You haven’t sent any text messages yet',
+          url_for(".add_service_template", service_id=service_id)
-      field_headings=['Job', 'File', 'Time', 'Status']
+        )|safe,
-    ) %}
+        subhead='Get started',
-      {% call field() %}
+        type="tip"
-        <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.file }}</a>
+      )}}
+    {% else %}
+      {{ banner(
+        '<a href="{}">Try sending a text message</a>'.format(
+          url_for(".send_sms", service_id=service_id)
+        )|safe,
+        subhead='Next step',
+        type="tip"
+      )}}
+    {% endif %}
+
+    {% if [] %}
+      {% call(item) list_table(
+        [],
+        caption="Recent text messages",
+        empty_message='You haven’t sent any text messages yet',
+        field_headings=['Job', 'File', 'Time', 'Status']
+      ) %}
+        {% call field() %}
+          <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.file }}</a>
+        {% endcall %}
+        {% call field() %}
+          <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.job }}</a>
+        {% endcall %}
+        {% call field() %}
+          {{ item.time }}
+        {% endcall %}
+        {% call field() %}
+          {{ item.status }}
+        {% endcall %}
       {% endcall %}
-      {% call field() %}
+    {% endif %}
-        <a href="{{ url_for('.view_job', service_id=service_id, job_id=456) }}">{{ item.job }}</a>
-      {% endcall %}
-      {% call field() %}
-        {{ item.time }}
-      {% endcall %}
-      {% call field() %}
-        {{ item.status }}
-      {% endcall %}
-    {% endcall %}
 
 {% endblock %}

app/templates/views/styleguide.html

@@ -35,15 +35,20 @@
   </div>
 
   {{ banner(
-    'Your service is in restricted mode. You can only send notifications to yourself.',
+    'You can only send notifications to yourself',
-    'info'
+    type='info',
+    subhead='Restricted mode'
   ) }}
 
   {{ banner('You’re not allowed to do this', 'dangerous')}}
 
   {{ banner('Are you sure you want to delete?', 'dangerous', delete_button="Yes, delete this thing")}}
 
-  {{ banner('<a href="#">Send your first message</a>'|safe, 'tip')}}
+  {{ banner(
+    '<a href="#">Send your first message</a>'|safe,
+    subhead='Get started',
+    type='tip'
+  )}}
 
   <h2 class="heading-large">Big number</h2>
 

app/templates/views/verify.html

@@ -12,16 +12,16 @@ GOV.UK Notify | Confirm email address and mobile number
   <div class="column-two-thirds">
     <h1 class="heading-large">Activate your account</h1>
 
-    <p>We've sent you confirmation codes by email and text message. You need to enter both codes here.</p>
+    <p>We’ve sent you confirmation codes by email and text message. You need to enter both codes here.</p>
 
     <form autocomplete="off" method="post">
       {{ textbox(form.email_code) }}
       <p>
-        <a href="{{ url_for('.check_and_resend_email_code')}}">I haven't received an email</a>
+        <a href="{{ url_for('.check_and_resend_email_code')}}">I haven’t received an email</a>
       </p>
       {{ textbox(form.sms_code) }}
       <p>
-        <a href="{{ url_for('.check_and_resend_text_code') }}">I haven't received a text</a></span>
+        <a href="{{ url_for('.check_and_resend_text_code') }}">I haven’t received a text</a></span>
       </p>
       {{ page_footer("Continue") }}
     </form>

app/templates/withnav_template.html

@@ -2,14 +2,10 @@
 
 {% block fullwidth_content %}
   <div class="grid-row">
-    <div class="column-one-quarter">
+    <div class="column-one-third">
       {% include "main_nav.html" %}
     </div>
-    <div class="column-three-quarters">
+    <div class="column-two-thirds">
-      {{ banner(
-        'Your service is in restricted mode. You can only send notifications to yourself.',
-        'info'
-      ) }}
       {% include 'flash_messages.html' %}
       {% block maincolumn_content %}{% endblock %}
     </div>

tests/app/main/views/test_dashboard.py

@@ -16,5 +16,4 @@ def test_should_show_recent_jobs_on_dashboard(app_,
 
         assert response.status_code == 200
         text = response.get_data(as_text=True)
-        assert 'You haven’t sent any text messages yet' in text
         assert 'Test Service' in text

tests/app/main/views/test_verify.py

@@ -17,7 +17,7 @@ def test_should_return_verify_template(app_,
             response = client.get(url_for('main.verify'))
             assert response.status_code == 200
             assert (
-                "We've sent you confirmation codes by email and text message."
+                "We’ve sent you confirmation codes by email and text message."
                 " You need to enter both codes here.") in response.get_data(as_text=True)