Adapt to upgraded react-modal style handling

package.json

@@ -44,6 +44,7 @@
     "json-loader": "0.5.2",
     "json2po-stream": "1.0.3",
     "jsx-loader": "0.13.2",
+    "lodash.omit": "3.1.0",
     "minilog": "2.0.8",
     "node-sass": "3.3.3",
     "po2icu": "git://github.com/LLK/po2icu.git#develop",

src/_mixins.scss

@@ -1,19 +0,0 @@
-@mixin modal-iframe($iframe-width, $iframe-height, $padding: 0) {
-    &.ReactModal__Content {
-        top: 50%;
-        right: auto;
-        bottom: auto;
-        left: 50%;
-        margin-top: -($iframe-height + $padding * 2)/2;
-        margin-left: -($iframe-width + $padding * 2)/2;
-        padding: $padding;
-        width: $iframe-width;
-        height: $iframe-height;
-
-        iframe {
-            border: 0;
-            width: $iframe-width;
-            height: $iframe-height;
-        }
-    }
-}

src/components/intro/intro.jsx

@@ -1,3 +1,4 @@
+var omit = require('lodash.omit');
 var React = require('react');
 var ReactIntl = require('react-intl');
 var FormattedMessage = ReactIntl.FormattedMessage;
@@ -30,6 +31,11 @@ var Intro = React.createClass({
         this.setState({videoOpen: false});
     },
     render: function () {
+        var frameSettings = {
+            width: 570,
+            height: 357,
+            padding: 15
+        };
         return (
             <div className="intro">
                 <div className="content">
@@ -116,8 +122,9 @@ var Intro = React.createClass({
                 <Modal
                     className="video-modal"
                     isOpen={this.state.videoOpen}
-                    onRequestClose={this.closeVideo}>
-                    <iframe src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0" />
+                    onRequestClose={this.closeVideo}
+                    frameSettings={frameSettings}>
+                    <iframe src="//player.vimeo.com/video/65583694?title=0&amp;byline=0&amp;portrait=0" {...omit(frameSettings, 'padding')} />
                 </Modal>
             </div>
         );

src/components/intro/intro.scss

@@ -223,7 +223,3 @@
         }
     }
 }
-
-.video-modal {
-    @include modal-iframe(570px, 357px, 15px);
-}

src/components/modal/modal.jsx

@@ -1,20 +1,57 @@
+var defaults = require('lodash.defaults');
+var omit = require('lodash.omit');
 var React = require('react');
 var ReactModal = require('react-modal');
 
 require('./modal.scss');
 
-
 var Modal = React.createClass({
     type: 'Modal',
     statics: {
         setAppElement: ReactModal.setAppElement
     },
+    getDefaultProps: function () {
+        return {
+            frameSettings: null,
+            style: {
+                overlay: {
+                    zIndex: 100,
+                    backgroundColor: 'rgba(0, 0, 0, .75)'
+                },
+                content: {
+                    overflow: 'visible',
+                    borderRadius: '6px'
+                }
+            }
+        };
+    },
     requestClose: function () {
         return this.refs.modal.portal.requestClose();
     },
     render: function () {
+        var frameSettings = this.props.frameSettings;
+        var style = this.props.style;
+        var modalProps = omit(this.props, ['frameSettings', 'style']);
+        if (frameSettings) {
+            defaults(frameSettings, {
+                width: 500,
+                height: 250,
+                padding: 0
+            });
+            defaults(style.content, {
+                top: '50%',
+                right: 'auto',
+                bottom: 'auto',
+                left: '50%',
+                marginTop: (frameSettings.height + 2*frameSettings.padding) / -2,
+                marginLeft: (frameSettings.width + 2*frameSettings.padding) / -2,
+                height: frameSettings.height,
+                width: frameSettings.width,
+                padding: frameSettings.padding
+            });
+        }
         return (
-            <ReactModal ref="modal" {... this.props}>
+            <ReactModal ref="modal" style={style} {...modalProps}>
                 <div className="modal-close" onClick={this.requestClose}></div>
                 {this.props.children}
             </ReactModal>

src/components/modal/modal.scss

@@ -1,26 +1,9 @@
 @import "../../colors";
 
-$base-bg: $ui-white;
-
-/* Copied from the un-styleable react-modal */
-
-.ReactModal__Overlay {
-    z-index: 100;
-    background-color: $overlay-gray;
-}
-
-.ReactModal__Content {
-    position: absolute;
-    top: 40px;
-    right: 40px;
-    bottom: 40px;
-    left: 40px;
-    outline: none;
-    border-radius: 6px;
-    background: $base-bg;
-    padding: 20px;
-    overflow: visible;
-    -webkit-overflow-scrolling: touch;
+&.ReactModal__Content {
+    iframe {
+        border: 0;
+    }
 }
 
 .modal-close {

src/components/registration/registration.jsx

@@ -22,12 +22,17 @@ var Registration = React.createClass({
         window.removeEventListener('message', this.onMessage);
     },
     render: function () {
+        var frameSettings = {
+            width: 610,
+            height: 438
+        };
         return (
             <Modal
                     isOpen={this.props.isOpen}
                     onRequestClose={this.props.onRequestClose}
-                    className="registration">
-                <iframe src="/accounts/standalone-registration/" />
+                    className="registration"
+                    frameSettings={frameSettings}>
+                <iframe src="/accounts/standalone-registration/" {...frameSettings} />
             </Modal>
         );
     }

src/components/registration/registration.scss

@@ -1,6 +1,3 @@
-@import "../../mixins";
-
 .registration {
-    @include modal-iframe(610px, 438px);
     overflow: hidden;
 }