Restyle template statistics

This makes the template statistics section of the dashboard look less
like its own weird thing and more like:
- the templates page
- the upcoming changes to the styling of the received text messages
  banner on the dashboard

app/assets/stylesheets/components/show-more.scss

@@ -38,3 +38,9 @@
   @extend %show-more;
   margin-top: -10px;
 }
+
+.show-more-no-border {
+  @extend %show-more;
+  border-top: 1px solid transparent;
+  margin-top: -5px;
+}

app/assets/stylesheets/components/table.scss

@@ -51,6 +51,65 @@
 
 }
 
+.template-statistics-table {
+
+  .table {
+    table-layout: fixed;
+  }
+
+  .table-field-heading {
+    font-size: 0;
+  }
+
+  .table-field-heading-first {
+    width: 52.5%;
+  }
+
+  .table-row {
+    th {
+      display: table-cell;
+      width: 52.5%;
+      font-weight: normal;
+
+      .hint,
+      p {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  &-template-name {
+
+    @include bold-24;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 10px 0 32px 0;
+    margin: -10px 0 -32px 0;
+
+    &:focus {
+
+      color: $text-colour;
+
+      & + .template-statistics-table-hint {
+        color: $text-colour;
+      }
+
+    }
+
+  }
+
+  &-hint {
+    @include core-19;
+    color: $secondary-text-colour;
+    pointer-events: none;
+  }
+
+}
+
 .settings-table {
 
   table {

app/assets/stylesheets/views/dashboard.scss

@@ -1,15 +1,7 @@
 .dashboard {
 
-  table {
-    th {
-      @include core-19;
-      border-bottom: 0;
-    }
-
-    td {
-      @include core-19;
-      border: 0;
-    }
+  th {
+    font-weight: normal;
   }
 
   > .heading-medium:first-of-type {
@@ -34,15 +26,17 @@
   color: $text-colour;
   text-align: left;
 
-  span {
+  &-bar {
+    @include bold-27;
     box-sizing: border-box;
     display: inline-block;
     overflow: visible;
     background: $panel-colour;
     color: $black;
-    padding: 5px 5px 2px 5px;
-    text-indent: -2px;
-    margin: 3px 0 5px 0;
+    padding: 10px 6px 8px 0;
+    text-indent: 12px;
+    text-align: right;
+    margin: 2px 0 1px 0;
     transition: width 0.6s ease-in-out;
   }
 
@@ -84,19 +78,6 @@
   color: $error-colour;
 }
 
-.template-usage-table {
-
-  border-top: 1px solid $border-colour;
-  border-bottom: 1px solid $border-colour;
-  margin-top: 10px;
-  margin-bottom: $gutter * 1.3333;
-
-  .table {
-    margin-bottom: 5px;
-  }
-
-}
-
 .align-with-message-body {
   display: block;
   margin-top: $gutter * 5 / 6;