From cd262559ccf0bc2a9a7065bbf4f4108dbd7ac339 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 17 Feb 2020 16:44:41 +0000
Subject: [PATCH] Refactor dashboard banner CSS and fix its text

Switches the CSS to use flexbox for layout and
uses a macro to let the text support single and
multiple messsages.
---
 app/assets/stylesheets/components/banner.scss | 37 ++++++++++++-------
 app/templates/views/dashboard/_inbox.html     |  3 +-
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 91842562f..b1fa41a69 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -145,10 +145,12 @@
 
 .banner-dashboard {
 
-  $baseline-shift: -5px;
+  $baseline-shift: 5px;
 
-  display: block;
-  position: relative;
+  display: block; // for browsers that don't support flexbox
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
   padding: $gutter-two-thirds 0;
   border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
@@ -156,29 +158,36 @@
   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;
+    border: none;
+  }
+
+  &-count,
+  &-meta {
+    float: left; // for browsers that don't support flexbox
   }
 
   &-count {
-    @include bold-36;
+    @include govuk-font(36, $weight: bold);
     padding-right: 5px;
+    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 bold-24;
+    @include govuk-font(24, $weight: bold);
     text-decoration: underline;
-    position: relative;
-    top: $baseline-shift;
+    padding-right: govuk-spacing(6);
+    flex: 2 1 auto;
   }
 
   &-meta {
-    @include core-19;
-    position: absolute;
-    right: 0;
-    bottom: $gutter-two-thirds - $baseline-shift;
+    @include govuk-font(19);
+    float: right;
     text-align: right;
+    flex: initial;
   }
 
   & + .banner-dashboard {
diff --git a/app/templates/views/dashboard/_inbox.html b/app/templates/views/dashboard/_inbox.html
index ae02d07cb..3b3d6bd07 100644
--- a/app/templates/views/dashboard/_inbox.html
+++ b/app/templates/views/dashboard/_inbox.html
@@ -1,4 +1,5 @@
 {% from "components/big-number.html" import big_number, big_number_with_status %}
+{% from "components/message-count-label.html" import message_count_label %}
 
 <div class="ajax-block">
   {% if inbound_sms_summary != None %}
@@ -7,7 +8,7 @@
         {{ inbound_sms_summary.count|format_thousands }}
       </span>
       <span class="banner-dashboard-count-label">
-        text messages received
+        {{ message_count_label(inbound_sms_summary.count, 'sms', suffix='received') }}
       </span>
       {% if inbound_sms_summary.most_recent %}
         <span class="banner-dashboard-meta">