From d7d113090c3fca6abe1816861cc26da705cf4727 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 2 Oct 2020 13:49:44 +0100
Subject: [PATCH] Restyle the broadcast message preview

The preview of the broadcast message, with the 2px thick black lines no
longer matched the style of the area labels, which have moved to just
having a tinted background.

This commit restyles the broadcast message preview (including the
exclamation mark icon) to use shading only to differentiate the message
from the rest of the page.

This should make the page fit together more cohesively, and feel less
busy.
---
 app/assets/images/exclamation.svg             | 34 +++++++++----------
 .../components/broadcast-message.scss         | 17 ++++++----
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg
index 5998192ad..e530210e1 100644
--- a/app/assets/images/exclamation.svg
+++ b/app/assets/images/exclamation.svg
@@ -1,26 +1,26 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 17.5 14.5" width="17.5" height="14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B0B0B;}
+	.st0{display:none;}
+	.st1{display:inline;fill:#BCBCBC;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#6F777B;}
 </style>
-<path class="st0" d="M8.6,3.9l5.3,8.6H3.5L8.6,3.9 M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
-<g>
-	<circle class="st0" cx="8.8" cy="10.9" r="1.1"/>
-	<path d="M8.8,9.8c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1C9.8,10.3,9.4,9.8,8.8,9.8L8.8,9.8z"/>
+<g id="Layer_3" class="st0">
+	<rect x="-1.6" y="-0.8" class="st1" width="20.1" height="17.8"/>
 </g>
-<polygon class="st0" points="8.2,6.4 9.3,6.4 9.7,6.8 9.6,9.3 8.7,9.1 8,9.3 7.8,6.9 "/>
-<g>
+<g id="Layer_1">
+	<path class="st2" d="M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
+	<g>
+		<circle class="st2" cx="8.8" cy="10.9" r="1.1"/>
+	</g>
 </g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
+<g id="Layer_2">
+	<path class="st3" d="M8.8,10.3c-0.8,0-1.5,0.7-1.5,1.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5C10.2,11,9.6,10.3,8.8,10.3L8.8,10.3z
+		"/>
+	<path class="st3" d="M10.1,5.8C10.2,6.6,9.8,9,9.8,9S9.4,9,8.8,9C8.3,9,7.8,9,7.8,9S7.3,6.7,7.3,6c0,0,0-1.6,1.4-1.6
+		C10.1,4.4,10.1,5.8,10.1,5.8z"/>
 </g>
 </svg>
diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss
index 4ccf1a423..4251922b0 100644
--- a/app/assets/stylesheets/components/broadcast-message.scss
+++ b/app/assets/stylesheets/components/broadcast-message.scss
@@ -6,7 +6,7 @@
   box-sizing: border-box;
   padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
   background: $panel-colour;
-  border: 2px solid $black;
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
   border-radius: 5px;
   white-space: normal;
   margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
@@ -16,18 +16,21 @@
   &:before {
     content: "Emergency alert";
     display: block;
-    border-bottom: 2px solid $black;
     position: absolute;
-    top: govuk-spacing(2);
+    top: 0;
     left: 0;
-    padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
+    padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px;
     width: 100%;
     box-sizing: border-box;
     font-weight: bold;
-    background: file-url('exclamation.svg');
-    background-size: 20px;
+    background: $grey-1 file-url('exclamation.svg');
+    color: $white;
+    background-size: 22px;
     background-repeat: no-repeat;
-    background-position: govuk-spacing(3) 3px;
+    background-position: govuk-spacing(3) 11px;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   }
 
 }