From 2e6277de4a7b894659c58caa2f0a1ce2d48ec41c Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Tue, 7 Apr 2020 02:02:19 +0200
Subject: [PATCH] - LLI part styleing - Publish to IPFS style -removed unused
 styles

---
 src/app/tabs/compile-tab.js                |  4 +--
 src/app/tabs/runTab/contractDropdown.js    | 14 +++++----
 src/app/tabs/styles/run-tab-styles.js      | 19 -------------
 src/app/udapp/run-tab.js                   | 14 ++++-----
 src/app/ui/card.js                         | 33 +++++-----------------
 src/app/ui/universal-dapp-ui.js            | 18 ++++++------
 src/universal-dapp-styles.js               |  5 +++-
 test-browser/tests/libraryDeployment.js    |  2 +-
 test-browser/tests/recorder.js             |  2 +-
 test-browser/tests/transactionExecution.js |  6 ++--
 10 files changed, 42 insertions(+), 75 deletions(-)

diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 86580ff14a..d9119985ad 100644
--- a/src/app/tabs/compile-tab.js
+++ b/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) {
diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index 97fba1b63d..cb72bdc2b0 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/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'
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index dd3d07839f..8d93dd92fd 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/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;
diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js
index 7834364176..1430677703 100644
--- a/src/app/udapp/run-tab.js
+++ b/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.
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
index fbac269349..46f20402a9 100644
--- a/src/app/ui/card.js
+++ b/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;
diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js
index b6f0cee3f6..f8d95a7b97 100644
--- a/src/app/ui/universal-dapp-ui.js
+++ b/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>
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 9adab3e882..8df1aa220e 100644
--- a/src/universal-dapp-styles.js
+++ b/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;
diff --git a/test-browser/tests/libraryDeployment.js b/test-browser/tests/libraryDeployment.js
index 6c14d63aa1..98cf2e3904 100644
--- a/test-browser/tests/libraryDeployment.js
+++ b/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')
diff --git a/test-browser/tests/recorder.js b/test-browser/tests/recorder.js
index e9898a5a8f..5d5df359ef 100644
--- a/test-browser/tests/recorder.js
+++ b/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)')
diff --git a/test-browser/tests/transactionExecution.js b/test-browser/tests/transactionExecution.js
index 2457c5b074..e65f31b454 100644
--- a/test-browser/tests/transactionExecution.js
+++ b/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()
   },