From c15491974d31c2494981d21c0cbc042b215a87ea Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 24 Jul 2017 16:19:09 +0100
Subject: [PATCH] Use black text with a border for default banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We use panels with a blue banner to indicate something that’s clickable.
So we should move away from this style for things that are just
notifications. We can’t use teal like other bits of GOV.UK because it
doesn’t pass colour contrast.

Pay are using a box with a green border, similar to the error validation
box (which has a red border). So let’s do the same for now.
---
 app/assets/stylesheets/components/banner.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index f8cd258b6..ac610bf76 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -3,14 +3,14 @@
 .banner-default {
 
   @include core-19;
-  background: $govuk-blue;
-  color: $white;
+  color: $text-colour;
   display: block;
   padding: $gutter-half;
   margin: $gutter-half 0 $gutter 0;
   text-align: left;
   position: relative;
   clear: both;
+  border: 5px solid $button-colour;
 
   &-title {
     @include bold-24;
@@ -29,9 +29,9 @@
 %banner-with-tick,
 .banner-with-tick {
   padding: $gutter-half ($gutter + $gutter-half);
-  background-image: file-url('tick-white.png');
+  background-image: file-url('tick.png');
   @include ie-lte(8) {
-    background-image: file-url('tick-white-16px.png');
+    background-image: file-url('tick-16px.png');
   }
   background-size: 19px;
   background-repeat: no-repeat;