compile tab resizing

src/app/tabs/compile-tab.js

@@ -181,7 +181,7 @@ class CompileTab extends CompilerApi {
           Compilation Details
         </button>
         <!-- Copy to Clipboard -->
-        <div class="${css.contractHelperButtons}">
+        <div class="${css.contractHelperButtons} btn-secondary">
           <div class="input-group">
             <div class="input-group-prepend">
               <span class="input-group-text">Copy to clipboard</span>

src/app/tabs/compileTab/compilerContainer.js

@@ -141,7 +141,7 @@ class CompilerContainer {
         <article>
           <header class="navbar navbar-light bg-light input-group mb-3">
             <div class="input-group-prepend">
-              <label class="input-group-text" for="versionSelector">Compiler</label>
+              <label class="input-group-text border-0" for="versionSelector">Compiler</label>
             </div>
             ${this._view.versionSelector}
           </header>

src/app/tabs/runTab/contractDropdown.js

@@ -61,14 +61,15 @@ class ContractDropdownUI {
           ${this.createPanel}
           ${this.orLabel}
           <div class="${css.button} ${css.atAddressSect}">
-            <div class="${css.atAddress} btn btn-sm btn-info" onclick=${this.loadFromAddress.bind(this)}>At Address</div>
+            <div class="${css.atAddress} btn btn-sm btn-primary" onclick=${this.loadFromAddress.bind(this)}>At Address</div>
             ${this.atAddressButtonInput}
           </div>
         </div>
       </div>
     `
     this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
-
+    
+    this.setInputParamsPlaceHolder()
     return el
   }
 
@@ -88,7 +89,7 @@ class ContractDropdownUI {
       this.orLabel.style.display = 'block'
     }
   }
-
+  
   setInputParamsPlaceHolder () {
     this.createPanel.innerHTML = ''
     if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) {

src/app/tabs/runTab/settings.js

@@ -93,13 +93,15 @@ class SettingsUI {
     var valueEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">Value</div>
-        <input type="text" class="form-control ${css.gasNval} ${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
-        <select name="unit" class="form-control ${css.gasNval} ${css.col2_2}" id="unit">
-          <option data-unit="wei">wei</option>
-          <option data-unit="gwei">gwei</option>
-          <option data-unit="finney">finney</option>
-          <option data-unit="ether">ether</option>
-        </select>
+        <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">
+            <option data-unit="wei">wei</option>
+            <option data-unit="gwei">gwei</option>
+            <option data-unit="finney">finney</option>
+            <option data-unit="ether">ether</option>
+          </select>
+        </div>
       </div>
     `
 

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

@@ -16,7 +16,7 @@ var css = csjs`
   }
   .settings {
     margin-bottom: 2%;
-    padding: 10px 15px 15px 15px;
+    padding: 10px 0px 15px 15px;
   }
   .recorderCount {
     /* margin-right: 30px; */
@@ -39,7 +39,6 @@ var css = csjs`
   }
   .col1_1 {
     font-size: 12px;
-    width: 15%;
     min-width: 75px;
     float: left;
     align-self: center;
@@ -48,12 +47,13 @@ var css = csjs`
     display: flex;
     align-items: center;
     position: relative;
-    width: 259px;
+    width: 100%;
+    padding-right: 25px;
   }
   .account {
     display: flex;
     align-items: center;
-    width: 266px;
+    width: 90%;
   }
   .col2 {
     border-radius: 3px;
@@ -63,12 +63,14 @@ var css = csjs`
     min-width: 164px;
   }
   .col2_2 {
-    width: 82px;
+    width: 100px;
     min-width: 82px;
+    position: absolute;
+    margin-left: 100px;
   }
   .select {
     font-weight: normal;
-    width: 250px;
+    width: 100%;
   }
   .instanceContainer {
     display: flex;
@@ -86,7 +88,8 @@ var css = csjs`
     text-align: center;
   }
   .container {
-    margin-bottom: 2%;
+    margin-bottom: 4%;
+    padding-left: 15px;
   }
   .recorderCollapsedView,
   .recorderExpandedView {
@@ -190,7 +193,7 @@ var css = csjs`
     color: var(--warning);
   }
   .errorIcon {
-    color: var(--danger);
+    color: var(--warning);
     margin-left: 15px;
   }
   .failDesc {
@@ -206,7 +209,7 @@ var css = csjs`
     color: grey;
     width: 100%;
     height: 100%;
-    padding-right: 28px;
+    padding-right: 53px;
     pointer-events: none;
   }
   .networkItem {
@@ -228,10 +231,20 @@ var css = csjs`
     font-size: 13px;
     color: var(--info);
   }
+  .gasValueContainer {
+    flex-direction: row;
+    display: flex;
+  }
   .gasNval {
     transform: scale(0.7);
     transform-origin: left;
     margin-right: 10px;
+    width: 120px;
+  }
+  .gasNvalUnit {
+    transform: scale(0.7);
+    transform-origin: left;
+    margin-right: 10px;
   }
 `
 

src/multiParamManager.js

@@ -145,7 +145,7 @@ class MultiParamManager {
     var button = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
 
     this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
-      <div class="${css.contractActionsContainerMultiInner}" >
+      <div class="${css.contractActionsContainerMultiInner} text-dark" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
           <div class="${css.multiTitle}">${title}</div>
           <i class='fa fa-angle-up ${css.methCaret}'></i>
@@ -183,9 +183,9 @@ class MultiParamManager {
       this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-info')
       button.classList.add('btn-info')
     } else {
-      this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-warning')
+      this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-primary')
       button.innerHTML = 'transact'
-      button.classList.add('btn-warning')
+      button.classList.add('btn-primary')
     }
 
     if (this.funABI.inputs && this.funABI.inputs.length > 0) {

src/universal-dapp-styles.js

@@ -101,13 +101,12 @@ var css = csjs`
   .contractProperty {
     overflow: auto;
     margin-bottom: 0.4em;
+    margin-top: 1em;
     width:100%;
   }
   .contractProperty.hasArgs input {
-    min-width: 200px;
     padding: .36em;
     border-radius: 5px;
-    width: 70%;
   }
   .contractProperty .contractActionsContainerSingle input{
     border-top-left-radius: 0;
@@ -136,7 +135,7 @@ var css = csjs`
     outline: none;
   }
   .contractProperty input {
-    width: 75%
+    /* width: 75% */
   }
   .contractProperty > .value {
     box-sizing: border-box;
@@ -187,7 +186,7 @@ var css = csjs`
     cursor: default;
   }
   .contractProperty .contractActionsContainerMultiInner .multiArg label{
-    text-align: center;
+    text-align: right;
   }
   .multiHeader .methCaret {
     float: right;
@@ -205,6 +204,7 @@ var css = csjs`
   }
   .multiArg {
     margin-bottom: 8px;
+    display: flex;
   }
   .multiArg input{
     padding: 5px;
@@ -214,12 +214,12 @@ var css = csjs`
       float: left;
       margin-right: 6px;
       font-size: 10px;
-      width: 20%;
+      min-width: 30%;
   }
   .multiArg button {
     border-radius: 3px;
     float: right;
-    margin-right: 5%;
+    margin-right: 2%;
     font-size: 10px;
     border-width: 1px;
     width: inherit;
@@ -230,6 +230,7 @@ var css = csjs`
   }
   .hasArgs .multiArg input {
     border-left: 1px solid #dddddd;
+    width: 100%;
   }
   .hasArgs input {
     display: block;
@@ -244,7 +245,7 @@ var css = csjs`
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
-    /* height: 25px; */
+    height: 25px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -253,7 +254,7 @@ var css = csjs`
     border-radius: 3px;
   }
   .contractActionsContainerMultiInner .multiArg i {
-    padding-right: 26px;
+    padding-right: 15px;
     padding-top: 5px;
     float: right;
   },