bootstrap update for compile tab

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="input-group">
-          <div class="btn-group" role="group" aria-label="Copy to clipboard">
+            <div class="input-group-prepend">
-            <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
+              <span class="input-group-text">Copy to clipboard</span>
-              <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+            </div>
-              <span>ABI</span>
+            <div class="btn-group" role="group" aria-label="Copy to Clipboard">
-            </button>
+              <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
-            <button class="btn btn-secondary" title="Copy Bytecode to clipboard" onclick="${() => { this.copyBytecode() }}">
+                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
-              <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <span>ABI</span>
-              <span>Bytecode</span>
+              </button>
-            </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()

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}

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); }