From 9147cb98c2dd5275f0185cd8d528df04c98641c3 Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <16690124+samelhusseini@users.noreply.github.com>
Date: Mon, 9 Apr 2018 17:20:38 -0700
Subject: [PATCH] Updates to the download dialog. Fixes #424 (#443)

* Updates to the download dialog. Fixes #424
---
 docs/troubleshoot.md |  0
 editor/extension.ts  | 27 +++++++--------------------
 theme/style.less     |  6 ++++++
 3 files changed, 13 insertions(+), 20 deletions(-)
 create mode 100644 docs/troubleshoot.md

diff --git a/docs/troubleshoot.md b/docs/troubleshoot.md
new file mode 100644
index 00000000..e69de29b
diff --git a/editor/extension.ts b/editor/extension.ts
index 957a41da..62ca5ce9 100644
--- a/editor/extension.ts
+++ b/editor/extension.ts
@@ -51,7 +51,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
             const saveAs = pxt.BrowserUtils.hasSaveAs();
 
             const htmlBody = `
-            <div class="ui three column grid stackable">
+            <div class="ui two column grid stackable">
                 <div class="column">
                     <div class="ui">
                         <div class="image">
@@ -67,21 +67,6 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                         </div>
                     </div>
                 </div>
-                <div class="column">
-                    <div class="ui">
-                        <div class="image">
-                            <img class="ui medium rounded image" src="./static/download/firmware.svg" style="height:109px;width:261px;margin-bottom:1rem;">
-                        </div>
-                        <div class="content">
-                            <div class="description">
-                                <span class="ui blue circular label">2</span>
-                                <strong>${lf("Make sure you have the latest EV3 firmware")}</strong>
-                                <br/>
-                                <a href="https://ev3manager.education.lego.com/" target="_blank">${lf("Click here to update to latest firmware")}</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
                 <div class="column">
                     <div class="ui">
                         <div class="image">
@@ -89,9 +74,7 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                         </div>
                         <div class="content">
                             <div class="description">
-                                <span class="ui blue circular label">3</span>
-                                ${lf("Move the .uf2 file to EV3 brick")}
-                                <br/>
+                                <span class="ui blue circular label">2</span>
                                 ${lf("Locate the downloaded .uf2 file and drag it to the EV3 drive")}
                             </div>
                         </div>
@@ -106,7 +89,11 @@ pxt.editor.initExtensionsAsync = function (opts: pxt.editor.ExtensionOptions): P
                 hideCancel: true,
                 hideAgree: false,
                 agreeLbl: lf("I got it"),
-                buttons: [downloadAgain ? {
+                buttons: [{
+                    label: lf("I don't see the EV3 drive"),
+                    url: '/troubleshoot',
+                    class: 'troubleshoot left floated'
+                }, downloadAgain ? {
                     label: fn,
                     icon: "download",
                     class: "lightgrey focused",
diff --git a/theme/style.less b/theme/style.less
index 8accbcfe..3aca7faf 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -109,6 +109,12 @@
     background: @legoGreyLight;
 }
 
+/* Editor download dialog */
+.ui.button.troubleshoot {
+    background: none !important;
+    color: @blue;
+}
+
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
     #filelist {