Make the flow of using templates better

For users who:
- want to send messages from a template
- want to edit templates

For developers:
- who need to get the ID of a template

This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.

This means:
- moving ‘send yourself a test’ onto the send messages page, and making
  it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
  obvious what the template ID is

app/assets/javascripts/apiKey.js

@@ -6,13 +6,13 @@
   Modules.ApiKey = function() {
 
     const states = {
-      'keyVisible': key => `
+      'keyVisible': (key, thing) => `
         <span class="api-key-key">${key}</span>
-        <input type='button' class='api-key-button-copy' value='Copy API key to clipboard' />
+        <input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
       `,
-      'keyCopied': `
+      'keyCopied': thing => `
         <span class="api-key-key">Copied to clipboard</span>
-        <input type='button' class='api-key-button-show' value='Show API key' />
+        <input type='button' class='api-key-button-show' value='Show ${thing}' />
       `
     };
 
@@ -30,21 +30,22 @@
     this.start = function(component) {
 
       const $component = $(component),
-            key = $component.data('key');
+            key = $component.data('key'),
+            thing = $component.data('thing');
 
       $component
-        .html(states.keyVisible(key))
+        .html(states.keyVisible(key, thing))
         .attr('aria-live', 'polite')
         .on(
           'click', '.api-key-button-copy', () =>
             this.copyKey(
               $('.api-key-key', component)[0], () =>
-                $component.html(states.keyCopied)
+                $component.html(states.keyCopied(thing))
             )
         )
         .on(
           'click', '.api-key-button-show', () =>
-            $component.html(states.keyVisible(key))
+            $component.html(states.keyVisible(key, thing))
         );
 
     };

app/assets/javascripts/highlightTags.js

@@ -25,7 +25,7 @@
       this.initialHeight = this.$textbox.height();
 
       this.$backgroundMaskForeground.css({
-        'width': this.$textbox.width(),
+        'width': this.$textbox.outerWidth(),
         'border-width': this.$textbox.css('border-width')
       });
 

app/assets/stylesheets/app.scss

@@ -97,6 +97,10 @@ td {
   margin-bottom: 20px;
 }
 
+.heading-medium {
+  margin-top: $gutter;
+}
+
 #footer {
 
   .footer-categories {
@@ -132,3 +136,7 @@ a[rel='external'] {
 .hint {
   color: $secondary-text-colour;
 }
+
+.button {
+  padding: 0.3em 0.6em 0.2em 0.6em;
+}

app/assets/stylesheets/components/api-key.scss

@@ -11,10 +11,7 @@
     margin-bottom: 10px;
   }
 
-  &-button-show {
-    @include button($grey-3);
-  }
-
+  &-button-show,
   &-button-copy {
     @include button($grey-3);
   }

app/assets/stylesheets/components/email-message.scss

@@ -1,4 +1,5 @@
 $white-50-opaque: rgba($white, 0.5);
+$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
 
 .email-message {
 
@@ -63,7 +64,7 @@ $white-50-opaque: rgba($white, 0.5);
       position: absolute;
       left: 50%;
       bottom: -18px;
-      height: 25px;
+      height: 27px;
       display: inline-block;
       padding: 0;
       margin: 0 0 0 -30px;
@@ -75,23 +76,20 @@ $white-50-opaque: rgba($white, 0.5);
       cursor: pointer;
       width: 60px;
       text-decoration: none;
-      background: $grey-1;
-      color: $white;
+      background: $grey-3;
+      color: $text-colour;
       border-style: solid;
       border-width: 3px;
       border-color: $white;
-      border-radius: 6px;
-      box-shadow: 0 0 0 1px $white-50-opaque;
+      box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque;
 
       &:hover {
-        background: $link-hover-colour;
+        background: $grey-2;
       }
 
       &:focus,
       &:active {
-        background: $yellow;
-        border-color: $white;
-        color: $text-colour;
+        border-color: $yellow;
         outline: none;
       }
 

app/assets/stylesheets/components/page-footer.scss

@@ -5,7 +5,6 @@
   &-back-link {
     @include button($grey-1);
     display: inline-block;
-    padding: 0.52632em 0.78947em 0.26316em 0.78947em;
     margin-left: 10px;
   }
 

app/assets/stylesheets/components/pill.scss

@@ -2,7 +2,8 @@
 
   display: flex;
 
-  a, span {
+  a,
+  span {
     display: block;
     padding: 10px;  
     flex-grow: 1;
@@ -38,4 +39,4 @@
     border: 1px solid $grey-1;
     color: $text-colour;
   }
-}
+}

app/assets/stylesheets/components/secondary-button.scss

@@ -0,0 +1,8 @@
+.secondary-button {
+  @include button($grey-1);
+  padding: 0.3em 0.1em 0.2em 0.1em;
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+}

app/assets/stylesheets/components/sms-message.scss

@@ -52,6 +52,7 @@
 .sms-message-use-links {
 
   @include copy-19;
+  margin-top: -5px;
 
   a {
     display: block;
@@ -68,7 +69,7 @@
 
 .sms-message-use-links-with-title {
   @extend %sms-message-use-links;
-  margin-top: 52px;
+  margin-top: 55px;
 }
 
 .sms-message-from {

app/assets/stylesheets/components/table.scss

@@ -112,13 +112,12 @@
   @include core-16;
   color: $secondary-text-colour;
   margin-top: -20px;
-  margin-bottom: $gutter * 1.5;
+  margin-bottom: $gutter * 1.3333;
   border-bottom: 1px solid $border-colour;
   padding-bottom: 10px;
   text-align: center;
 }
 
 a.table-show-more-link {
-  @include bold-16;
   color: $link-colour;
 }

app/assets/stylesheets/main.scss

@@ -49,6 +49,7 @@ $path: '/static/images/';
 @import 'components/api-key';
 @import 'components/vendor/previous-next-navigation';
 @import 'components/pill';
+@import 'components/secondary-button';
 
 @import 'views/job';
 @import 'views/edit-template';