add cancel button for lightbox and pare down pointer-events stuff a bit

src/components/views/elements/ImageView.js

@@ -118,6 +118,7 @@ module.exports = React.createClass({
                     <img src={this.props.src} style={style}/>
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
+                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">

src/skins/vector/css/atoms/ImageView.css

@@ -60,9 +60,10 @@ limitations under the License.
     max-width: 100%;
     /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
     max-height: 100%;
-    /* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
+    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
     /* background-image: url('img/trans.png'); */
+    pointer-events: all;
 }
 
 .mx_ImageView_labelWrapper {
@@ -70,6 +71,7 @@ limitations under the License.
     top: 0px;
     height: 100%;
     overflow: auto;
+    pointer-events: all;
 }
 
 .mx_ImageView_label {
@@ -86,20 +88,25 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_ImageView_cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 35px;
+    cursor: pointer;
+}
+
 .mx_ImageView_name {
     font-size: 18px;
     margin-bottom: 6px;
-    pointer-events: all;
 }
 
 .mx_ImageView_metadata {
     font-size: 15px;
     opacity: 0.5;
-    pointer-events: all;
 }
 
 .mx_ImageView_download {
-    pointer-events: all;
     display: table;
     margin-top: 24px;
     margin-bottom: 6px;
@@ -120,7 +127,6 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    pointer-events: all;
     font-size: 15px;
     opacity: 0.5;
     margin-top: 18px;

src/skins/vector/img/cancel-white.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>