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;
+  }
+}