Update version requirements

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

@@ -8,23 +8,21 @@ require('./extension-landing.scss');
 const ExtensionHeader = props => (
     <div className="extension-header">
         <FlexRow className="inner">
-            <FlexRow className="column extension-info">
+            <FlexRow className="extension-info">
-                {props.children}
+                {props.renderCopy}
-            </FlexRow>
                 <div className="extension-image">
-                <img
+                    {props.renderImage}
-                    alt={props.imageAlt}
-                    src={props.imageSrc}
-                />
                 </div>
             </FlexRow>
+            {props.renderRequirements}
+        </FlexRow>
     </div>
 );
 
 ExtensionHeader.propTypes = {
-    children: PropTypes.node,
+    renderCopy: PropTypes.node,
-    imageAlt: PropTypes.string,
+    renderImage: PropTypes.node,
-    imageSrc: PropTypes.string
+    renderRequirements: PropTypes.node
 };
 
 module.exports = ExtensionHeader;

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

@@ -79,15 +79,20 @@
         .inner {
             justify-content: space-between;
             flex-wrap: nowrap;
+            flex-direction: column;
+            align-items: flex-start;
         }
 
         .extension-info {
-            max-width: $cols7;
+            flex-wrap: nowrap;
-            align-items: flex-start;
+            flex-direction: row;
+            margin-bottom: 5rem;
 
             .extension-copy {
-                margin-bottom: 5rem;
                 align-items: flex-start;
+                justify-content: start;
+                max-width: $cols7;
+                padding-right: 3.75em;
 
                 h1, h2 {
                     display: flex;
@@ -109,6 +114,16 @@
                     color: $ui-white;
                 }
             }
+        }
+
+        .extension-image {
+            margin-top: auto;
+
+            img {
+                max-width: $cols5;
+                max-height: $cols3;
+            }
+        }
 
         .extension-requirements-container {
             font-weight: 500;
@@ -135,18 +150,6 @@
         }
     }
 
-        .extension-image {
-            width: 100%;
-            max-width: $cols5;
-
-            img {
-                max-width: 100%;
-                max-height: 100%;
-            }
-
-        }
-    }
-
     .os-chooser {
         padding: 0;
     }

src/views/ev3/ev3.jsx

@@ -32,9 +32,7 @@ class EV3 extends ExtensionLanding {
         return (
             <div className="extension-landing ev3">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
+                    renderCopy={
-                    imageSrc="/images/ev3/ev3-illustration.png"
-                >
                         <FlexRow className="column extension-copy">
                             <h1><img
                                 alt=""
@@ -55,6 +53,12 @@ class EV3 extends ExtensionLanding {
                                 }}
                             />
                         </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'ev3.imgAltEv3Illustration'})}
+                        src="/images/ev3/ev3-illustration.png"
+                    />}
+                    renderRequirements={
                         <ExtensionRequirements>
                             <span>
                                 <img
@@ -82,7 +86,8 @@ class EV3 extends ExtensionLanding {
                                             Scratch Link
                             </span>
                         </ExtensionRequirements>
-                </ExtensionHeader>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}

src/views/microbit/microbit.jsx

@@ -27,15 +27,12 @@ require('../../components/extension-landing/extension-landing.scss');
 require('./microbit.scss');
 
 class MicroBit extends ExtensionLanding {
-
     render () {
         return (
             <div className="extension-landing microbit">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
+                    renderCopy={
-                    imageSrc="/images/microbit/microbit-heart.png"
+                        <FlexRow className="extension-copy">
-                >
-                    <FlexRow className="column extension-copy">
                             <h1><img
                                 alt=""
                                 src="/images/microbit/microbit.svg"
@@ -55,6 +52,12 @@ class MicroBit extends ExtensionLanding {
                                 }}
                             />
                         </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'microbit.imgAltMicrobitIllustration'})}
+                        src="/images/microbit/microbit-heart.png"
+                    />}
+                    renderRequirements={
                         <ExtensionRequirements>
                             <span>
                                 <img
@@ -85,7 +88,8 @@ class MicroBit extends ExtensionLanding {
                                             Scratch Link
                             </span>
                         </ExtensionRequirements>
-                </ExtensionHeader>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}

src/views/microbit/microbit.scss

@@ -5,15 +5,6 @@
     .extension-header {
         background-color: $ui-mint-green;
         background-image: url("/images/microbit/mbit-pattern.svg");
-
-        .extension-info {
-            padding-right: $cols1;
-            max-width: $cols7 + ($gutter / $em);
-        }
-
-        .extension-image {
-            max-width: $cols4;
-        }
     }
 
     .things-to-try {

src/views/wedo2/wedo2.jsx

@@ -29,10 +29,8 @@ class Wedo2 extends ExtensionLanding {
         return (
             <div className="extension-landing wedo2">
                 <ExtensionHeader
-                    imageAlt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
+                    renderCopy={
-                    imageSrc="/images/wedo2/wedo2-illustration.png"
+                        <FlexRow className="extension-copy">
-                >
-                    <FlexRow className="column extension-copy">
                             <h1><img
                                 alt=""
                                 src="/images/wedo2/wedo2.svg"
@@ -52,6 +50,12 @@ class Wedo2 extends ExtensionLanding {
                                 }}
                             />
                         </FlexRow>
+                    }
+                    renderImage={<img
+                        alt={this.props.intl.formatMessage({id: 'wedo2.imgAltWeDoIllustration'})}
+                        src="/images/wedo2/wedo2-illustration.png"
+                    />}
+                    renderRequirements={
                         <ExtensionRequirements>
                             <span>
                                 <img
@@ -72,7 +76,7 @@ class Wedo2 extends ExtensionLanding {
                                     alt=""
                                     src="/svgs/extensions/bluetooth.svg"
                                 />
-                                        Bluetooth
+                                            Bluetooth 4.0
                             </span>
                             <span>
                                 <img
@@ -82,7 +86,8 @@ class Wedo2 extends ExtensionLanding {
                                             Scratch Link
                             </span>
                         </ExtensionRequirements>
-                </ExtensionHeader>
+                    }
+                />
                 <OSChooser
                     currentOS={this.state.OS}
                     handleSetOS={this.onSetOS}