Merge pull request #1802 from ethereum/bootstrap_compiletab_tighten

Bootstrap compiletab tighten

src/app/tabs/compile-tab.js

@@ -161,7 +161,7 @@ class CompileTab extends ApiFactory {
    */
   contractSelection (contractList = []) {
     return contractList.length !== 0
-    ? yo`<section class="${css.container}">
+    ? yo`<section class="${css.container} clearfix">
       <!-- Select Compiler Version -->
       <header class="navbar navbar-light bg-light input-group mb-3 ${css.compilerArticle}">
         <div class="input-group-prepend">
@@ -181,21 +181,25 @@ 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>
     </section>`
-    : yo`<section class="${css.container}"><article class="${css.compilerArticle}">
+    : yo`<section class="${css.container} clearfix"><article class="${css.compilerArticle}">
       <span class="alert alert-warning" role="alert">No Contract Compiled Yet</span>
     </article></section>`
   }
@@ -347,7 +351,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

@@ -149,7 +149,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); }