Some last tweaks

based on feedback from @rschamp, thanks!

1. make `ref` into method
2. remove accidental inclusion of prototype modal
3. use `omit` for props so that we don’t need a separate object for wrapped component properties

src/components/modal/base/modal.jsx

@@ -5,20 +5,19 @@ var ReactModal = require('react-modal');
 
 require('./modal.scss');
 
+ReactModal.setAppElement(document.getElementById('view'));
+
 /**
  * Container for pop up windows (See: registration window)
  */
 var Modal = React.createClass({
     type: 'Modal',
-    statics: {
-        setAppElement: ReactModal.setAppElement
-    },
     propTypes: {
         className: React.PropTypes.string,
         overlayClassName: React.PropTypes.string
     },
     requestClose: function () {
-        return this.refs.modal.portal.requestClose();
+        return this.modal.portal.requestClose();
     },
     render: function () {
         var modalClasses = classNames(
@@ -29,9 +28,15 @@ var Modal = React.createClass({
             'modal-overlay',
             this.props.overlayClassName
         );
+        ReactModal.setAppElement(document.getElementById(this.props.appElementId));
+        
         return (
             <ReactModal
-                ref="modal"
+                ref={
+                    function (component) {
+                        this.modal = component;
+                    }.bind(this)
+                }
                 className={modalClasses}
                 overlayClassName={overlayClasses}
                 {...omit(this.props, ['className', 'overlayClassName'])}

src/components/modal/iframe/modal.jsx

@@ -1,18 +1,17 @@
 var classNames = require('classnames');
+var omit = require('lodash.omit');
 var React = require('react');
 
 var Modal = require('../base/modal.jsx');
 
 require('./modal.scss');
 
-Modal.setAppElement(document.getElementById('view'));
-
 var IframeModal = React.createClass({
     propTypes: {
         isOpen: React.PropTypes.bool,
         onRequestClose: React.PropTypes.func,
         className: React.PropTypes.string,
-        componentRef: React.PropTypes.string,
+        componentRef: React.PropTypes.func,
         src: React.PropTypes.string
     },
     render: function () {
@@ -21,11 +20,7 @@ var IframeModal = React.createClass({
             this.props.className
         );
         return (
-            <Modal
-                isOpen={this.props.isOpen}
-                onRequestClose={this.props.onRequestClose}
-                className={this.props.className}
-            >
+            <Modal {...omit(this.props, ['ref', 'src'])}>
                 <iframe
                     ref={this.props.componentRef}
                     src={this.props.src}

src/components/modal/ttt/modal.jsx

@@ -1,5 +1,6 @@
 var FormattedMessage = require('react-intl').FormattedMessage;
 var MediaQuery = require('react-responsive');
+var omit = require('lodash.omit');
 var React = require('react');
 
 var FlexRow = require('../../flex-row/flex-row.jsx');
@@ -10,8 +11,6 @@ var TitleBanner = require('../../title-banner/title-banner.jsx');
 require('../../forms/button.scss');
 require('./modal.scss');
 
-Modal.setAppElement(document.getElementById('view'));
-
 var TTTModal = React.createClass({
     propTypes: {
         title: React.PropTypes.string.isRequired,
@@ -21,11 +20,22 @@ var TTTModal = React.createClass({
         guideLoc: React.PropTypes.string.isRequired,
         thumbUrl: React.PropTypes.string.isRequired,
         bannerUrl: React.PropTypes.string.isRequired,
-        modalProps: React.PropTypes.object
     },
     render: function () {
+        var modalOmit = [
+            'title',
+            'description',
+            'tutorialLoc',
+            'activityLoc',
+            'guideLoc',
+            'thumbUrl',
+            'bannerUrl'
+        ];
         return (
-            <Modal className="mod-ttt" {...this.props.modalProps}>
+            <Modal
+                className="mod-ttt"
+                {...omit(this.props, modalOmit)}
+            >
                 <TitleBanner className="mod-ttt">
                     <MediaQuery minWidth={frameless.mobile}>
                         <img className="mod-ttt-img" src={this.props.bannerUrl} alt="" />

src/components/navigation/www/navigation.jsx

@@ -21,8 +21,6 @@ var Registration = require('../../registration/registration.jsx');
 
 require('./navigation.scss');
 
-Modal.setAppElement(document.getElementById('view'));
-
 var Navigation = React.createClass({
     type: 'Navigation',
     getInitialState: function () {

src/components/registration/registration.jsx

@@ -11,10 +11,10 @@ var Registration = React.createClass({
     },
     onMessage: function (e) {
         if (e.origin != window.location.origin) return;
-        if (e.source != this.refs.registrationIframe.contentWindow) return;
+        if (e.source != this.registrationIframe.contentWindow) return;
         if (e.data == 'registration-done') this.props.onRegistrationDone();
         if (e.data == 'registration-relaunch') {
-            this.refs.registrationIframe.contentWindow.location.reload();
+            this.registrationIframe.contentWindow.location.reload();
         }
     },
     toggleMessageListener: function (present) {
@@ -39,7 +39,11 @@ var Registration = React.createClass({
                 isOpen={this.props.isOpen}
                 onRequestClose={this.props.onRequestClose}
                 className="mod-registration"
-                componentRef="registrationIframe"
+                componentRef={
+                    function (iframe) {
+                        this.registrationIframe = iframe;
+                    }.bind(this)
+                }
                 src="/accounts/standalone-registration/"
             />
         );

src/components/registration/registration.scss

@@ -10,7 +10,7 @@
     min-height: 27.375rem;
 }
 
-@media only screen and (max-width: $tablet - 1) {
+@media only screen and (max-width: $desktop - 1) {
     .modal-content.mod-registration {
         width: 100%;
         overflow: scroll;

src/views/splash/splash.jsx

@@ -81,7 +81,7 @@ var Splash = injectIntl(React.createClass({
     },
     onMessage: function (e) {
         if (e.origin != window.location.origin) return;
-        if (e.source != this.refs.emailConfirmationiFrame.contentWindow) return;
+        if (e.source != this.emailConfirmationiFrame.contentWindow) return;
         if (e.data == 'resend-done') {
             this.hideEmailConfirmationModal();
         } else {
@@ -356,26 +356,17 @@ var Splash = injectIntl(React.createClass({
                         isOpen={this.state.emailConfirmationModalOpen}
                         onRequestClose={this.hideEmailConfirmationModal}
                         className="mod-confirmation"
-                        componentRef="emailConfirmationiFrame"
+                        componentRef={
+                            function (iframe) {
+                                this.emailConfirmationiFrame = iframe;
+                            }.bind(this)
+                        }
                         src="/accounts/email_resend_standalone/"
                     />
                 ] : []}
                 {this.props.permissions.educator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
-                <TTTModal
-                    title="Make it Fly"
-                    description="Animate the Scratch Cat, the Powerpuff Girls, or even a taco!"
-                    tutorialLoc="/"
-                    activityLoc="/pdfs/cards/Scratch2Cards.pdf"
-                    guideLoc="/pdfs/cards/Scratch2Cards.pdf"
-                    bannerUrl="/images/ttt/make-it-fly-banner.jpg"
-                    thumbUrl=""
-                    modalProps={{
-                        isOpen: true,
-                        ref: 'tttModal'
-                    }}
-                />
                 <div key="inner" className="inner">
                     {this.props.session.status === sessionActions.Status.FETCHED ? (
                         this.props.session.session.user ? [