Style ‘likely’ area with a dashed line

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).

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>

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

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