From b1ab167e1d4b841f92309a461d7bd736c48c96c9 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 25 Oct 2021 15:50:07 +0100
Subject: [PATCH] Tweak spacing, size and hover state when focused

The size and position of the 'X' has deviated a
bit from the design intentions of the original.

The original shared the x-height of the area text
and has positioned to be vertically and
horizontally centered.

These changes assume an x-height of 11px and use
flexbox to center the new 'X' horizontally and
vertically.

This also tweaks the visual state when focused and
then hovered so matches other buttons without
breaking the design.
---
 .../stylesheets/components/area-list.scss     | 30 +++++++++++++++----
 .../views/broadcast/preview-areas.html        |  8 ++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index ad0484b36..acd9023c5 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -7,25 +7,28 @@
     display: inline-block;
     border: 2px solid $black;
     // Create space for the remove link on the right of the list item (including borders)
-    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px + (2 * 2px)) govuk-spacing(1) govuk-spacing(2);
+    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
     margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
     position: relative;
 
     &-remove {
 
-      display: block;
+      display: block; // fallback for browsers that don't support flexbox
+      display: flex;
+      // center SVG vertically and horizontally
+      align-items: center;
+      justify-content: center;
       position: absolute;
       top: -2px; // cover list-item border-top
       right: -2px; // cover list-item border-right
       bottom: -2px; // cover list-item border-bottom
-      width: 35px;
-      padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1); 
+      width: 37px;
+      padding: 0;
       border: 2px solid $govuk-blue;
       border-left: none;
       text-align: center;
-      text-decoration: none;
       font-size: inherit; // counter govuk-button styles
-      line-height: inherit; // counter govuk-button styles
+      line-height: 36px; // match area-list-item for browsers that don't support flexbox
 
       // set styles so they don't get overriden by govuk-button styles
       &,
@@ -54,15 +57,22 @@
 
       // set styles so they don't get overriden by govuk-button styles
       &,
+      &:focus,
       &:focus:not(:active):not(:hover) {
         box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
       }
 
       // set styles so they don't get overriden by govuk-button styles
+      &:focus,
       &:focus:not(:active):not(:hover) {
         border-color: $black;
       }
 
+      &:focus:hover {
+        background-color: $govuk-focus-colour;
+        color: $black;
+      }
+
       // show outline to make focus visible when background colours are overridden
       @media (-ms-high-contrast: active), (forced-colors: active) {
 
@@ -71,6 +81,14 @@
           outline: 3px solid transparent;
         }
 
+        // override hover styles when focused, to preserve dimensions and outline
+        &:focus:hover {
+          top: -2px;
+          right: -2px;
+          bottom: -2px;
+          width: 37px;
+        }
+
       }
     }
 
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 44bcb690f..d516f7326 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -32,11 +32,11 @@
         <li class="area-list-item">
           {{ area.name }}
           <a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
-            <svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
+            <svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
               <title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
-              <g transform="rotate(45),translate(1, -7.5)">
-                <line stroke-width="2" id="svg_1" y2="0" x2="7.5" y1="15" x1="7.5" stroke="currentColor" fill="none"/>
-                <line stroke-width="2" id="svg_3" y2="7.5" x2="0" y1="7.5" x1="15" stroke="currentColor" fill="none"/>
+              <g transform="rotate(45),translate(1, -6)">
+                <line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>
+                <line stroke-width="1.75" id="svg_3" y2="6" x2="0" y1="6" x1="12" stroke="currentColor" fill="none"/>
               </g>
             </svg>
           </a>