Add icon for banner

Iterate the banner design to try to increase the clickthrough rate.

Design details:

- Mobile design matches the landing page header CTA
(breaks across two lines, with a larger arrow icon)
- The CTA link needs a discretionary line break after the colon
- Delete the line break between the last two sentences of the banner on both mobile and desktop (To match landing page)

Our analysis has shown that the switch from the red to black banner increased interaction (hides) but reduced clickthroughs.

CTR for old banner (red) = 4.3%
CTR for current banner (black) = 3.7%

Interaction rate for old banner= 5.2%
Interaction rate for current banner= 5.7%

app/assets/stylesheets/helpers/_header.scss

@@ -516,6 +516,30 @@ $covid-grey: #262828;
   }
 }
 
+.global-bar-title__icon {
+  display: inline-block;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 50px;
+  min-height: 45px;
+  background-image: image-url("covid-arrow.png"); // PNG fallback for SVG
+  background-image: image-url("covid-arrow.svg");
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+  background-size: 37px auto;
+
+  @include govuk-media-query($from: desktop) {
+    // IE10/11 specific - vertical align in flexbox is ignored
+    // unless an explicit height is set
+    @media screen and (min-width:0\0) {
+      height: 45px;
+    }
+  }
+}
+
 .global-bar-dismiss-wrapper {
   margin-top: govuk-spacing(4);
 }

app/views/notifications/_global_bar.html.erb

@@ -2,6 +2,7 @@
   show_global_bar ||= true # Toggles the appearance of the global bar
   title = "Coronavirus (COVID-19): what you need to do"
   title_href = "/coronavirus"
+  title_icon = true
   link_text = false
   link_href = false
 
@@ -15,6 +16,7 @@
   title_classes = %w(global-bar-title)
   title_classes << "js-call-to-action" if title_href
   title_classes << "govuk-link" if title_href
+  title_icon_class = "global-bar-title__icon" if title_icon
 
   dismiss_classes = %w(global-bar__dismiss global-bar__dismiss--show dismiss)
   dismiss_classes << "govuk-link"
@@ -35,7 +37,9 @@
     <div class="global-bar-message govuk-width-container">
       <% if title %>
         <% if title_href %>
-          <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>"><%= title %></a>
+          <span class="<%= title_icon_class %>">
+            <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>"><%= title %></a>
+          </span>
         <% else %>
           <span class="<%= title_classes.join(' ') %>"><%= title %></span>
         <% end %>