Put some statistics on the dashboard

This commit adds two new sections to the dashboard

1. A banner telling you about trial mode, including a count of how many messages
   you have left today, which is a restriction of trial mode

2. Panels with counts of how many emails and text messages have been sent in a
   day, plus the failure rates for each

It does **not**:
- link through to any further information about what trial mode is (coming
  later)
- link through to pages for the failure rates (coming later)
- change the ‘recent jobs’ section to ‘recent notifications’

app/assets/stylesheets/_grids.scss

@@ -2,6 +2,10 @@
   @include grid-column(3/4);
 }
 
+.column-one-sixth {
+  @include grid-column(1/6);
+}
+
 .column-one-eighth {
   @include grid-column(1/8);
 }
@@ -16,7 +20,7 @@
 }
 
 .bottom-gutter-2-3 {
-  margin-bottom: $gutter * 2/3;
+  margin-bottom: $gutter-two-thirds;
 }
 
 .align-with-heading {

app/assets/stylesheets/components/banner.scss

@@ -26,9 +26,8 @@
 
 }
 
-.banner-with-tick,
-.banner-default-with-tick {
-  @extend %banner;
+%banner-with-tick,
+.banner-with-tick {
   padding: $gutter-half ($gutter + $gutter-half);
   background-image: file-url('tick-white.png');
   background-size: 19px;
@@ -37,6 +36,11 @@
   font-weight: bold;
 }
 
+.banner-default-with-tick {
+  @extend %banner;
+  @extend %banner-with-tick;
+}
+
 .banner-dangerous {
 
   @extend %banner;
@@ -54,13 +58,15 @@
 
 }
 
+%banner-tip,
 .banner-tip {
 
   @extend %banner;
-  background: $yellow;
+  @include bold-19;
+  background-color: $yellow;
   color: $text-colour;
   text-align: left;
-  font-weight: bold;
+  margin-top: 0;
 
   a {
     &:link,
@@ -76,6 +82,12 @@
 
 }
 
+.banner-tip-with-tick {
+  @extend %banner-with-tick;
+  @extend %banner-tip;
+  background-image: file-url('tick-black.png');
+}
+
 .banner-info,
 .banner-important {
   @extend %banner;
@@ -91,3 +103,30 @@
 .banner-info {
   background-image: file-url('icon-information-2x.png');
 }
+
+.banner-mode {
+
+  @extend %banner;
+  background: $govuk-blue;
+  color: $white;
+  margin-top: $gutter;
+
+  .heading-medium {
+    margin-top: 0;
+  }
+
+  a {
+
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
+    &:hover,
+    &:active {
+      color: $light-blue-25;
+    }
+
+  }
+
+}

app/assets/stylesheets/components/big-number.scss

@@ -1,3 +1,4 @@
+%big-number,
 .big-number {
 
   @include bold-48($tabular-numbers: true);
@@ -5,6 +6,62 @@
   &-label {
     @include core-19;
     display: block;
+    padding-bottom: $gutter-half;
+  }
+
+}
+
+.big-number-with-status {
+
+  @extend %big-number;
+  background: $text-colour;
+  color: $white;
+
+  .big-number {
+    padding: 15px;
+  }
+
+  .big-number-label {
+    padding-bottom: 0;
+  }
+
+  .big-number-status {
+
+    display: block;
+    background: $green;
+    position: relative;
+
+    &-error-percentage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: $error-colour;
+      z-index: 1;
+    }
+
+    a {
+
+      &:link,
+      &:visited,
+      &:active,
+      &:hover {
+        color: $white;
+      }
+
+    }
+
+    .big-number {
+      @include bold-19;
+      position: relative;
+      z-index: 2;
+    }
+
+    .big-number-label {
+      display: inline;
+    }
+
   }
 
 }