Merge pull request #4664 from LLK/hotfix/hoc-banner-2020

[Develop] HOC banner 2020

src/views/splash/hoc/hoc-banner.scss

@@ -53,7 +53,8 @@ $tile-height: 244px;
 
         img {
             width: $cols4;
-            height: auto;
+            height: $cols4 * 0.553333333; /* images are 600 x 332 for retina */
+            object-fit: cover;
         }
 
         .hoc-image-text {

src/views/splash/hoc/top-banner.jsx

@@ -47,11 +47,11 @@ const TopBanner = () => (
                         </div>
                     </FlexRow>
                 </a>
-                <a href="/projects/editor?tutorial=talking">
+                <a href="/projects/editor?tutorial=make-it-fly">
                     <FlexRow className="hoc-banner-image column">
-                        <img src="/images/hoc/talking.png" />
+                        <img src="/images/hoc/make-it-fly.jpg" />
                         <div className="hoc-image-text">
-                            <FormattedMessage id="hocbanner.talking" />
+                            <FormattedMessage id="hocbanner.makeItFly" />
                         </div>
                     </FlexRow>
                 </a>

src/views/splash/l10n.json

@@ -39,6 +39,7 @@
     "hocbanner.imagine": "Imagine a World",
     "hocbanner.codeACartoon": "Code a Cartoon",
     "hocbanner.talking": "Talking Tales",
+    "hocbanner.makeItFly": "Make It Fly",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",

src/views/splash/presentation.jsx

@@ -36,8 +36,8 @@ const ShareProjectMessage = require('./activity-rows/share-project.jsx');
 const TopBanner = require('./hoc/top-banner.jsx');
 const MiddleBanner = require('./hoc/middle-banner.jsx');
 
-const HOC_START_TIME = 1575262800000; // 2019-12-02 00:00:00
-const HOC_END_TIME = 1577077200000; // 2019-12-23 00:00:00
+const HOC_START_TIME = 1605484800000; // 2020-11-16 00:00:00
+const HOC_END_TIME = 1608681600000; // 2020-12-23 00:00:00
 
 require('./splash.scss');
 
@@ -468,6 +468,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
                     Object.keys(this.props.user).length !== 0 && // Only show if user is logged in
                     Date.now() >= HOC_START_TIME && // Show middle banner on and after Dec 3
                     Date.now() < HOC_END_TIME && // Hide middle banner after Dec 14
+                    false && // we did not use this middle banner in last HoC
                     <MediaQuery
                         key="frameless-desktop"
                         minWidth={frameless.tabletPortrait}