Make selected areas more tag-like

I’ve never liked the style of the selected areas on the preview of a
broadcast message. They were a compromise, taking what’s on the map page
and giving it a shaded background so it looks less like a text box.

The trouble is all these stroked elements jumbled together made the page
look very busy. I think it can be a bit calmer if they look more like
the ‘tag’ component[1] from the Design System, which only uses shading.

Going for black text not blue, because it’s one less piece of visual
differentiation – again, trying to keep the busyness level down.

1. https://design-system.service.gov.uk/components/tag/

app/assets/stylesheets/components/area-list.scss

@@ -64,7 +64,10 @@
     &--unremoveable {
       padding-right: govuk-spacing(2);
       background: $light-blue-25;
-      margin-right: govuk-spacing(3);
+      color: mix($black, $govuk-blue, 66%);
+      border-color: $light-blue-25;
+      margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
+      font-weight: bold;
     }
 
   }

app/templates/views/broadcast/partials/area-map-javascripts.html

@@ -20,7 +20,7 @@
     polygons.push(
       L.polygon({{polygon}}, {
         color: '#0b0b0c',
-        fillColor: '#005ea5',
+        fillColor: '#2B8CC4',
         fillOpacity: 0.3,
         weight: 2
       })