- Stop using ttt cscc files, and remove all references to ttt that are not needed.

- Update translation strings that are specific to microworlds to have microworlds as prefix.
- Address other comments

src/components/title-banner/title-banner.scss

@@ -27,3 +27,7 @@
         font-weight: 700;
     }
 }
+
+.title-banner.mod-blue-bg {
+    background-color: $ui-blue;
+}

src/routes.json

@@ -250,7 +250,7 @@
     {
         "name": "microworlds-homepage",
         "pattern": "^/microworlds/go/?(\\?.*)?$",
-        "routeAlias": "microworlds/go/?\\??",
+        "routeAlias": "microworlds",
         "view": "microworldshomepage/microworldshomepage",
         "title": "Microworlds"
     }

src/views/microworldshomepage/l10n.json

@@ -1,15 +1,14 @@
 {
-    "ttt.placeholder": "Placeholder text",
-    "ttt.title": "Scratch Microworlds",
-    "ttt.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try one.",
     "tile.tutorial": "Microworld",
     "ttt.tryIt": "Try It",
     "ttt.open": "Open",
-    "ttt.HipHopTitle": "Hip Hop Dance",
-    "ttt.FashionTitle": "Fashion",
-    "ttt.HouseTitle": "Interactive House",
-    "ttt.MakeMusicTitle": "Make Music",
-    "ttt.SoccerTitle": "Soccer",
-    "ttt.JokeTitle": "Make a Joke",
-    "ttt.ArtTitle": "Make Art"
+    "microworlds.title": "Scratch Microworlds",
+    "microworlds.subTitle": "You can get started with Scratch in a variety of ways. Click a picture to try one.",
+    "microworlds.HipHopTitle": "Hip Hop Dance",
+    "microworlds.FashionTitle": "Fashion",
+    "microworlds.HouseTitle": "Interactive House",
+    "microworlds.MakeMusicTitle": "Make Music",
+    "microworlds.SoccerTitle": "Soccer",
+    "microworlds.JokeTitle": "Make a Joke",
+    "microworlds.ArtTitle": "Make Art"
 }

src/views/microworldshomepage/microworlds.json

@@ -1,36 +1,36 @@
 [
     {
-        "title": "ttt.HipHopTitle",
+        "title": "microworlds.HipHopTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5050.png",
         "tutorialLoc": "/pathways/hiphop"
     },
     {
-        "title": "ttt.MakeMusicTitle",
+        "title": "microworlds.MakeMusicTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5393.png",
         "tutorialLoc": "/projects/embed-editor/133865393/?isMicroworld=true"
     },
     {
-        "title": "ttt.SoccerTitle",
+        "title": "microworlds.SoccerTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5271.png",
         "tutorialLoc": "/projects/embed-editor/133865271/?isMicroworld=true"
     },
     {
-        "title": "ttt.FashionTitle",
+        "title": "microworlds.FashionTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5474.png",
         "tutorialLoc": "/pathways/fashion"
     },
     {
-        "title": "ttt.ArtTitle",
+        "title": "microworlds.ArtTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5435.png",
         "tutorialLoc": "/projects/embed-editor/133865435/?isMicroworld=true"
     },
     {
-        "title": "ttt.JokeTitle",
-        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5327.png", 
+        "title": "microworlds.JokeTitle",
+        "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13386/5327.png",
         "tutorialLoc": "/projects/embed-editor/133865327/?isMicroworld=true"
     },
     {
-        "title": "ttt.HouseTitle",
+        "title": "microworlds.HouseTitle",
         "thumbUrl": "//cdn.scratch.mit.edu/static/site/projects/thumbnails/13383/5490.png",
         "tutorialLoc": "/projects/embed-editor/133835490/?isMicroworld=true"
     }

src/views/microworldshomepage/microworldshomepage.jsx

@@ -8,19 +8,12 @@ var MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
 var Page = require('../../components/page/www/page.jsx');
 var TitleBanner = require('../../components/title-banner/title-banner.jsx');
 var TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
-var Tiles = require('./ttt.json');
+var Tiles = require('./microworlds.json');
 
-var classNames = require('classnames');
-
-require('../thingstotry/thingstotry.scss');
+require('./microworldshomepage.scss');
 
 var MicroworldsHomepage = injectIntl(React.createClass({
     type: 'MicroworldsHomepage',
-    getInitialState: function () {
-        return {
-            currentTile: Tiles[0]
-        };
-    },
     renderTTTTiles: function () {
         var formatMessage = this.props.intl.formatMessage;
         var translatedTiles = [];
@@ -44,25 +37,19 @@ var MicroworldsHomepage = injectIntl(React.createClass({
     },
     render: function () {
         return (
-            <div className="ttt">
-                <TitleBanner className="masthead mod-ttt-title">
-                    <section className="ttt-section">
-                    </section>
+            <div className="microworlds">
+                <TitleBanner className="masthead mod-blue-bg">
                     <h1 className="title-banner-h1">
-                        <FormattedMessage id="ttt.title" />
+                        <FormattedMessage id="microworlds.title" />
                     </h1>
                     <p className="intro title-banner-p">
-                        <FormattedHTMLMessage id="ttt.subTitle" />
+                        <FormattedHTMLMessage id="microworlds.subTitle" />
                     </p>
                 </TitleBanner>
-
                 <div className="inner">
-                    <section className="ttt-section">
-                        <MasonryGrid >
-                            {this.renderTTTTiles()}
-                        </MasonryGrid>
-                    </section>
-
+                    <MasonryGrid >
+                        {this.renderTTTTiles()}
+                    </MasonryGrid>
                 </div>
             </div>
         );

src/views/microworldshomepage/microworldshomepage.scss

@@ -0,0 +1,3 @@
+#view {
+    padding: 0;
+}

src/views/thingstotry/thingstotry.jsx

@@ -57,7 +57,7 @@ var ThingsToTry = injectIntl(React.createClass({
     render: function () {
         return (
             <div className="ttt">
-                <TitleBanner className="masthead mod-ttt-title">
+                <TitleBanner className="masthead mod-blue-bg">
                     <section className="ttt-section">
                         <img className="ttt-banner-image" src="/svgs/ttt/resources.svg" alt=""/>
                     </section>

src/views/thingstotry/thingstotry.scss

@@ -7,11 +7,6 @@ $base-bg: $ui-white;
     padding: 0;
 }
 
-// .mod-ttt-title, to avoid collision with .title-banner.mod-tt in ttt modal
-.title-banner.mod-ttt-title {
-    background-color: $ui-blue;
-}
-
 .ttt-section {
     display: flex;
     margin: 0 auto;