More improvements

app/components/base/Modal.js

@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 
 const ModalHeader = (props) => (
-  <div className="modal__header">
+  <div className="modal__header bg-light">
     <div className="grid">
       <div className="grid__cell pad">
         {props.children}
@@ -41,16 +41,30 @@ class Modal extends Component {
     // Did we click a close button. Let's check a few parent nodes up as well
     // because some buttons might have nested elements. Maybe there is a better
     // way to check this?
-
     let target = e.target;
+    let close = false;
+    
+    if (target === this.refs.modal) {
+      close = true;
+    }
+
     for (let i = 0; i < 5; i++) {
       if (target.hasAttribute('data-close-modal')) {
-        this.setState({visible: !this.state.visible});
+        close = true;
         break;
       }
 
       target = target.parentNode;
     }
+    
+    if (close) {
+      this.close();
+    }
+  }
+  
+  close () {
+    this.setState({visible: !this.state.visible});
+    this.props.onClose && this.props.onClose();
   }
 
   render () {
@@ -59,9 +73,7 @@ class Modal extends Component {
     }
 
     return (
-      <div className="modal grid grid--center"
-           onClick={this._handleClick.bind(this)} ref="modal"
-           data-close-modal="true">
+      <div className="modal grid grid--center" onClick={this._handleClick.bind(this)} ref="modal">
         <div className="modal__content grid--v bg-super-light">
           {this.props.children}
         </div>
@@ -71,7 +83,8 @@ class Modal extends Component {
 }
 
 Modal.propTypes = {
-  visible: PropTypes.bool.isRequired
+  visible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func
 };
 
 export {Modal, ModalHeader, ModalBody, ModalFooter};

app/containers/App.js

@@ -95,7 +95,7 @@ class App extends Component {
 
     return (
       <div className="grid bg-super-dark tall">
-        <Modal visible={true}>
+        <Modal visible={false} ref="modal">
           <ModalHeader>Header</ModalHeader>
           <ModalBody>
             <p>Hello</p>

app/css/components/modal.scss

@@ -12,6 +12,7 @@
   padding: $padding-xl;
 
   .modal__header {
+    border-radius: $radius-md;
     border-bottom: 1px solid $hl-md;
   }
 
@@ -24,6 +25,7 @@
   }
 
   .modal__footer {
+    border-radius: $radius-md;
     border-top: 1px solid $hl-md;
   }
 }

app/css/layout/base.scss

@@ -28,6 +28,10 @@ h2 {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-left {
   text-align: left !important;
 }