Revert "Revert "Restyle template statistics and received text messages""

app/assets/stylesheets/components/banner.scss

@@ -137,3 +137,58 @@
   }
 
 }
+
+.banner-dashboard {
+
+  $baseline-shift: 5px;
+
+  display: block; // for browsers that don't support flexbox
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
+  border-top: 1px solid $border-colour;
+  border-bottom: 1px solid $border-colour;
+  margin-bottom: $gutter;
+  text-decoration: none;
+
+  &:focus {
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;    
+  }
+
+  &-count,
+  &-meta {
+    float: left; // for browsers that don't support flexbox
+  }
+
+  &-count {
+    @include govuk-font(36, $weight: bold);
+    padding-right: 8px;
+    position: relative;
+    // remove the top of the extra line-height this introduces
+    top: $baseline-shift;
+    margin-top: -$baseline-shift;
+    flex: 0 1 0.85ch;
+  }
+
+  &-count-label {
+    @include govuk-font(24, $weight: bold);
+    text-decoration: underline;
+    padding-right: govuk-spacing(6);
+    margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
+    flex: 2 1 auto;
+  }
+
+  &-meta {
+    @include govuk-font(19);
+    float: right;
+    text-align: right;
+    flex: initial;
+  }
+
+  & + .banner-dashboard {
+    margin-top: -$gutter;
+    border-top: none;
+  }
+}

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

@@ -4,7 +4,7 @@
   @include core-16;
   display: block;
   padding: 0 0;
-  margin: $gutter-half 0 $gutter 0;
+  margin: $gutter-half 0 $gutter-half 0;
   text-align: center;
   border-top: 1px solid $border-colour;
 
@@ -34,7 +34,8 @@
 
 }
 
-.show-more-empty {
+.show-more-no-border {
   @extend %show-more;
-  margin-top: -10px;
+  border-top: 1px solid transparent;
+  margin-top: -5px;
 }

app/assets/stylesheets/components/table.scss

@@ -51,6 +51,66 @@
 
 }
 
+.template-statistics-table {
+
+  .table {
+    table-layout: fixed;
+  }
+
+  .table-heading {
+    @include core-19;
+    margin: 0 0 10px 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 {