diff --git a/src/_colors.scss b/src/_colors.scss index 08e4cfcae..5602a51f0 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -10,6 +10,7 @@ $ui-orange-25percent: hsla(35, 90, 55, .25); $ui-red: hsla(20, 100%, 55%, 1); /* #FF661A */ $ui-red-25percent: hsla(20, 100%, 55%, .25); +$ui-green-35percent: rgba(126, 225, 195, 0.35); $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA $ui-gray: hsla(0, 0, 95, 1); //#F2F2F2 diff --git a/src/views/preview/banner.scss b/src/views/preview/banner.scss index 8f753cabd..3773f7dfc 100644 --- a/src/views/preview/banner.scss +++ b/src/views/preview/banner.scss @@ -3,11 +3,15 @@ $navigation-height: 50px; .banner-outer { + display: flex; background-color: $ui-orange-25percent; width: 100%; + min-height: 3.75rem; overflow: hidden; color: $ui-orange; font-weight: bold; + font-size: .875rem; + align-self: center; } .banner-outer.banner-danger { @@ -15,8 +19,12 @@ $navigation-height: 50px; color: $ui-red; } +.banner-outer.banner-success { + background-color: $ui-green-35percent; + color: $ui-mint-green; +} + .banner-inner { - min-height: 60px; align-items: center; justify-content: space-between; flex-wrap: nowrap; diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index eb29ba620..bd30aeb1f 100644 --- a/src/views/preview/l10n.json +++ b/src/views/preview/l10n.json @@ -13,6 +13,7 @@ "project.comments.turnOff": "Turn off commenting", "project.comments.turnedOff": "Sorry, comment posting has been turned off for this project.", "project.share.notShared": "This project is not shared — so only you can see it. Click share to let everyone see it!", + "project.share.shared": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.", "project.share.shareButton": "Share", "project.seeInsideButton": "See inside", "project.remixButton": "Remix", diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index 741b34c42..6dff71699 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -64,6 +64,7 @@ const PreviewPresentation = ({ intl, isFullScreen, isLoggedIn, + isNewScratcher, isShared, loveCount, loved, @@ -139,6 +140,11 @@ const PreviewPresentation = ({ message={} onAction={onShare} />); + } else if (isShared && isNewScratcher) { + banner = (} + />); } return ( @@ -531,6 +537,7 @@ PreviewPresentation.propTypes = { intl: intlShape, isFullScreen: PropTypes.bool, isLoggedIn: PropTypes.bool, + isNewScratcher: PropTypes.bool, isShared: PropTypes.bool, loveCount: PropTypes.number, loved: PropTypes.bool, diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx index 3fa6cdebb..f6ee780ff 100644 --- a/src/views/preview/project-view.jsx +++ b/src/views/preview/project-view.jsx @@ -81,6 +81,7 @@ class Preview extends React.Component { addToStudioOpen: false, extensions: [], favoriteCount: 0, + justShared: false, loveCount: 0, modInfo: { scripts: 0, @@ -101,9 +102,11 @@ class Preview extends React.Component { (this.state.projectId !== prevState.projectId))) { this.fetchCommunityData(); this.getProjectData(this.state.projectId); + this.setState({justShared: false}); // eslint-disable-line react/no-did-update-set-state } if (this.state.projectId === '0' && this.state.projectId !== prevState.projectId) { this.props.resetProject(); + this.setState({justShared: false}); // eslint-disable-line react/no-did-update-set-state } if (this.props.projectInfo.id !== prevProps.projectInfo.id) { if (typeof this.props.projectInfo.id === 'undefined') { @@ -357,12 +360,14 @@ class Preview extends React.Component { } handleSeeInside () { this.props.setPlayer(false); + this.setState({justShared: false}); } handleShare () { this.props.shareProject( this.props.projectInfo.id, this.props.user.token ); + this.setState({justShared: true}); } handleUpdate (jsonData) { this.props.updateProject( @@ -471,7 +476,9 @@ class Preview extends React.Component { favoriteCount={this.state.favoriteCount} isFullScreen={this.state.isFullScreen} isLoggedIn={this.props.isLoggedIn} + isNewScratcher={this.props.isNewScratcher} isShared={this.props.isShared} + justShared={this.state.justShared} loveCount={this.state.loveCount} loved={this.props.loved} modInfo={this.state.modInfo} @@ -596,6 +603,7 @@ Preview.propTypes = { isAdmin: PropTypes.bool, isEditable: PropTypes.bool, isLoggedIn: PropTypes.bool, + isNewScratcher: PropTypes.bool, isShared: PropTypes.bool, loved: PropTypes.bool, moreCommentsToLoad: PropTypes.bool, @@ -689,6 +697,7 @@ const mapStateToProps = state => { state.permissions.admin === true), isLoggedIn: isLoggedIn, isAdmin: isAdmin, + isNewScratcher: isLoggedIn && state.permissions.new_scratcher, // if we don't have projectInfo, assume it's shared until we know otherwise isShared: !projectInfoPresent || state.preview.projectInfo.is_published, loved: state.preview.loved,