From 73ba8b9b981b8d8d83934004faa29cf28b7b4248 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Wed, 8 May 2019 17:21:47 +0200
Subject: [PATCH] paddings and margins for swap tabs

---
 src/app/staticanalysis/staticAnalysisView.js             | 5 ++---
 .../staticanalysis/styles/staticAnalysisView-styles.js   | 3 +++
 src/app/tabs/run-tab.js                                  | 2 +-
 src/app/tabs/runTab/settings.js                          | 2 +-
 src/app/tabs/styles/run-tab-styles.js                    | 1 +
 src/app/tabs/styles/test-tab-styles.js                   | 7 ++++---
 src/app/tabs/test-tab.js                                 | 9 +++++----
 7 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index bc5b97bb0b..e31422988c 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/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) {
diff --git a/src/app/staticanalysis/styles/staticAnalysisView-styles.js b/src/app/staticanalysis/styles/staticAnalysisView-styles.js
index 83bcba1029..710e7b149c 100644
--- a/src/app/staticanalysis/styles/staticAnalysisView-styles.js
+++ b/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;
   }
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 660333bbd4..b0f18b5665 100644
--- a/src/app/tabs/run-tab.js
+++ b/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">
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index 75800beb17..18459fb070 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/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>
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index 2fb74264c4..f94e12ce37 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/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;
   }
 `
 
diff --git a/src/app/tabs/styles/test-tab-styles.js b/src/app/tabs/styles/test-tab-styles.js
index ca05bd7eb6..72129aae03 100644
--- a/src/app/tabs/styles/test-tab-styles.js
+++ b/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 {
diff --git a/src/app/tabs/test-tab.js b/src/app/tabs/test-tab.js
index af03776263..2b3bf72dad 100644
--- a/src/app/tabs/test-tab.js
+++ b/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) }}"