Style the area labels and polygons

Gives them some colours, borders and stuff to make them visually
consistent with the rest of Notify.

The idea is the tags and polygons have a similar affordances (i.e.
border thickness, colour) to visually link them and imply that they are
two representations of the same thing.

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

@@ -0,0 +1,64 @@
+.area-list {
+
+  &-item {
+
+    display: inline-block;
+    border: 2px solid $black;
+    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
+    margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
+    position: relative;
+
+    &-remove {
+
+      font-size: 0;
+
+      &:before {
+        content: "×";
+        display: block;
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        width: 35px;
+        background: $govuk-blue;
+        color: $white;
+        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
+        border: 2px solid $govuk-blue;
+        border-left: none;
+        font-size: 24px;
+        font-weight: normal;
+        line-height: 40px;
+        text-align: center;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &:focus {
+
+        &:before {
+          color: $light-blue-25;
+        }
+
+      }
+
+      &:focus {
+
+        outline: none;
+
+        &:before {
+          background: $focus-colour;
+          color: $black;
+          border-color: $black;
+        }
+
+      }
+
+    }
+
+  }
+
+  .govuk-button {
+    margin-left: 3px;
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -70,6 +70,7 @@ $path: '/static/images/';
 @import 'components/preview-pane';
 @import 'components/task-list';
 @import 'components/loading-indicator';
+@import 'components/area-list';
 
 @import 'views/dashboard';
 @import 'views/users';

app/templates/views/broadcast/preview-areas.html

@@ -14,6 +14,7 @@
     #map {
       z-index: 50;
       margin-bottom: 30px;
+      border: 1px solid #b1b4b6;
     }
   </style>
 {% endblock %}
@@ -37,12 +38,20 @@
 
     {% for area in area_polygons %}
       polygons.push(
-        L.polygon({{area}})
+        L.polygon({{area}}, {
+          color: '#0b0b0c', // $black
+          fillColor: '#2B8CC4', // $light-blue
+          fillOpacity: 0.2,
+          weight: 2
+        })
       );
     {% endfor %}
 
     var polygonGroup = L.featureGroup(polygons).addTo(mymap);
-    mymap.fitBounds(polygonGroup.getBounds());
+    mymap.fitBounds(
+      polygonGroup.getBounds(),
+      {padding: [5, 5]}
+    );
 
   </script>
 {% endblock %}
@@ -52,16 +61,20 @@
   {{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
 
   {% for area in selected %}
-    {{ area.name }} (<a href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>)&ensp;
+    {% if loop.first %}
+      <ul class="area-list">
+    {% endif %}
+        <li class="area-list-item">
+          {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>
+        </li>
     {% if loop.last %}
-      <p class="govuk-body">
-        {{ govukButton({
-          "element": "a",
-          "text": "Add another area",
-          "href": url_for('.choose_broadcast_library', service_id=current_service.id),
-          "classes": "govuk-button--secondary govuk-!-margin-top-2"
-        }) }}
-      </p>
+      {{ govukButton({
+        "element": "a",
+        "text": "Add another area",
+        "href": url_for('.choose_broadcast_library', service_id=current_service.id),
+        "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
+      }) }}
+      </ul>
     {% endif %}
   {% else %}
     <p class="govuk-body">

app/templates/views/broadcast/preview-message.html

@@ -13,12 +13,12 @@
 
   {{ page_header("Preview message", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id)) }}
 
-  {% for region in selected %}
+  {% for area in selected %}
     {% if loop.first %}
-      <ul class="region-list">
+      <ul class="area-list">
     {% endif %}
-        <li class="region-list-item">
-          {{ region.name }}
+        <li class="area-list-item">
+          {{ area.name }}
         </li>
     {% if loop.last %}
       </ul>