Modernise report "status" banner

* Simplify markup required for the status banner.
* Simplify styles - the banner is now identical on all screen sizes.
* Move the banner from `report/display.html` into `report/_main.html`
  so that it can appear after `.problem-back` in the source order.
* Use real pin icon instead of `pin-flat-white-small.png`.
* Set a default `$col_fixed_label` colour in `_base.scss`, so cobrands
  don’t have to define it themselves if they’re happy with green.
* Introduce `$col_fixed_label_light`, with a sensible default for all
  cobrands, even ones that have a custom `$col_fixed_label`.
* Remove `$col_fixed_label_dark` – no longer needed.

7 files changed, 22 insertions, 9 deletions

diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index d40b1db52..5e345153e 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -6,6 +6,8 @@ can_moderate_title = c.user.can_moderate_title(problem, can_moderate)
 <a href="[% c.uri_for( '/around', { lat => latitude, lon => longitude } ) %]"
     class="problem-back js-back-to-report-list">[% loc('Back to all reports') %]</a>
 
+[% INCLUDE 'report/banner.html' %]
+
 <div class="problem-header clearfix
     [%~ ' show-moderation' IF show_moderation == 'report' ~%]
     " data-lastupdate="[% problem.lastupdate %]">
diff --git a/templates/web/base/report/banner.html b/templates/web/base/report/banner.html
index ee73d287a..bca3f1395 100644
--- a/templates/web/base/report/banner.html
+++ b/templates/web/base/report/banner.html
@@ -1,7 +1,11 @@
 [% USE date %]
+
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html
index cb5bf327c..752c2b51c 100644
--- a/templates/web/base/report/display.html
+++ b/templates/web/base/report/display.html
@@ -38,7 +38,6 @@
     [% SET shown_form = 1 %]
 [% END %]
 
-[% INCLUDE 'report/banner.html' %]
 [% IF c.user_exists %]
     [% DEFAULT permissions = c.user.permissions(problem) %]
 [%- END %]
diff --git a/templates/web/bromley/report/banner.html b/templates/web/bromley/report/banner.html
index ef9379f52..63771ea3b 100644
--- a/templates/web/bromley/report/banner.html
+++ b/templates/web/bromley/report/banner.html
@@ -1,8 +1,11 @@
 [% USE date %]
 
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/fixmystreet.com/report/banner.html b/templates/web/fixmystreet.com/report/banner.html
index 0a1af38f2..dd7119fc4 100644
--- a/templates/web/fixmystreet.com/report/banner.html
+++ b/templates/web/fixmystreet.com/report/banner.html
@@ -1,8 +1,11 @@
 [% USE date %]
 
 [% BLOCK banner %]
-    <div class="banner">
-        <p id="[% id %]">[% text %]</p>
+    <div class="banner banner--[% id %]">
+        <p>
+            <img src="[% c.cobrand.path_to_pin_icons _ 'pin-' _ c.cobrand.pin_colour(problem, 'report') _ '.png' %]" alt="" class="pin">
+            [% text %]
+        </p>
     </div>
 [% END %]
 
diff --git a/templates/web/zurich/report/_main.html b/templates/web/zurich/report/_main.html
index c9225b4aa..0bc005042 100644
--- a/templates/web/zurich/report/_main.html
+++ b/templates/web/zurich/report/_main.html
@@ -1,3 +1,5 @@
+[% INCLUDE 'report/banner.html' %]
+
 <div class="problem-header clearfix">
     <h1>[% tprintf( loc('Reported in the %s category'), problem.category_display ) %]</h1>
     <p class="sub">
diff --git a/templates/web/zurich/report/banner.html b/templates/web/zurich/report/banner.html
index c10a99ef6..8814dc986 100644
--- a/templates/web/zurich/report/banner.html
+++ b/templates/web/zurich/report/banner.html
@@ -1,6 +1,6 @@
 [% USE date %]
 [% problem_hashref = c.cobrand.problem_as_hashref(problem, c) %]
-<div class="banner">
-    <p id="[% problem_hashref.banner_id %]">[% problem_hashref.state_t %]</p>
+<div class="banner banner--[% problem_hashref.banner_id %]">
+    <p>[% problem_hashref.state_t %]</p>
 </div>