Split settings page into multiple sections

There are quite a few more options that there used to be in the settings
page. This means it’s hard to find the thing you want to change.

Grouping options is a common way of making things easier to find.

Grouping by channel (text, email, letter) is something we do elsewhere
that seems to work pretty well.

app/assets/stylesheets/components/table.scss

@@ -143,6 +143,25 @@
   @include bold-16;
 }
 
+
+.table-field-headings {
+
+  th {
+    padding: 1px; /* needs some height for the grey border to show */
+  }
+
+}
+
+.table-field-headings-visible {
+
+  height: auto;
+
+  th {
+    padding: .75em 1.25em .5625em 0;
+  }
+
+}
+
 .table-field-headings,
 .table-field-headings-visible {
 

app/templates/views/service-settings.html

@@ -11,20 +11,30 @@
 
     <h1 class="heading-large">Settings</h1>
 
-    <div class="bottom-gutter-3-2 body-copy-table">
+    <div class="bottom-gutter-3-2 dashboard-table body-copy-table">
 
       {% call mapping_table(
-        caption='Settings',
+        caption='General',
         field_headings=['Label', 'Value', 'Action'],
         field_headings_visible=False,
         caption_visible=False
       ) %}
+
         {% call row() %}
           {{ text_field('Service name') }}
           {{ text_field(current_service.name) }}
           {{ edit_field('Change', url_for('.service_name_change', service_id=current_service.id)) }}
         {% endcall %}
 
+      {% endcall %}
+
+      {% call mapping_table(
+        caption='Email',
+        field_headings=['Label', 'Value', 'Action'],
+        field_headings_visible=False,
+        caption_visible=True
+      ) %}
+
         {% call row() %}
           {{ text_field('Send emails') }}
           {{ boolean_field('email' in current_service.permissions) }}
@@ -44,6 +54,15 @@
 
         {% endif %}
 
+      {% endcall %}
+
+      {% call mapping_table(
+        caption='Text messages',
+        field_headings=['Label', 'Value', 'Action'],
+        field_headings_visible=False,
+        caption_visible=True
+      ) %}
+
         {% call row() %}
           {{ text_field('Send text messages') }}
           {{ boolean_field('sms' in current_service.permissions) }}
@@ -88,6 +107,15 @@
 
         {% endif %}
 
+      {% endcall %}
+
+      {% call mapping_table(
+        caption='Letters',
+        field_headings=['Label', 'Value', 'Action'],
+        field_headings_visible=False,
+        caption_visible=True
+      ) %}
+
         {% call row() %}
           {{ text_field('Letters') }}
           {{ boolean_field('letter' in current_service.permissions) }}