Tweaking design of error and warning messages

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>

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 }

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);
+    }
   }
 }