- LLI part styleing

src/app/tabs/compile-tab.js

@@ -254,7 +254,7 @@ class CompileTab extends ViewPlugin {
         <label class="${css.compilerLabel} form-check-label" for="compiledContracts">Contract</label>
         ${selectEl}
       </div>
-      <article class="px-2 mt-2 pb-0">
+      <article class="mt-2 pb-0">
         <button id="publishOnSwarm" class="btn btn-secondary btn-block" title="Publish on Swarm" onclick="${() => { publishToStorage('swarm', this.fileProvider, this.fileManager, this.data.contractsDetails[this.selectedContract]) }}">
           <span>Publish on Swarm</span>
           <img id="swarmLogo" class="${css.storageLogo} ml-2" src="${swarmImg}">
@@ -284,7 +284,7 @@ class CompileTab extends ViewPlugin {
       </div>
     </section>`
     : yo`<section class="${css.container} clearfix"><article class="px-2 mt-2 pb-0 d-flex">
-      <span class="m-0 w-100 alert alert-warning" role="alert">No Contract Compiled Yet</span>
+      <span class="mt-2 mx-3 w-100 alert alert-warning" role="alert">No Contract Compiled Yet</span>
     </article></section>`
 
     if (contractList.length) {

src/app/tabs/runTab/contractDropdown.js

@@ -40,10 +40,8 @@ class ContractDropdownUI {
 
       if (success) {
         this.compFails.style.display = 'none'
-        document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError)
       } else {
         this.compFails.style.display = 'block'
-        document.querySelector(`.${css.contractNames}`).classList.add(css.contractNamesError)
       }
     })
   }
@@ -99,10 +97,15 @@ class ContractDropdownUI {
     : yo`<input id="deployAndRunPublishToIPFS" class="mr-2" type="checkbox" onchange=${this.toggleCheckedState.bind(this)} >`
 
     this.deployCheckBox = yo`
-      <div class="mt-2 text-left">
+      <div class="mt-2 d-flex flex-column align-items-start">
         ${ipfsCheckbox}
-        <label for="deployAndRunPublishToIPFS" class="text-dark p-0 m-0">PUBLISH TO IPFS</label>
-        <i class="fas fa-info ml-2" aria-hidden="true" title="Publishing the source code and ABI to IPFS facilitates source code verification and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"></i>
+        <label
+          for="deployAndRunPublishToIPFS"
+          class="text-dark p-0 m-0"
+          title="Publishing the source code and ABI to IPFS facilitates source code verification and will greatly foster contract adoption (auditing, debugging, calling it, etc...)"
+        >
+          PUBLISH TO IPFS
+        </label>
       </div>
       `
     this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
@@ -142,7 +145,6 @@ class ContractDropdownUI {
 
   changeCurrentFile (currentFile) {
     if (!document.querySelector(`.${css.contractNames}`)) return
-    document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError)
     var contractNames = document.querySelector(`.${css.contractNames.classNames[0]}`)
     if (/.(.abi)$/.exec(currentFile)) {
       this.createPanel.style.display = 'none'

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

@@ -8,15 +8,6 @@ var css = csjs`
   .runTabView::-webkit-scrollbar {
     display: none;
   }
-  .instanceContainerTitle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 10px;
-    margin: 0 0 16px;
-    font-size: 14px;
-    line-height: 19px;
-  }
   .settings {
     padding: 0 24px 16px;
   }
@@ -81,11 +72,6 @@ var css = csjs`
   .container {
     padding: 0 24px 16px;
   }
-  .recorderCollapsedView,
-  .recorderExpandedView {
-    display: flex;
-    flex-direction: column;
-  }
   .recorderDescription {
     margin: 0 15px 15px 0;
    }
@@ -93,8 +79,6 @@ var css = csjs`
     width: 100%;
     border: 1px solid
   }
-  .contractNamesError {
-  }
   .subcontainer {
     display: flex;
     flex-direction: row;
@@ -201,9 +185,6 @@ var css = csjs`
   .networkItem {
     margin-right: 5px;
   }
-  .clearinstance {
-    margin-right: 15px;
-  }
   .transactionActions {
     display: flex;
     justify-content: space-evenly;

src/app/udapp/run-tab.js

@@ -66,18 +66,18 @@ export class RunTab extends LibraryPlugin {
     this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 list-group-item"></div>`
 
     const instanceContainerTitle = yo`
-      <div class="${css.instanceContainerTitle}"
+      <div class="d-flex justify-content-between align-items-center pl-2 ml-1 mb-1"
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
-        <i class="${css.clearinstance} ${css.icon} far fa-trash-alt" onclick=${() => this.event.trigger('clearInstance', [])}
+        <i class="mr-2 ${css.icon} far fa-trash-alt" data-id="deployAndRunClearInstances" onclick=${() => this.event.trigger('clearInstance', [])}
           title="Clear instances list and reset recorder" aria-hidden="true">
         </i>
       </div>`
 
     this.noInstancesText = yo`
-      <div class="${css.noInstancesText}">
+      <span class="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
         Currently you have no contract instances to interact with.
-      </div>`
+      </span>`
 
     this.event.register('clearInstance', () => {
       this.instanceContainer.innerHTML = '' // clear the instances list
@@ -137,12 +137,12 @@ export class RunTab extends LibraryPlugin {
 
   renderRecorderCard () {
     const collapsedView = yo`
-      <div class=${css.recorderCollapsedView}>
-        <div class="${css.recorderCount} badge badge-pill badge-primary">${this.recorderCount}</div>
+      <div class="d-flex flex-column">
+        <div class="ml-2 badge badge-pill badge-primary" title="The number of recorded transactions">${this.recorderCount}</div>
       </div>`
 
     const expandedView = yo`
-      <div class=${css.recorderExpandedView}>
+      <div class="d-flex flex-column">
         <div class="${css.recorderDescription} mt-2">
           All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
           another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.

src/app/ui/card.js

@@ -15,20 +15,20 @@ module.exports = class Card {
     const self = this
     if (self._view.el) return self._view.el
 
-    self._view.cardBody = yo`<div class=${css.cardBody}></div>`
+    self._view.cardBody = yo`<div></div>`
     self._view.arrow = yo`<i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>`
 
     self._view.expandCollapseButton = yo`
-    <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`
+    <div>${self._view.arrow}</div>`
 
-    self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
+    self._view.statusBar = yo`<div>${self._opts.collapsedView}</div>`
     self._view.cardHeader = yo`
-    <div class=${css.cardHeader} onclick=${() => trigger(self._view.arrow)}>
-      <div class="pr-1 ${css.cardTitles}">
-        <div class=${css.cardTitle}>${self._opts.title}</div>
+    <div class="d-flex justify-content-between align-items-center" onclick=${() => trigger(self._view.arrow)}>
+      <div class="pr-1 d-flex flex-row">
+        <div class="">${self._opts.title}</div>
         ${self._view.statusBar}
       </div>
-      <div class=${css.expandCollapseButton}>${self._view.expandCollapseButton}</div>
+      <div>${self._view.expandCollapseButton}</div>
     </div>`
 
     function trigger (el) {
@@ -59,25 +59,6 @@ const css = csjs`
     margin              : 0;
     background          : none;
   }
-  .cardHeader {
-    display             : flex;
-    justify-content     : space-between;
-    align-items         : center;
-  }
-  .statusBar {}
-  .cardBody {}
-  .cardTitles {
-    display             : flex;
-    flex-direction      : row;
-    align-items         : center;
-  }
-  .cardTitle {
-    font-size           : 14px;
-    font-weight         : 400;
-    margin-right        : 8px;
-    line-height         : 19px;
-  }
-  .expandCollapseButton {}
   .arrow {
     font-weight         : bold;
     cursor              : pointer;

src/app/ui/universal-dapp-ui.js

@@ -38,7 +38,7 @@ function decodeResponseToTreeView (response, fnabi) {
 }
 
 UniversalDAppUI.prototype.renderInstance = function (contract, address, contractName) {
-  var noInstances = document.querySelector('[class^="noInstancesText"]')
+  var noInstances = document.querySelector('[data-id="deployAndRunNoInstanceText"]')
   if (noInstances) {
     noInstances.parentNode.removeChild(noInstances)
   }
@@ -121,29 +121,29 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   })
 
   const calldataInput = yo`
-    <input id="deployAndRunLLTxCalldata" class="w-100 m-0 form-control" title="The Calldata to send to fallback function of the contract.">
+    <input id="deployAndRunLLTxCalldata" class="${css.calldataInput} form-control" title="The Calldata to send to fallback function of the contract.">
   `
   const llIError = yo`
-    <label id="deployAndRunLLTxError" class="text-danger"></label>
+    <label id="deployAndRunLLTxError" class="text-danger my-2"></label>
   `
   // constract LLInteractions elements
   const lowLevelInteracions = yo`
     <div class="d-flex flex-column">
       <div class="d-flex flex-row justify-content-between mt-2">
-        <label class="pt-2 border-top d-flex justify-content-start flex-grow-1">
+        <div class="py-2 border-top d-flex justify-content-start flex-grow-1">
           Low level interactions
-        </label>
+        </div>
         <a
           href="https://solidity.readthedocs.io/en/v0.6.2/contracts.html#receive-ether-function"
           title="check out docs for using 'receive'/'fallback'"
           target="_blank"
         >
-          <i aria-hidden="true" class="fas fa-info text-info my-2 mr-2"></i>
+          <i aria-hidden="true" class="fas fa-info my-2 mr-1"></i>
         </a>
       </div>
-      <div class="d-flex flex-column">
-        <div class="d-flex justify-content-end m-2 align-items-center">
-          <label class="mr-2 m-0">Calldata</label>
+      <div class="d-flex flex-column align-items-start">
+        <label class="">CALLDATA</label>
+        <div class="d-flex justify-content-end w-100 align-items-center">
           ${calldataInput}
           <button id="deployAndRunLLTxSendTransaction" class="btn btn-sm btn-secondary" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
         </div>

src/universal-dapp-styles.js

@@ -5,6 +5,9 @@ var css = csjs`
     display: flex;
     align-items: center;
   }
+  .calldataInput{
+    height: 32px;
+  }
   .title {
     display: flex;
     justify-content: space-between;
@@ -269,7 +272,7 @@ var css = csjs`
   }
   .contractActionsContainerMultiInner .multiArg i {
     padding-right: 10px;
-  },
+  }
   .hideWarningsContainer {
     display: flex;
     align-items: center;

test-browser/tests/libraryDeployment.js

@@ -33,7 +33,7 @@ module.exports = {
   },
   'Test Manual Deploy Lib': function (browser) {
     console.log('testManualDeployLib')
-    browser.click('i[class^="clearinstance"]')
+    browser.click('*[data-id="deployAndRunClearInstances"]')
           .pause(5000)
           .clickLaunchIcon('settings')
           .click('#generatecontractmetadata')

test-browser/tests/recorder.js

@@ -33,7 +33,7 @@ module.exports = {
           browser.verifyCallReturnValue(addressRef, ['0: uint256: 1', '0: uint256: 3456', '0: address: 0xbBF289D846208c16EDc8474705C748aff07732dB'])
           .perform(() => done())
         })
-        .click('i[class^="clearinstance"]')
+        .click('*[data-id="deployAndRunClearInstances"]')
         .testContracts('testRecorder.sol', sources[0]['browser/testRecorder.sol'], ['testRecorder'])
         .createContract('12')
         .waitForElementPresent('.instance:nth-of-type(2)')

test-browser/tests/transactionExecution.js

@@ -40,7 +40,7 @@ module.exports = {
           '3': 'uint256: 4'
         }
       })
-        .click('i[class^="clearinstance"]')
+        .click('*[data-id="deployAndRunClearInstances"]')
   },
 
   'Test Complex Return Values': function (browser) {
@@ -88,7 +88,7 @@ module.exports = {
           '0': 'uint8: _en 2',
           '1': 'int256[5][]: _a1 1,-45,-78,56,60,-1,42,334,-45455,-446,1,10,-5435,45,-7'
         }
-      }).click('i[class^="clearinstance"]')
+      }).click('*[data-id="deployAndRunClearInstances"]')
   },
 
   'Test Complex Input Values': function (browser) {
@@ -144,7 +144,7 @@ module.exports = {
             }
           ]
         })
-      .click('i[class^="clearinstance"]')
+      .click('*[data-id="clearinstance"]')
       .end()
   },