Fix MessageBox UI

app/components/App.jsx

@@ -49,33 +49,43 @@ export default class App extends Component {
     });
 
     this.props.controller.on(Events.DECRYPTION_FAILED, (state) => {
-      const message = [
-        'We were unable to decrypt the document. Either the secret has not',
-        'been supplied or it is invalid.',
-        'We have redirected you to a new document.'
-      ].join(' ');
+      const message = {
+        content: [
+          'We were unable to decrypt the document. Either the secret has not',
+          'been supplied or it is invalid.',
+          'We have redirected you to a new document.'
+        ].join(' '),
+        type: 'error'
+      }
 
       this.loadAndRedirect(state.document, '/', message);
     });
 
     this.props.controller.on(Events.DOCUMENT_NOT_FOUND, (state) => {
-      const message = [
-        'We could not find the document you were trying to load, so we have',
-        'redirected you to a new document.'
-      ].join(' ');
+      const message = {
+        content: [
+          'We could not find the document you were trying to load, so we have',
+          'redirected you to a new document.'
+        ].join(' '),
+        type: 'error'
+      };
 
       this.loadAndRedirect(state.document, '/', message);
     });
 
     this.props.controller.on(Events.CONFLICT, (state) => {
-      const message = [
-        <i>Snap!</i>,
-        ' The document you were working on has been updated by a third,',
-        ' and you are now working on a fork. You can still find the original',
-        ' (and updated) document: ',
-        <a href={'/' + state.document.uuid + '#' + state.secret}>here</a>,
-        '.'
-      ];
+      const message = {
+        content: (
+          <span>
+            <i>Snap!</i>&nbsp;
+            The document you were working on has been updated by a third,
+            and you are now working on a fork. You can still find the original
+            (and updated) document:&nbsp;
+            <a href={'/' + state.document.uuid + '#' + state.secret}>here</a>.
+          </span>
+        ),
+        type: 'warning'
+      };
 
       this.loadAndRedirect(
         state.fork.document,
@@ -87,10 +97,13 @@ export default class App extends Component {
     this.props.controller.on(Events.UPDATE_WITHOUT_CONFLICT, (state) => {
       this.setState({
         document: state.document,
-        message: [
-          'We have updated the document you are viewing to its latest revision.',
-          'Happy reading/working!'
-        ].join(' ')
+        message: {
+          content: [
+            'We have updated the document you are viewing to its latest revision.',
+            'Happy reading/working!'
+          ].join(' '),
+          type: 'info'
+        }
       });
     });
 
@@ -124,7 +137,7 @@ export default class App extends Component {
     return (
       <div className="layout">
         <Header />
-        <MessageBox message={this.state.message || false} />
+        <MessageBox message={this.state.message || {}} />
         <Editor
           loaded={this.state.loaded}
           content={this.state.document.get('content')}

app/components/MessageBox.jsx

@@ -1,17 +1,23 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
+
+const { object } = PropTypes;
 
 
 export default class MessageBox extends Component {
 
   render() {
-    if (this.props.message) {
+    if (this.props.message && this.props.message.content) {
       return (
-        <div className="message-box">
-          <p>{this.props.message}</p>
+        <div className={'message-box ' + this.props.message.type}>
+          <p>{this.props.message.content}</p>
         </div>
       );
     }
 
     return null;
   }
 }
+
+MessageBox.propTypes = {
+  message: object.isRequired
+}

app/components/__tests__/MessageBox-test.js

@@ -17,9 +17,23 @@ describe('<MessageBox />', () => {
   });
 
   it('renders a message', () => {
-    const wrapper = shallow(<MessageBox message={'hello.'} />);
+    const message = {
+      content: 'hello.'
+    };
+    const wrapper = shallow(<MessageBox message={message} />);
 
     expect(wrapper.find('.message-box')).to.have.length(1);
     expect(wrapper.text()).to.equal('hello.');
   });
+
+it('renders a typed message', () => {
+    const message = {
+      content: 'hello.',
+      type: 'info'
+    };
+    const wrapper = shallow(<MessageBox message={message} />);
+
+    expect(wrapper.find('.message-box.info')).to.have.length(1);
+    expect(wrapper.text()).to.equal('hello.');
+  });
 });

app/scss/_settings.scss

@@ -17,7 +17,7 @@ $foundation-palette: (
   secondary: $mercury,
   success: #3adb76,
   warning: #ffae00,
-  alert: #ec5840,
+  alert: #ec5840
 );
 
 // Global
@@ -27,6 +27,7 @@ $global-radius: 5px;
 $common-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $body-font-family: 'LatoLatinLight', $common-font-family;
 $header-font-family: 'LatoLatin', $common-font-family;
+$callout-font-family: $header-font-family;
 
 // Typography
 $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
@@ -37,6 +38,9 @@ $print-transparent-backgrounds: false;
 // Callout
 $callout-radius: 0;
 $callout-margin: 0;
+$callout-background-fade: 20%;
+$callout-font-color: $alabaster;
+$callout-border: 0 none none;
 
 /* -- Monod settings -- */
 $footer-font-family: 'LatoLatin', $common-font-family;

app/scss/components/_message_box.scss

@@ -1,9 +1,51 @@
+/*
+ * MessageBox component
+ */
+$message-box-height: 65px;
+
 .message-box {
-  @include callout-base;
-  background-color: lighten($warning-color, 40%);
+    @include callout;
+    position: fixed;
+    width: 100%;
+    z-index: 10000;
+    font-size: 1.2rem;
+    font-family: $callout-font-family;
+    min-height: $message-box-height;
+
+    // We support up to 10 simultaneous notifications
+    @for $i from 1 through 10 {
+        &:nth-child(#{$i}) {
+            margin-top: #{($i - 2) * $message-box-height};
+        }
+    }
+
+    &.warning {
+        @include callout-style($warning-color);
+        color: darken($warning-color, 15%);
+        border-bottom: 3px solid $warning-color;
+    }
+
+    &.error {
+        @include callout-style($alert-color);
+        border-bottom: 3px solid $alert-color;
+    }
+
+    &.success {
+        @include callout-style($success-color);
+        border-bottom: 3px solid $success-color;
+    }
+
+    &.info {
+        @include callout-style(lighten($primary-color, 5%));
+        border-bottom: 3px solid $primary-color;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline;
 
-  p {
-    margin-bottom: 0 !important;
-    margin-right: 1rem;
-  }
+        &:hover {
+            background-color: rgba(#fff, 0.2);
+        }
+    }
 }