From 8a183042257fd9f28a50240860dafc326eed3334 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 15 Feb 2018 19:46:11 -0500
Subject: [PATCH] Tweaking design of error and warning messages

---
 .../Message/__snapshots__/test.js.snap        |  5 ++--
 src/components/Message/index.js               |  3 ++-
 src/components/Message/style.css              | 23 ++++++++++++++-----
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/Message/__snapshots__/test.js.snap b/src/components/Message/__snapshots__/test.js.snap
index 1c156eb..b3fba55 100644
--- a/src/components/Message/__snapshots__/test.js.snap
+++ b/src/components/Message/__snapshots__/test.js.snap
@@ -28,8 +28,9 @@ exports[`Message rendering with icon 1`] = `
   <div
     class="header"
   >
+    Sample icon SVG
     <h2>
-      Sample icon SVGTesting
+      Testing
     </h2>
   </div>
   <div
@@ -49,8 +50,8 @@ exports[`Message rendering with type 1`] = `
   <div
     class="header"
   >
+    <svg />
     <h2>
-      <svg />
       Testing
     </h2>
   </div>
diff --git a/src/components/Message/index.js b/src/components/Message/index.js
index e898c36..b6ae16a 100644
--- a/src/components/Message/index.js
+++ b/src/components/Message/index.js
@@ -25,7 +25,8 @@ const renderIcon = (type, icon) => {
 const Message = ({ type, icon, heading, children }) => (
   <div className={ [ style.message, type && style[type] ].filter(Boolean).join(' ') }>
     <div className={ style.header }>
-      <h2>{ renderIcon(type, icon) }{ heading }</h2>
+      { renderIcon(type, icon) }
+      <h2>{ heading }</h2>
     </div>
     <div className={ style.content }>
       { children }
diff --git a/src/components/Message/style.css b/src/components/Message/style.css
index 7fe8d4f..0279daa 100644
--- a/src/components/Message/style.css
+++ b/src/components/Message/style.css
@@ -6,16 +6,17 @@
   box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
 
   & .header {
-    padding: var(--spacing-margin);
-
     & h2 {
+      display: inline-block;
+      padding: var(--spacing-margin);
+      line-height: 2.8rem;
       margin: 0;
     }
 
-    & h2 svg {
-      margin-right: 0.5rem;
-      height: 3rem;
-      width: 3rem;
+    & svg {
+      padding: var(--spacing-margin);
+      height: 2.8rem;
+      width: 2.8rem;
       vertical-align: bottom;
     }
   }
@@ -37,6 +38,11 @@
     & .header {
       background: var(--color-red);
       color: var(--color-white);
+
+      & svg {
+        background: var(--color-white);
+        color: var(--color-red);
+      }
     }
   }
 
@@ -44,5 +50,10 @@
     & .header {
       background: var(--color-orange);
     }
+
+    & svg {
+      background: var(--color-black);
+      color: var(--color-orange);
+    }
   }
 }