From b65b417a08b61f7bc59f996a0663d3c48a3da7e1 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Feb 2020 11:02:22 +0000
Subject: [PATCH] Restyle inbound text messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 44 +++++++++++++++++++
 .../stylesheets/components/show-more.scss     |  5 ---
 app/templates/views/dashboard/_inbox.html     | 26 +++++------
 tests/app/main/views/test_dashboard.py        | 14 +++---
 tests/conftest.py                             |  2 +-
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index cd4e4504b..91842562f 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/components/show-more.scss b/app/assets/stylesheets/components/show-more.scss
index 8c26cdf56..56e89fb16 100644
--- a/app/assets/stylesheets/components/show-more.scss
+++ b/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;
diff --git a/app/templates/views/dashboard/_inbox.html b/app/templates/views/dashboard/_inbox.html
index 0e3f386b4..ae02d07cb 100644
--- a/app/templates/views/dashboard/_inbox.html
+++ b/app/templates/views/dashboard/_inbox.html
@@ -2,20 +2,18 @@
 
 <div class="ajax-block">
   {% if inbound_sms_summary != None %}
-    <div id="total-received" class="big-number-meta-wrapper">
-      {{
-        big_number_with_status(
-          inbound_sms_summary.count,
-          'text messages received',
-          link=url_for('.inbox', service_id=current_service.id),
-          show_failures=False
-        )
-      }}
-      <div class="big-number-meta">
-        {% if inbound_sms_summary.most_recent %}
+    <a id="total-received" class="banner-dashboard" href="{{ url_for('.inbox', service_id=current_service.id) }}">
+      <span class="banner-dashboard-count">
+        {{ inbound_sms_summary.count|format_thousands }}
+      </span>
+      <span class="banner-dashboard-count-label">
+        text messages received
+      </span>
+      {% if inbound_sms_summary.most_recent %}
+        <span class="banner-dashboard-meta">
           latest message {{ inbound_sms_summary.most_recent | format_delta }}
-        {% endif %}
-      </div>
-    </div>
+        </span>
+      {% endif %}
+    </a>
   {% endif %}
 </div>
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index 440042f8e..a75066840 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/tests/app/main/views/test_dashboard.py
@@ -222,11 +222,11 @@ def test_inbound_messages_shows_count_of_messages_when_there_are_messages(
         'main.service_dashboard',
         service_id=SERVICE_ONE_ID,
     )
-
+    banner = page.select_one('a.banner-dashboard')
     assert normalize_spaces(
-        page.select('.big-number-meta-wrapper')[0].text
-    ) == '99 text messages received latest message just now'
-    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
+        banner.text
+    ) == '9,999 text messages received latest message just now'
+    assert banner['href'] == url_for(
         'main.inbox', service_id=SERVICE_ONE_ID
     )
 
@@ -248,9 +248,9 @@ def test_inbound_messages_shows_count_of_messages_when_there_are_no_messages(
         'main.service_dashboard',
         service_id=SERVICE_ONE_ID,
     )
-
-    assert normalize_spaces(page.select('.big-number-meta-wrapper')[0].text) == '0 text messages received'
-    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
+    banner = page.select_one('a.banner-dashboard')
+    assert normalize_spaces(banner.text) == '0 text messages received'
+    assert banner['href'] == url_for(
         'main.inbox', service_id=SERVICE_ONE_ID
     )
 
diff --git a/tests/conftest.py b/tests/conftest.py
index 4adadb726..0bd693681 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -1959,7 +1959,7 @@ def mock_get_inbound_sms_summary(mocker):
         service_id,
     ):
         return {
-            'count': 99,
+            'count': 9999,
             'most_recent': datetime.utcnow().isoformat()
         }