From 49444221e9dfc1f2bdd18629013b35458dcdb44a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 6 Jul 2020 10:53:15 +0100
Subject: [PATCH] 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.
---
 .../stylesheets/components/area-list.scss     | 64 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 .../views/broadcast/preview-areas.html        | 35 ++++++----
 .../views/broadcast/preview-message.html      |  8 +--
 4 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/stylesheets/components/area-list.scss

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
new file mode 100644
index 000000000..24046d611
--- /dev/null
+++ b/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;
+  }
+
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 2a9ae48ae..5f08c25fe 100644
--- a/app/assets/stylesheets/main.scss
+++ b/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';
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 2793bff16..8599a7f67 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/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">
diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html
index 7a7ecf719..fe595c850 100644
--- a/app/templates/views/broadcast/preview-message.html
+++ b/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>