Move ‘new thing’ buttons alongside heading

On the send messages and manage team pages we have big green buttons for
adding/inviting a new template or team member.

On the add template page it was at the bottom, and often got missed.

On the manage team page it was at the top, but maybe too prominent because it’s
big and green.

This commit tries putting it in the top right of the page instead (except when
the template page is empty, in which case it’s unchanged).

app/assets/stylesheets/_grids.scss

@@ -2,7 +2,6 @@
   @include grid-column(3/4);
 }
 
-
 .column-one-eighth {
   @include grid-column(1/8);
 }
@@ -19,3 +18,11 @@
 .bottom-gutter-2-3 {
   margin-bottom: $gutter * 2/3;
 }
+
+.align-with-heading {
+  display: block;
+  text-align: center;
+  margin-top: 45px;
+  padding-left: 2px;
+  padding-right: 2px;
+}

app/templates/views/choose-template.html

@@ -10,55 +10,64 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">{{ page_heading }}</h1>
+  {% if not templates %}
 
-  <form method="POST" enctype="multipart/form-data">
+    <h1 class="heading-large">{{ page_heading }}</h1>
 
-    {% if templates %}
+    {% if current_user.has_permissions(['manage_templates']) %}
-      {% if not has_jobs %}
+      <a href="{{ url_for('.add_service_template', service_id=service_id, template_type=template_type) }}" class="button">Add a new template</a>
-        {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], or_=True) %}
-        {{ banner(
-          """
-            Send yourself a test message
-          """,
-          subhead='Next step',
-          type="tip"
-        )}}
-        {% endif %}
-      {% endif %}
-      <div class="grid-row">
-        {% for template in templates %}
-          <div class="column-two-thirds">
-            {% if 'email' == template_type %}
-              {{ email_message(
-                template.subject,
-                template.formatted_as_markup,
-                name=template.name
-              ) }}
-            {% elif 'sms' == template_type %}
-              {{ sms_message(template.formatted_as_markup, name=template.name) }}
-            {% endif %}
-          </div>
-          <div class="column-one-third">
-            <div class="sms-message-use-links">
-              {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-              <a href="{{ url_for(".send_messages", service_id=service_id, template_id=template.id) }}">Add recipients</a>
-              <a href="{{ url_for(".send_message_to_self", service_id=service_id, template_id=template.id) }}">Send yourself a test</a>
-              {% endif %}
-              {% if current_user.has_permissions(['manage_templates']) %}
-              <a href="{{ url_for(".edit_service_template", service_id=service_id, template_id=template.id) }}">Edit template</a>
-              {% endif %}
-            </div>
-          </div>
-        {% endfor %}
-      </div>
     {% endif %}
 
-    <p>
+  {% else %}
-      {% if current_user.has_permissions(['manage_templates']) %}
+
-      <a href="{{ url_for('.add_service_template', service_id=service_id, template_type=template_type) }}" class="button">Add a new template</a>
+    <div class="grid-row">
-      {% endif %}
+      <div class="column-two-thirds">
-    </p>
+        <h1 class="heading-large">{{ page_heading }}</h1>
+      </div>
+      {% if current_user.has_permissions(['manage_templates']) %}
+        <div class="column-one-third">
+          <a href="{{ url_for('.add_service_template', service_id=service_id, template_type=template_type) }}" class="button align-with-heading">Add new template</a>
+        </div>
+      {% endif %}
+    </div>
+
+    {% if not has_jobs %}
+      {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], or_=True) %}
+      {{ banner(
+        """
+          Send yourself a test message
+        """,
+        subhead='Next step',
+        type="tip"
+      )}}
+      {% endif %}
+    {% endif %}
+    <div class="grid-row">
+      {% for template in templates %}
+        <div class="column-two-thirds">
+          {% if 'email' == template_type %}
+            {{ email_message(
+              template.subject,
+              template.formatted_as_markup,
+              name=template.name
+            ) }}
+          {% elif 'sms' == template_type %}
+            {{ sms_message(template.formatted_as_markup, name=template.name) }}
+          {% endif %}
+        </div>
+        <div class="column-one-third">
+          <div class="sms-message-use-links">
+            {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
+            <a href="{{ url_for(".send_messages", service_id=service_id, template_id=template.id) }}">Add recipients</a>
+            <a href="{{ url_for(".send_message_to_self", service_id=service_id, template_id=template.id) }}">Send yourself a test</a>
+            {% endif %}
+            {% if current_user.has_permissions(['manage_templates']) %}
+            <a href="{{ url_for(".edit_service_template", service_id=service_id, template_id=template.id) }}">Edit template</a>
+            {% endif %}
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  {% endif %}
 
-  </form>
 {% endblock %}

app/templates/views/invite-user.html

@@ -10,7 +10,7 @@ Manage users – GOV.UK Notify
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-    {{ user.name or user.email_localpart or "Add a new team member" }}
+    {{ user.name or user.email_localpart or "Invite a team member" }}
   </h1>
 
   <div class="grid-row">

app/templates/views/manage-users.html

@@ -16,11 +16,16 @@ Manage users – GOV.UK Notify
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <div class="grid-row">
-    Manage team
+    <div class="column-two-thirds">
-  </h1>
+      <h1 class="heading-large">
-
+        Manage team
-  <a href="{{ url_for('.invite_user', service_id=service_id) }}" class="button">Invite a team member</a>
+      </h1>
+    </div>
+    <div class="column-one-third">
+      <a href="{{ url_for('.invite_user', service_id=service_id) }}" class="button align-with-heading">Invite team member</a>
+    </div>
+  </div>
 
   {% call(item) list_table(
     users, caption='Active', **table_options

app/templates/views/service-settings.html

@@ -7,7 +7,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">Service settings</h1>
+    <h1 class="heading-large">Manage settings</h1>
 
     {{ browse_list([
       {

tests/app/main/views/test_manage_users.py

@@ -123,7 +123,7 @@ def test_should_show_page_for_inviting_user(
             client.login(api_user_active)
             response = client.get(url_for('main.invite_user', service_id=55555))
 
-        assert 'Add a new team member' in response.get_data(as_text=True)
+        assert 'Invite a team member' in response.get_data(as_text=True)
         assert response.status_code == 200
 
 
@@ -277,6 +277,6 @@ def test_user_cant_invite_themselves(
 
         assert response.status_code == 200
         page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
-        assert page.h1.string.strip() == 'Add a new team member'
+        assert page.h1.string.strip() == 'Invite a team member'
         form_error = page.find('span', class_='error-message').string.strip()
         assert form_error == "You can't send an invitation to yourself"