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 {

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;