Merge pull request #2346 from benjiwheeler/share-message

Display green "Shared" banner after user shares; bring CSS into line with spec

src/_colors.scss

@@ -5,11 +5,13 @@ $ui-blue-10percent: hsla(215, 100, 65, .1);
 $ui-blue-25percent:  hsla(215, 100, 65, .25);
 
 $ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary
+$ui-orange-high-contrast: hsla(30, 100, 55, 1); // #FFAB19 Control Primary
 $ui-orange-10percent: hsla(35, 90, 55, .1);
 $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, .35);
 
 $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
 $ui-gray: hsla(0, 0, 95, 1); //#F2F2F2

src/views/preview/banner.jsx

@@ -14,7 +14,7 @@ const Banner = ({className, message, actionMessage, onAction}) => (
             </span>
             {actionMessage && onAction && (
                 <Button
-                    className="button banner-button"
+                    className="banner-button"
                     onClick={onAction}
                 >
                     {actionMessage}

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: 4rem;
     overflow: hidden;
-    color: $ui-orange;
+    color: $ui-orange-high-contrast;
+    font-size: .875rem;
     font-weight: bold;
+    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;
@@ -27,7 +35,16 @@ $navigation-height: 50px;
 }
 
 .banner-button {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+    border-radius: .25rem;
     background-color: $ui-orange;
+    padding-top: .6875rem;
+    padding-bottom: .75rem;
+    min-width: 6rem;
+    max-width: 16rem;
+    min-height: 2.5rem;
+    max-height: 6rem;
     font-size: .875rem;
 }
 

src/views/preview/l10n.json

@@ -13,6 +13,8 @@
     "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.sharedLong": "Congratulations on sharing your project! Other people can now try it out, give comments, and remix it.",
+    "project.share.sharedShort": "Your project is now shared.",
     "project.share.shareButton": "Share",
     "project.seeInsideButton": "See inside",
     "project.remixButton": "Remix",

src/views/preview/presentation.jsx

@@ -64,7 +64,9 @@ const PreviewPresentation = ({
     intl,
     isFullScreen,
     isLoggedIn,
+    isNewScratcher,
     isShared,
+    justShared,
     loveCount,
     loved,
     modInfo,
@@ -133,12 +135,26 @@ const PreviewPresentation = ({
                 message={embedCensorMessage(visibilityInfo.censorMessage)}
             />);
         }
-    } else if (canShare && !isShared) {
-        banner = (<Banner
-            actionMessage={<FormattedMessage id="project.share.shareButton" />}
-            message={<FormattedMessage id="project.share.notShared" />}
-            onAction={onShare}
-        />);
+    } else if (canShare) {
+        if (isShared && justShared) { // if was shared a while ago, don't show any share banner
+            if (isNewScratcher) {
+                banner = (<Banner
+                    className="banner-success"
+                    message={<FormattedMessage id="project.share.sharedLong" />}
+                />);
+            } else {
+                banner = (<Banner
+                    className="banner-success"
+                    message={<FormattedMessage id="project.share.sharedShort" />}
+                />);
+            }
+        } else if (!isShared) {
+            banner = (<Banner
+                actionMessage={<FormattedMessage id="project.share.shareButton" />}
+                message={<FormattedMessage id="project.share.notShared" />}
+                onAction={onShare}
+            />);
+        }
     }
 
     return (
@@ -392,11 +408,11 @@ const PreviewPresentation = ({
                                     scripts={modInfo.scripts}
                                     sprites={modInfo.sprites}
                                 />
-                                
+
                             </React.Fragment>
                         }
-                            
-                            
+
+
                         <MediaQuery minWidth={frameless.tablet}>
                             <FlexRow className="preview-row">
                                 <FlexRow className="extension-list">
@@ -531,7 +547,9 @@ PreviewPresentation.propTypes = {
     intl: intlShape,
     isFullScreen: PropTypes.bool,
     isLoggedIn: PropTypes.bool,
+    isNewScratcher: PropTypes.bool,
     isShared: PropTypes.bool,
+    justShared: PropTypes.bool,
     loveCount: PropTypes.number,
     loved: PropTypes.bool,
     modInfo: PropTypes.shape({

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,