Replace react-skylight with own solution that centers images better

4 files changed, 59 insertions, 29 deletions

diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index 663728f34..656f3d4a3 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -35,7 +35,8 @@ const IconButton = React.createClass({
       width: `${this.props.size * 1.28571429}px`,
       height: `${this.props.size}px`,
       lineHeight: `${this.props.size}px`,
-      cursor: 'pointer'
+      cursor: 'pointer',
+      ...this.props.style
     };
 
     return (
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;
diff --git a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
index 323125e30..b6c022736 100644
--- a/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
+++ b/app/assets/javascripts/components/features/ui/containers/modal_container.jsx
@@ -1,6 +1,6 @@
 import { connect }           from 'react-redux';
-import { SkyLightStateless } from 'react-skylight';
 import { closeModal }        from '../../../actions/modal';
+import Lightbox              from '../../../components/lightbox';
 
 const mapStateToProps = state => ({
   url: state.getIn(['modal', 'url']),
@@ -17,30 +17,11 @@ const mapDispatchToProps = dispatch => ({
   }
 });
 
-const styles = {
-  overlayStyles: {
-
-  },
-
-  dialogStyles: {
-    width: '600px',
-    color: '#282c37',
-    fontSize: '16px',
-    lineHeight: '37px',
-    marginTop: '-300px',
-    left: '0',
-    right: '0',
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    height: 'auto'
-  },
-
-  imageStyle: {
-    display: 'block',
-    maxWidth: '100%',
-    height: 'auto',
-    margin: '0 auto'
-  }
+const imageStyle = {
+  display: 'block',
+  maxWidth: '100%',
+  height: 'auto',
+  margin: '0 auto'
 };
 
 const Modal = React.createClass({
@@ -56,9 +37,9 @@ const Modal = React.createClass({
     const { url, ...other } = this.props;
 
     return (
-      <SkyLightStateless {...other} dialogStyles={styles.dialogStyles} overlayStyles={styles.overlayStyles}>
-        <img src={url} style={styles.imageStyle} />
-      </SkyLightStateless>
+      <Lightbox {...other}>
+        <img src={url} style={imageStyle} />
+      </Lightbox>
     );
   }
 
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 37272e8e5..16327168c 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -59,6 +59,10 @@
   }
 }
 
+.lightbox .icon-button {
+  color: #282c37;
+}
+
 .compose-form__textarea, .follow-form__input {
   background: #fff;