Replace react-skylight with own solution that centers images better

8 files changed, 64 insertions, 35 deletions

diff --git a/Gemfile b/Gemfile
index 2c8b2c871..7eab0a5bb 100644
--- a/Gemfile
+++ b/Gemfile
@@ -45,6 +45,7 @@ gem 'neography'
 
 gem 'react-rails'
 gem 'browserify-rails'
+gem 'autoprefixer-rails'
 
 group :development, :test do
   gem 'rspec-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index 2ffdfa07b..38b3101df 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -42,6 +42,8 @@ GEM
     addressable (2.4.0)
     arel (7.1.1)
     ast (2.3.0)
+    autoprefixer-rails (6.5.0.2)
+      execjs
     av (0.9.0)
       cocaine (~> 0.5.3)
     aws-sdk (1.66.0)
@@ -379,6 +381,7 @@ PLATFORMS
 DEPENDENCIES
   active_record_query_trace
   addressable
+  autoprefixer-rails
   aws-sdk (< 2.0)
   better_errors
   binding_of_caller
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;
 
diff --git a/package.json b/package.json
index e17fbef52..394ef0441 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,6 @@
   "dependencies": {
     "react-autosuggest": "^7.0.1",
     "react-responsive": "^1.1.5",
-    "react-router-scroll": "^0.3.2",
-    "react-skylight": "^0.4.1"
+    "react-router-scroll": "^0.3.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 75baca887..ca16f77ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3956,10 +3956,6 @@ react-simple-dropdown@^1.1.4:
   dependencies:
     classnames "^2.1.2"
 
-react-skylight:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/react-skylight/-/react-skylight-0.4.1.tgz#07d1af6dea0a50a5d8122a786a8ce8bc6bdf2241"
-
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"