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