Styling changes, code cleanup, bringing up preview modal on back buttons.

src/components/import-modal/import-modal.css

@@ -96,6 +96,19 @@ $sides: 20rem;
     text-align: right;
     display: flex;
     justify-content: center;
+    border: 1px solid;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+.ok-input-container {
+    border-color: $motion-primary;
+    box-shadow: 0 0 0 0.2rem $motion-transparent;
+}
+
+.bad-input-container {
+    border-color: $data-primary;
+    box-shadow: 0 0 0 0.2rem $data-transparent;
 }
 
 .input-row input {
@@ -104,6 +117,8 @@ $sides: 20rem;
     height: 3rem;
     color: #6b6b6b;
     font-size: .875rem;
+    outline: none;
+    border: none;
 }
 
 .input-row input::placeholder {
@@ -111,25 +126,12 @@ $sides: 20rem;
     color: rgba(87,94,117,0.5);
 }
 
-.input-row input.ok-input {
-    outline: none;
-    border: 1px solid $motion-primary;
-    border-radius: 0.25rem
-}
-
-.input-row input.bad-input {
-    outline: none;
-    border: 1px solid $data-primary;
-    border-radius: 0.25rem
-}
-
 .input-row button {
     padding: 0.5rem 2rem;
     font-weight: bold;
     font-size: .875rem;
     cursor: pointer;
-    border: 1px solid $import-primary;
-    border-radius: 0.25rem;
+    border: 0px solid $import-primary;
     outline: none;
 }
 
@@ -138,26 +140,22 @@ $sides: 20rem;
     color: white;
 }
 
-.empty-row {
-    margin: 0;
-}
-
 .error-row {
     margin: 1.5rem 0;
     text-align: center;
     display: flex;
     justify-content: center;
-}
-.error-row div {
-    background: $data-primary;
-    opacity: 0.8;
-    color: white;
-    padding: 0.5rem 1rem;
-    font-size: .5rem;
-    border: 1px solid $data-primary;
+    background: $data-tertiary;
+    color: $data-primary;
+    border: 1px solid $ui-pane-border;
     border-radius: 0.25rem;
 }
 
+.error-row p {
+    font-size: 0.875rem;
+    font-weight: bold;
+}
+
 /* Confirmation buttons at the bottom of the modal */
 .button-row {
     margin: 1.5rem 0;

src/components/import-modal/import-modal.jsx

@@ -46,7 +46,7 @@ const ImportModal = ({intl, ...props}) => (
                 >
                     <CloseButton
                         size={CloseButton.SIZE_LARGE}
-                        onClick={props.onCancel}
+                        onClick={props.onGoBack}
                     />
                 </div>
                 <div
@@ -69,10 +69,13 @@ const ImportModal = ({intl, ...props}) => (
             <p>
                 {intl.formatMessage({...messages.formDescription})}
             </p>
-            <Box className={styles.inputRow}>
+            <Box
+                className={classNames(styles.inputRow,
+                    (props.hasValidationError ? styles.badInputContainer : styles.okInputContainer))
+                }
+            >
                 <input
                     autoFocus
-                    className={props.hasValidationError ? styles.badInput : styles.okInput}
                     placeholder={props.placeholder}
                     value={props.inputValue}
                     onChange={props.onChange}
@@ -90,21 +93,19 @@ const ImportModal = ({intl, ...props}) => (
                     />
                 </button>
             </Box>
-            <Box className={props.hasValidationError ? styles.errorRow : styles.emptyRow}>
-                {props.hasValidationError ?
-                    <div className={styles.importErrorDiv}>
-                        <p>
-                            {/* intl.formatMessage({...messages.invalidLink})*/}
-                            <FormattedMessage
-                                {...messages[`${props.errorMessage}`]}
-                            />
-                        </p>
-                    </div> : null}
-            </Box>
+            {props.hasValidationError ?
+                <Box className={styles.errorRow}>
+                    <p>
+                        <FormattedMessage
+                            {...messages[`${props.errorMessage}`]}
+                        />
+                    </p>
+                </Box> : null
+            }
             <Box className={styles.buttonRow}>
                 <button
                     className={styles.noButton}
-                    onClick={props.onCancel}
+                    onClick={props.onGoBack}
                 >
                     <FormattedMessage
                         defaultMessage="Go Back"
@@ -145,6 +146,7 @@ ImportModal.propTypes = {
     intl: intlShape.isRequired,
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
+    onGoBack: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onViewProject: PropTypes.func.isRequired,
     placeholder: PropTypes.string

src/containers/import-modal.jsx

@@ -6,7 +6,8 @@ import {connect} from 'react-redux';
 import ImportModalComponent from '../components/import-modal/import-modal.jsx';
 
 import {
-    closeImportInfo
+    closeImportInfo,
+    openPreviewInfo
 } from '../reducers/modals';
 
 class ImportModal extends React.Component {
@@ -15,8 +16,9 @@ class ImportModal extends React.Component {
         bindAll(this, [
             'handleViewProject',
             'handleCancel',
-            'handleKeyPress',
-            'handleChange'
+            'handleChange',
+            'handleGoBack',
+            'handleKeyPress'
         ]);
 
         this.state = {
@@ -40,7 +42,6 @@ class ImportModal extends React.Component {
             document.body.removeChild(projectLink);
             this.props.onViewProject();
         } else {
-            // TODO handle error messages and error states
             this.setState({
                 hasValidationError: true,
                 errorMessage: `invalidFormatError`});
@@ -64,12 +65,8 @@ class ImportModal extends React.Component {
         this.props.onCancel();
     }
     handleGoBack () {
-        // TODO what should the go back button actually do? Should it bring the preview modal
-        // back up or just close this modal, or go back to scratch?
-        window.location.replace('https://scratch.mit.edu');
+        this.props.onBack();
     }
-    // TODO not sure if we need this, since it shouldn't be possible to bring up this
-    // modal without first going through the preview modal
     render () {
         return (
             <ImportModalComponent
@@ -79,6 +76,7 @@ class ImportModal extends React.Component {
                 placeholder="scratch.mit.edu/projects/123456789"
                 onCancel={this.handleCancel}
                 onChange={this.handleChange}
+                onGoBack={this.handleGoBack}
                 onKeyPress={this.handleKeyPress}
                 onViewProject={this.handleViewProject}
             />
@@ -87,6 +85,7 @@ class ImportModal extends React.Component {
 }
 
 ImportModal.propTypes = {
+    onBack: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     onViewProject: PropTypes.func
 };
@@ -94,11 +93,15 @@ ImportModal.propTypes = {
 const mapStateToProps = () => ({});
 
 const mapDispatchToProps = dispatch => ({
-    onViewProject: () => {
+    onBack: () => {
         dispatch(closeImportInfo());
+        dispatch(openPreviewInfo());
     },
     onCancel: () => {
         dispatch(closeImportInfo());
+    },
+    onViewProject: () => {
+        dispatch(closeImportInfo());
     }
 });
 

src/css/colors.css

@@ -17,6 +17,8 @@ $sound-tertiary: #A63FA6;
 $control-primary: #FFAB19;
 
 $data-primary: #FF8C1A;
+$data-tertiary: rgba(255,140,26,0.25);
+$data-transparent: rgba(255,140,26,0.1);
 
 $form-border: #E9EEF2;