Merge pull request #1946 from ethereum/master_l

paddings and margins for swap tabs

src/app/staticanalysis/staticAnalysisView.js

@@ -68,9 +68,8 @@ staticAnalysisView.prototype.render = function () {
         <div id="staticanalysismodules" class="list-group list-group-flush ${css.container}">
           ${this.modulesView}
         </div>
-        <hr>
-        <div><h6>Results:</h6></div>
-        <div class="${css.result}" id='staticanalysisresult'></div>
+        <div class="${css.resultTitle} mx-2"><h6>Results:</h6></div>
+        <div class="${css.result} m-2" id='staticanalysisresult'></div>
     </div>
   `
   if (!this.view) {

src/app/staticanalysis/styles/staticAnalysisView-styles.js

@@ -9,6 +9,9 @@ var css = csjs`
     margin-top: 1%;
     max-height: 300px;
   }
+  .resultTitle {
+    padding-top: 20px;
+  }
   .buttons  {
     margin: 1rem 0;
   }

src/app/tabs/run-tab.js

@@ -44,7 +44,7 @@ class RunTab extends BaseApi {
   }
 
   renderContainer () {
-    this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
+    this.container = yo`<div class="${css.runTabView} p-3" id="runTabView" ></div>`
 
     var el = yo`
     <div class="list-group list-group-flush">

src/app/tabs/runTab/settings.js

@@ -109,7 +109,7 @@ class SettingsUI {
         <div class="${css.col1_1}">Value</div>
         <div class="${css.gasValueContainer}">
           <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
-          <select name="unit" class="form-control ${css.gasNvalUnit} ${css.col2_2}" id="unit">
+          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit">
             <option data-unit="wei">wei</option>
             <option data-unit="gwei">gwei</option>
             <option data-unit="finney">finney</option>

src/app/tabs/styles/run-tab-styles.js

@@ -236,6 +236,7 @@ var css = csjs`
     /* transform-origin: left; */
     margin-right: 10px;
     font-size: 0.8rem;
+    width: 70px;
   }
 `
 

src/app/tabs/styles/test-tab-styles.js

@@ -3,14 +3,14 @@ var csjs = require('csjs-inject')
 var css = csjs`
   .testTabView {}
   .infoBox  {
-    margin: 2%;
+    margin: 5%;
   }
   .tests {}
   .testList {
     line-height: 2em;
     display: flex;
     flex-direction: column;
-    margin: 2%;
+    margin: 5%;
     max-height: 300px;
     overflow-y: auto;
 
@@ -40,13 +40,14 @@ var css = csjs`
   .testFailureSummary {
   }
   .buttons {
-    margin: 2%;
+    margin: 5%;
     display: flex;
     align-items: center;
   }
   .runButton {
   }
   .generateTestFile {
+    margin-top: 20px;
     min-width: 100px
   }
   .title {

src/app/tabs/test-tab.js

@@ -160,7 +160,7 @@ module.exports = class TestTab extends BaseApi {
   }
 
   render () {
-    this.testsOutput = yo`<div class="${css.container} border border-primary border-right-0 border-left-0 border-bottom-0"  hidden='true' id="tests"></div>`
+    this.testsOutput = yo`<div class="${css.container} m-3 border border-primary border-right-0 border-left-0 border-bottom-0"  hidden='true' id="tests"></div>`
     this.testsSummary = yo`<div class="${css.container} border border-primary border-right-0 border-left-0 border-bottom-0" hidden='true' id="tests"></div>`
     this.loading = yo`<span class='text-info ml-1'>Running tests...</span>`
     this.loading.hidden = true
@@ -175,12 +175,13 @@ module.exports = class TestTab extends BaseApi {
           <br/>
           For more details, see
           How to test smart contracts guide in our documentation.
-          <div class="${css.generateTestFile} btn btn-primary m-1" onclick="${this.testTabLogic.generateTestFile.bind(this.testTabLogic)}">Generate test file</div>
+          <br/>
+          <div class="${css.generateTestFile} btn btn-secondary" onclick="${this.testTabLogic.generateTestFile.bind(this.testTabLogic)}">Generate test file</div>
         </div>
         <div class="${css.tests}">          
           <div class="${css.buttons}">
-            <div class="${css.runButton} btn btn-primary m-1"  onclick="${this.runTests.bind(this)}">Run Tests</div>
-            <label class="${css.label}" for="checkAllTests">
+            <div class="${css.runButton} btn btn-primary"  onclick="${this.runTests.bind(this)}">Run Tests</div>
+            <label class="${css.label} mx-4 m-2" for="checkAllTests">
               <input id="checkAllTests"
                 type="checkbox"
                 onclick="${(event) => { this.checkAll(event) }}"