Move parameters out of the …_message components

This commit refactors the `email_message` and `sms_message` UI components to
take fewer parameters.

`name`, `edit_link` and anything to do with versions are identical for both
text and email messages so I’ve moved them to the pages where you choose a
template or see the versions.

This commit also tidies up the wording and styling of the template history
stuff.

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

@@ -5,17 +5,6 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
 
   margin-bottom: $gutter;
 
-  &-name {
-    @include bold-24;
-    margin: 20px 0 5px 0;
-  }
-
-  &-updated-at {
-    @include copy-16;
-    color: $secondary-text-colour;
-    margin: 0 0 10px 0;
-  }
-
   &-meta {
 
     @include core-19;
@@ -45,7 +34,7 @@ $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
   }
 
   &-body {
-    
+
     width: 100%;
     box-sizing: border-box;
     padding: $gutter-half 0 0 0;

app/assets/stylesheets/components/message.scss

@@ -0,0 +1,38 @@
+.message {
+
+  &-name {
+    @include bold-24;
+    margin: 20px 0 5px 0;
+  }
+
+  &-updated-at {
+    @include copy-16;
+    color: $secondary-text-colour;
+    margin: 0 0 5px 0;
+  }
+
+  &-use-links {
+
+    @include copy-16;
+    margin-top: -7px;
+    color: $secondary-text-colour;
+
+    a {
+      @include core-19;
+      display: block;
+      margin-bottom: 5px;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+    }
+
+    .primary {
+      @include bold-19;
+    }
+
+  }
+
+}

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

@@ -40,23 +40,6 @@
   margin: 20px 0 5px 0;
 }
 
-.sms-message-updated-at {
-  @include copy-16;
-  color: $secondary-text-colour;
-  margin: 0 0 10px 0;
-}
-
-.sms-message-use-links-history {
-  @include copy-16;
-  color: $secondary-text-colour;
-  margin: 45px 0 0 0;
-
-  .primary {
-    color: $text-colour;
-
-  }
-}
-
 .sms-message-picker {
   display: block;
   margin: 7px 0 0 0;
@@ -66,34 +49,6 @@
   z-index: 50;
 }
 
-%sms-message-use-links,
-.sms-message-use-links {
-
-  @include copy-19;
-  margin-top: 35px;
-
-  a {
-    display: block;
-    margin-bottom: 5px;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-  }
-
-  .primary {
-    @include bold-19;
-  }
-
-}
-
-.sms-message-use-links-with-title {
-  @extend %sms-message-use-links;
-  margin-top: 50px;
-}
-
 .sms-message-from {
   @include bold-19;
   display: block;

app/assets/stylesheets/main.scss

@@ -51,6 +51,7 @@ $path: '/static/images/';
 @import 'components/pill';
 @import 'components/secondary-button';
 @import 'components/show-more';
+@import 'components/message';
 
 @import 'views/job';
 @import 'views/edit-template';