after review fixes

src/app/tabs/runTab/contractDropdown.js

@@ -81,7 +81,7 @@ class ContractDropdownUI {
   }
 
   render () {
-    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="m-1 fas fa-times-circle ${css.errorIcon}" ></i>`
+    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="m-2 ml-3 fas fa-times-circle ${css.errorIcon}" ></i>`
     var info = yo`<i class="fas fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
     this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" disabled id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
     this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />`

src/app/tabs/runTab/settings.js

@@ -75,7 +75,7 @@ class SettingsUI {
               value="web3" name="executionContext"> Web3 Provider
             </option>
           </select>
-          <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i class="${css.infoDeployAction} fas fa-info" title="check out docs to setup Environment"></i></a>
+          <a href="https://remix-ide.readthedocs.io/en/latest/run.html#run-setup" target="_blank"><i class="${css.infoDeployAction} ml-2 fas fa-info" title="check out docs to setup Environment"></i></a>
         </div>
       </div>
     `
@@ -97,9 +97,9 @@ class SettingsUI {
           </span>
         </label>
         <div class="${css.account}">
-          <select data-id="runTabSelectAccount" name="txorigin" class="form-control ${css.select} custom-select" id="txorigin"></select>
-          <div style="margin-left: 0px;">${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}</div>
-          <i id="remixRunSignMsg" class="fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
+          <select data-id="runTabSelectAccount" name="txorigin" class="form-control ${css.select} custom-select pr-4" id="txorigin"></select>
+          <div style="margin-left: -5px;">${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}</div>
+          <i id="remixRunSignMsg" class="mx-1 fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
         </div>
       </div>
     `

src/app/ui/card.js

@@ -25,7 +25,7 @@ module.exports = class Card {
     self._view.cardHeader = yo`
     <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>
+        <div>${self._opts.title}</div>
         ${self._view.statusBar}
       </div>
       <div>${self._view.expandCollapseButton}</div>

src/app/ui/landing-page/landing-page.js

@@ -61,7 +61,7 @@ let css = csjs`
     display: flex;
   }
   .envLogo {
-    height: 24px;
+    height: 16px;
   }
   .envLabel {
     cursor: pointer;
@@ -181,22 +181,22 @@ export class LandingPage extends ViewPlugin {
       globalRegistry.get('themeModule').api.fixInvert(document.getElementById('moreLogo'))
     })
 
-    const creatEnvButton = (imgPath, envID, envText, callback) => {
+    const createEnvButton = (imgPath, envID, envText, callback) => {
       return yo`
         <button class="btn btn-lg border-secondary d-flex mr-3 justify-content-center flex-column align-items-center ${css.envButton}" data-id="landingPageStartSolidity" onclick=${() => callback()}>
           <img class="m-2 align-self-center ${css.envLogo}" id=${envID} src="${imgPath}">
-          <label class="h4 text-dark ${css.envLabel}">${envText}</label>
+          <label class="text-uppercase text-dark ${css.envLabel}">${envText}</label>
         </button>
       `
     }
     // main
-    const solEnv = creatEnvButton('/assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
-    const vyperEnv = creatEnvButton('/assets/img/vyperLogo.webp', 'vyperLogo', 'Vyper', startVyper)
+    const solEnv = createEnvButton('/assets/img/solidityLogo.webp', 'solidityLogo', 'Solidity', startSolidity)
+    const vyperEnv = createEnvButton('/assets/img/vyperLogo.webp', 'vyperLogo', 'Vyper', startVyper)
     // Featured
-    const pipelineEnv = creatEnvButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
-    const debuggerEnv = creatEnvButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
-    const workshopEnv = creatEnvButton('assets/img/workshopLogo.webp', 'workshopLogo', 'Workshop', startWorkshop)
-    const moreEnv = creatEnvButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
+    const pipelineEnv = createEnvButton('assets/img/pipelineLogo.webp', 'pipelineLogo', 'Pipeline', startPipeline)
+    const debuggerEnv = createEnvButton('assets/img/debuggerLogo.webp', 'debuggerLogo', 'Debugger', startDebugger)
+    const workshopEnv = createEnvButton('assets/img/workshopLogo.webp', 'workshopLogo', 'Workshop', startWorkshop)
+    const moreEnv = createEnvButton('assets/img/moreLogo.webp', 'moreLogo', 'More', startPluginManager)
 
     const invertNum = (globalRegistry.get('themeModule').api.currentTheme().quality === 'dark') ? 1 : 0
     solEnv.getElementsByTagName('img')[0].style.filter = `invert(${invertNum})`
@@ -230,7 +230,7 @@ export class LandingPage extends ViewPlugin {
             <h4>Environments</h4>
             <div class="${css.enviroments} pt-2">
               ${solEnv}
-              ${vyperEnv}        
+              ${vyperEnv}
             </div>
           </div>
           <div class="file">
@@ -256,14 +256,14 @@ export class LandingPage extends ViewPlugin {
               <button class="btn mx-1 btn-secondary" onclick="${() => load('Swarm', 'bzz-raw URL', ['bzz-raw://<swarm-hash>'])}">Swarm</button>
               <button class="btn mx-1 btn-secondary" onclick="${() => load('Ipfs', 'ipfs URL', ['ipfs://<ipfs-hash>'])}">Ipfs</button>
               <button class="btn mx-1 btn-secondary" onclick="${() => load('Https', 'http/https raw content', ['https://raw.githubusercontent.com/OpenZeppelin/openzeppelin-solidity/master/contracts/crowdsale/validation/IndividuallyCappedCrowdsale.sol'])}">https</button>
-              <button class="btn mx-1 btn-secondary" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
+              <button class="btn mx-1 btn-secondary  text-nowrap" onclick="${() => load('@resolver-engine', 'resolver-engine URL', ['github:OpenZeppelin/openzeppelin-solidity/contracts/ownership/Ownable.sol#v2.1.2'], yo`<span>please checkout <a class='text-primary' href="https://github.com/Crypto-Punkers/resolver-engine" target='_blank'>https://github.com/Crypto-Punkers/resolver-engine</a> for more information</span>`)}">Resolver-engine</button>
             </div><!-- end of btn-group -->
           </div><!-- end of div.file -->
         </div><!-- end of #col1 -->
-        <div id="col2" class="col-sm-5">
+        <div id="col2" class="col-sm-7">
           <div class="plugins mb-5">
             <h4>Featured Plugins</h4>
-            <div class="d-flex flex-row">
+            <div class="d-flex flex-row pt-2">
               ${pipelineEnv}
               ${debuggerEnv}
               ${workshopEnv}

src/app/ui/txLogger.js

@@ -302,7 +302,6 @@ function context (self, opts, blockchain) {
   var block = data.tx.blockNumber || ''
   var i = data.tx.transactionIndex
   var value = val ? typeConversion.toInt(val) : 0
-  const hashInfo = (block||i) ? '[' : '' + (block) ? 'block:${block}' : '' + (i) ? ' txIndex:${i}' : '' + (block||i) ? ']' : ''
   if (blockchain.getProvider() === 'vm') {
     return yo`
       <div>
@@ -320,7 +319,7 @@ function context (self, opts, blockchain) {
     return yo`
       <div>
         <span class=${css.txLog}>
-        <span class='${css.tx}'>${hashInfo}</span>
+        <span class='${css.tx}'>[block:${block} txIndex:${i}]</span>
           <div class=${css.txItem}><span class=${css.txItemTitle}>from:</span> ${from}</div>
           <div class=${css.txItem}><span class=${css.txItemTitle}>to:</span> ${to}</div>
           <div class=${css.txItem}><span class=${css.txItemTitle}>value:</span> ${value} wei</div>

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

@@ -145,7 +145,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
         <label class="">CALLDATA</label>
         <div class="d-flex justify-content-end w-100 align-items-center">
           ${calldataInput}
-          <button id="deployAndRunLLTxSendTransaction" class="${css.instanceButton} w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
+          <button id="deployAndRunLLTxSendTransaction" class="${css.instanceButton} p-0 w-50 btn border-warning text-warning" title="Send data to contract." onclick=${() => sendData()}>Transact</button>
         </div>
       </div>
       <div>