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,7 +69,7 @@ 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">