Port lightbox icon buttons

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)',
-    padding: 20,
-    width: '100%',
-    height: '100%',
-  },
+    display: 'flex',
+    flexDirection: 'row',
+    position: 'absolute',
+    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
-          style={styles.image}
-          src={imageURL}
-         />
-        <button onClick={this.props.close}>Close</button>
+        <div style={styles.objectContainer}>
+          {<img style={styles.image} src={imageURL} />}
+        </div>
+        <div style={styles.controls}>
+          <IconButton type="close" onClick={this.props.close} />
+          <IconButton type="save" />
+        </div>
       </div>
     );
   }