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,