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;
     }