From 9de9bfc505f48e496492e0797992e0b370d16bf9 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 8 Jul 2024 16:27:20 +0100
Subject: [PATCH] Updated Stats colours in All Reports page

With these new colors it should comply with WCAG color contrast requirement(Headlines AA (3:1))
---
 templates/web/base/reports/index.html            | 16 ++++++++--------
 .../fixmystreet.com/images/healthcheck-bad.svg   |  2 +-
 .../fixmystreet.com/images/healthcheck-good.svg  |  2 +-
 web/js/dashboard.js                              |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/templates/web/base/reports/index.html b/templates/web/base/reports/index.html
index 2444d32b045..db43e9c1fca 100755
--- a/templates/web/base/reports/index.html
+++ b/templates/web/base/reports/index.html
@@ -29,8 +29,8 @@ <h2>[% loc('All time') %]</h2>
                 data-values-reports="[[% problems_reported_by_period.join(',') %]]"
                 data-values-fixed="[[% problems_fixed_by_period.join(',') %]]"
                 ></canvas>
-            <span class="label" data-datasetindex="0"><strong style="color: #F4A140">[% tprintf(nget("%s problem reported", "%s problems reported", problems_reported_by_period.last), decode(problems_reported) _ '</strong>') %]</span>
-            <span class="label" data-datasetindex="1"><strong style="color: #62B356">[% tprintf(nget("%s problem marked as fixed", "%s problems marked as fixed", problems_fixed_by_period.last), decode(problems_fixed) _ '</strong>') %]</span>
+            <span class="label" data-datasetindex="0"><strong style="color: #D97B0C">[% tprintf(nget("%s problem reported", "%s problems reported", problems_reported_by_period.last), decode(problems_reported) _ '</strong>') %]</span>
+            <span class="label" data-datasetindex="1"><strong style="color: #56A54A">[% tprintf(nget("%s problem marked as fixed", "%s problems marked as fixed", problems_fixed_by_period.last), decode(problems_fixed) _ '</strong>') %]</span>
         </div>
     </div>
 </div>
@@ -41,20 +41,20 @@ <h2 class="dashboard-subheading">[% loc('Last 7 days') %]</h2>
         <div class="dashboard-sparklines">
             <div>
                 <div class="labelled-sparkline">
-                    <canvas width="200" height="50" data-color="#F4A140" data-values="[% last_seven_days.problems.join(' ') %]"></canvas>
-                    <span class="label" data-datasetindex="0"><strong style="color: #F4A140;">[% tprintf(nget("%s problem reported", "%s problems reported", last_seven_days.problems_total), decode(last_seven_reported) _ '</strong>') %]</span>
+                    <canvas width="200" height="50" data-color="#D97B0C" data-values="[% last_seven_days.problems.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #D97B0C;">[% tprintf(nget("%s problem reported", "%s problems reported", last_seven_days.problems_total), decode(last_seven_reported) _ '</strong>') %]</span>
                 </div>
             </div>
             <div>
                 <div class="labelled-sparkline">
-                    <canvas width="200" height="50" data-color="#4FADED" data-values="[% last_seven_days.updated.join(' ') %]"></canvas>
-                    <span class="label" data-datasetindex="0"><strong style="color: #4FADED;">[% tprintf(nget("%s update on problems", "%s updates on problems", last_seven_days.updated_total), decode(last_seven_updated) _ '</strong>') %]</span>
+                    <canvas width="200" height="50" data-color="#269AE9" data-values="[% last_seven_days.updated.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #269AE9;">[% tprintf(nget("%s update on problems", "%s updates on problems", last_seven_days.updated_total), decode(last_seven_updated) _ '</strong>') %]</span>
                 </div>
             </div>
             <div>
                 <div class="labelled-sparkline">
-                    <canvas width="200" height="50" data-color="#62B356" data-values="[% last_seven_days.fixed.join(' ') %]"></canvas>
-                    <span class="label" data-datasetindex="0"><strong style="color: #62B356;">[% tprintf(nget("%s problem marked as fixed", "%s problems marked as fixed", last_seven_days.fixed_total), decode(last_seven_fixed) _ '</strong>') %]</span>
+                    <canvas width="200" height="50" data-color="#56A54A" data-values="[% last_seven_days.fixed.join(' ') %]"></canvas>
+                    <span class="label" data-datasetindex="0"><strong style="color: #56A54A;">[% tprintf(nget("%s problem marked as fixed", "%s problems marked as fixed", last_seven_days.fixed_total), decode(last_seven_fixed) _ '</strong>') %]</span>
                 </div>
             </div>
         </div>
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg b/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg
index 1722d5eccf4..032f5df0ed6 100644
--- a/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-bad.svg
@@ -1 +1 @@
-<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#F4A140" cx="32" cy="32" r="32"/><path fill="#FFF" d="M39.8 19.3l5 5-20.6 20.4-5-5z"/><path fill="#FFF" d="M24.2 19.3l20.5 20.5-5 5-20.4-20.6z"/></g></svg>
\ No newline at end of file
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#D97B0C" cx="32" cy="32" r="32"/><path fill="#FFF" d="M39.8 19.3l5 5-20.6 20.4-5-5z"/><path fill="#FFF" d="M24.2 19.3l20.5 20.5-5 5-20.4-20.6z"/></g></svg>
\ No newline at end of file
diff --git a/web/cobrands/fixmystreet.com/images/healthcheck-good.svg b/web/cobrands/fixmystreet.com/images/healthcheck-good.svg
index 3343297c95b..b267e1087e8 100644
--- a/web/cobrands/fixmystreet.com/images/healthcheck-good.svg
+++ b/web/cobrands/fixmystreet.com/images/healthcheck-good.svg
@@ -1 +1 @@
-<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#62B356" cx="32" cy="32" r="32"/><path fill="#FFF" fill-rule="nonzero" d="M43 20L28 35l-7-7-5 5 12 12 20-20z"/></g></svg>
\ No newline at end of file
+<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#56A54A" cx="32" cy="32" r="32"/><path fill="#FFF" fill-rule="nonzero" d="M43 20L28 35l-7-7-5 5 12 12 20-20z"/></g></svg>
\ No newline at end of file
diff --git a/web/js/dashboard.js b/web/js/dashboard.js
index 48a273ed68a..10d212adff6 100644
--- a/web/js/dashboard.js
+++ b/web/js/dashboard.js
@@ -8,10 +8,10 @@ $(function(){
 
     var colours = [
         '#FF4343', // red
-        '#F4A140', // orange
+        '#D97B0C', // orange
         '#FFD000', // yellow
-        '#62B356', // green
-        '#4D96E5', // blue
+        '#56A54A', // green
+        '#269AE9', // blue
         '#B446CA', // purple
         '#7B8B98', // gunmetal
         '#BCB590', // taupe