Restyle inbound text messages

This commit adds a new kind of banner to the dashboard for summarising
things you might need to action.

This way we’ll be able to have multiple instances of this banner on the
same page without it looking too intense.

I never really liked the big blue banner for inbound text messages
because it became the most prominent thing on the page. It was an
interim solution that let us ship the feature until we had something
better.

app/assets/stylesheets/components/banner.scss

@@ -142,3 +142,47 @@
   }
 
 }
+
+.banner-dashboard {
+
+  $baseline-shift: -5px;
+
+  display: block;
+  position: relative;
+  padding: $gutter-two-thirds 0;
+  border-top: 1px solid $border-colour;
+  border-bottom: 1px solid $border-colour;
+  margin-bottom: $gutter;
+  text-decoration: none;
+
+  &:focus {
+    border-color: $focus-colour;
+    box-shadow: 0 3px 0 0 $focus-colour, 0 -3px 0 0 $focus-colour;
+    color: $text-colour;
+  }
+
+  &-count {
+    @include bold-36;
+    padding-right: 5px;
+  }
+
+  &-count-label {
+    @include bold-24;
+    text-decoration: underline;
+    position: relative;
+    top: $baseline-shift;
+  }
+
+  &-meta {
+    @include core-19;
+    position: absolute;
+    right: 0;
+    bottom: $gutter-two-thirds - $baseline-shift;
+    text-align: right;
+  }
+
+  & + .banner-dashboard {
+    margin-top: -$gutter;
+    border-top: none;
+  }
+}

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

@@ -34,11 +34,6 @@
 
 }
 
-.show-more-empty {
-  @extend %show-more;
-  margin-top: -10px;
-}
-
 .show-more-no-border {
   @extend %show-more;
   border-top: 1px solid transparent;