diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index 8ffbcb3c6909a864de9f9dd0778f15be8aff98fe..f622373680f3e7f8a17a87cb31c44f56ab13157b 100644
--- a/src/components/import-modal/import-modal.css
+++ b/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;
diff --git a/src/components/import-modal/import-modal.jsx b/src/components/import-modal/import-modal.jsx
index 87c396109ed4f671cfd4eba252ebaf63cb6bef69..92185f75c7efda4f4d26321b4624831ef789f9e9 100644
--- a/src/components/import-modal/import-modal.jsx
+++ b/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
diff --git a/src/containers/import-modal.jsx b/src/containers/import-modal.jsx
index eb131f73131156e03894d53805aeb0a13dd56b73..cb5b169bc29e5d44b67fa2384fdcd005e0e5262a 100644
--- a/src/containers/import-modal.jsx
+++ b/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());
}
});
diff --git a/src/css/colors.css b/src/css/colors.css
index 5dd2f325c2a7fdc33d72160767720fe056ab273c..de484da27ecf40cc1ac49dcabf869a8c773dfa75 100644
--- a/src/css/colors.css
+++ b/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;