Issue overlay (#577)

* fixes #384

Positioning and font-size was off.

* Added consistent styling

* Further Changes.

* removed line height.

* fixes #371

* Made minor semantic and code consistency changes.

* anchor tag removed

client/modules/App/components/Overlay.jsx

@@ -9,10 +9,43 @@ class Overlay extends React.Component {
   constructor(props) {
     super(props);
     this.close = this.close.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.keyPressHandle = this.keyPressHandle.bind(this);
+  }
+
+  componentWillMount() {
+    document.addEventListener('mousedown', this.handleClick, false);
+    document.addEventListener('keydown', this.keyPressHandle);
   }
 
   componentDidMount() {
-    this.overlay.focus();
+    this.node.focus();
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClick, false);
+    document.removeEventListener('keydown', this.keyPressHandle);
+  }
+
+  handleClick(e) {
+    if (this.node.contains(e.target)) {
+      return;
+    }
+
+    this.handleClickOutside();
+  }
+
+  handleClickOutside() {
+    this.close();
+  }
+
+  keyPressHandle(e) {
+    // escape key code = 27.
+    // So here we are checking if the key pressed was Escape key.
+    if (e.keyCode === 27) {
+      this.close();
+    }
   }
 
   close() {
@@ -36,12 +69,12 @@ class Overlay extends React.Component {
             tabIndex="0"
             role="main"
             aria-label={ariaLabel}
-            ref={(element) => { this.overlay = element; }}
+            ref={(node) => { this.node = node; }}
             className="overlay__body"
           >
             <header className="overlay__header">
               <h2 className="overlay__title">{title}</h2>
-              <button className="overlay__close-button" onClick={this.close}>
+              <button className="overlay__close-button" onClick={this.close} >
                 <InlineSVG src={exitUrl} alt="close overlay" />
               </button>
             </header>

client/styles/components/_overlay.scss

@@ -40,4 +40,4 @@
 .overlay__close-button {
   @include icon();
   padding: #{3 / $base-font-size}rem 0;
-}
+}