From 0cf3124f7351fe261cbafb071f7edaf6fef6fe02 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 8 Jul 2020 17:24:08 +0100
Subject: [PATCH] Add some styling to broadcast messages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This is borrowed from an earlier prototype, and is meant to be temporary
– something better than just plain text.

Text in generated content isn’t always announced by screen readers, so
we should definitely move away from that once we understand what text
will be shown on the phone and where it comes from.
---
 app/assets/images/exclamation.svg             | 26 +++++++++++++++
 .../components/broadcast-message.scss         | 33 +++++++++++++++++++
 app/assets/stylesheets/main.scss              |  1 +
 .../views/broadcast/preview-areas.html        |  2 +-
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/exclamation.svg
 create mode 100644 app/assets/stylesheets/components/broadcast-message.scss

diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg
new file mode 100644
index 000000000..7c5e6d28f
--- /dev/null
+++ b/app/assets/images/exclamation.svg
@@ -0,0 +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"
+	 viewBox="0 0 17.5 14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0B0B0B;}
+</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>
+<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>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss
new file mode 100644
index 000000000..4ccf1a423
--- /dev/null
+++ b/app/assets/stylesheets/components/broadcast-message.scss
@@ -0,0 +1,33 @@
+.broadcast-message-wrapper {
+
+  position: relative;
+  width: 100%;
+  max-width: 464px;
+  box-sizing: border-box;
+  padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
+  background: $panel-colour;
+  border: 2px solid $black;
+  border-radius: 5px;
+  white-space: normal;
+  margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
+  clear: both;
+  word-wrap: break-word;
+
+  &:before {
+    content: "Emergency alert";
+    display: block;
+    border-bottom: 2px solid $black;
+    position: absolute;
+    top: govuk-spacing(2);
+    left: 0;
+    padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
+    width: 100%;
+    box-sizing: border-box;
+    font-weight: bold;
+    background: file-url('exclamation.svg');
+    background-size: 20px;
+    background-repeat: no-repeat;
+    background-position: govuk-spacing(3) 3px;
+  }
+
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 5f08c25fe..062888810 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -71,6 +71,7 @@ $path: '/static/images/';
 @import 'components/task-list';
 @import 'components/loading-indicator';
 @import 'components/area-list';
+@import 'components/broadcast-message';
 
 @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 8599a7f67..c719f0f22 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -58,7 +58,7 @@
 
 {% block maincolumn_content %}
 
-  {{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
+  {{ page_header("Choose where to broadcast to", back_link=url_for('.choose_template', service_id=current_service.id)) }}
 
   {% for area in selected %}
     {% if loop.first %}