updated from develop with new extension landing pages

src/components/extension-landing/extension-landing.jsx

@@ -10,8 +10,16 @@ class ExtensionLanding extends React.Component {
             'onSetOS'
         ]);
 
+        // @todo use bowser for browser detection
+        let detectedOS = OS_ENUM.WINDOWS;
+        if (window.navigator && window.navigator.platform) {
+            if (window.navigator.platform === 'MacIntel') {
+                detectedOS = OS_ENUM.MACOS;
+            }
+        }
+
         this.state = {
-            OS: OS_ENUM.WINDOWS
+            OS: detectedOS
         };
     }
 

src/components/extension-landing/extension-landing.scss

@@ -50,6 +50,7 @@
     }
 
     .screenshot {
+        border: 1px solid $ui-border;
         border-radius: .5rem;
     }
 

src/components/extension-landing/project-card.jsx

@@ -3,9 +3,9 @@ const React = require('react');
 
 const ProjectCard = props => (
     <a
-        download
         className="project-card"
         href={props.cardUrl}
+        target="_blank"
     >
         <div className="project-card-image">
             <img

src/routes.json

@@ -301,6 +301,13 @@
         "view": "wedo2/wedo2",
         "title": "LEGO WeDo 2.0"
     },
+    {
+        "name": "wedo-legacy",
+        "pattern": "^/wedo-legacy/?$",
+        "routeAlias": "/wedo-legacy/?$",
+        "view": "wedo2-legacy/wedo2",
+        "title": "LEGO WeDo"
+    },
     {
         "name": "ev3",
         "pattern": "^/ev3/?$",

src/views/ev3/ev3.jsx

@@ -45,11 +45,11 @@ class EV3 extends ExtensionLanding {
                             values={{
                                 ev3Link: (
                                     <a
-                                        href="https://shop.lego.com/en-US/LEGO-MINDSTORMS-EV3-31313"
+                                        href="https://education.lego.com/en-us/middle-school/intro/mindstorms-ev3"
                                         rel="noopener noreferrer"
                                         target="_blank"
                                     >
-                                                LEGO MINDSTORMS EV3
+                                                LEGO MINDSTORMS Education EV3
                                     </a>
                                 )
                             }}
@@ -108,6 +108,7 @@ class EV3 extends ExtensionLanding {
                                 <div className="step-image">
                                     <img
                                         alt=""
+                                        className="screenshot"
                                         src="/images/ev3/ev3-connect-2.png"
                                     />
                                 </div>
@@ -132,6 +133,7 @@ class EV3 extends ExtensionLanding {
                                 <div className="step-image">
                                     <img
                                         alt={this.props.intl.formatMessage({id: 'ev3.imgAltAddExtension'})}
+                                        className="screenshot"
                                         src="/images/ev3/ev3-connect-3.png"
                                     />
                                 </div>
@@ -237,21 +239,21 @@ class EV3 extends ExtensionLanding {
                     <h3><FormattedMessage id="ev3.starterProjects" /></h3>
                     <Steps>
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-wave-hello.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075992"
                             description={this.props.intl.formatMessage({id: 'ev3.waveHelloDescription'})}
                             imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltWaveHello'})}
                             imageSrc="/images/ev3/starter-wave-hello.png"
                             title={this.props.intl.formatMessage({id: 'ev3.waveHelloTitle'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-distance-instrument.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239076020"
                             description={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentDescription'})}
                             imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltDistanceInstrument'})}
                             imageSrc="/images/ev3/starter-distance-instrument.png"
                             title={this.props.intl.formatMessage({id: 'ev3.distanceInstrumentTitle'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/ev3/ev3-space-tacos.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239076044"
                             description={this.props.intl.formatMessage({id: 'ev3.spaceTacosDescription'})}
                             imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltSpaceTacos'})}
                             imageSrc="/images/ev3/starter-flying-game.png"

src/views/ev3/ev3.scss

@@ -2,7 +2,7 @@
 
 .ev3 {
     .extension-header {
-        background-color: $ui-aqua;
+        background-color: $ui-orange;
         background-image: url("/images/ev3/ev3-pattern.svg");
     }
 }

src/views/ev3/l10n.json

@@ -33,7 +33,7 @@
     "ev3.otherComputerConnectedTitle": "Make sure no other computer is connected to your EV3",
     "ev3.otherComputerConnectedText": "Only one computer can be connected to an EV3 at a time. If you have another computer connected to your EV3, disconnect the EV3 or close Scratch on that computer and try again.",
     "ev3.updateFirmwareTitle": "Try updating your EV3 firmware",
-    "ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}. We recommend following the instructions for \"Manual Firmware Update\".",
+    "ev3.updateFirmwareText": "We recommend updating to EV3 firmware version 1.10E or above. See {firmwareUpdateLink}.",
     "ev3.firmwareUpdateText": "firmware update instructions from LEGO",
     "ev3.imgAltEv3illustration": "Illustration of an EV3 Computer featuring some examples of interacting with an EV3.",
     "ev3.imgAltAddExtension": "In the editor, click on the \"Add Extensions\" button on the lower left.",

src/views/microbit/microbit.jsx

@@ -126,7 +126,10 @@ class MicroBit extends ExtensionLanding {
                             </Step>
                             <Step number={2}>
                                 <div className="step-image">
-                                    <img src="/images/microbit/mbit-connect-2.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/microbit/mbit-connect-2.png"
+                                    />
                                 </div>
                                 <p>
                                     <FormattedMessage
@@ -147,7 +150,10 @@ class MicroBit extends ExtensionLanding {
                             </Step>
                             <Step number={3}>
                                 <div className="step-image">
-                                    <img src="/images/microbit/mbit-connect-3.png" />
+                                    <img
+                                        className="screenshot"
+                                        src="/images/microbit/mbit-connect-3.png"
+                                    />
                                 </div>
                                 <p><FormattedMessage id="microbit.addExtension" /></p>
                             </Step>
@@ -201,19 +207,19 @@ class MicroBit extends ExtensionLanding {
                     <h3><FormattedMessage id="microbit.starterProjects" /></h3>
                     <Steps>
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-heartbeat.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075756"
                             description={this.props.intl.formatMessage({id: 'microbit.heartBeatDescription'})}
                             imageSrc="/images/microbit/starter-heart.png"
                             title={this.props.intl.formatMessage({id: 'microbit.heartBeat'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-guitar.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075950"
                             description={this.props.intl.formatMessage({id: 'microbit.tiltGuitarDescription'})}
                             imageSrc="/images/microbit/starter-guitar.png"
                             title={this.props.intl.formatMessage({id: 'microbit.tiltGuitar'})}
                         />
                         <ProjectCard
-                            cardUrl="https://downloads.scratch.mit.edu/microbit/microbit-fish.sb3"
+                            cardUrl="https://beta.scratch.mit.edu/#239075973"
                             description={this.props.intl.formatMessage({id: 'microbit.oceanAdventureDescription'})}
                             imageSrc="/images/microbit/starter-fish.png"
                             title={this.props.intl.formatMessage({id: 'microbit.oceanAdventure'})}

src/views/microbit/microbit.scss

@@ -3,7 +3,7 @@
 
 .microbit {
     .extension-header {
-        background-color: $ui-purple;
+        background-color: $ui-mint-green;
         background-image: url("/images/microbit/mbit-pattern.svg");
 
         .extension-info {

src/views/search/l10n.json

+{
+  "search.trending": "Trending",
+  "search.popular": "Popular"
+}

src/views/search/search.jsx

@@ -8,14 +8,18 @@ const React = require('react');
 
 const api = require('../../lib/api');
 const Button = require('../../components/forms/button.jsx');
+const Form = require('../../components/forms/form.jsx');
 const Grid = require('../../components/grid/grid.jsx');
 const navigationActions = require('../../redux/navigation.js');
+const Select = require('../../components/forms/select.jsx');
 const TitleBanner = require('../../components/title-banner/title-banner.jsx');
 const Tabs = require('../../components/tabs/tabs.jsx');
 
 const Page = require('../../components/page/www/page.jsx');
 const render = require('../../lib/render.jsx');
 
+const ACCEPTABLE_MODES = ['trending', 'popular', ''];
+
 require('./search.scss');
 
 class Search extends React.Component {
@@ -23,14 +27,31 @@ class Search extends React.Component {
         super(props);
         bindAll(this, [
             'getSearchState',
+            'handleChangeSortMode',
             'handleGetSearchMore',
             'getTab'
         ]);
         this.state = this.getSearchState();
         this.state.loaded = [];
         this.state.loadNumber = 16;
+        this.state.mode = '';
         this.state.offset = 0;
         this.state.loadMore = false;
+        
+        let mode = '';
+        const query = window.location.search;
+        const m = query.lastIndexOf('mode=');
+        if (m !== -1) {
+            mode = query.substring(m + 5, query.length).toLowerCase();
+        }
+        while (mode.indexOf('/') > -1) {
+            mode = mode.substring(0, mode.indexOf('/'));
+        }
+        while (mode.indexOf('&') > -1) {
+            mode = mode.substring(0, mode.indexOf('&'));
+        }
+        mode = decodeURIComponent(mode.split('+').join(' '));
+        this.state.mode = mode;
     }
     componentDidMount () {
         const query = window.location.search;
@@ -65,6 +86,13 @@ class Search extends React.Component {
             loadNumber: 16
         };
     }
+    handleChangeSortMode (name, value) {
+        if (ACCEPTABLE_MODES.indexOf(value) !== -1) {
+            const term = this.props.searchTerm.split(' ').join('+');
+            window.location =
+                `${window.location.origin}/search/${this.state.tab}?q=${term}&mode=${value}`;
+        }
+    }
     handleGetSearchMore () {
         let termText = '';
         if (this.props.searchTerm !== '') {
@@ -73,7 +101,8 @@ class Search extends React.Component {
         const locale = this.props.intl.locale;
         const loadNumber = this.state.loadNumber;
         const offset = this.state.offset;
-        const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=popular${termText}`;
+        const mode = this.state.mode;
+        const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=${mode}${termText}`;
 
         api({
             uri: `/search/${this.state.tab}?${queryString}`
@@ -167,6 +196,25 @@ class Search extends React.Component {
                         {this.getTab('projects')}
                         {this.getTab('studios')}
                     </Tabs>
+                    <div className="sort-controls">
+                        <Form className="sort-mode">
+                            <Select
+                                name="sort"
+                                options={[
+                                    {
+                                        value: 'trending',
+                                        label: this.props.intl.formatMessage({id: 'search.trending'})
+                                    },
+                                    {
+                                        value: 'popular',
+                                        label: this.props.intl.formatMessage({id: 'search.popular'})
+                                    }
+                                ]}
+                                value={this.state.mode}
+                                onChange={this.handleChangeSortMode}
+                            />
+                        </Form>
+                    </div>
                     {this.getProjectBox()}
                 </div>
             </div>

src/views/search/search.scss

@@ -104,15 +104,40 @@ $base-bg: $ui-white;
             }
         }
     }
+    
+    /* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */
 
-    .select {
-        select {
-            margin-bottom: 0;
-            color: $header-gray;
-        }
+    .sort-controls {
+        display: flex;
+        margin: 0 auto;
+        border-bottom: 1px solid $ui-border;
+        padding: 8px 0;
+        width: 58.75rem;
+        justify-content: space-between;
+    }
+
+    .sort-mode {
+        margin-top: -4px;
+        width: 13.75rem;
+
+        .select {
+
+            select {
+                margin-bottom: 0;
+                border: 0;
+                background-color: transparent;
+                height: 32px;
+                color: $header-gray;
 
-        .help-block {
-            display: none;
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
+            }
+
+            .help-block {
+                display: none;
+            }
         }
     }
 

src/views/terms/terms.jsx

@@ -466,7 +466,7 @@ const Terms = () => (
                 <p>
                     This document, together with all appendices, constitutes the entire Terms
                      of Use and supersedes all previous agreements with the Scratch Team relating
-                     to the use of Scratch. Revision date: 4 March 2015.
+                     to the use of Scratch. Revision date: April 2016.
                 </p>
             </section>
             <section id="appendix-a">

src/views/wedo2-legacy/l10n.json

+{
+    "wedoLegacy.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
+    "wedoLegacy.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
+    "wedoLegacy.getStarted": "Getting Started with LEGO WeDo 2.0",
+    "wedoLegacy.installTitle": "1. Install Device Manager",
+    "wedoLegacy.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
+    "wedoLegacy.downloadMac": "Download for Mac OSX",
+    "wedoLegacy.downloadWin": "Download for Windows 10+",
+    "wedoLegacy.setupTitle": "2. Setup & Help",
+    "wedoLegacy.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
+    "wedoLegacy.createTitle": "3. Create",
+    "wedoLegacy.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
+    "wedoLegacy.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
+    "wedoLegacy.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
+    "wedoLegacy.starterProjects": "WeDo 2.0 Starter Projects",
+    "wedoLegacy.starterMotor": "Motor",
+    "wedoLegacy.starterDistance": "Distance Sensor",
+    "wedoLegacy.starterTilt": "Tilt Sensor",
+    "wedoLegacy.versionTitle": "Which version do you have?",
+    "wedoLegacy.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
+}

src/views/wedo2-legacy/wedo2.jsx

+const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+const FormattedMessage = require('react-intl').FormattedMessage;
+const React = require('react');
+
+const Page = require('../../components/page/www/page.jsx');
+const render = require('../../lib/render.jsx');
+
+require('./wedo2.scss');
+
+const Wedo2 = () => (
+    <div className="wedo">
+        <div className="top-banner">
+            <div className="inner">
+                <div className="columns2">
+                    <div className="banner-text">
+                        <h2>LEGO WeDo 2.0 &amp; Scratch</h2>
+                        <p className="intro">
+                            <FormattedMessage id="wedoLegacy.intro" />
+                        </p>
+                    </div>
+                    <div className="banner-photo">
+                        <img src="/images/wedo-legacy/wedo-milo.png" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="inner">
+            <section id="getting-started">
+                <h3>
+                    <FormattedMessage id="wedoLegacy.getStarted" />
+                </h3>
+                <p className="callout">
+                    <FormattedMessage id="wedoLegacy.requirement" />
+                </p>
+                <div className="columns3">
+                    <div className="column">
+                        <img src="/images/wedo-legacy/download-device-manager.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.installTitle" />
+                        </h4>
+                        <p>
+                            <FormattedHTMLMessage id="wedoLegacy.installText" />
+                            <br />
+                            <a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
+                                <FormattedMessage id="wedoLegacy.downloadMac" />
+                            </a>
+                            <br />
+                            <a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
+                                <FormattedMessage id="wedoLegacy.downloadWin" />
+                            </a>
+                        </p>
+                    </div>
+                    <div className="column">
+                        <img src="/images/wedo-legacy/set-up.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.setupTitle" />
+                        </h4>
+                        <p>
+                            <FormattedHTMLMessage id="wedoLegacy.setupText" />
+                        </p>
+                    </div>
+                    <div className="column">
+                        <img src="/images/wedo-legacy/create-and-share.png" />
+                        <h4>
+                            <FormattedMessage id="wedoLegacy.createTitle" />
+                        </h4>
+                        <p>
+                            <FormattedMessage id="wedoLegacy.createText" />
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <div className="banner">
+            <div
+                className="inner"
+                id="starter-projects"
+            >
+                <h3>
+                    <FormattedMessage id="wedoLegacy.starterProjects" />
+                </h3>
+                <div className="project-list">
+                    <a href="/projects/101037564/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/motor.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterMotor" />
+                            </p>
+                        </div>
+                    </a>
+                    <a href="/projects/101038249/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/distance.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterDistance" />
+                            </p>
+                        </div>
+                    </a>
+                    <a href="/projects/101033190/?tip_bar=ext2#editor">
+                        <div className="project-card">
+                            <img
+                                alt=""
+                                src="/images/wedo-legacy/tilt.png"
+                            />
+                            <p>
+                                <FormattedMessage id="wedoLegacy.starterTilt" />
+                            </p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div className="inner">
+            <section>
+                <h3>
+                    <FormattedMessage id="wedoLegacy.versionTitle" />
+                </h3>
+                <p>
+                    <FormattedMessage id="wedoLegacy.versionText" />
+                </p>
+                <div className="device-card">
+                    <h4>LEGO WeDo 1.0 Hub</h4>
+                    <img
+                        alt="LEGO WeDo 1.0 Hub"
+                        src="/images/wedo-legacy/wedo1.png"
+                    />
+                    <a href="/projects/editor/?tip_bar=ext1">
+                        <FormattedMessage id="wedoLegacy.wedo1SetupInstructions" />
+                    </a>
+                </div>
+                <div className="device-card">
+                    <h4>LEGO WeDo 2.0 Hub</h4>
+                    <img
+                        alt="LEGO WeDo 2.0 Hub"
+                        src="/images/wedo-legacy/wedo2.png"
+                    />
+                    <a href="/projects/editor/?tip_bar=ext2">
+                        <FormattedMessage id="wedoLegacy.wedo2SetupInstructions" />
+                    </a>
+                </div>
+            </section>
+        </div>
+    </div>
+);
+
+render(<Page><Wedo2 /></Page>, document.getElementById('app'));

src/views/wedo2-legacy/wedo2.scss

+@import "../../colors";
+@import "../../frameless";
+
+#view {
+    padding: 0;
+}
+
+.wedo {
+    h3,
+    h4 {
+        margin: 1.5em 0 .3em;
+    }
+
+    h2 {
+        margin: .75em 0 .3em;
+    }
+
+    p {
+        margin: .25em 0 1em;
+
+        &.intro {
+            margin-bottom: 1em;
+        }
+
+        &.callout {
+            padding: .75em 1em;
+            text-align: center;
+        }
+    }
+
+    .top-banner {
+        margin-bottom: 50px;
+        background-color: $ui-blue;
+        padding: 50px 0;
+        width: 100%;
+
+        h2 {
+            color: $ui-white;
+        }
+
+        p {
+            color: $ui-white;
+        }
+
+        .columns2 {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .banner-text {
+            max-width: $cols7;
+        }
+
+        .banner-photo {
+            max-width: $cols4;
+
+            img {
+                width: 100%;
+            }
+        }
+    } 
+
+    section {
+        margin-bottom: 50px;
+        text-align: center;
+    }
+
+    // Getting Started Section
+
+    .columns3 {
+        display: flex;
+        justify-content: space-between;
+
+        .column { 
+            margin: 15px;
+            max-width: $cols4;
+
+            img {
+                margin: 0 auto;
+                width: 80%;
+            }
+        }
+    }
+
+    // Project Highlight Section
+
+    #starter-projects {
+        h3,
+        p {
+            text-align: center;
+        }
+    }
+
+    .banner {
+        background-color: $ui-gray;
+        padding: 10px 0 50px;
+
+        h3 {
+            margin-top: 30px;
+        }
+    }
+
+    .project-list {
+        display: flex;
+        margin: 0 auto;
+        max-width: $cols9;
+        justify-content: space-between;
+    } 
+
+    .project-card {
+        transition: transform .25s ease;
+        margin: 10px;
+        border-radius: 7px;
+        background-color: $ui-white;
+        max-width: $cols3;
+        overflow: hidden;
+
+
+        img {
+            border-bottom: 2px solid $ui-white;
+            width: 100%;
+        }
+
+        p {
+            display: block;
+            margin: 15px 15px 20px;
+            color: $ui-blue;
+            font-weight: 500;
+        }
+
+        &:hover {
+            transform: scale(1.1, 1.1);
+            transition: transform .25s ease;
+            cursor: pointer; 
+
+            p {
+                color: $ui-blue-dark;
+            }
+        }
+    }
+
+    // Device Cards
+
+    .device-card {
+        display: inline-block;
+        margin: 0 10px;
+        max-width: $cols3;
+
+        img {
+            width: 100%;
+        }
+    }
+}
+
+// Responsive Behavior
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+    .wedo {
+        .inner {
+            margin: 0 auto;
+            width: calc(100% - 40px);
+        }
+        
+        .top-banner {
+            text-align: center;
+
+            .banner-photo {
+                display: none;
+            }
+        }
+
+        .project-list,
+        .columns3 {
+            display: block;
+        }
+
+        .project-card,
+        .columns3 .column {
+            display: block;
+            margin: 20px auto;
+            width: $cols6;
+        }
+    }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+    .wedo {
+        .project-list,
+        .columns3 {
+            display: inline-block;
+        }
+
+        .top-banner {
+            text-align: center;
+
+            .banner-photo {
+                display: none;
+            }
+        }
+
+        .project-card,
+        .columns3 .column {
+            display: inline-block;
+            width: $cols6;
+        }
+    }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    #view {
+        text-align: center;
+    }
+
+    .wedo {
+        .top-banner {
+            text-align: left;
+
+            .banner-photo {
+                max-width: $cols3;
+            }
+        }
+
+        .inner {
+            margin: 0 auto;
+            width: $tablet;
+        }
+    }
+}

src/views/wedo2/l10n.json

 {
-    "wedo2.intro": "The LEGO® Education WeDo 2.0 is an introductory invention kit you can use to build your own interactive machines. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations on the screen.",
-    "wedo2.requirement": "The LEGO WeDo 2.0 extension is available for Mac OSX and Windows 10+.",
-    "wedo2.getStarted": "Getting Started with LEGO WeDo 2.0",
-    "wedo2.installTitle": "1. Install Device Manager",
-    "wedo2.installText": "The Device Manager lets you connect WeDo 2.0 to Scratch using Bluetooth",
-    "wedo2.downloadMac": "Download for Mac OSX",
-    "wedo2.downloadWin": "Download for Windows 10+",
-    "wedo2.setupTitle": "2. Setup & Help",
-    "wedo2.setupText": "Connect your WeDo 2.0 by following the steps in the <a href=\"/projects/editor/?tip_bar=ext2\">Tips Window</a>",
-    "wedo2.createTitle": "3. Create",
-    "wedo2.createText": "Use the WeDo extension blocks to turn on lights, control motors, and make your project interactive",
-    "wedo2.wedo2SetupInstructions": "WeDo 2.0 Setup Instructions",
-    "wedo2.wedo1SetupInstructions": "WeDo 1.0 Setup Instructions",
-    "wedo2.starterProjects": "WeDo 2.0 Starter Projects",
-    "wedo2.starterMotor": "Motor",
-    "wedo2.starterDistance": "Distance Sensor",
-    "wedo2.starterTilt": "Tilt Sensor",
-    "wedo2.versionTitle": "Which version do you have?",
-    "wedo2.versionText": "You can also use Scratch to program the original LEGO WeDo (LEGO WeDo 1.0)."
-}
+    "wedo2.headerText": "{wedo2Link} is an introductory invention kit you can use to build interactive robots and other creations. You can snap together Scratch programming blocks to interact with your LEGO WeDo creations and add animations and sounds.",
+    "wedo2.gettingStarted": "Getting Started",
+    "wedo2.connectingWedo2": "Connecting WeDo 2.0 to Scratch",
+    "wedo2.useScratch3": "Use the {scratch3Link} editor.",
+    "wedo2.addExtension": "Add the WeDo 2.0 extension.",
+    "wedo2.thingsToTry": "Things to Try",
+    "wedo2.makeMotorMove": "Make a motor move",
+    "wedo2.plugMotorIn": "Plug a motor into the WeDo.",
+    "wedo2.clickMotorBlock": "Find the {motorBlockText} block and click on it.",
+    "wedo2.motorBlockText": "\"turn motor on for 1 seconds\"",
+    "wedo2.starterProjects": "Starter Projects",
+    "wedo2.starter1Title": "Wagging Dog",
+    "wedo2.starter1Description": "Use a motor to make a spinning tail for your virtual pet.",
+    "wedo2.starter2Title": "Tilting Toad",
+    "wedo2.starter2Description": "Use the tilt sensor to make music with a toad.",
+    "wedo2.starter3Title": "Distance Dino",
+    "wedo2.starter3Description": "Use the distance sensor to move the dinosaur.",
+    "wedo2.troubleshootingTitle": "Troubleshooting",
+    "wedo2.closeScratchCopiesTitle": "Close other copies of Scratch",
+    "wedo2.closeScratchCopiesText": "Only one copy of Scratch can connect with the WeDo 2.0 at a time. If you have Scratch open in other browser tabs, close it and try again.",
+    "wedo2.otherComputerConnectedTitle": "Make sure no other computer is connected to your WeDo 2.0",
+    "wedo2.otherComputerConnectedText": "Only one computer can be connected to an WeDo 2.0 at a time. If you have another computer connected to your WeDo 2.0, disconnect the WeDo 2.0 or close Scratch on that computer and try again.",
+    "wedo2.legacyInfoTitle": "Using Scratch 2.0?",
+    "wedo2.legacyInfoText": "Visit our page about {wedoLegacyLink}.",
+    "wedo2.legacyLinkText": "using LEGO WeDo with Scratch 2.0"
+  }

src/views/wedo2/wedo2.scss

 @import "../../colors";
-@import "../../frameless";
 
-#view {
-    padding: 0;
-}
-
-.wedo {
-    h3,
-    h4 {
-        margin: 1.5em 0 .3em;
-    }
-
-    h2 {
-        margin: .75em 0 .3em;
-    }
-
-    p {
-        margin: .25em 0 1em;
-
-        &.intro {
-            margin-bottom: 1em;
-        }
-
-        &.callout {
-            padding: .75em 1em;
-            text-align: center;
-        }
-    }
-
-    .top-banner {
-        margin-bottom: 50px;
-        background-color: $ui-blue;
-        padding: 50px 0;
-        width: 100%;
-
-        h2 {
-            color: $ui-white;
-        }
-
-        p {
-            color: $ui-white;
-        }
-
-        .columns2 {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .banner-text {
-            max-width: $cols7;
-        }
-
-        .banner-photo {
-            max-width: $cols4;
-
-            img {
-                width: 100%;
-            }
-        }
-    } 
-
-    section {
-        margin-bottom: 50px;
-        text-align: center;
-    }
-
-    // Getting Started Section
-
-    .columns3 {
-        display: flex;
-        justify-content: space-between;
-
-        .column { 
-            margin: 15px;
-            max-width: $cols4;
-
-            img {
-                margin: 0 auto;
-                width: 80%;
-            }
-        }
-    }
-
-    // Project Highlight Section
-
-    #starter-projects {
-        h3,
-        p {
-            text-align: center;
-        }
-    }
-
-    .banner {
-        background-color: $ui-gray;
-        padding: 10px 0 50px;
-
-        h3 {
-            margin-top: 30px;
-        }
-    }
-
-    .project-list {
-        display: flex;
-        margin: 0 auto;
-        max-width: $cols9;
-        justify-content: space-between;
-    } 
-
-    .project-card {
-        transition: transform .25s ease;
-        margin: 10px;
-        border-radius: 7px;
-        background-color: $ui-white;
-        max-width: $cols3;
-        overflow: hidden;
-
-
-        img {
-            border-bottom: 2px solid $ui-white;
-            width: 100%;
-        }
-
-        p {
-            display: block;
-            margin: 15px 15px 20px;
-            color: $ui-blue;
-            font-weight: 500;
-        }
-
-        &:hover {
-            transform: scale(1.1, 1.1);
-            transition: transform .25s ease;
-            cursor: pointer; 
-
-            p {
-                color: $ui-blue-dark;
-            }
-        }
-    }
-
-    // Device Cards
-
-    .device-card {
-        display: inline-block;
-        margin: 0 10px;
-        max-width: $cols3;
-
-        img {
-            width: 100%;
-        }
-    }
-}
-
-// Responsive Behavior
-
-//4 columns
-@media only screen and (max-width: $mobile - 1) {
-    .wedo {
-        .inner {
-            margin: 0 auto;
-            width: calc(100% - 40px);
-        }
-        
-        .top-banner {
-            text-align: center;
-
-            .banner-photo {
-                display: none;
-            }
-        }
-
-        .project-list,
-        .columns3 {
-            display: block;
-        }
-
-        .project-card,
-        .columns3 .column {
-            display: block;
-            margin: 20px auto;
-            width: $cols6;
-        }
-    }
-}
-
-//6 columns
-@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
-    .wedo {
-        .project-list,
-        .columns3 {
-            display: inline-block;
-        }
-
-        .top-banner {
-            text-align: center;
-
-            .banner-photo {
-                display: none;
-            }
-        }
-
-        .project-card,
-        .columns3 .column {
-            display: inline-block;
-            width: $cols6;
-        }
-    }
-}
-
-//8 columns
-@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
-    #view {
-        text-align: center;
-    }
-
-    .wedo {
-        .top-banner {
-            text-align: left;
-
-            .banner-photo {
-                max-width: $cols3;
-            }
-        }
-
-        .inner {
-            margin: 0 auto;
-            width: $tablet;
-        }
+.wedo2 {
+    .extension-header {
+        background-color: $ui-coral;
+        background-image: url("/images/wedo2/wedo2-pattern.svg");
     }
 }

static/images/wedo2/wedo2-pattern.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1300px" height="600px" viewBox="0 0 1300 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>ev3-pattern</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Round-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.1">
+        <g id="EV3-Pattern" fill="#FFFFFF">
+            <path d="M819.238017,24.8817824 C803.785488,75.51947 647.448049,103.204942 644.619335,147.368405 C641.787221,191.535268 803.3979,93.588814 814.957548,119.536719 C826.517196,145.488023 648.05323,276.570675 553.600707,314.888974 C496.68644,337.977202 451.787407,305.347653 517.317011,254.845979 C561.158676,221.060318 540.524705,192.028315 500.184933,211.886232 C459.845162,231.747549 438.381615,180.528405 494.112718,136.75258 C549.843821,92.9801553 836.720285,-32.4239487 819.238017,24.8817824 Z M395.087674,155.266347 C351.810391,219.835179 269.073911,179.554891 321.513914,111.844156 C367.915701,51.9405742 516.956962,-10.1426181 524.239541,23.1975999 C529.587578,47.6833632 446.004523,79.2928142 395.087674,155.266347 Z M39.1807315,24.9450285 C109.633386,-43.4015682 169.145174,-110.013998 211.052298,-107.953399 C254.594772,-105.811192 215.703356,-22.4793488 141.769208,41.4468213 C89.3870027,86.7391929 140.541845,109.722011 190.775315,82.679201 C251.480467,49.9986467 298.800226,71.8661574 220.453011,143.521273 C142.105797,215.17979 23.1434199,267.908679 -41.7470041,254.388974 C-106.634028,240.86927 49.3974204,199.575684 55.5886319,144.878004 C61.6710467,91.1324169 -32.9582717,199.633489 -82.2975692,163.539006 C-130.188511,128.508825 -26.2536759,88.418955 39.1807315,24.9450285 Z M828.757048,228.147622 C820.80129,189.230865 917.905733,66.6150305 1036.98711,34.2881103 C1156.68726,1.79457407 1269.22723,-10.8410455 1274.05509,17.262667 C1278.84894,45.2031639 1202.92925,66.309001 1108.61613,111.526565 C1063.01671,133.387275 1111.26124,151.810254 1140.94574,140.000914 C1239.12795,100.948144 1231.45778,160.627305 1148.56151,202.702966 C1083.78668,235.584139 1028.99735,252.830604 996.538538,260.743168 C949.463572,272.219275 939.651471,241.813541 966.527652,224.655485 C1018.99145,191.162252 993.764223,160.246468 946.801453,186.235176 C917.055759,202.696165 841.629056,291.091097 828.757048,228.147622 Z M784.943602,261.589849 C812.781954,250.446974 820.003334,270.869345 820.003334,287.371138 C820.003334,303.876331 792.161582,310.061528 776.692053,300.778632 C761.222524,291.499136 765.557392,269.345998 784.943602,261.589849 Z M1.53299797,331.980724 C12.1508746,307.406552 131.17785,303.479173 219.687355,224.105311 C251.530785,195.545955 290.564996,230.429922 281.300279,257.200706 C272.038961,283.97149 243.734823,291.027171 199.434172,308.249833 C155.13692,325.475896 211.466405,348.434912 284.557379,313.945383 C326.365906,294.220079 371.162942,327.471888 320.681279,361.716594 C278.485164,390.337156 181.261725,398.542148 183.917044,423.092518 C185.385799,436.727834 255.96425,403.928268 268.78866,433.320705 C279.450735,457.748663 254.186104,485.821772 183.587254,491.520722 C111.662444,497.328483 55.7239478,482.533655 54.8875732,447.200845 C53.9390021,407.199384 138.324432,396.359137 100.408787,383.992144 C62.2823481,371.563944 -17.1800322,375.300905 1.53299797,331.980724 Z M428.731349,246.377801 C442.946316,256.262555 443.388303,268.867572 428.279163,286.35546 C408.692359,309.032249 376.002355,307.978147 366.401047,299.684746 C356.79974,291.391346 378.504679,269.914873 386.790226,257.541079 C395.079174,245.170685 410.429706,233.653773 428.731349,246.377801 Z M427.857916,382.61025 C512.134549,362.463306 559.556305,396.238766 540.68008,419.316793 C520.290901,444.237799 471.485387,444.179993 467.650304,492.971302 C460.483322,584.263314 370.681857,600.418273 408.99869,536.682521 C422.421481,514.352566 402.712281,500.2038 391.159433,528.752956 C384.182846,545.982419 351.098453,569.628301 333.616185,578.370545 C254.269402,618.042174 191.004128,560.403211 247.7552,544.384265 C284.684876,533.962259 317.861065,508.895039 339.05262,451.490699 C350.343676,420.901346 390.839843,391.461305 427.857916,382.61025 Z M176.747342,567.609526 C208.69277,608.450868 110.003975,610.732489 73.5570847,623.000873 C37.1101946,635.269257 112.217307,641.498658 178.290895,640.811792 C244.371283,640.124926 234.372188,690.871424 159.268475,715.731223 C43.8793885,753.920309 -58.9810793,714.262281 29.4366283,688.923036 C62.4122241,679.466723 38.9733379,652.19269 2.37005248,656.12687 C-66.7498427,663.556587 -117.979483,629.441094 -106.348437,602.789322 C-93.2214366,572.710019 -60.7388257,592.958973 -27.8890261,595.20659 C4.96077359,597.457607 -23.4725606,565.2599 -66.0086653,543.08976 C-139.07244,505.009484 -77.9491017,440.240033 -15.2108121,498.793684 C74.1758659,582.220737 152.829071,537.030375 176.747342,567.609526 Z M508.16721,666.620623 C461.000446,762.938319 364.157795,753.475206 377.753981,720.597433 C391.346767,687.719659 335.42527,714.504045 309.521459,708.509266 C283.621048,702.521288 268.260316,657.494142 364.439987,648.826705 C482.936578,638.142874 485.707494,521.256592 525.278889,545.664148 C552.48826,562.441368 525.652878,630.917177 508.16721,666.620623 Z M1215.58503,230.734591 C1294.58502,217.157081 1312.08089,244.359706 1279.19029,266.132008 C1258.79431,279.638111 1179.36933,322.706668 1237.37836,326.926476 C1295.3942,331.146283 1252.15771,386.303007 1184.02719,437.651363 C1115.90006,488.999719 967.059396,516.739596 973.563398,473.436417 C980.0708,430.133237 1155.34226,409.353832 1123.78102,363.653421 C1110.07264,343.802305 1043.03008,426.131051 1013.26739,378.761079 C983.501295,331.391107 1166.06214,239.242212 1215.58503,230.734591 Z M701.404066,311.885124 C726.621098,290.537864 778.190727,321.365239 731.80594,363.668722 C721.069067,373.461667 693.472107,382.839772 709.958205,392.503505 C759.770088,421.698723 911.585665,270.040685 936.700701,319.797688 C948.777133,343.722397 888.228377,397.226561 822.137789,430.651787 C773.349275,455.324569 791.137533,500.528532 863.551928,455.991033 C935.969723,411.450134 948.746534,463.951201 908.631155,498.406727 C868.519177,532.858852 612.234981,652.18657 594.773113,588.416815 C581.183727,538.819628 724.370366,547.905305 706.551509,515.860612 C693.472107,492.347342 593.88914,554.780768 558.639013,514.235255 C524.524452,475.002268 652.224563,449.006759 644.047812,425.483288 C637.591409,406.920897 576.48507,433.076221 575.301906,387.634235 C574.387334,352.413636 640.375924,363.536109 701.404066,311.885124 Z M1055.68348,628.931385 C1071.01361,548.289202 1213.05449,473.111345 1267.55143,452.896394 C1353.30021,421.103326 1442.90109,431.702149 1392.32083,457.714659 C1341.74057,483.733971 1208.78422,569.884686 1277.21733,575.797857 C1310.89671,578.708538 1348.96535,603.694149 1277.21733,662.955069 C1231.67232,700.5763 1072.93795,752.563918 1064.26822,719.32231 C1055.59848,686.080701 1246.35647,628.268321 1187.10648,622.484363 C1127.85648,616.703805 1048.5199,666.641025 1055.68348,628.931385 Z M846.516747,599.985411 C892.799537,576.849578 935.600834,548.830874 984.872134,538.255853 C1049.13018,524.464122 985.752707,611.407114 924.068385,639.612836 C896.440827,652.245055 929.521819,669.08008 956.10561,656.172434 C1028.34661,621.10485 1059.76505,648.04565 985.164525,697.659839 C966.61809,709.99623 909.312835,739.201648 839.730553,748.12411 C769.488692,757.134979 771.314437,731.275483 793.049975,721.581148 C824.308623,707.643202 845.721171,677.424486 761.913723,702.947349 C612.100685,748.569553 523.356588,740.973219 557.460949,702.947349 C589.314579,667.437722 696.703709,674.867439 846.516747,599.985411 Z" id="ev3-pattern"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file