Small banner color tweaks

2 files changed, 13 insertions, 16 deletions

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index 900552b..daf2ae9 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -9,10 +9,6 @@ import { buttonFrom } from '../Button';
 const actionOverrides = { outline: true };
 
 const IconSection = ({ status }) => {
-  if (status === 'default') {
-    return null;
-  }
-
   const icons = {
     success: 'Check',
     info: 'InfoOutline',
@@ -20,6 +16,10 @@ const IconSection = ({ status }) => {
     danger: 'Error'
   };
 
+  if (status === 'default' || !icons[status]) {
+    return null;
+  }
+  
   const iconClasses = classnames(
     styles.Icon,
     status && styles[`${status}Icon`]
diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index 38f61f1..1d07e5d 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -14,49 +14,45 @@
   &:before {
     display: block;
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
+    top: -1px;
+    left: -1px;
+    right: -1px;
     content: '';
     height: 3px;
     background: color(gray, 6);
-    // border-radius: border-radius() border-radius() 0 0;
+    border-radius: border-radius() border-radius() 0 0;
   }
 }
 
 .success {
   background: rgba(color(green), 0.1);
-  border: 1px solid rgba(color(green), 0.5);
 
   &:before {
-    background: rgba(color(green), 0.6);
+    background: rgba(color(green), 0.8);
   }
 }
 
 .info {
   background: rgba(color(blue), 0.1);
-  border: 1px solid rgba(color(blue), 0.5);
 
   &:before {
-    background: rgba(color(blue), 0.6);
+    background: rgba(color(blue), 0.7);
   }
 }
 
 .warning {
   background: rgba(color(mustard), 0.1);
-  border: 1px solid rgba(color(mustard), 0.5);
 
   &:before {
-    background: rgba(color(mustard), 0.6);
+    background: rgba(color(mustard), 0.7);
   }
 }
 
 .danger {
   background: rgba(color(red, dark), 0.1);
-  border: 1px solid rgba(color(red, dark), 0.6);
 
   &:before {
-    background: rgba(color(red, dark), 0.5);
+    background: rgba(color(red, dark), 0.6);
   }
 }
 
@@ -67,6 +63,7 @@
 
 .Content {
   flex: 1 0;
+  padding-right: rem(39);
 }
 
 .Title {