Adding some styling to messages to spice up errors

src/components/Message.js

@@ -10,14 +10,19 @@ const renderIcon = icon => {
   return <Icon/>;
 };
 
-const Message = ({ icon, heading, children }) => (
-  <div className="message">
-    <h2>{ renderIcon(icon) }{ heading }</h2>
-    { children }
+const Message = ({ className, icon, heading, children }) => (
+  <div className={ ['message', className].filter(Boolean).join(' ') }>
+    <div className="header">
+      <h2>{ renderIcon(icon) }{ heading }</h2>
+    </div>
+    <div className="content">
+      { children }
+    </div>
   </div>
 );
 
 Message.propTypes = {
+  className: PropTypes.string,
   icon: PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.func

src/components/Message.test.js

@@ -5,7 +5,7 @@ import Message from './Message';
 
 test('Message rendering', () => {
   const component = shallow(
-    <Message heading="Testing">
+    <Message heading="Testing" className="testing">
       <p>Message content</p>
     </Message>
   );

src/components/RavenError.js

@@ -22,7 +22,7 @@ class RavenError extends React.Component {
   render() {
     const { heading } = this.props;
 
-    return <Message icon={ AlertIcon } heading={ heading }>
+    return <Message className="error" icon={ AlertIcon } heading={ heading }>
       <p>This error has been logged. You may also <a href="#error-report" onClick={ this.reportError }>fill out a report</a>.</p>
     </Message>;
   }

src/components/__snapshots__/Message.test.js.snap

@@ -2,14 +2,22 @@
 
 exports[`Message rendering 1`] = `
 <div
-  className="message"
+  className="message testing"
 >
-  <h2>
-    Testing
-  </h2>
-  <p>
-    Message content
-  </p>
+  <div
+    className="header"
+  >
+    <h2>
+      Testing
+    </h2>
+  </div>
+  <div
+    className="content"
+  >
+    <p>
+      Message content
+    </p>
+  </div>
 </div>
 `;
 
@@ -17,11 +25,19 @@ exports[`Message rendering with icon 1`] = `
 <div
   class="message"
 >
-  <h2>
-    Sample icon SVGTesting
-  </h2>
-  <p>
-    Message content
-  </p>
+  <div
+    class="header"
+  >
+    <h2>
+      Sample icon SVGTesting
+    </h2>
+  </div>
+  <div
+    class="content"
+  >
+    <p>
+      Message content
+    </p>
+  </div>
 </div>
 `;

src/components/__snapshots__/RavenError.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`RavenError rendering 1`] = `
 <Message
+  className="error"
   heading="Test error"
   icon={[Function]}
 >