Merge pull request #1836 from ethereum/swap_it_style_fixes_l

src/app/files/remixd-handle.js

 import { ApiFactory } from 'remix-plugin'
+let globalRegistry = require('../../global/registry')
 
 var yo = require('yo-yo')
 var modalDialog = require('../ui/modaldialog')
+var modalDialogCustom = require('../ui/modal-dialog-custom')
 
 var csjs = require('csjs-inject')
 
@@ -43,6 +45,11 @@ export class RemixdHandle extends ApiFactory {
     this.connectToLocalhost()
   }
 
+  canceled () {
+    let appManager = globalRegistry.get('appmanager').api
+    appManager.ensureDeactivated('remixd')
+  }
+
   /**
     * connect to localhost if no connection and render the explorer
     * disconnect from localhost if connected and remove the explorer
@@ -55,17 +62,30 @@ export class RemixdHandle extends ApiFactory {
         if (error) console.log(error)
       })
     } else {
-      modalDialog('Connect to localhost', remixdDialog(),
+      modalDialog(
+        'Connect to localhost',
+        remixdDialog(),
         { label: 'Connect',
           fn: () => {
             this.locahostProvider.init((error) => {
               if (error) {
                 console.log(error)
+                modalDialogCustom.alert(
+                  'Cannot connect to the remixd daemon.' +
+                  'Please make sure you have the remixd running in the background.'
+                )
+                this.canceled()
               } else {
                 this.fileSystemExplorer.ensureRoot()
               }
             })
-          }}
+          }
+        },
+        { label: 'Cancel',
+          fn: () => {
+            this.canceled()
+          }
+        }
       )
     }
   }

src/app/ui/landing-page/section.js

@@ -7,6 +7,7 @@ var css = csjs`
     font-weight: normal;
     max-width: 300px;
     user-select: none;
+    padding-left: 14px;
   }
   .text:hover {
     font-weight: bold;
@@ -16,6 +17,7 @@ var css = csjs`
     font-weight: normal;
     text-decoration : none;
     user-select: none;
+    padding-left: 14px;
   }
   .link:hover {
     font-weight: bold;
@@ -40,7 +42,7 @@ class Section {
       if (this.actions[i].type === `callback`) {
         sectionLook.appendChild(yo`
           <div>
-            <span class="${css.text} p-3 h6 text-dark" onclick=${this.actions[i].payload} >
+            <span class="${css.text} h6 text-dark" onclick=${this.actions[i].payload} >
               ${this.actions[i].label}
             </span>
           </div>
@@ -48,7 +50,7 @@ class Section {
       } else if (this.actions[i].type === `link`) {
         sectionLook.appendChild(yo`
           <div >
-            <a class="${css.link} text-dark p-3 h6 text-decoration-none" href=${this.actions[i].payload} target="_blank" >
+            <a class="${css.link} text-dark h6 text-decoration-none" href=${this.actions[i].payload} target="_blank" >
               ${this.actions[i].label}
             </a>
           </div>

src/remixAppManager.js

@@ -21,6 +21,11 @@ export class RemixAppManager extends AppManagerApi {
     this.event.emit('ensureActivated', apiName)
   }
 
+  ensureDeactivated (apiName) {
+    if (this.store.isActive(apiName)) this.deactivateOne(apiName)
+    this.event.emit('ensureDeactivated', apiName)
+  }
+
   proxy () {
     // that's temporary. should be removed when we can have proper notification registration
     return this.data.proxy