added congratulations on sharing message for new scratchers

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

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;

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",

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={<FormattedMessage id="project.share.notShared" />}
             onAction={onShare}
         />);
+    } else if (isShared && isNewScratcher) {
+        banner = (<Banner
+            className="banner-success"
+            message={<FormattedMessage id="project.share.shared" />}
+        />);
     }
 
     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,

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,