1 files changed, 44 insertions, 0 deletions
diff --git a/app/assets/javascripts/components/components/lightbox.jsx b/app/assets/javascripts/components/components/lightbox.jsx
new file mode 100644
index 000000000..619cc0928
--- /dev/null
+++ b/app/assets/javascripts/components/components/lightbox.jsx
@@ -0,0 +1,44 @@
+import IconButton from './icon_button';
+
+const overlayStyle = {
+  position: 'fixed',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignContent: 'center',
+  background: 'rgba(0, 0, 0, 0.5)'
+};
+
+const dialogStyle = {
+  color: '#282c37',
+  background: '#d9e1e8',
+  borderRadius: '4px',
+  boxShadow: '0 0 15px rgba(0, 0, 0, 0.4)',
+  padding: '10px',
+  margin: 'auto',
+  position: 'relative'
+};
+
+const closeStyle = {
+  position: 'absolute',
+  top: '4px',
+  right: '4px'
+};
+
+const Lightbox = ({ isVisible, onOverlayClicked, onCloseClicked, children }) =>
+  <div className='lightbox' style={{ ...overlayStyle, display: isVisible ? 'flex' : 'none' }} onClick={onOverlayClicked}>
+    <div style={dialogStyle}>
+      <IconButton title='Close' icon='times' onClick={onCloseClicked} size={16} style={closeStyle} />
+      {children}
+    </div>
+  </div>
+
+Lightbox.propTypes = {
+  isVisible: React.PropTypes.bool,
+  onOverlayClicked: React.PropTypes.func,
+  onCloseClicked: React.PropTypes.func
+};
+
+export default Lightbox;