From 3c7364408b7572e06d1d8041b9435894a155573b Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 2 Oct 2020 14:15:40 +0100 Subject: [PATCH] Make selected areas more tag-like MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 5 ++++- .../views/broadcast/partials/area-map-javascripts.html | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss index 66769111b..43f1de582 100644 --- a/app/assets/stylesheets/components/area-list.scss +++ b/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; } } diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html index b557e9445..85a89bf72 100644 --- a/app/templates/views/broadcast/partials/area-map-javascripts.html +++ b/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 })