update to runtab - cards in multiparam are a problem

src/app/tabs/run-tab.js

@@ -29,7 +29,7 @@ class RunTab {
     this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
 
     var el = yo`
-    <div>
+    <div class="list-group list-group-flush">
       ${this.settingsUI.render()}
       ${this.contractDropdownUI.render()}
       ${this.recorderCard.render()}

src/app/tabs/runTab/contractDropdown.js

@@ -47,7 +47,7 @@ class ContractDropdownUI {
     this.compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
     var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
 
-    this.atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Load contract from Address" title="atAddress" />`
+    this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
     this.selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
 
     this.createPanel = yo`<div class="${css.button}"></div>`

src/app/tabs/runTab/settings.js

@@ -49,7 +49,7 @@ class SettingsUI {
         </div>
         <div class=${css.environment}>
           ${this.netUI}
-          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="${css.select}">
+          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm" checked name="executionContext"> JavaScript VM
@@ -76,7 +76,7 @@ class SettingsUI {
           <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
         </div>
         <div class=${css.account}>
-          <select name="txorigin" class="${css.select}" id="txorigin"></select>
+          <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
           <i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
         </div>

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

 var csjs = require('csjs-inject')
-const styles = require('../../ui/styles-guide/theme-chooser').chooser()
 
 var css = csjs`
   .runTabView {
@@ -19,20 +18,18 @@ var css = csjs`
     padding: 10px 15px 15px 15px;
   }
   .recorderCount {
-    border-radius: 50%;
-    margin-right: 30px;
-    min-width: 13px;
-    height: 13px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
+    /* margin-right: 30px; */
+    /* min-width: 13px; */
+    /* display: flex; */
+    /* justify-content: center; */
+    /* align-items: center; */
+    /* font-size: 10px; */
   }
   .crow {
     margin-top: .5em;
     display: flex;
     align-items: center;
-    width: 500px;
+    /*width: 500px;*/
   }
   .col1 {
     width: 30%;
@@ -78,7 +75,7 @@ var css = csjs`
     margin-bottom: 2%;
     border: none;
     text-align: center;
-    padding: 10px 0px 15px 15px;
+    padding: 10px 0px 15px 0px;
   }
   .pendingTxsContainer  {
     display: flex;
@@ -133,6 +130,9 @@ var css = csjs`
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .ataddressinput {
+    padding: .25rem;
+  }
   .create {
   }
   .input {
@@ -155,15 +155,15 @@ var css = csjs`
     align-items: center;
   }
   .transact {
-    color: ${styles.colors.lightRed};
+    color: var(--warning);
     margin-right: .3em;
   }
   .payable {
-    color: ${styles.colors.red};
+    color: var(--warning);
     margin-right: .3em;
   }
   .call {
-    color: ${styles.colors.lightBlue};
+    color: var(--info);
     margin-right: .3em;
   }
   .pendingContainer {
@@ -185,14 +185,14 @@ var css = csjs`
   }
   .icon:hover {
     font-size: 12px;
-    color: ${styles.rightPanel.runTab.icon_HoverColor};
+    color: var(--warning);
   }
   .errorIcon {
-    color: ${styles.appProperties.errorText_Color};
+    color: var(--danger);
     margin-left: 15px;
   }
   .failDesc {
-    color: ${styles.appProperties.errorText_Color};
+    color: var(--warning);
     padding-left: 10px;
     display: inline;
   }
@@ -216,7 +216,6 @@ var css = csjs`
   .transactionActions {
     display: flex;
     justify-content: space-evenly;
-    ${styles.rightPanel.runTab.box_Info_RunTab};
     width: 145px;
   }
   .orLabel {

src/app/ui/card.js

 var yo = require('yo-yo')
 var csjs = require('csjs-inject')
-var styleGuide = require('./styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 var EventManager = require('../../lib/events')
 
 module.exports = class Card {
@@ -45,7 +43,7 @@ module.exports = class Card {
 
     // HTML
     self._view.el = yo`
-      <div class=${css.cardContainer}>
+      <div class="list-group-item ${css.cardContainer}">
         ${self._view.cardHeader}
         ${self._view.cardBody}
       </div>`
@@ -57,7 +55,7 @@ module.exports = class Card {
 
 const css = csjs`
   .cardContainer {
-    ${styles.remix.solidBox};
+    padding: 10px 15px 15px 0;
     margin-bottom       : 2%;
   }
   .cardHeader {
@@ -74,18 +72,15 @@ const css = csjs`
   .cardTitle {
     font-size           : 13px;
     font-weight         : bold;
-    color               : ${styles.appProperties.mainText_Color};
     margin-right        : 5px;
   }
   .expandCollapseButton {}
   .arrow {
-    color               : ${styles.appProperties.icon_Color};
     font-weight         : bold;
     cursor              : pointer;
     font-size           : 14px;
   }
   .arrow:hover {
-    color               : ${styles.appProperties.icon_HoverColor};
   }
 
 `

src/app/ui/styles/renderer-styles.js

 var yo = require('yo-yo')
 
-var styleGuide = require('../styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
-
 var css = yo`<style>
 .sol.success,
 .sol.error,
@@ -43,25 +40,20 @@ var css = yo`<style>
 }
 
 .sol.error {
-    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
-    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
-    color: ${styles.rightPanel.message_Error_Color};
+    background-color: var(--danger);
+    color: var(--white);
 }
 
 .sol.warning {
-  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
-  color: ${styles.rightPanel.message_Warning_Color};
+  background-color: var(--warning);
 }
 
 .sol.staticAnalysisWarning {
-  background-color: ${styles.colors.lightViolet};
-  color: ${styles.colors.black};  
+  background-color: var(--info);
 }
 
 .sol.success {
-  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
-  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
-  color: ${styles.rightPanel.message_Success_Color};
+  /* background-color:  // styles.rightPanel.message_Success_BackgroundColor; */
 }</style>`
 
 module.exports = css

src/multiParamManager.js

@@ -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="${css.contractActionsContainerMultiInner}" >
+      <div class="card ${css.contractActionsContainerMultiInner}" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
-          <div class="${css.multiTitle}">${title}</div>
+          <div class="card-title ${css.multiTitle}">${title}</div>
           <i class='fa fa-angle-up ${css.methCaret}'></i>
         </div>
         ${this.multiFields}

src/universal-dapp-styles.js

 var csjs = require('csjs-inject')
-var styleGuide = require('./app/ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .instanceTitleContainer {
@@ -8,7 +6,6 @@ var css = csjs`
     align-items: center;
   }
   .title {
-    ${styles.rightPanel.runTab.titlebox_RunTab}
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -35,20 +32,24 @@ var css = csjs`
   }
 
   .title .copy {
-    color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
+    color: var(--primary);
   }
   .instance {
     min-width: 310px;
     display: flex;
     flex-direction: column;
+    padding: 5px 0 0 10px;
+    margin-bottom: 10px;
   }
   .instance .title:before {
     content: "\\25BE";
     margin-right: 5%;
+    font-size: 2rem
   }
   .instance.hidesub .title:before {
     content: "\\25B8";
     margin-right: 5%;
+    font-size: 2rem;
   }
   .instance.hidesub > * {
       display: none;
@@ -80,7 +81,6 @@ var css = csjs`
   }
   .instanceButton {
     border-radius: 3px;
-    border: .3px solid hsla(0, 82%, 82%, .5);
   }
   .closeIcon {
     font-size: 12px;
@@ -108,7 +108,7 @@ var css = csjs`
     border-bottom-left-radius: 0;
   }
   .contractProperty button {
-    ${styles.rightPanel.runTab.button_Create}
+    background-color: var(--warning);
     min-width: 100px;
     width: 100px;
     font-size: 10px;
@@ -121,7 +121,7 @@ var css = csjs`
     border-color: lightgray;
   }
   .contractProperty.constant button {
-    ${styles.rightPanel.runTab.button_Constant}
+    background-color:var(--info);
     min-width: 100px;
     width: 100px;
     font-size: 10px;
@@ -136,13 +136,12 @@ var css = csjs`
     box-sizing: border-box;
     float: left;
     align-self: center;
-    color: ${styles.appProperties.mainText_Color};
     margin-left: 4px;
   }
   .value ul {
     margin-bottom: 10px;
     padding-bottom: 5px;
-    border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
+    border-bottom: 1px solid var(--info);
   }
   .contractActionsContainer {
     width: 98%;
@@ -157,9 +156,9 @@ var css = csjs`
   }
   .contractActionsContainerMultiInner {
     margin-bottom: 10px;
-    border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
+    border: 1px solid var(--info);
     padding: 0px 5px 5px 0px;
-    background-color: ${styles.appProperties.primary_BackgroundColor};
+    background-color: var(--light);
     width: 99%;
     border-radius: 3px;
   }
@@ -240,6 +239,10 @@ var css = csjs`
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
+    height: 25px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .hasArgs .contractActionsContainerMulti button {
     border-radius: 3px;

src/universal-dapp-ui.js

@@ -63,7 +63,7 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance card ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   var context = self.udapp.context()
 
   var shortAddress = helper.shortenAddress(address)