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;

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">
+    <a id="total-received" class="banner-dashboard" href="{{ url_for('.inbox', service_id=current_service.id) }}">
-      {{
+      <span class="banner-dashboard-count">
-        big_number_with_status(
+        {{ inbound_sms_summary.count|format_thousands }}
-          inbound_sms_summary.count,
+      </span>
-          'text messages received',
+      <span class="banner-dashboard-count-label">
-          link=url_for('.inbox', service_id=current_service.id),
+        text messages received
-          show_failures=False
+      </span>
-        )
+      {% if inbound_sms_summary.most_recent %}
-      }}
+        <span class="banner-dashboard-meta">
-      <div class="big-number-meta">
-        {% if inbound_sms_summary.most_recent %}
           latest message {{ inbound_sms_summary.most_recent | format_delta }}
-        {% endif %}
+        </span>
-      </div>
+      {% endif %}
-    </div>
+    </a>
   {% endif %}
 </div>

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
+        banner.text
-    ) == '99 text messages received latest message just now'
+    ) == '9,999 text messages received latest message just now'
-    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
+    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,
     )
-
+    banner = page.select_one('a.banner-dashboard')
-    assert normalize_spaces(page.select('.big-number-meta-wrapper')[0].text) == '0 text messages received'
+    assert normalize_spaces(banner.text) == '0 text messages received'
-    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
+    assert banner['href'] == url_for(
         'main.inbox', service_id=SERVICE_ONE_ID
     )
 

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()
         }