Make template graphs look consistent with page

The graphs of template usage feel a bit weird to me now.

1. They are counts of messages, but the numbers are very small
   not big like we do everywhere else (eg the counts on a job)

2. There’s a lot of blue, especially for something that you can’t
   click

This commit makes the numbers bigger and the bar chart grey.

app/assets/stylesheets/views/dashboard.scss

@@ -26,16 +26,16 @@
   width: 100%;
   margin-bottom: $gutter-half;
   height: $gutter-half;
-  color: $govuk-blue;
+  color: $text-colour;
 
   span {
     box-sizing: border-box;
-    display: block;
-    background: $govuk-blue;
-    color: $white;
-    height: $gutter-half;
-    padding-left: 5px;
-    padding-right: 5px;
+    display: inline-block;
+    overflow: visible;
+    background: $panel-colour;
+    color: $black;
+    padding: 5px 5px 2px 5px;
+    text-indent: -2px;
     margin: 3px 0 5px 0;
     transition: width 0.6s ease-in-out;
   }
@@ -49,7 +49,7 @@
     color: $govuk-blue;
     max-width: 100%;
     background: $white;
-    margin-bottom: $gutter;
+    margin-bottom: $gutter-two-thirds;
   }
 
 }

app/main/views/jobs.py

@@ -26,6 +26,7 @@ from app.utils import (
     generate_previous_next_dict,
     user_has_permissions,
     generate_notifications_csv)
+from app.statistics_utils import sum_of_statistics
 
 
 def _parse_filter_args(filter_dict):

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

@@ -1,26 +1,40 @@
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/big-number.html" import big_number %}
 
 <dl>
   {% for item in template_statistics %}
     <div class="grid-row">
-      
+
       <dt class="column-half">
         <span class="spark-bar-label">
           <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
+          <span class="file-list-hint">
+            {{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
+          </span>
         </span>
       </dt>
 
       <dd class="column-half">
         {% if template_statistics|length > 1 %}
-        <span class="spark-bar">
-          <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%"></span>    
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
-        </span>
+          <span class="spark-bar">
+            <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+              {{ big_number(
+                item.usage_count,
+                smallest=True
+              ) }}
+              <span class="visually-hidden">
+                {{ message_count_label(item.usage_count, item.template.template_type) }}
+              </span>
+            </span>
+          </span>
         {% else %}
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
+          <span class="heading-small">
+            {{ item.usage_count }}
+            {{ message_count_label(item.usage_count, item.template.template_type) }}
+          </span>
         {% endif %}
       </dd>
 
     </div>
   {% endfor %}
-</dl>
+</dl>

app/templates/views/notifications.html

@@ -3,7 +3,7 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/pill.html" import pill %}
-{% from "components/message-count-label.html" import message_count_label %}
+{% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
 
 {% block page_title %}
   {{ message_count_label(99, message_type, suffix='') | capitalize }} – GOV.UK Notify