Normalise heading sizes

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

@@ -104,7 +104,7 @@
 
 .align-with-heading-copy-right {
   display: block;
-  margin-top: 35px;
+  margin: 21px 0 19px 0;
   text-align: right;
 }
 

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;
+}

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;
   }
 
 }

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 %}

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 %}

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>

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 %}

app/templates/views/manage-users.html

@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
+  <h1 class="heading-medium">
     Team members
   </h1>
 

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>

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',

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>
 

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

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 %}

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),

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}) }}

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}) }}

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(

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(