update to runtab

src/app.js

@@ -78,7 +78,6 @@ var css = csjs`
     overflow           : hidden;
   }
   .mainpanel         {
-    background-color  : ${styles.colors.transparent};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -87,7 +86,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .iconpanel           {
-    background-color  : ${styles.leftPanel.backgroundColor_Panel};
+    background-color   : #fafafa;
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -109,12 +108,12 @@ var css = csjs`
   .highlightcode {
     position:absolute;
     z-index:20;
-    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+    background-color: var(--info);
   }
   .highlightcode_fullLine {
     position:absolute;
     z-index:20;
-    background-color: ${styles.editor.backgroundColor_DebuggerMode};
+    background-color: var(--info);
     opacity: 0.5;
   }
 `

src/app/tabs/run-tab.js

@@ -114,7 +114,7 @@ class RunTab {
   renderRecorderCard () {
     const collapsedView = yo`
       <div class=${css.recorderCollapsedView}>
-        <div class=${css.recorderCount}>${this.recorderCount}</div>
+        <div class="${css.recorderCount} badge badge-pill badge-primary">${this.recorderCount}</div>
       </div>`
 
     const expandedView = yo`

src/app/tabs/runTab/settings.js

@@ -86,15 +86,15 @@ class SettingsUI {
     var gasPriceEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">Gas limit</div>
-        <input type="number" class="${css.col2}" id="gasLimit" value="3000000">
+        <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
       </div>
     `
 
     var valueEl = yo`
       <div class="${css.crow}">
         <div class="${css.col1_1}">Value</div>
-        <input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
-        <select name="unit" class="${css.col2_2}" id="unit">
+        <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>

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

@@ -226,6 +226,11 @@ var css = csjs`
     font-size: 13px;
     color: var(--danger);
   }
+  .gasNval {
+    transform: scale(0.7);
+    transform-origin: left;
+    margin-right: 10px;
+  }
 `
 
 module.exports = css

src/multiParamManager.js

@@ -125,7 +125,7 @@ class MultiParamManager {
     }
 
     this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
-      <button onclick=${() => { onClick() }} class="${css.instanceButton}">${title}</button>${this.basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
+      <button onclick=${() => { onClick() }} class="btn btn-sm ${css.instanceButton}">${title}</button>${this.basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
       </div>`
 
     this.multiFields = this.createMultiFields()
@@ -142,9 +142,9 @@ class MultiParamManager {
     var button = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
 
     this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
-      <div class="card ${css.contractActionsContainerMultiInner}" >
+      <div class="${css.contractActionsContainerMultiInner}" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
-          <div class="card-title ${css.multiTitle}">${title}</div>
+          <div class="${css.multiTitle}">${title}</div>
           <i class='fa fa-angle-up ${css.methCaret}'></i>
         </div>
         ${this.multiFields}

src/universal-dapp-styles.js

@@ -36,7 +36,8 @@ var css = csjs`
   }
   .instance {
     min-width: 310px;
-    display: flex;
+    display: block;
+    /* display: flex; */
     flex-direction: column;
     padding: 5px 0 0 10px;
     margin-bottom: 10px;
@@ -44,12 +45,12 @@ var css = csjs`
   .instance .title:before {
     content: "\\25BE";
     margin-right: 5%;
-    font-size: 2rem
+    font-size: 1.2rem
   }
   .instance.hidesub .title:before {
     content: "\\25B8";
     margin-right: 5%;
-    font-size: 2rem;
+    font-size: 1.2rem;
   }
   .instance.hidesub > * {
       display: none;
@@ -156,7 +157,6 @@ var css = csjs`
   }
   .contractActionsContainerMultiInner {
     margin-bottom: 10px;
-    border: 1px solid var(--info);
     padding: 0px 5px 5px 0px;
     background-color: var(--light);
     width: 99%;