feat: add Scratch Link 1.4 link for EV3 troubleshooting

Plus lots of minor style changes to make it fit well.

src/components/extension-landing/install-scratch-link.jsx

@@ -11,7 +11,9 @@ require('./extension-landing.scss');
 
 // Assumes this will only be called with an OS that needs Scratch Link
 const InstallScratchLink = ({
-    currentOS
+    currentOS,
+    hideScratchLink,
+    showEv3
 }) => (
     <div className="blue install-scratch-link">
         <FlexRow className="inner column">
@@ -65,7 +67,7 @@ const InstallScratchLink = ({
                             }`}
                         />
                     </span>
-                    <div className="step-image">
+                    <span className="step-image">
                         <img
                             alt=""
                             className="screenshot"
@@ -73,20 +75,18 @@ const InstallScratchLink = ({
                                 currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
                             }-toolbar.png`}
                         />
-                    </div>
-                    <p className="step-description">
-                        <FormattedMessage
-                            id={`installScratchLink.startScratchLink2.${
-                                currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
-                            }`}
-                        />
-                    </p>
+                    </span>
+                    <p className="step-description"><FormattedMessage
+                        id={`installScratchLink.startScratchLink2.${
+                            currentOS === OS_ENUM.WINDOWS ? 'Windows' : 'macOS'
+                        }`}
+                    /></p>
                 </Step>
-                <Step
+                {(showEv3 || !hideScratchLink) && <Step
                     compact
                     number={3}
                 >
-                    <span className="step-description">
+                    {!hideScratchLink && <span className="step-description">
                         <FormattedMessage
                             id="installScratchLink.learnMore.bodyText"
                             values={{
@@ -101,15 +101,25 @@ const InstallScratchLink = ({
                                 )
                             }}
                         />
-                    </span>
-                </Step>
+                    </span>}
+                    {showEv3 && <span className="step-description">
+                        <FormattedMessage id="installScratchLink.ev3Workaround" />
+                        <div ><a
+                            href={`https://downloads.scratch.mit.edu/link/scratch-link-${
+                                currentOS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
+                            }-1.4.3.zip`}
+                        ><FormattedMessage id="installScratchLink.downloadScratchLink1.4" /></a></div>
+                    </span>}
+                </Step>}
             </Steps>
         </FlexRow>
     </div>
 );
 
 InstallScratchLink.propTypes = {
-    currentOS: PropTypes.string
+    currentOS: PropTypes.string.isRequired,
+    hideScratchLink: PropTypes.bool,
+    showEv3: PropTypes.bool
 };
 
 module.exports = InstallScratchLink;

src/components/steps/steps.scss

@@ -48,11 +48,12 @@
         box-sizing: border-box;
 
         .step-image {
-            height: 10rem;
+            max-height: 10rem;
 
             img {
-                width: auto;
-                height: 100%;
+                max-height: 10rem;
+                width: 100%;
+                height: auto;
             }
         }
     }

src/l10n.json

@@ -173,6 +173,8 @@
     "installScratchLink.startScratchLink2.Windows": "If it does not appear, run Scratch Link from your Start menu.",
     "installScratchLink.learnMore.bodyText": "To learn more about Scratch Link, click {linkText}.",
     "installScratchLink.learnMore.linkText": "here",
+    "installScratchLink.ev3Workaround": "If you have issues connecting EV3 with Scratch Link 2.0, please try Scratch Link 1.4.",
+    "installScratchLink.downloadScratchLink1.4": "Direct download Scratch Link 1.4",
 
     "parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
     "parents.FaqAgeRangeQ": "What is the age range for Scratch?",

src/views/download/scratch-link/download.jsx

@@ -57,6 +57,7 @@ const ScratchLink = ({intl}) => {
             />
             {(isDownloaded(os)) && (
                 <InstallScratchLink
+                    hideScratchLink
                     currentOS={os}
                 />
             )}

src/views/ev3/ev3.jsx

@@ -73,6 +73,7 @@ class EV3 extends ExtensionLanding {
                 />
                 {(isDownloaded(this.state.OS)) && (
                     <InstallScratchLink
+                        showEv3
                         currentOS={this.state.OS}
                     />
                 )}