Port lightbox icon buttons

stylesheets/_lightbox.scss

@@ -7,3 +7,38 @@
   height: 100%;
   z-index: $z-index-modal;
 }
+
+.iconButton {
+  background: transparent;
+  width: 50px;
+  height: 50px;
+  margin-bottom: 10px;
+
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 3px;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:hover {
+    background: $grey;
+  }
+
+  &.save {
+    &:before {
+      @include color-svg('../images/save.svg', white);
+    }
+  }
+
+  &.close {
+    &:before {
+      @include color-svg('../images/x.svg', white);
+    }
+  }
+}

ts/components/Lightbox.md

@@ -0,0 +1,5 @@
+```js
+<div style={{position: 'relative', width: '100%', height: 500}}>
+  <Lightbox imageURL="https://placekitten.com/800/600"/>
+</div>
+```

ts/components/Lightbox.tsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 
+import classNames from 'classnames';
 
 interface Props {
   imageURL?: string;
@@ -12,28 +13,59 @@ interface Props {
 
 const styles = {
   container: {
-    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    display: 'flex',
-    padding: 20,
+    flexDirection: 'row',
-    width: '100%',
+    position: 'absolute',
-    height: '100%',
+    left: 0,
-  },
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    padding: 40,
+  } as React.CSSProperties,
+  objectContainer: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+  } as React.CSSProperties,
   image: {
+    flexGrow: 1,
+    flexShrink: 0,
     maxWidth: '100%',
     maxHeight: '100%',
-    objectFit: 'cover',
+    objectFit: 'contain',
-  }
+  } as React.CSSProperties,
+  controls: {
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: 10,
+  } as React.CSSProperties
 };
 
+interface IconButtonProps {
+  type: 'save' | 'close';
+  onClick?: () => void;
+}
+const IconButton = ({ onClick, type }: IconButtonProps) => (
+  <a
+    href="#"
+    onClick={onClick}
+    className={classNames('iconButton', type)}
+  />
+);
+
 export class Lightbox extends React.Component<Props, {}> {
   public render() {
     const { imageURL } = this.props;
     return (
       <div style={styles.container}>
-        <img
+        <div style={styles.objectContainer}>
-          style={styles.image}
+          {<img style={styles.image} src={imageURL} />}
-          src={imageURL}
+        </div>
-         />
+        <div style={styles.controls}>
-        <button onClick={this.props.close}>Close</button>
+          <IconButton type="close" onClick={this.props.close} />
+          <IconButton type="save" />
+        </div>
       </div>
     );
   }