[UEPR-551] Display a read-only mode banner across scratch-www pages

src/_colors.scss

@@ -32,6 +32,7 @@ $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
 
 $ui-light-blue: hsla(195, 63%, 86%, 1); //#C5E7f2
 $ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F
+$ui-sky-blue: hsla(198, 60%, 40%, 1); //#297EA3
 
 /* UI Secondary Colors */
 /* 3.0 colors */

src/components/modal/base/modal.jsx

@@ -26,8 +26,9 @@ class Modal extends React.Component {
         // bodyOpenClassName prop cannot be blank string or null here; both cause
         // an error, because ReactModal does not correctly handle them.
         // If we're not setting it to a class name, we must omit the prop entirely.
-        const bodyOpenClassNameProp = this.props.useStandardSizes ?
-            {bodyOpenClassName: classNames('overflow-hidden')} : {};
+        const bodyOpenClassNameProp = this.props.bodyOpenClassName ?
+            {bodyOpenClassName: this.props.bodyOpenClassName} :
+            (this.props.useStandardSizes ? {bodyOpenClassName: classNames('overflow-hidden')} : {});
         return (
             <ReactModal
                 appElement={document.getElementById('app')}
@@ -70,6 +71,7 @@ class Modal extends React.Component {
 }
 
 Modal.propTypes = {
+    bodyOpenClassName: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     overlayClassName: PropTypes.string,

src/components/modal/join/modal.jsx

@@ -15,7 +15,9 @@ const JoinModal = ({
         isOpen
         showCloseButton
         useStandardSizes
+        bodyOpenClassName="overflow-x-hidden"
         className="mod-join"
+        overlayClassName="mod-join-overlay"
         shouldCloseOnOverlayClick={false}
         onRequestClose={onRequestClose}
         {...modalProps}

src/components/modal/join/modal.scss

@@ -18,7 +18,10 @@ being clickable, because of the standalone join view. */
     }
 }
 
-.modal-content {
+// push the join modal content down to accommodate the fixed nav + read-only banner when active
+.modal-content.mod-join {
+    margin-top: 1rem;
+
     @media #{frameless.$small}, #{frameless.$small-height} {
         height: unset;
     }
@@ -30,3 +33,7 @@ being clickable, because of the standalone join view. */
         margin: 3.5rem auto;
     }
 }
+
+.overflow-x-hidden {
+    overflow-x: hidden;
+}

src/components/page/www/page.jsx

@@ -7,6 +7,7 @@ const Navigation = require('../../navigation/www/navigation.jsx');
 const Footer = require('../../footer/www/footer.jsx');
 const ErrorBoundary = require('../../errorboundary/errorboundary.jsx');
 const PrivacyBanner = require('../../privacy-banner/privacy-banner.jsx');
+const ReadOnlyModeBanner = require('../../read-only-mode-banner/read-only-mode-banner.jsx');
 const TosModal = require('../../modal/tos/modal.jsx');
 const ParentalConsentView = require('../../../views/parental-consent/parental-consent-view.jsx');
 const ALLOWED_PAGES = ['community_guidelines'];
@@ -58,6 +59,7 @@ const Page = ({
                 >
                     <Navigation />
                 </nav>
+                <ReadOnlyModeBanner />
                 <PrivacyBanner />
                 {shouldDisplayStudentDeactivationBanner && <StudentDeactivationBanner username={user.username} />}
                 <main

src/components/read-only-mode-banner/read-only-mode-banner.jsx

@@ -0,0 +1,41 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+
+require('./read-only-mode-banner.scss');
+
+const {READ_ONLY_MODE} = require('../../lib/feature-flags');
+
+const bold = chunks => <strong>{chunks}</strong>;
+
+const ReadOnlyModeBanner = ({className}) => {
+    if (!READ_ONLY_MODE) return null;
+
+    return (
+        <div className={classNames('read-only-mode-banner', className)}>
+            <div className="read-only-mode-banner-content">
+                <p className="read-only-mode-banner-text">
+                    <FormattedMessage
+                        id="readOnlyMode.title"
+                        values={{b: bold}}
+                    />
+                </p>
+                <p className="read-only-mode-banner-text">
+                    <FormattedMessage id="readOnlyMode.description1" />
+                </p>
+                <p className="read-only-mode-banner-text">
+                    <FormattedMessage
+                        id="readOnlyMode.description2"
+                    />
+                </p>
+            </div>
+        </div>
+    );
+};
+
+ReadOnlyModeBanner.propTypes = {
+    className: PropTypes.string
+};
+
+module.exports = ReadOnlyModeBanner;

src/components/read-only-mode-banner/read-only-mode-banner.scss

@@ -0,0 +1,57 @@
+@use "../../colors";
+@use "../../frameless";
+
+.read-only-mode-banner {
+    display: flex;
+    width: 100%;
+    padding: 1.5rem 0;
+    flex-direction: column;
+    align-items: center;
+    background-color: colors.$ui-sky-blue;
+    position: sticky;
+    top: 50px; /* matches fixed nav height */
+    z-index: 9; /* below nav (z-index: 10) */
+
+    .read-only-mode-banner-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.625rem;
+    }
+
+    .read-only-mode-banner-text {
+        color: colors.$ui-white;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5rem;
+        margin: 0;
+    }
+
+    .read-only-mode-banner-link {
+        color: colors.$ui-white;
+        text-decoration: underline;
+    }
+}
+
+@media only screen and (min-width: 942px) {
+    .read-only-mode-banner .read-only-mode-banner-content {
+        width: 58.875rem;
+    }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 941px) {
+    .read-only-mode-banner .read-only-mode-banner-content {
+        width: 48rem;
+    }
+}
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+    .read-only-mode-banner .read-only-mode-banner-content {
+        width: 30rem;
+    }
+}
+
+@media only screen and (max-width: 479px) {
+    .read-only-mode-banner .read-only-mode-banner-content {
+        max-width: calc(100% - 1rem);
+    }
+}

src/l10n.json

@@ -603,5 +603,9 @@
     "tos.invalidParentEmailInfoStepDescriptionPart4": "Once your parent confirms the new email, your account will be confirmed, and social features will be available again.",
 
     "studentDeactivationBanner.title": "An important reminder about student accounts",
-    "studentDeactivationBanner.description": "Using a student account? Don’t lose your stuff! Student accounts are temporary. See <a>this Help Desk article</a> for details about student accounts and how to make a new account outside of your classroom."
+    "studentDeactivationBanner.description": "Using a student account? Don’t lose your stuff! Student accounts are temporary. See <a>this Help Desk article</a> for details about student accounts and how to make a new account outside of your classroom.",
+
+    "readOnlyMode.title": "<b>[PLACEHOLDER]</b> We’re moving your stuff to an upgraded version of Scratch!",
+    "readOnlyMode.description1": "Don’t worry - none of your stuff will be lost. To help everything run smoothly, we’ve paused all social actions for now. You would still be able to create and edit unshared projects.",
+    "readOnlyMode.description2": "When everything is ready, you'll be taken to the upgraded version of Scratch and you'll be able to use everything like normal again. For more information, check out our {faqLink}."
 }

src/lib/feature-flags.js

@@ -8,5 +8,6 @@ const flagInUrl = flag => {
 };
 
 module.exports = {
-    CONTACT_US_POPUP: flagInUrl('CONTACT_US_POPUP')
+    CONTACT_US_POPUP: flagInUrl('CONTACT_US_POPUP'),
+    READ_ONLY_MODE: process.env.READ_ONLY_MODE === 'true'
 };

src/views/join/join.jsx

@@ -2,27 +2,31 @@ const React = require('react');
 const render = require('../../lib/render.jsx');
 const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx');
 const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
+const ReadOnlyModeBanner = require('../../components/read-only-mode-banner/read-only-mode-banner.jsx');
 
 require('./join.scss');
 const Register = () => (
     <ErrorBoundary componentName="Join">
-        <nav className="join">
-            <a
-                aria-label="Scratch"
-                href="/"
-            >
-                <img
-                    className="logo"
-                    src="/images/logo_sm.png"
-                />
-            </a>
-        </nav>
-        <Scratch3Registration
-            createProjectOnComplete
-            isOpen
-            key="scratch3registration"
-            showCloseButton={false}
-        />
+        <div className="join-page">
+            <nav className="join-header">
+                <a
+                    aria-label="Scratch"
+                    href="/"
+                >
+                    <img
+                        className="logo"
+                        src="/images/logo_sm.png"
+                    />
+                </a>
+            </nav>
+            <ReadOnlyModeBanner className="join-read-only-mode-banner" />
+            <Scratch3Registration
+                createProjectOnComplete
+                isOpen
+                key="scratch3registration"
+                showCloseButton={false}
+            />
+        </div>
     </ErrorBoundary>
 );
 render(<Register />, document.getElementById('app'));

src/views/join/join.scss

@@ -1,7 +1,14 @@
 @use "../../frameless";
+@use "../../colors";
 
-.join {
-    position: absolute;
+.join-page {
+    display: flex;
+    flex-direction: column;
+    background-color: colors.$ui-blue;
+}
+
+.join-header {
+    position: relative;
     z-index: 1000;
     top: 12px;
     left: 12px;
@@ -13,7 +20,24 @@
 }
 
 @media #{frameless.$small}, #{frameless.$medium}, #{frameless.$intermediate} {
-    .join {
+    .join-header {
         left: calc(50% - 38px);
     }
 }
+
+.mod-join-overlay {
+    position: relative;
+
+    // needed to apply overlay color all around the modal
+    &::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background-color: colors.$ui-blue;
+    }
+}
+
+.join-read-only-mode-banner {
+    margin-top: 1rem; // needed space from nav
+    z-index: 1001;
+}