From f79a5ca02003b7cfa98dafaf5367ac65ae54e2f9 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 24 Sep 2020 15:52:38 +0100
Subject: [PATCH] =?UTF-8?q?Style=20=E2=80=98likely=E2=80=99=20area=20with?=
 =?UTF-8?q?=20a=20dashed=20line?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We’ve had some feedback that relying only on luminosity and position to
differentiate between the ‘will get alert’ and ‘likely to get alert’
areas on the map might not be enough.

We don’t want to introduce another colour because:
- it will make the map look very busy
- not many other colours contrast with the map tiles as well as blue
- relying on colour only to communicate information is also bad for
  accessibility

Instead we can make one of the lines a different style. I’ve gone for
dashed on the ‘likely’ line because it looks nice, and gives some
suggestion of a porous boundary.

Implementing this means using CSS border image, because a `dashed`
border (which we still have as a fallback) doesn’t render with
consistent dash sizes from browser to browser. We need consistency to
match the dashes that the map will be drawing (which use SVG not CSS
so don’t have the same problem).
---
 .../images/dashed-border-govuk-blue.svg       | 13 +++++++++
 .../stylesheets/components/area-list.scss     | 21 ++++++++++-----
 .../partials/area-map-javascripts.html        | 27 +++++++------------
 3 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 app/assets/images/dashed-border-govuk-blue.svg

diff --git a/app/assets/images/dashed-border-govuk-blue.svg b/app/assets/images/dashed-border-govuk-blue.svg
new file mode 100644
index 000000000..3c9d9f1db
--- /dev/null
+++ b/app/assets/images/dashed-border-govuk-blue.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#185FA0;stroke-width:2;stroke-miterlimit:10;}
+</style>
+<g>
+	<polyline class="st0" points="14,5.1 14,1 9.9,1 	"/>
+	<polyline class="st0" points="5.1,1 1,1 1,5.1 	"/>
+	<polyline class="st0" points="1,9.9 1,14 5.1,14 	"/>
+	<polyline class="st0" points="9.9,14 14,14 14,9.9 	"/>
+</g>
+</svg>
diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index d347af7fc..1bb30c1df 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -1,6 +1,6 @@
 .area-list {
 
-  display: inline-block;
+  display: inline;
 
   &-item {
 
@@ -104,17 +104,26 @@
 
   &--certain {
     &:before {
-      border: 4px solid rgba($white, 0.1);
-      background: rgba($govuk-blue, 0.6);
-      box-shadow: inset 0 0 0 2px $black;
+      border: 2px solid $black;
+      background: $light-blue-50;
     }
   }
 
   &--likely {
     &:before {
       padding: 1px;
-      border: 2px solid $govuk-blue;
-      background: rgba($govuk-blue, 0.2);
+      border: 2px dashed $govuk-blue;
+      border-image: file-url('dashed-border-govuk-blue.svg') 4 round;
+      background: $light-blue-25;
+    }
+  }
+
+  &--phone-estimate {
+    padding-left: govuk-spacing(1);
+    margin-right: 0;
+    float: right;
+    &:before {
+      display: none;
     }
   }
 
diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index 6111f6be2..b557e9445 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -5,23 +5,13 @@
   {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        opacity: 0.8,
-        color: '#005ea5', // $light-blue
-        fillColor: '#005ea5', // $light-blue
+        opacity: 1,
+        color: '#005ea5',
+        fillColor: '#2B8CC4',
         fillOpacity: 0.15,
-        weight: 2
-      })
-    );
-  {% endfor %}
-
-  {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
-    polygons.push(
-      L.polygon({{polygon}}, {
-        opacity: 0.3,
-        color: '#005ea5', // $black
-        fillColor: '#005ea5', // $light-blue
-        fillOpacity: 0.3,
-        weight: 1
+        weight: 2,
+        dashArray: [6, 7],
+        lineCap: 'butt'
       })
     );
   {% endfor %}
@@ -29,8 +19,9 @@
   {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
-        color: '#0b0b0c', // $black
-        fillOpacity: 0,
+        color: '#0b0b0c',
+        fillColor: '#005ea5',
+        fillOpacity: 0.3,
         weight: 2
       })
     );