Give headline numbers a blue, not black background

These numbers don’t look very clickable white-on-black.

Blue is the colour of links, so lets see if they are more clickable in
blue.

The same clicking-a-big-number thing is also happening on the activity
page, so this commit also changes the activity page to look the same.

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

@@ -21,7 +21,7 @@
   @extend %big-number;
 
   .big-number-number {
-    @include bold-36($tabular-numbers: true);
+    @include bold-36();
   }
 
 }
@@ -39,31 +39,13 @@
 .big-number-with-status {
 
   @extend %big-number;
-  background: $text-colour;
-  color: $white;
   position: relative;
   margin-bottom: $gutter-half;
 
   .big-number {
-    padding: 15px;
+    padding: $gutter-half;
     position: relative;
-    
-  }
-
-  .big-number-overlay-link {
-
-    background: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: transparent;
-    width: 100%;
-    height: 100%;
-
-    &:hover {
-      background: rgba($text-colour, 0.2);
-    }
-
+    cursor: pointer;
   }
 
   .big-number-label {
@@ -72,9 +54,31 @@
 
     &:link,
     &:visited {
-      color: $white;
-      text-decoration: none;
-      border-bottom: 1px solid $white;
+      color: $link-colour;
+    }
+
+  }
+
+  .big-number-link {
+
+    text-decoration: none;
+    background: $link-colour;
+    color: $white;
+    display: block;
+    border: 2px solid $link-colour;
+    margin-bottom: 5px;
+
+    &:hover {
+      color: $light-blue-25;
+    }
+
+    &:active,
+    &:focus {
+      outline: 3px solid $yellow;
+    }
+
+    .big-number-label {
+      text-decoration: underline;
     }
 
   }
@@ -85,6 +89,7 @@
     @include core-19;
     display: block;
     background: $green;
+    color: $white;
     padding: 15px;
 
     a {
@@ -94,8 +99,13 @@
       &:active,
       &:hover {
         color: $white;
-        text-decoration: none;
-        border-bottom: 1px solid $white;
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:focus {
+        color: $black;
+        border-bottom: 1px solid $black;
       }
 
     }

app/assets/stylesheets/components/pill.scss

@@ -20,9 +20,10 @@
   }
 
   a {
-    background: $panel-colour;
-    color: $link-colour;
-    border: 1px solid $panel-colour;
+    $background: $link-colour;
+    background: $background;
+    color: $white;
+    border: 2px solid $background;
     position: relative;
     text-decoration: none;
     cursor: pointer;
@@ -31,8 +32,13 @@
       text-decoration: underline;
     }
 
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
     &:hover {
-      color: $text-colour;
+      color: $light-blue-25;
     }
 
     &:active,
@@ -42,7 +48,10 @@
   }
 
   span {
-    border: 1px solid $grey-1;
+    border: 2px solid $black;
+    outline: 1px solid rgba($white, 0.1);
+    position: relative;
+    z-index: 1000;
     color: $text-colour;
   }
 }

app/assets/stylesheets/views/dashboard.scss

@@ -2,7 +2,7 @@
 
   table {
     th {
-      @include core-16;
+      @include core-19;
       border-bottom: 0;
     }
 

app/templates/components/big-number.html

@@ -1,4 +1,7 @@
-{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %}
+{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
+  {% if link %}
+    <a class="big-number-link" href="{{ link }}">
+  {% endif %}
   <div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
     <div class="big-number-number">
       {% if number is number %}
@@ -11,13 +14,13 @@
         {{ number }}
       {% endif %}
     </div>
-    {% if label_link %}
-      <a class="big-number-label" href="{{ label_link }}">{{ label }}</a>
-      <a class="big-number-overlay-link" href="{{ label_link }}" aria-hidden="true"></a>
-    {% elif label %}
+    {% if label %}
       <span class="big-number-label">{{ label }}</span>
     {% endif %}
   </div>
+  {% if link %}
+    </a>
+  {% endif %}
 {% endmacro %}
 
 
@@ -28,12 +31,12 @@
   failure_percentage,
   danger_zone=False,
   failure_link=None,
-  label_link=None,
+  link=None,
   show_more_link=None,
   show_more_text=''
 ) %}
   <div class="big-number-with-status">
-    {{ big_number(number, label, label_link) }}
+    {{ big_number(number, label, link=link) }}
     <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
       {% if failures %}
         {% if failure_link %}

app/templates/views/dashboard/template-statistics.html

@@ -1,3 +1,4 @@
+{% from "components/big-number.html" import big_number %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/big-number.html" import big_number %}
 

app/templates/views/dashboard/today.html

@@ -14,23 +14,23 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.emails_requested,
-        message_count_label(statistics.emails_requested, 'email'),
+        message_count_label(statistics.emails_requested, 'email', suffix=''),
         statistics.emails_failed,
         statistics.get('emails_failure_rate', 0.0),
         statistics.get('emails_failure_rate', 0)|float > 3,
         failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='failed'),
-        label_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
       ) }}
     </div>
     <div class="column-half">
       {{ big_number_with_status(
         statistics.sms_requested,
-        message_count_label(statistics.sms_requested, 'sms'),
+        message_count_label(statistics.sms_requested, 'sms', suffix=''),
         statistics.sms_failed,
         statistics.get('sms_failure_rate', 0.0),
         statistics.get('sms_failure_rate', 0)|float > 3,
         failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='failed'),
-        label_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
       ) }}
     </div>
     <div class="column-whole">