From d9da63401f529436c2f1ec342b39448788ff988d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 23 Apr 2019 10:03:28 +0100
Subject: [PATCH] Normalise heading sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since we added template folders the templates page has had a ‘medium’
sized heading, where other pages have stuck with a ‘large’ size.

This commit rationalises the decision around which pages have which
heading size:
- ‘navigation’ pages (eg templates, team members, email reply to
  addresses) have medium sized headings
- transactional pages (ie ones which have a green button) keep the
  larger heading size
---
 app/assets/stylesheets/_grids.scss                        | 2 +-
 app/assets/stylesheets/app.scss                           | 6 +++++-
 app/assets/stylesheets/components/message.scss            | 6 ++----
 app/templates/components/folder-path.html                 | 2 +-
 app/templates/views/api/callbacks.html                    | 4 ++--
 app/templates/views/api/index.html                        | 4 ++--
 app/templates/views/dashboard/_upcoming.html              | 2 +-
 app/templates/views/manage-users.html                     | 2 +-
 app/templates/views/organisations/organisation/index.html | 2 +-
 .../views/organisations/organisation/settings/index.html  | 2 +-
 .../views/organisations/organisation/users/index.html     | 2 +-
 app/templates/views/service-settings.html                 | 8 ++++----
 app/templates/views/templates/choose.html                 | 4 ++--
 app/templates/views/templates/template.html               | 2 +-
 app/templates/views/usage-with-letters.html               | 2 +-
 app/templates/views/usage.html                            | 2 +-
 .../main/views/organisations/test_organisation_invites.py | 2 +-
 tests/app/main/views/test_api_integration.py              | 8 ++++----
 18 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss
index a4b7fdbcb..f73c38521 100644
--- a/app/assets/stylesheets/_grids.scss
+++ b/app/assets/stylesheets/_grids.scss
@@ -104,7 +104,7 @@
 
 .align-with-heading-copy-right {
   display: block;
-  margin-top: 35px;
+  margin: 21px 0 19px 0;
   text-align: right;
 }
 
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index e80f0ec18..4bd8db24b 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -75,7 +75,7 @@ a {
 
   .heading-large,
   > .heading-medium {
-    margin: 10px 0 15px 0;
+    margin: ($gutter / 3) 0 ($gutter / 3 * 2) 0;
     word-wrap: break-word;
   }
 
@@ -274,3 +274,7 @@ details .arrow {
 .nowrap {
   white-space: nowrap;
 }
+
+.heading-upcoming-jobs {
+  margin-top: $gutter / 3;
+}
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 37d21b2e1..c4b777b56 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -151,10 +151,6 @@
 
 .folder-heading {
 
-  .column-main>.grid-row:first-child &.heading-medium {
-    margin-top: $gutter-half;
-  }
-
   a,
   &-folder,
   &-subfolder {
@@ -241,6 +237,8 @@
     display: block;
     text-align: right;
     padding: $gutter-two-thirds 0 0 0;
+    position: relative;
+    top: -1px;
   }
 
 }
diff --git a/app/templates/components/folder-path.html b/app/templates/components/folder-path.html
index 8d25b1b9a..33f6cb52d 100644
--- a/app/templates/components/folder-path.html
+++ b/app/templates/components/folder-path.html
@@ -8,7 +8,7 @@
   link_current_item=False
 ) %}
   {% if show_fallback_page_title %}
-    <h1 class="heading-large">
+    <h1 class="heading-medium">
       {{ fallback_page_title }}
     </h1>
   {% else %}
diff --git a/app/templates/views/api/callbacks.html b/app/templates/views/api/callbacks.html
index 7bdf36583..eae9df866 100644
--- a/app/templates/views/api/callbacks.html
+++ b/app/templates/views/api/callbacks.html
@@ -22,13 +22,13 @@
 	    caption_visible=False
 	  ) %}
 	    {% call row() %}
-	      {{ text_field('Callbacks for delivery receipts') }}
+	      {{ text_field('Delivery receipts') }}
 	      {{ optional_text_field(delivery_status_callback, truncate=true) }}
 	      {{ edit_field('Change', url_for('.delivery_status_callback', service_id=current_service.id)) }}
 	    {% endcall %}
 
 	    {% call row() %}
-	      {{ text_field('Callbacks for received text messages') }}
+	      {{ text_field('Received text messages') }}
           {{ optional_text_field(received_text_messages_callback, truncate=true) }}
 	   	  {{ edit_field('Change', url_for('.received_text_messages_callback', service_id=current_service.id)) }}
 	    {% endcall %}
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index 0376da3f3..9397a97b5 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -10,7 +10,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large bottom-gutter">
+  <h1 class="heading-medium bottom-gutter-3-2">
     API integration
   </h1>
 
@@ -28,7 +28,7 @@
 
   <div class="grid-row">
     <div class="column-half">
-      <h2 class="heading-medium">
+      <h2 class="heading-small">
         Message log
       </h2>
     </div>
diff --git a/app/templates/views/dashboard/_upcoming.html b/app/templates/views/dashboard/_upcoming.html
index 5a252bbd5..0a63907bb 100644
--- a/app/templates/views/dashboard/_upcoming.html
+++ b/app/templates/views/dashboard/_upcoming.html
@@ -6,7 +6,7 @@
   {% if scheduled_jobs %}
     <div class='dashboard-table'>
       {% if not hide_heading %}
-        <h2 class="heading-medium">
+        <h2 class="heading-medium heading-upcoming-jobs">
           In the next few days
         </h2>
       {% endif %}
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index d97e1a269..e915f5ba4 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <h1 class="heading-medium">
     Team members
   </h1>
 
diff --git a/app/templates/views/organisations/organisation/index.html b/app/templates/views/organisations/organisation/index.html
index 67fb69689..1fd844422 100644
--- a/app/templates/views/organisations/organisation/index.html
+++ b/app/templates/views/organisations/organisation/index.html
@@ -6,7 +6,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <h1 class="heading-medium">
     Services
   </h1>
   <ul>
diff --git a/app/templates/views/organisations/organisation/settings/index.html b/app/templates/views/organisations/organisation/settings/index.html
index 8e340d39e..af2e26786 100644
--- a/app/templates/views/organisations/organisation/settings/index.html
+++ b/app/templates/views/organisations/organisation/settings/index.html
@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block maincolumn_content %}
-  <h1 class="heading-large">Settings</h1>
+  <h1 class="heading-medium">Settings</h1>
   <div class="bottom-gutter-3-2 settings-table body-copy-table">
     {% call mapping_table(
       caption='General',
diff --git a/app/templates/views/organisations/organisation/users/index.html b/app/templates/views/organisations/organisation/users/index.html
index 6bcade66b..418a4d7fc 100644
--- a/app/templates/views/organisations/organisation/users/index.html
+++ b/app/templates/views/organisations/organisation/users/index.html
@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <h1 class="heading-medium">
     Team members
   </h1>
 
diff --git a/app/templates/views/service-settings.html b/app/templates/views/service-settings.html
index 3332474f3..019ab7d81 100644
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -8,7 +8,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">Settings</h1>
+    <h1 class="heading-medium">Settings</h1>
 
     <div class="bottom-gutter-3-2 settings-table body-copy-table">
 
@@ -61,7 +61,7 @@
       {% endcall %}
 
       {% call mapping_table(
-        caption='Email',
+        caption='Email settings',
         field_headings=['Label', 'Value', 'Action'],
         field_headings_visible=False,
         caption_visible=True
@@ -113,7 +113,7 @@
       {% endcall %}
 
       {% call mapping_table(
-        caption='Text messages',
+        caption='Text message settings',
         field_headings=['Label', 'Value', 'Action'],
         field_headings_visible=False,
         caption_visible=True
@@ -191,7 +191,7 @@
       {% endcall %}
 
       {% call mapping_table(
-        caption='Letters',
+        caption='Letter settings',
         field_headings=['Label', 'Value', 'Action'],
         field_headings_visible=False,
         caption_visible=True
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html
index 4e0e22283..465cd2fdd 100644
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -47,7 +47,7 @@
 
   {% else %}
 
-    <div class="grid-row {% if current_service.all_template_folders %}bottom-gutter-1-2{% else %}bottom-gutter-2-3{% endif %}">
+    <div class="grid-row">
       <div class="{% if current_user.has_permissions('manage_templates') %} column-five-sixths {% else %} column-two-thirds {% endif %}">
         {{ folder_path(
           folders=template_folder_path,
@@ -66,7 +66,7 @@
     </div>
   {% endif %}
     {% if show_template_nav %}
-      <div class="bottom-gutter">
+      <div class="bottom-gutter-2-3">
         {{ pill(template_nav_items, current_value=template_type, show_count=False) }}
       </div>
     {% endif %}
diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html
index e47e316e9..82aa1486f 100644
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -29,7 +29,7 @@
       {% endcall %}
     </div>
   {% else %}
-    <div class="grid-row bottom-gutter-1-2">
+    <div class="grid-row">
       <div class="column-whole">
         {{ folder_path(
           folders=current_service.get_template_path(template._template),
diff --git a/app/templates/views/usage-with-letters.html b/app/templates/views/usage-with-letters.html
index ea5e06678..f0b7e901a 100644
--- a/app/templates/views/usage-with-letters.html
+++ b/app/templates/views/usage-with-letters.html
@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class='heading-large'>Usage</h1>
+    <h1 class='heading-medium'>Usage</h1>
 
     <div class="bottom-gutter">
       {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html
index f85bd07c4..fb10e8581 100644
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class='heading-large'>Usage</h1>
+    <h1 class='heading-medium'>Usage</h1>
 
     <div class="bottom-gutter">
       {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
diff --git a/tests/app/main/views/organisations/test_organisation_invites.py b/tests/app/main/views/organisations/test_organisation_invites.py
index bff550321..7f6d80c05 100644
--- a/tests/app/main/views/organisations/test_organisation_invites.py
+++ b/tests/app/main/views/organisations/test_organisation_invites.py
@@ -66,7 +66,7 @@ def test_view_organisation_shows_the_correct_organisation(
         org_id=ORGANISATION_ID,
     )
 
-    assert normalize_spaces(page.select_one('.heading-large').text) == 'Services'
+    assert normalize_spaces(page.select_one('h1').text) == 'Services'
 
 
 def test_create_new_organisation(
diff --git a/tests/app/main/views/test_api_integration.py b/tests/app/main/views/test_api_integration.py
index ada49e700..fd7917648 100644
--- a/tests/app/main/views/test_api_integration.py
+++ b/tests/app/main/views/test_api_integration.py
@@ -798,21 +798,21 @@ def test_update_delivery_status_and_receive_text_message_callbacks_without_chang
 @pytest.mark.parametrize('service_callback_api, delivery_url, expected_1st_table_row', [
     (
         None, {},
-        'Callbacks for delivery receipts Not set Change'
+        'Delivery receipts Not set Change'
     ),
     (
         sample_uuid(), {'url': 'https://delivery.receipts'},
-        'Callbacks for delivery receipts https://delivery.receipts Change'
+        'Delivery receipts https://delivery.receipts Change'
     ),
 ])
 @pytest.mark.parametrize('inbound_api, inbound_url, expected_2nd_table_row', [
     (
         None, {},
-        'Callbacks for received text messages Not set Change'
+        'Received text messages Not set Change'
     ),
     (
         sample_uuid(), {'url': 'https://inbound.sms'},
-        'Callbacks for received text messages https://inbound.sms Change'
+        'Received text messages https://inbound.sms Change'
     ),
 ])
 def test_callbacks_page_works_when_no_apis_set(