Switch CTA button based on logged in state

Invite logged-out users to ‘Get Started with Coding!’, and make the whole Scratch animation clickable (goes to the Animate a Name tutorial).

See #1664

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

@@ -90,10 +90,10 @@ var MiddleBanner = injectIntl(React.createClass({
                 <div className="middle-banner inner">
                     <FlexRow className="middle-banner-header">
                         <h1 className="middle-banner-header-h1">
-                            <FormattedMessage id="middle-banner.header" />
+                            <FormattedMessage id="middleBanner.header" />
                         </h1>
                         <a href="/tips" className="button mod-ttt-try-button">
-                            <FormattedMessage id="middle-banner.ttt" />
+                            <FormattedMessage id="middleBanner.ttt" />
                         </a>
                     </FlexRow>
                     <MediaQuery minWidth={frameless.tablet}>

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

@@ -21,6 +21,9 @@ var nameTile = {
 
 var TopBanner = injectIntl(React.createClass({
     type: 'TopBanner',
+    propTypes: {
+        loggedIn: React.PropTypes.bool.isRequired
+    },
     getInitialState: function () {
         // use translated tile
         var formatMessage = this.props.intl.formatMessage;
@@ -46,6 +49,7 @@ var TopBanner = injectIntl(React.createClass({
         return (
             <TitleBanner className="mod-splash-top">
                 <FlexRow className="banner-top inner">
+                    <a href="/projects/editor/?tip_bar=name">
                         <FlexRow className="top-animation">
                             <img
                                 src="/images/hoc/s.png"
@@ -83,10 +87,13 @@ var TopBanner = injectIntl(React.createClass({
                                 className="top-animation-letter mod-letter-h"
                             />
                         </FlexRow>
-                    
+                    </a>
                     <div className="top-links">
                         <a href="/projects/editor/?tip_bar=name" className="button mod-top-button">
-                            <FormattedMessage id="ttt.AnimateYourNameTitle" />
+                            { this.props.loggedIn ?
+                                <FormattedMessage id="ttt.AnimateYourNameTitle" /> :
+                                <FormattedMessage id="topBanner.getStarted" />
+                            }
                         </a>
                         <div className="mod-guides-link" onClick={this.showTTTModal}>
                             &nbsp;&nbsp;

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

@@ -31,6 +31,7 @@
 }
 
 .top-animation {
+    margin: auto;
     padding-top: 2rem;
     padding-bottom: 1rem;
     width: 70%;

src/views/splash/l10n.json

@@ -29,8 +29,9 @@
     "teacherbanner.classesButton": "My Classes",
     "teacherbanner.faqButton": "Teacher Account FAQ",
     
-    "middle-banner.header": "Get Creative with Coding",
-    "middle-banner.ttt": "See more activities",
+    "middleBanner.header": "Get Creative with Coding",
+    "middleBanner.ttt": "See more activities",
+    "topBanner.getStarted": "Get Started with Coding!",
     "ttt.tutorial": "Tutorial",
     "ttt.open": "Open",
     "ttt.tutorialSubtitle": "Find out how to make this project using a step-by-step tutorial in Scratch.",

src/views/splash/presentation.jsx

@@ -255,7 +255,8 @@ var SplashPresentation = injectIntl(React.createClass({
                 {this.props.isEducator ? [
                     <TeacherBanner key="teacherbanner" messages={messages} />
                 ] : []}
-                <TopBanner />
+                <TopBanner loggedIn={this.props.sessionStatus === sessionActions.Status.FETCHED
+                    && Object.keys(this.props.user).length !== 0}/>
                 <div key="inner" className="inner mod-splash">
                     {this.props.sessionStatus === sessionActions.Status.FETCHED ? (
                         Object.keys(this.props.user).length !== 0 ? [