From 946cb16ef0c451210dbc614d690dc86b35ff47c6 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 6 Apr 2016 20:27:45 -0700
Subject: [PATCH] More improvements

---
 app/components/base/Modal.js  | 27 ++++++++++++++++++++-------
 app/containers/App.js         |  2 +-
 app/css/components/modal.scss |  2 ++
 app/css/layout/base.scss      |  4 ++++
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/components/base/Modal.js b/app/components/base/Modal.js
index c509d329c1..4c225add5c 100644
--- a/app/components/base/Modal.js
+++ b/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};
diff --git a/app/containers/App.js b/app/containers/App.js
index 63cb29a4f7..dafe889466 100644
--- a/app/containers/App.js
+++ b/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>
diff --git a/app/css/components/modal.scss b/app/css/components/modal.scss
index b6ef3c9005..26b534e3b5 100644
--- a/app/css/components/modal.scss
+++ b/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;
   }
 }
diff --git a/app/css/layout/base.scss b/app/css/layout/base.scss
index 031bfa0b82..c92db6591b 100644
--- a/app/css/layout/base.scss
+++ b/app/css/layout/base.scss
@@ -28,6 +28,10 @@ h2 {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-left {
   text-align: left !important;
 }