Merge pull request #2702 from benjiwheeler/autocensored-message

added default censored messages

src/views/preview/banner.scss

@@ -15,8 +15,8 @@ $navigation-height: 50px;
 }
 
 .banner-outer.banner-danger {
-    background-color: $ui-red-25percent;
-    color: $ui-red;
+    background-color: $ui-orange-25percent;
+    color: $ui-orange-high-contrast;
 }
 
 .banner-outer.banner-success {
@@ -25,18 +25,20 @@ $navigation-height: 50px;
 }
 
 .banner-inner {
+    padding-top: .325rem;
+    padding-bottom: .325rem;
     align-items: center;
     justify-content: space-between;
     flex-wrap: nowrap;
 }
 
 .banner-text {
-    padding: .5rem 0;
+    padding: .625rem 0;
+    max-width: 50rem;
+    line-height: 1.25rem;
 }
 
 .banner-button {
-    margin-top: .75rem;
-    margin-bottom: .75rem;
     border-radius: .25rem;
     background-color: $ui-orange;
     padding-top: .6875rem;

src/views/preview/censored-message.jsx

@@ -0,0 +1,45 @@
+const injectIntl = require('react-intl').injectIntl;
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+// Allow embedding html in banner messages coming from the server
+const embedCensorMessage = message => (
+    // eslint-disable-next-line react/no-danger
+    <span dangerouslySetInnerHTML={{__html: message}} />
+);
+
+const communityGuidelinesLink = (
+    <a href="/community_guidelines/">
+        <FormattedMessage id="project.communityGuidelines" />
+    </a>
+);
+
+const CensoredMessage = ({messageHTML, reshareable}) => (
+    <React.Fragment>
+        {/* if message HTML is provided, set innerHTML with it */}
+        {messageHTML ? embedCensorMessage(messageHTML) : (
+            // if message is blank or missing, use default
+            <React.Fragment>
+                <FormattedMessage id="project.defaultCensoredMessage" />
+                <br />
+                <br />
+                {reshareable ? (
+                    <FormattedMessage
+                        id="project.tempCensoredMessage"
+                        values={{communityGuidelinesLink: communityGuidelinesLink}}
+                    />
+                ) : (
+                    <FormattedMessage id="project.permCensoredMessage" />
+                )}
+            </React.Fragment>
+        )}
+    </React.Fragment>
+);
+
+CensoredMessage.propTypes = {
+    messageHTML: PropTypes.string,
+    reshareable: PropTypes.bool
+};
+
+module.exports = injectIntl(CensoredMessage);

src/views/preview/l10n.json

@@ -28,6 +28,12 @@
     "project.notesAndCreditsLabel": "Notes and Credits",
     "project.credit": "Thanks to {userLink} for the original project {projectLink}.",
     "project.deletedBanner": "Note: This project is in the trash folder",
+    "project.defaultCensoredMessage": "This project was removed by the Scratch Team because it was disrespectful, inappropriate for all ages, or otherwise breaks the Scratch community guidelines.",
+    "project.communityCensoredMessage": "Your project has been temporarily un-shared because multiple people reported it as inappropriate.",
+    "project.willReviewCensoredMessage": "The Scratch Team will review the project based on the {communityGuidelinesLink}, and either restore the project or confirm the censorship.",
+    "project.tempCensoredMessage": "Please read the {communityGuidelinesLink} and be sure to edit the project to make sure it's respectful before resharing it.",
+    "project.permCensoredMessage": "It cannot be reshared at any time in the future.",
+    "project.communityGuidelines": "community guidelines",
     "project.moderationInfoLabel": "Moderation Info",
     "project.numScripts": "{number} scripts",
     "project.numSprites": "{number} sprites",

src/views/preview/presentation.jsx

@@ -17,6 +17,7 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx');
 const Button = require('../../components/forms/button.jsx');
 const Avatar = require('../../components/avatar/avatar.jsx');
 const Banner = require('./banner.jsx');
+const CensoredMessage = require('./censored-message.jsx');
 const ModInfo = require('./mod-info.jsx');
 const RemixCredit = require('./remix-credit.jsx');
 const RemixList = require('./remix-list.jsx');
@@ -133,12 +134,6 @@ const PreviewPresentation = ({
     const showNotesAndCredits = editable || projectInfo.description ||
         (!projectInfo.instructions && !projectInfo.description); // show if both are empty
 
-    // Allow embedding html in banner messages coming from the server
-    const embedCensorMessage = message => (
-        // eslint-disable-next-line react/no-danger
-        <span dangerouslySetInnerHTML={{__html: message}} />
-    );
-
     let banner;
     if (visibilityInfo.deleted) { // If both censored and deleted, prioritize deleted banner
         banner = (<Banner
@@ -146,9 +141,15 @@ const PreviewPresentation = ({
             message={<FormattedMessage id="project.deletedBanner" />}
         />);
     } else if (visibilityInfo.censored) {
+        const censoredMessage = (
+            <CensoredMessage
+                messageHTML={visibilityInfo.message}
+                reshareable={visibilityInfo.reshareable}
+            />
+        );
         banner = (<Banner
             className="banner-danger"
-            message={embedCensorMessage(visibilityInfo.message)}
+            message={censoredMessage}
         />);
     } else if (justRemixed) {
         banner = (