Banner updates

src/components/forms/button.scss

@@ -37,6 +37,10 @@ $pass-bg: $ui-aqua;
         color: $ui-blue;
     }
 
+    &.mod-aqua {
+        background-color: $ui-aqua;
+    }
+
     &.pass {
         background-color: $pass-bg;
     }

src/views/splash/hoc-event-row/hoc-event-row.jsx

@@ -1,3 +1,4 @@
+var classNames = require('classnames');
 var FormattedMessage = require('react-intl').FormattedMessage;
 var React = require('react');
 
@@ -12,8 +13,17 @@ var HocEventRow = React.createClass({
         onDismiss: React.PropTypes.func
     },
     render: function () {
+        var classes = classNames(
+            'hoc-event',
+            this.props.className
+        );
         return (
-            <div className="hoc-event">
+            <div
+                className={classes}
+                style={{
+                    minHeight: this.props.minHeight
+                }}
+            >
                 <Button
                     className="mod-hoc-event-dismiss"
                     onClick={this.props.onDismiss}
@@ -26,25 +36,12 @@ var HocEventRow = React.createClass({
                     />
                 </Button>
                 <FlexRow className="mod-hoc-event">
-                    <div className="hoc-event-studio">
-                        <h1 className="hoc-event-studio-h1">
-                            <FormattedMessage id="hocevent.title" />
-                        </h1>
-                        <a href="/studios/3600717/" className="button white mod-hoc-event">
-                            <FormattedMessage id="hocevent.studioLink" />
-                        </a>
-                    </div>
-                    <div className="hoc-event-video">
-                        <iframe
-                            className="hoc-event-video-iframe"
-                            title="Design a Character Studio"
-                            src="https://www.youtube-nocookie.com/embed/_srMcH7oB3Y?rel=0"
-                            frameborder="0"
-                            webkitAllowFullScreen
-                            mozallowfullscreen
-                            allowFullScreen
-                        />
-                    </div>
+                    <h1 className="hoc-event-studio-h1">
+                        <FormattedMessage id="hocevent.title" />
+                    </h1>
+                    <a href="/studios/3910789/" className="button mod-aqua mod-hoc-event">
+                        <FormattedMessage id="hocevent.studioLink" />
+                    </a>
                 </FlexRow>
             </div>
         );

src/views/splash/hoc-event-row/hoc-event-row.scss

@@ -3,11 +3,21 @@
 
 .hoc-event {
     position: relative;
+    transition: min-height 1s;
     opacity: .9;
     margin: 0 auto 20px;
     border-radius: 1rem;
     background-color: $ui-blue;
     width: $cols12;
+    min-height: 18rem;
+}
+
+.hoc-event.mod-1 {
+    min-height: 25rem;
+}
+
+.hoc-event.mod-2 {
+    min-height: 32rem;
 }
 
 .hoc-event:after {
@@ -19,13 +29,14 @@
     opacity: .5;
     z-index: -1;
     border-radius: 1rem;
-    background: url("/images/splash/hoc-event-bg.jpg");
-    background-size: cover;
+    background: url("/images/splash/xl--no-ui.png") no-repeat;
     content: "";
 }
 
 .flex-row.mod-hoc-event {
-    padding: 3rem 5rem;
+    padding: 3rem 5rem 2.5rem;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .button.mod-hoc-event-dismiss {
@@ -49,13 +60,14 @@
 }
 
 .hoc-event-studio-h1 {
-    margin-bottom: 1.5rem;
+    margin-bottom: 9rem;
     line-height: 2.5rem;
     color: $type-white;
 }
 
 .button.mod-hoc-event {
     padding: .75rem 1.75rem;
+    color: $type-white;
 }
 
 .hoc-event-studio,
@@ -63,19 +75,26 @@
     width: 23.75rem;
 }
 
-.hoc-event-video-iframe {
-    border: 3px solid $ui-border;
-    border-radius: 5px;
-    height: 13.75rem;
-}
-
 @media only screen and (max-width: $mobile - 1) {
     .hoc-event {
         width: $cols4;
+        min-height: 30rem;
+    }
+
+    .hoc-event.mod-1 {
+        min-height: 26rem;
+    }
+
+    .hoc-event.mod-2 {
+        min-height: 24rem;
+    }
+
+    .hoc-event:after {
+        background: url("/images/splash/sm--no-ui.png") no-repeat;
     }
 
     .flex-row.mod-hoc-event {
-        padding: 3rem 2rem 2rem;
+        padding: 3.5rem 2rem 2rem;
     }
 
     .hoc-event-studio,
@@ -87,23 +106,40 @@
         margin-bottom: 1rem;
     }
 
-    .hoc-event-video-iframe {
-        height: 8.75rem;
+    .hoc-event-studio-h1 {
+        margin-bottom: 8rem;
     }
 }
 
 @media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
     .hoc-event {
         width: $cols6;
+        min-height: 28rem;
+    }
+
+    .hoc-event.mod-1 {
+        min-height: 24rem;
+    }
+
+    .hoc-event.mod-2 {
+        min-height: 22rem;
+    }
+
+    .hoc-event:after {
+        background: url("/images/splash/md--no-ui.png") no-repeat;
     }
 
     .flex-row.mod-hoc-event {
-        padding: 2.5rem 2.5rem 1.5rem;
+        padding: 3.5rem 2.5rem 1.5rem;
     }
 
     .hoc-event-studio {
         margin-bottom: 1rem;
     }
+
+    .hoc-event-studio-h1 {
+        margin-bottom: 10rem;
+    }
 }
 
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
@@ -111,8 +147,8 @@
         width: $cols8;
     }
 
-    .flex-row.mod-hoc-event {
-        padding: 1.875rem;
+    .hoc-event:after {
+        background: url("/images/splash/lg--no-ui.png") no-repeat;
     }
 
     .hoc-event-studio {

src/views/splash/l10n.json

@@ -29,8 +29,8 @@
     "teacherbanner.faqButton": "Teacher Account FAQ",
 
     "hocevent.dismiss": "Dismiss",
-    "hocevent.title": "Design and share your own character",
-    "hocevent.studioLink": "See the studio",
+    "hocevent.title": "Mascots In Training",
+    "hocevent.studioLink": "Create Your Mascot!",
 
     "welcome.welcomeToScratch": "Welcome to Scratch!",
     "welcome.learn": "Learn how to make a project in Scratch",

src/views/splash/splash.jsx

@@ -37,7 +37,9 @@ var Splash = injectIntl(React.createClass({
             featuredCustom: {}, // custom homepage rows, such as "Projects by Scratchers I'm Following"
             featuredGlobal: {}, // global homepage rows, such as "Featured Projects"
             showEmailConfirmationModal: true, // flag that determines whether to show banner to request email conf.
-            refreshCacheStatus: 'notrequested'
+            refreshCacheStatus: 'notrequested',
+            numCloseTries: 0,
+            bannerHeightClass: 'mod-0'
         };
     },
     getDefaultProps: function () {
@@ -169,15 +171,26 @@ var Splash = injectIntl(React.createClass({
         this.setState({emailConfirmationModalOpen: false});
     },
     handleDismiss: function (cue) {
-        api({
-            host: '',
-            uri: '/site-api/users/set-template-cue/',
-            method: 'post',
-            useCsrf: true,
-            json: {cue: cue, value: false}
-        }, function (err) {
-            if (!err) this.props.dispatch(sessionActions.refreshSession());
-        }.bind(this));
+        var newNumTries = this.state.numCloseTries + 1;
+        if (newNumTries > 2) {
+            return;
+        }
+
+        this.setState({
+            numCloseTries: newNumTries,
+            bannerHeightClass: 'mod-' + newNumTries
+        });
+        if (newNumTries > 1) {
+            api({
+                host: '',
+                uri: '/site-api/users/set-template-cue/',
+                method: 'post',
+                useCsrf: true,
+                json: {cue: cue, value: false}
+            }, function (err) {
+                if (!err) this.props.dispatch(sessionActions.refreshSession());
+            }.bind(this));
+        }
     },
     shouldShowWelcome: function () {
         if (!this.props.session.session.user || !this.props.session.session.flags.show_welcome) return false;
@@ -208,10 +221,11 @@ var Splash = injectIntl(React.createClass({
             </Box>
         ];
 
-        if (this.props.session.session.user && this.props.session.session.flags.show_hoc_studio) {
+        if (this.props.session.session.user && this.props.session.session.flags.show_april_fools) {
             rows.push(
                 <HocEventRow
-                    onDismiss={this.handleDismiss.bind(this, 'show_hoc_studio')}
+                    onDismiss={this.handleDismiss.bind(this, 'show_april_fools')}
+                    className={this.state.bannerHeightClass}
                 />
             );
         }