From 20cfeb6f7ead4151d4a9de570d339bcc4dab41b2 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Mon, 1 Apr 2019 16:16:28 +0200
Subject: [PATCH] bootstrap update for compile tab

---
 src/app/tabs/compile-tab.js                  | 26 +++++++++++---------
 src/app/tabs/compileTab/compilerContainer.js |  2 +-
 src/app/tabs/styles/compile-tab-styles.js    |  9 ++++++-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 764a0442b6..c955bc6ca4 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -175,16 +175,20 @@ class CompileTab extends ApiFactory {
         </button>
         <!-- Copy to Clipboard -->
         <div class="${css.contractHelperButtons}">
-          <span class="${css.copyToClipboard}">Copy to Clipboard : </span>
-          <div class="btn-group" role="group" aria-label="Copy to clipboard">
-            <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
-              <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
-              <span>ABI</span>
-            </button>
-            <button class="btn btn-secondary" title="Copy Bytecode to clipboard" onclick="${() => { this.copyBytecode() }}">
-              <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
-              <span>Bytecode</span>
-            </button>
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text">Copy to clipboard</span>
+            </div>
+            <div class="btn-group" role="group" aria-label="Copy to Clipboard">
+              <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
+                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <span>ABI</span>
+              </button>
+              <button class="btn btn-secondary" title="Copy Bytecode to clipboard" onclick="${() => { this.copyBytecode() }}">
+                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <span>Bytecode</span>
+              </button>
+            </div>
           </div>
         </div>
       </article>
@@ -338,7 +342,7 @@ class CompileTab extends ApiFactory {
     this.listenToEvents()
     this.compilerContainer.activate()
 
-    this._view.errorContainer = yo`<div></div>`
+    this._view.errorContainer = yo`<div class="${css.errorBlobs}"></div>`
     this._view.contractSelection = this.contractSelection()
     this._view.compilerContainer = this.compilerContainer.render()
     const currentFile = this.fileManager.currentFile()
diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js
index be198ed735..6a1df485d8 100644
--- a/src/app/tabs/compileTab/compilerContainer.js
+++ b/src/app/tabs/compileTab/compilerContainer.js
@@ -143,7 +143,7 @@ class CompilerContainer {
         </article>
         <!-- Config -->
         <article>
-          <small>Compiler Configuration</small>
+          <small class="${css.compilerSm}">Compiler Configuration</small>
           <ul class="list-group list-group-flush">
             <li class="list-group-item form-group ${css.compilerConfig}">
               ${this._view.autoCompile}
diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js
index 41dc0aa911..d14ca2df52 100644
--- a/src/app/tabs/styles/compile-tab-styles.js
+++ b/src/app/tabs/styles/compile-tab-styles.js
@@ -67,6 +67,9 @@ const css = csjs`
   .compilerConfig label {
     margin: 0;
   }
+  .compilerSm {
+    padding-left: 1.25rem;
+  }
   .name {
     display: flex;
   }
@@ -99,9 +102,9 @@ const css = csjs`
   .contractHelperButtons {
     margin-top: 10px;
     display: flex;
-    cursor: pointer;
     align-items: center;
     justify-content: space-between;
+    float: right;
   }
   .copyToClipboard {
     font-size: 1rem;
@@ -146,6 +149,10 @@ const css = csjs`
     margin-right: .3em;
     animation: bounce 2s infinite;
   }
+  .errorBlobs {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }