Add a prototype email template

If the templates page contains text messages and emails then there’s two ways it
could be structured:
- into two sections, all text messages first, then all emails
- emails and text messages interleaved, sorted by date

I think the second one is better. Imagine a situation where you mostly do emails
but have a few text messages. You’d have to scroll past the text messages to get
to your emails. Every time.

I reckon that the most commonly accessed templates will be the most recent ones.

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

@@ -0,0 +1,24 @@
+.email-message {
+
+  margin-bottom: $gutter;
+  border: 1px solid $border-colour;
+
+  &-subject {
+    border-bottom: 1px solid $border-colour;;
+    padding: 10px;
+    @include bold-19;
+  }
+
+  &-body {
+    border-bottom: 1px solid white;
+    padding: 10px;
+    overflow: hidden;
+    max-height: 103px;
+  }
+
+  &-name {
+    @include bold-19;
+    margin: 50px 0 10px 0;
+  }
+
+}

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

@@ -47,7 +47,7 @@
 
   &-name {
     @include bold-19;
-    margin: 0 0 5px 0;
+    margin: 50px 0 10px 0;
   }
 
 }

app/assets/stylesheets/main.scss

@@ -44,6 +44,7 @@
 @import 'components/browse-list';
 @import 'components/management-navigation';
 @import 'components/dropdown';
+@import 'components/email-message';
 
 @import 'views/job';