From d4dad9ae08e80143a8f2ba1a7b45cf220eee65e6 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Mon, 23 Jul 2018 15:05:07 +0200
Subject: [PATCH] load plugin

---
 src/app/tabs/settings-tab.js           | 17 ++++++++++-------
 src/app/ui/styles-guide/style-guide.js |  7 ++++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index f051ebc886..24cb2f8814 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -150,12 +150,11 @@ module.exports = class SettingsTab {
       <div class="${css.info}">
         <div class=${css.title}>Plugin</div>
         <div class="${css.crowNoFlex}">
-          <div><input onclick=${() => { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}"></div>
-          <div><input onclick=${() => { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}"></div>
-          <div>
-            ${self._view.pluginInput}
-            <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}">
-          </div>
+          <input onclick=${() => { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}">
+          <input onclick=${() => { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}">
+          <div>Load plugin from JSON description: </div>
+          ${self._view.pluginInput}
+          <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}">
         </div>
       </div>`
     self._view.config.remixd = yo`
@@ -331,7 +330,7 @@ const css = csjs`
   .select {
     font-weight: bold;
     margin-top: 1em;
-    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler};
   }
   .heading {
     margin-bottom: 0;
@@ -343,6 +342,7 @@ const css = csjs`
   input {
     margin-right: 5px;
     cursor: pointer;
+    width: inherit;
   }
   input[type=radio] {
     margin-top: 2px;
@@ -352,6 +352,9 @@ const css = csjs`
   }
   .pluginLoad {
     vertical-align: top;
+    ${styles.rightPanel.settingsTab.button_LoadPlugin};
+    width: inherit;
+    display: inline-block;
   }
   i.warnIt {
     color: ${styles.appProperties.warningText_Color};
diff --git a/src/app/ui/styles-guide/style-guide.js b/src/app/ui/styles-guide/style-guide.js
index 7c2874a428..0833b364b0 100644
--- a/src/app/ui/styles-guide/style-guide.js
+++ b/src/app/ui/styles-guide/style-guide.js
@@ -688,8 +688,13 @@ function styleGuide () {
           BackgroundColor: appProperties.dropdown_BackgroundColor,
           BorderColor: appProperties.dropdown_BorderColor,
           Color: appProperties.dropdown_TextColor
-        })
+        }),
 
+        button_LoadPlugin: appProperties.uiElements.button({
+          BackgroundColor: appProperties.secondaryButton_BackgroundColor,
+          BorderColor: appProperties.secondaryButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
+        })
       },
 
       /* ::::::::::::::