From 9b539e9951dae79b61439e7798c2cb799bc69383 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Wed, 22 Aug 2018 13:30:02 +0200
Subject: [PATCH] UX update for buttons for plugin tab

---
 src/app/tabs/settings-tab.js              | 41 ++++++++++++++++++++---
 src/app/ui/styles-guide/style-guide.js    |  5 +++
 src/app/ui/styles-guide/styleGuideDark.js | 12 +++++++
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index 4978d7e8f51..a1bd4d0dcbd 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -7,7 +7,6 @@ var globalRegistry = require('../../global/registry')
 var tooltip = require('../ui/tooltip')
 var copyToClipboard = require('../ui/copy-to-clipboard')
 var styleGuide = require('../ui/styles-guide/theme-chooser')
-
 var styles = styleGuide.chooser()
 var Storage = remixLib.Storage
 var EventManager = remixLib.EventManager
@@ -117,12 +116,12 @@ module.exports = class SettingsTab {
         <div class="${css.crowNoFlex}">
           <div>Load plugin from JSON description: </div>
           ${self._view.pluginInput}
-          <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.pluginLoad}">
+          <input onclick=${onloadPluginJson} type="button" value="Load" class="${css.initPlugin}">
           ${self._view.config.plugins}
         </div>
       </div>`
     self._view.el = yo`
-      <div class="${css.settingsTabView} "id="settingsView">
+      <div class="${css.settingsTabView}" id="settingsView">
         ${self._view.config.general}
         ${self._view.config.plugin}
         ${self._view.gistToken}
@@ -135,8 +134,8 @@ module.exports = class SettingsTab {
         if (!self._view.plugins[plugin.title]) self._view.plugins[plugin.title] = {}
         self._view.plugins[plugin.title].json = plugin
         self._view.plugins[plugin.title].el = yo`<div class="${css.pluginLoad}">
-        <div style="display: inline-block" onclick=${() => { onLoadPlugin(plugin.title) }}>${plugin.title}</div>
-        ${opt.removable ? yo`<span class="removePlugin" onclick=${() => { onRemovePlugin(plugin.title) }}><i class="fa fa-close"></i></span>` : yo`<span></span>`}
+        <div class="${css.aPlugin}" onclick=${() => { onLoadPlugin(plugin.title) }}>${plugin.title}</div>
+        ${opt.removable ? yo`<span class="${css.removePlugin}" onclick=${() => { onRemovePlugin(plugin.title) }}><i class="fa fa-close"></i></span>` : yo`<span></span>`}
         </div>`
         self._view.config.plugins.appendChild(self._view.plugins[plugin.title].el)
       }
@@ -255,6 +254,15 @@ const css = csjs`
     width: inherit;
     display: inline-block;
   }
+  .initPlugin {
+    vertical-align: top;
+    ${styles.rightPanel.settingsTab.button_initPlugin};
+    width: inherit;
+    display: block;
+    max-height: inherit;
+    padding:7px;
+  }
+
   .removePlugin {
     cursor: pointer;
   }
@@ -267,4 +275,27 @@ const css = csjs`
   .savegisttoken {
     margin-left: 5px;
   }
+  .aPlugin {
+    display: inline-block;
+    padding-left: 10px;
+    padding-top: 4px;
+    padding-bottom: 6px;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .pluginLoad {
+    vertical-align: top;
+    max-height: inherit;
+    margin: 2px;
+
+  }
+  .removePlugin{
+    padding-left: 7px;
+    padding-right: 7px;
+    border-left: 2px solid ${styles.appProperties.primary_BackgroundColor};
+    margin-left: 10px;
+  }
 `
diff --git a/src/app/ui/styles-guide/style-guide.js b/src/app/ui/styles-guide/style-guide.js
index 07e9899e728..9c8a1ea8d58 100644
--- a/src/app/ui/styles-guide/style-guide.js
+++ b/src/app/ui/styles-guide/style-guide.js
@@ -701,6 +701,11 @@ function styleGuide () {
           BackgroundColor: appProperties.secondaryButton_BackgroundColor,
           BorderColor: appProperties.secondaryButton_BorderColor,
           Color: appProperties.secondaryButton_TextColor
+        }),
+        button_initPlugin: appProperties.uiElements.button({
+          BackgroundColor: appProperties.transactButton_BackgroundColor,
+          BorderColor: appProperties.transactButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
         })
       },
 
diff --git a/src/app/ui/styles-guide/styleGuideDark.js b/src/app/ui/styles-guide/styleGuideDark.js
index 8e2ca1aa3bb..adc48801f65 100644
--- a/src/app/ui/styles-guide/styleGuideDark.js
+++ b/src/app/ui/styles-guide/styleGuideDark.js
@@ -684,6 +684,18 @@ function styleGuideDark () {
           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
+        }),
+
+        button_initPlugin: appProperties.uiElements.button({
+          BackgroundColor: appProperties.transactButton_BackgroundColor,
+          BorderColor: appProperties.transactButton_BorderColor,
+          Color: appProperties.secondaryButton_TextColor
         })
 
       },