From 4f498e5dc0bdeb805f32c74471920a1e243f2e78 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Thu, 5 Dec 2019 15:42:45 +0100
Subject: [PATCH 01/12] Style deploy & run tab

---
 src/app/tabs/runTab/contractDropdown.js    |  5 +-
 src/app/tabs/runTab/settings.js            | 18 ++--
 src/app/tabs/styles/run-tab-styles.js      | 80 +++++++++---------
 src/app/tabs/styles/settings-tab-styles.js |  2 -
 src/app/udapp/run-tab.js                   |  6 +-
 src/app/ui/TreeView.js                     |  5 +-
 src/app/ui/card.js                         | 16 ++--
 src/app/ui/multiParamManager.js            | 17 ++--
 src/app/ui/universal-dapp-ui.js            | 10 +--
 src/universal-dapp-styles.js               | 96 +++++++++-------------
 10 files changed, 124 insertions(+), 131 deletions(-)

diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index 6eccd725667..85d16124ac2 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/src/app/tabs/runTab/contractDropdown.js
@@ -51,10 +51,11 @@ class ContractDropdownUI {
     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)} />`
     this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`
 
-    this.createPanel = yo`<div class="${css.button}"></div>`
+    this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
     let el = yo`
-      <div class="${css.container}">
+      <div class="${css.container} module-section">
+        <div class="${css.settingsLabel} form-control-label">Contract</div>
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
         </div>
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index c3e770e5913..007e348886d 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/src/app/tabs/runTab/settings.js
@@ -56,10 +56,10 @@ class SettingsUI {
 
     var environmentEl = yo`
       <div class="${css.crow}">
-        <div id="selectExEnv" class="${css.col1_1}">
+        <div id="selectExEnv" class="${css.settingsLabel} form-control-label">
           Environment
         </div>
-        <div class=${css.environment}>
+        <div class="${css.environment}">
           <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."
@@ -81,7 +81,7 @@ class SettingsUI {
     `
     const networkEl = yo`
     <div class="${css.crow}">
-        <div class="${css.col1_1}">
+        <div class="${css.settingsLabel}">
         </div>
         <div class="${css.environment}">
           ${this.netUI}
@@ -90,13 +90,13 @@ class SettingsUI {
     `
     const accountEl = yo`
       <div class="${css.crow}">
-        <div class="${css.col1_1}">
+        <div class="${css.settingsLabel} form-control-label">
           Account
           <span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}>
             <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i>
           </span>
         </div>
-        <div class=${css.account}>
+        <div class="${css.account}">
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
           <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>
@@ -106,17 +106,17 @@ class SettingsUI {
 
     const gasPriceEl = yo`
       <div class="${css.crow}">
-        <div class="${css.col1_1}">Gas limit</div>
+        <div class="${css.settingsLabel} form-control-label">Gas limit</div>
         <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
       </div>
     `
 
     const valueEl = yo`
       <div class="${css.crow}">
-        <div class="${css.col1_1}">Value</div>
+        <div class="${css.settingsLabel} form-control-label">Value</div>
         <div class="${css.gasValueContainer}">
           <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
-          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit">
+          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} run-unit-input" id="unit">
             <option data-unit="wei">wei</option>
             <option data-unit="gwei">gwei</option>
             <option data-unit="finney">finney</option>
@@ -127,7 +127,7 @@ class SettingsUI {
     `
 
     const el = yo`
-      <div class="${css.settings}">
+      <div class="${css.settings} module-section">
         ${environmentEl}
         ${networkEl}
         ${accountEl}
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index a4c8fe39fcc..8afe366087c 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -6,17 +6,16 @@ var css = csjs`
     flex-direction: column;
   }
   .instanceContainerTitle {
-    font-weight: bold;
-    margin-bottom: 25px;
-    font-size: 12px;
     display: flex;
     justify-content: space-between;
-    padding-left: 15px;
-    height: 0px;
+    align-items: center;
+    padding-left: 10px;
+    margin: 0 0 16px;
+    font-size: 14px;
+    line-height: 19px;
   }
   .settings {
-    margin-bottom: 2%;
-    padding: 10px 0px 15px 15px;
+    padding: 16px 24px;
   }
   .recorderCount {
     /* margin-right: 30px; */
@@ -27,33 +26,34 @@ var css = csjs`
     /* font-size: 10px; */
   }
   .crow {
-    margin-top: .5em;
-    display: flex;
-    align-items: center;
-    /*width: 500px;*/
+    display: block;
+    margin-top: 8px;
   }
   .col1 {
     width: 30%;
     float: left;
     align-self: center;
   }
-  .col1_1 {
-    font-size: 12px;
-    min-width: 75px;
-    float: left;
-    align-self: center;
+  .settingsLabel {
+    font-size: 11px;
+    margin-bottom: 4px;
+    text-transform: uppercase;
   }
   .environment {
     display: flex;
     align-items: center;
     position: relative;
     width: 100%;
-    padding-right: 25px;
+  }
+  .environment a {
+    margin-left: 7px;
   }
   .account {
     display: flex;
     align-items: center;
-    width: 90%;
+  }
+  .account i {
+    margin-left: 12px;
   }
   .col2 {
     border-radius: 3px;
@@ -74,7 +74,7 @@ var css = csjs`
     margin-bottom: 2%;
     border: none;
     text-align: center;
-    padding: 10px 0px 15px 0px;
+    padding: 16px 14px;
   }
   .pendingTxsContainer  {
     display: flex;
@@ -84,8 +84,7 @@ var css = csjs`
     text-align: center;
   }
   .container {
-    margin-bottom: 4%;
-    padding-left: 15px;
+    padding: 16px 24px;
   }
   .recorderCollapsedView,
   .recorderExpandedView {
@@ -104,7 +103,14 @@ var css = csjs`
   .subcontainer {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .subcontainer i {
+    width: 16px;
+    display: flex;
+    justify-content: center;
+    margin-left: 1px;
   }
   .button button{
     flex: none;
@@ -127,13 +133,13 @@ var css = csjs`
     border-right: 0;
   }
   .atAddressSect {
-    margin-top: 6px;
+    margin-top: 8px;
     height: 32px;
   }
   .atAddressSect input {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    height: 100%;
+    height: 32px;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
   }
   .ataddressinput {
     padding: .25rem;
@@ -141,7 +147,7 @@ var css = csjs`
   .create {
   }
   .input {
-    font-size: 10px;
+    font-size: 10px !important;
   }
   .noInstancesText {
     font-style: italic;
@@ -209,10 +215,11 @@ var css = csjs`
     width: 145px;
   }
   .orLabel {
-    margin-left: 44px;
+    text-align: center;
+    text-transform: uppercase;
   }
   .infoDeployAction {
-    margin-left: 5px;
+    margin-left: 1px;
     font-size: 13px;
     color: var(--info);
   }
@@ -221,18 +228,17 @@ var css = csjs`
     display: flex;
   }
   .gasNval {
-    /* transform: scale(0.7); */
-    /* transform-origin: left; */
-    margin-right: 10px;
-    width: 100px;
+    width: 55%;
     font-size: 0.8rem;
   }
   .gasNvalUnit {
-    /* transform: scale(0.7); */
-    /* transform-origin: left; */
-    margin-right: 10px;
+    width: 41%;
+    margin-left: 10px;
     font-size: 0.8rem;
-    width: 70px;
+  }
+  .deployDropdown {
+    text-align: center;
+    text-transform: uppercase;
   }
 `
 
diff --git a/src/app/tabs/styles/settings-tab-styles.js b/src/app/tabs/styles/settings-tab-styles.js
index 44bc2dd3d7a..3c7cf404cef 100644
--- a/src/app/tabs/styles/settings-tab-styles.js
+++ b/src/app/tabs/styles/settings-tab-styles.js
@@ -49,8 +49,6 @@ const css = csjs`
     margin-bottom: 3px;
   }
   input {
-    margin-right: 5px;
-    cursor: pointer;
     width: inherit;
   }
   input[type=radio] {
diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js
index bf2c89a509e..b2f27add056 100644
--- a/src/app/udapp/run-tab.js
+++ b/src/app/udapp/run-tab.js
@@ -47,7 +47,7 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderContainer () {
-    this.container = yo`<div class="${css.runTabView} py-0 px-2" id="runTabView" ></div>`
+    this.container = yo`<div class="${css.runTabView} run-tab" id="runTabView" ></div>`
 
     var el = yo`
     <div class="list-group list-group-flush">
@@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderInstanceContainer () {
-    this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
+    this.instanceContainer = yo`<div class="${css.instanceContainer} run-instance-section"></div>`
 
     const instanceContainerTitle = yo`
-      <div class=${css.instanceContainerTitle}
+      <div class="${css.instanceContainerTitle} run-instance-title"
         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', [])}
diff --git a/src/app/ui/TreeView.js b/src/app/ui/TreeView.js
index 391f8be10dc..c5d5b0780a1 100644
--- a/src/app/ui/TreeView.js
+++ b/src/app/ui/TreeView.js
@@ -13,6 +13,9 @@ var css = csjs`
   }
   .ul_tv {
     list-style-type: none;
+    margin: 0;
+    padding: 0;
+    border: none;
     -webkit-margin-before: 0px;
     -webkit-margin-after: 0px;
     -webkit-margin-start: 0px;
@@ -74,7 +77,7 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>`
+    return yo`<ul key=${key} class="${css.ul_tv} run-instance-list">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
index 1c9f0d12552..4acefe29428 100644
--- a/src/app/ui/card.js
+++ b/src/app/ui/card.js
@@ -24,7 +24,7 @@ module.exports = class Card {
     self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
     self._view.cardHeader = yo`
     <div class=${css.cardHeader} onclick=${() => trigger(self._view.arrow)}>
-      <div class="p-1 ${css.cardTitles}">
+      <div class="pr-1 ${css.cardTitles}">
         <div class=${css.cardTitle}>${self._opts.title}</div>
         ${self._view.statusBar}
       </div>
@@ -43,7 +43,7 @@ module.exports = class Card {
 
     // HTML
     self._view.el = yo`
-      <div class="${css.cardContainer} p-2 list-group-item">
+      <div class="${css.cardContainer} px-4 py-3 list-group-item">
         ${self._view.cardHeader}
         ${self._view.cardBody}
       </div>`
@@ -55,12 +55,13 @@ module.exports = class Card {
 
 const css = csjs`
   .cardContainer {
-    padding             : 10px 15px 15px 0;
-    margin-bottom       : 2%;
+    padding             : 16px 24px;
+    margin              : 0;
   }
   .cardHeader {
     display             : flex;
     justify-content     : space-between;
+    align-items         : center;
   }
   .statusBar {}
   .cardBody {}
@@ -70,9 +71,10 @@ const css = csjs`
     align-items         : center;
   }
   .cardTitle {
-    font-size           : 13px;
-    font-weight         : bold;
-    margin-right        : 5px;
+    font-size           : 14px;
+    font-weight         : 400;
+    margin-right        : 8px;
+    line-height         : 19px;
   }
   .expandCollapseButton {}
   .arrow {
diff --git a/src/app/ui/multiParamManager.js b/src/app/ui/multiParamManager.js
index 8c1d9bb780f..c706abf6546 100644
--- a/src/app/ui/multiParamManager.js
+++ b/src/app/ui/multiParamManager.js
@@ -100,7 +100,7 @@ class MultiParamManager {
     if (this.funABI.inputs) {
       return yo`<div>
         ${this.funABI.inputs.map(function (inp) {
-          return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input placeholder="${inp.type}" title="${inp.name}"></div>`
+          return yo`<div class="${css.multiArg} run-instance-multi-arg"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}"></div>`
         })}
       </div>`
     }
@@ -116,17 +116,16 @@ class MultiParamManager {
       title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)'
     }
 
-    this.basicInputField = yo`<input></input>`
+    this.basicInputField = yo`<input class="form-control"></input>`
     this.basicInputField.setAttribute('placeholder', this.inputs)
     this.basicInputField.setAttribute('title', this.inputs)
-    this.basicInputField.setAttribute('style', 'flex: 4')
 
     var onClick = () => {
       this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
     }
     let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>`
     this.contractActionsContainerSingle = yo`
-    <div class="${css.contractActionsContainerSingle}" >
+    <div class="${css.contractActionsContainerSingle} run-instance-dropdown-top" >
       ${funcButton}
       ${this.basicInputField}
       <i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
@@ -146,14 +145,13 @@ class MultiParamManager {
     var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
 
     this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
-      <div class="${css.contractActionsContainerMultiInner} text-dark" >
-        <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
-          <div class="${css.multiTitle}">${title}</div>
+      <div class="${css.contractActionsContainerMultiInner} text-dark run-instance-dropdown-content" >
+        <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader} run-instance-multi-header">
+          <div class="${css.multiTitle} run-instance-multi-title">${title}</div>
           <i class='fas fa-angle-up ${css.methCaret}'></i>
         </div>
         ${this.multiFields}
         <div class="${css.group} ${css.multiArg}" >
-          ${expandedButton}
           ${copyToClipboard(
             () => {
               var multiString = this.getMultiValsString()
@@ -170,12 +168,13 @@ class MultiParamManager {
                 return encodeObj.data
               }
             }, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')}
+            ${expandedButton}
         </div>
       </div>
     </div>`
 
     var contractProperty = yo`
-      <div class="${css.contractProperty}">
+      <div class="${css.contractProperty} run-instance-dropdown">
         ${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
       </div>
     `
diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js
index 5a21f2c41ef..cc06e662e0a 100644
--- a/src/app/ui/universal-dapp-ui.js
+++ b/src/app/ui/universal-dapp-ui.js
@@ -54,12 +54,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   let self = this
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
   address = ethJSUtil.toChecksumAddress(address)
-  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance run-instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   const context = this.blockchain.context()
 
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
-    <div class="${css.title} alert alert-secondary p-2">
+    <div class="${css.title} alert alert-secondary run-instance-header">
       <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </button>
@@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`
-    <div class="${css.cActionsWrapper}">
+    <div class="${css.cActionsWrapper} run-instance-content">
     </div>
   `
 
@@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   }
 
   function toggleClass (e) {
-    $(instance).toggleClass(`${css.hidesub}`)
+    $(instance).toggleClass(`${css.hidesub} expanded`)
     // e.currentTarget.querySelector('i')
     e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
     e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
@@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
     self.blockchain.getInputs(args.funABI)
   )
 
-  const contractActionsContainer = yo`<div class="${css.contractActionsContainer}" >${multiParamManager.render()}</div>`
+  const contractActionsContainer = yo`<div class="${css.contractActionsContainer} run-instance-container" >${multiParamManager.render()}</div>`
   contractActionsContainer.appendChild(outputOverride)
 
   return contractActionsContainer
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index bb1ab54c189..b384971f08e 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -9,31 +9,26 @@ var css = csjs`
     display: flex;
     justify-content: space-between;
     font-size: 11px;
-    /* height: 30px; */
     width: 100%;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    margin-bottom: 0px;
-    padding-left: 0px;
-    padding-right: 10px;
-  }
-  .noInstancesText {
-
+    margin-bottom: 8px;
+    padding: 8px 10px;
   }
   .titleLine {
     display: flex;
     align-items: baseline;
   }
   .titleText {
-    /* margin-right: 1em; */
     word-break: break-word;
     min-width: 170px;
     width: 100%;
   }
   .spanTitleText {
-    /* font-size: .8rem; */
+    line-height: 12px;
+    padding: 0;
     font-size: 11px;
     width:100%;
   }
@@ -44,7 +39,6 @@ var css = csjs`
     color: var(--primary);
   }
   .titleExpander {
-    /* margin-right: 10px; */
     padding: 5px 7px;
   }
   .nameNbuts {
@@ -54,9 +48,7 @@ var css = csjs`
   }
   .instance {
     display: block;
-    /* display: flex; */
     flex-direction: column;
-    /* padding: 5px 0 0 10px; */
     margin-bottom: 10px;
   }
   .instance.hidesub .title {
@@ -69,19 +61,21 @@ var css = csjs`
     display: none;
   }
   .methCaret {
-    margin-right: 5px;
+    min-width: 12px;
+    width: 12px;
+    margin-left: 4px;
     cursor: pointer;
     font-size: 16px;
-    padding-top: 5px;
-    vertical-align: top;
+    line-height: 0.6;
+    vertical-align: middle;
+    padding: 0;
   }
   .cActionsWrapper {
-    padding: 0px 0 10px 10px;
-    border: 1px solid rgba(0,0,0,0.125);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0.25rem;
     border-top-rightt-radius: 0;
     border-bottom-right-radius: 0.25rem;
+    padding: 0 10px 7px;
   }
   .group:after {
     content: "";
@@ -93,11 +87,9 @@ var css = csjs`
     display: flex;
     overflow: hidden;
   }
-  .contractActions {
-  }
   .instanceButton {
+    height: 32px;
     border-radius: 3px;
-    flex: 3;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -107,14 +99,12 @@ var css = csjs`
     cursor: pointer;
     margin-left: 5px;
   }
-  .udapp {}
   .udappClose {
     display: flex;
     justify-content: flex-end;
   }
   .contractProperty {
-    margin-bottom: 0.4em;
-    margin-top: 1em;
+    margin: 0 0 8px;
     width:100%;
   }
   .contractProperty.hasArgs input {
@@ -126,10 +116,8 @@ var css = csjs`
     border-bottom-left-radius: 0;
   }
   .contractProperty button {
-    /* background-color: var(--warning); */
     min-width: 100px;
     width: 100px;
-    /* font-size: 10px; */
     margin:0;
     word-break: inherit;
   }
@@ -139,7 +127,6 @@ var css = csjs`
     border-color: lightgray;
   }
   .contractProperty.constant button {
-    /* background-color:var(--info); */
     min-width: 100px;
     width: 100px;
     margin:0;
@@ -149,9 +136,6 @@ var css = csjs`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .contractProperty input {
-    /* width: 75% */
-  }
   .contractProperty > .value {
     box-sizing: border-box;
     float: left;
@@ -164,42 +148,44 @@ var css = csjs`
     border-bottom: 4px solid var(--light);
   }
   .contractActionsContainer {
-    width: 98%;
+    width: 100%;
   }
   .contractActionsContainerSingle {
     display: flex;
     width: 100%;
   }
+  .contractActionsContainerSingle i {
+    line-height: 2;
+  }
   .contractActionsContainerMulti {
     display:none;
     width: 100%;
   }
   .contractActionsContainerMultiInner {
-    margin-bottom: 10px;
-    padding: 0px 5px 5px 5px;
+    width: 100%;
+    padding: 16px 8px 16px 14px;
     background-color: var(--light);
-    width: 99%;
     border-radius: 3px;
   }
   .multiHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
     text-align: left;
     font-size: 10px;
-    margin-bottom: 5px;
     font-weight: bold;
   }
   .contractActionsContainerMultiInner .multiTitle {
     padding-left: 10px;
   }
   .contractProperty .multiTitle {
+    padding: 0;
+    line-height: 16px;
     display: inline-block;
-    width: 90%;
     font-size: 12px;
-    height: 25px;
-    padding-left: 20px;
     font-weight: bold;
-    line-height: 25px;
     cursor: default;
-    padding-top: 5px;
   }
   .contractProperty .contractActionsContainerMultiInner .multiArg label{
     text-align: right;
@@ -219,26 +205,26 @@ var css = csjs`
     cursor: default;
   }
   .multiArg {
-    margin-bottom: 8px;
-    /* display: flex; */
-    clear:both;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 4px;
   }
   .multiArg input{
     padding: 5px;
   }
-
   .multiArg label {
-      float: left;
-      margin-right: 6px;
-      font-size: 10px;
-      width: 30%;
-      padding-top: 5px;
-      word-break: break-all;
+    width: auto;
+    padding: 0;
+    margin: 0 4px 0 0;
+    font-size: 10px;
+    line-height: 12px;
+    text-align: right;
+    word-break: initial;
   }
   .multiArg button {
+    max-width: 100px;
     border-radius: 3px;
-    float: right;
-    margin-right: 2%;
     border-width: 1px;
     width: inherit;
   }
@@ -252,12 +238,12 @@ var css = csjs`
   }
   .hasArgs input {
     display: block;
+    height: 32px;
     border: 1px solid #dddddd;
     padding: .36em;
     border-left: none;
     padding: 8px 8px 8px 10px;
-    font-size: 10px;
-    /* height: 25px; */
+    font-size: 10px !important;
   }
   .hasArgs button {
     border-top-right-radius: 0;
@@ -271,9 +257,7 @@ var css = csjs`
     border-radius: 3px;
   }
   .contractActionsContainerMultiInner .multiArg i {
-    padding-right: 15px;
-    padding-top: 5px;
-    float: right;
+    padding-right: 10px;
   },
   .hideWarningsContainer {
     display: flex;

From 4e7c94ce84b278b974cd13cb589a7ca9c677bf14 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Fri, 6 Dec 2019 16:46:45 +0100
Subject: [PATCH 02/12] Decrease transact button font-size and fix firefox bug

---
 src/universal-dapp-styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index b384971f08e..465b213b894 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -252,6 +252,7 @@ var css = csjs`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 11px;
   }
   .hasArgs .contractActionsContainerMulti button {
     border-radius: 3px;

From f29335d85d86fd1d55c675285fa14afae20bad4b Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Thu, 12 Dec 2019 10:47:17 +0100
Subject: [PATCH 03/12] Add light theme

---
 src/app/udapp/run-tab.js        | 2 +-
 src/app/ui/copy-to-clipboard.js | 2 +-
 src/universal-dapp-styles.js    | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js
index b2f27add056..7da555816d2 100644
--- a/src/app/udapp/run-tab.js
+++ b/src/app/udapp/run-tab.js
@@ -142,7 +142,7 @@ export class RunTab extends LibraryPlugin {
 
     const expandedView = yo`
       <div class=${css.recorderExpandedView}>
-        <div class=${css.recorderDescription}>
+        <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.
         </div>
diff --git a/src/app/ui/copy-to-clipboard.js b/src/app/ui/copy-to-clipboard.js
index 7778446df32..58b032944b5 100644
--- a/src/app/ui/copy-to-clipboard.js
+++ b/src/app/ui/copy-to-clipboard.js
@@ -12,7 +12,7 @@ var css = csjs`
   }
 `
 
-module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
+module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') {
   var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" aria-hidden="true"></i>`
   copyIcon.onclick = (event) => {
     event.stopPropagation()
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 465b213b894..50c91afc308 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -14,7 +14,6 @@ var css = csjs`
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    margin-bottom: 8px;
     padding: 8px 10px;
   }
   .titleLine {
@@ -49,7 +48,8 @@ var css = csjs`
   .instance {
     display: block;
     flex-direction: column;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+    padding: 0 4px;
   }
   .instance.hidesub .title {
       display: flex;
@@ -75,7 +75,7 @@ var css = csjs`
     border-bottom-left-radius: 0.25rem;
     border-top-rightt-radius: 0;
     border-bottom-right-radius: 0.25rem;
-    padding: 0 10px 7px;
+    padding: 8px 10px 7px;
   }
   .group:after {
     content: "";

From aa3157a6eb2ba4d3eda4702d477616fcfdc6ea0d Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Mon, 16 Dec 2019 12:04:30 +0100
Subject: [PATCH 04/12] Move lauout styles from themes to css-in-js files

---
 src/app/ui/universal-dapp-ui.js |  2 +-
 src/universal-dapp-styles.js    | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js
index cc06e662e0a..142834c1e1a 100644
--- a/src/app/ui/universal-dapp-ui.js
+++ b/src/app/ui/universal-dapp-ui.js
@@ -59,7 +59,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
 
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
-    <div class="${css.title} alert alert-secondary run-instance-header">
+    <div class="${css.title} alert alert-secondary">
       <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </button>
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 50c91afc308..72c49c77ce8 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -14,7 +14,14 @@ var css = csjs`
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    padding: 8px 10px;
+    padding: 8px 0;
+    margin: 0;
+    background: none;
+    border: none;
+  }
+  .title button {
+    background: none;
+    border: none;
   }
   .titleLine {
     display: flex;
@@ -22,14 +29,15 @@ var css = csjs`
   }
   .titleText {
     word-break: break-word;
-    min-width: 170px;
     width: 100%;
+    border: none;
   }
   .spanTitleText {
     line-height: 12px;
     padding: 0;
     font-size: 11px;
     width:100%;
+    border: none;
   }
   .inputGroupText {
     width: 100%;

From a0e30e5df71e169e40f1bab2bbe9b66b5e4b95f3 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Fri, 20 Dec 2019 17:14:48 +0100
Subject: [PATCH 05/12] Move styles from bootstrap theme to css-in-js

---
 src/app/tabs/runTab/contractDropdown.js |  2 +-
 src/app/tabs/runTab/settings.js         |  4 ++--
 src/app/tabs/styles/run-tab-styles.js   | 11 +++--------
 src/universal-dapp-styles.js            | 10 ++++------
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index 85d16124ac2..cb19785357b 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/src/app/tabs/runTab/contractDropdown.js
@@ -54,7 +54,7 @@ class ContractDropdownUI {
     this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
     let el = yo`
-      <div class="${css.container} module-section">
+      <div class="${css.container} border-bottom border-light">
         <div class="${css.settingsLabel} form-control-label">Contract</div>
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index 007e348886d..09486bdc849 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/src/app/tabs/runTab/settings.js
@@ -116,7 +116,7 @@ class SettingsUI {
         <div class="${css.settingsLabel} form-control-label">Value</div>
         <div class="${css.gasValueContainer}">
           <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
-          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} run-unit-input" id="unit">
+          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit">
             <option data-unit="wei">wei</option>
             <option data-unit="gwei">gwei</option>
             <option data-unit="finney">finney</option>
@@ -127,7 +127,7 @@ class SettingsUI {
     `
 
     const el = yo`
-      <div class="${css.settings} module-section">
+      <div class="${css.settings} border-bottom border-light">
         ${environmentEl}
         ${networkEl}
         ${accountEl}
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index 8afe366087c..8ad42fea1d9 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -5,6 +5,9 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  .runTabView::-webkit-scrollbar {
+    display: none;
+  }
   .instanceContainerTitle {
     display: flex;
     justify-content: space-between;
@@ -17,14 +20,6 @@ var css = csjs`
   .settings {
     padding: 16px 24px;
   }
-  .recorderCount {
-    /* margin-right: 30px; */
-    /* min-width: 13px; */
-    /* display: flex; */
-    /* justify-content: center; */
-    /* align-items: center; */
-    /* font-size: 10px; */
-  }
   .crow {
     display: block;
     margin-top: 8px;
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 72c49c77ce8..ccfb88a892e 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -38,6 +38,8 @@ var css = csjs`
     font-size: 11px;
     width:100%;
     border: none;
+    background: none;
+    text-transform: uppercase;
   }
   .inputGroupText {
     width: 100%;
@@ -57,7 +59,8 @@ var css = csjs`
     display: block;
     flex-direction: column;
     margin-bottom: 12px;
-    padding: 0 4px;
+    background: none;
+    border-radius: 2px;
   }
   .instance.hidesub .title {
       display: flex;
@@ -150,11 +153,6 @@ var css = csjs`
     align-self: center;
     margin-left: 4px;
   }
-  .value ul {
-    margin-bottom: 10px;
-    padding-top: 5px;
-    border-bottom: 4px solid var(--light);
-  }
   .contractActionsContainer {
     width: 100%;
   }

From ab65299c981b200bdbaf3a6c5c264d1a24ccbc2a Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Wed, 8 Jan 2020 18:06:21 +0100
Subject: [PATCH 06/12] Replace div tag with label tag

---
 src/app/tabs/runTab/contractDropdown.js |  2 +-
 src/app/tabs/runTab/settings.js         | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index cb19785357b..3f4ba363a4a 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/src/app/tabs/runTab/contractDropdown.js
@@ -55,7 +55,7 @@ class ContractDropdownUI {
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
     let el = yo`
       <div class="${css.container} border-bottom border-light">
-        <div class="${css.settingsLabel} form-control-label">Contract</div>
+        <label class="${css.settingsLabel}">Contract</label>
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
         </div>
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index 09486bdc849..e545d3ddf20 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/src/app/tabs/runTab/settings.js
@@ -56,9 +56,9 @@ class SettingsUI {
 
     var environmentEl = yo`
       <div class="${css.crow}">
-        <div id="selectExEnv" class="${css.settingsLabel} form-control-label">
+        <label id="selectExEnv" class="${css.settingsLabel}">
           Environment
-        </div>
+        </label>
         <div class="${css.environment}">
           <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}">
             <option id="vm-mode"
@@ -90,12 +90,12 @@ class SettingsUI {
     `
     const accountEl = yo`
       <div class="${css.crow}">
-        <div class="${css.settingsLabel} form-control-label">
+        <label class="${css.settingsLabel}">
           Account
           <span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}>
             <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i>
           </span>
-        </div>
+        </label>
         <div class="${css.account}">
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
@@ -106,14 +106,14 @@ class SettingsUI {
 
     const gasPriceEl = yo`
       <div class="${css.crow}">
-        <div class="${css.settingsLabel} form-control-label">Gas limit</div>
+        <label class="${css.settingsLabel}">Gas limit</label>
         <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
       </div>
     `
 
     const valueEl = yo`
       <div class="${css.crow}">
-        <div class="${css.settingsLabel} form-control-label">Value</div>
+        <label class="${css.settingsLabel}">Value</label>
         <div class="${css.gasValueContainer}">
           <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
           <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit">

From b6144ac204766940db264a5ceb9102073196c079 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Tue, 14 Jan 2020 10:18:22 +0100
Subject: [PATCH 07/12] Fix label letter case

---
 src/app/tabs/compileTab/compilerContainer.js      | 12 ++++++------
 src/app/tabs/staticanalysis/staticAnalysisView.js |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js
index 784405f5fc5..71855580af6 100644
--- a/src/app/tabs/compileTab/compilerContainer.js
+++ b/src/app/tabs/compileTab/compilerContainer.js
@@ -241,7 +241,7 @@ class CompilerContainer {
             <div class="row w-100 no-gutters mb-2">
               <div class="col-sm-4">
                 <div class="d-flex flex-row justify-content-end">
-                  <label class="${css.compilerLabel} input-group-text pr-0 border-0 w-100" for="versionSelector">
+                  <label class="${css.compilerLabel} form-check-label input-group-text pr-0 border-0 w-100" for="versionSelector">
                     <button class="far fa-plus-square border-0 p-0 mx-2 btn-sm" onclick="${(e) => this.promtCompiler(e)}" title="Add a custom compiler with URL"></button>
                     Compiler
                   </label>
@@ -257,7 +257,7 @@ class CompilerContainer {
             </div>
             <div class="row w-100 no-gutters mb-2">
               <div class="col-sm-4">
-                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
+                <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
               </div>
               <div class="col-sm-8">
                 ${this._view.languageSelector}
@@ -265,7 +265,7 @@ class CompilerContainer {
             </div>
             <div class="row w-100 no-gutters">
               <div class="col-sm-4">
-                <label class="${css.compilerLabel} input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label>
+                <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label>
               </div>
               <div class="col-sm-8">
                 ${this._view.evmVersionSelector}
@@ -280,15 +280,15 @@ class CompilerContainer {
           <ul class="list-group list-group-flush">
             <li class="list-group-item form-group ${css.compilerConfig}">
               ${this._view.autoCompile}
-              <label for="autoCompile">Auto compile</label>
+              <label class="form-check-label" for="autoCompile">Auto compile</label>
             </li>
             <li class="list-group-item form-group ${css.compilerConfig}">
               ${this._view.optimize}
-              <label for="optimize">Enable optimization</label>
+              <label class="form-check-label" for="optimize">Enable optimization</label>
             </li>
             <li class="list-group-item form-group ${css.compilerConfig}">
               ${this._view.hideWarningsBox}
-              <label for="hideWarningsBox">Hide warnings</label>
+              <label class="form-check-label" for="hideWarningsBox">Hide warnings</label>
             </li>
           </ul>
         </article>
diff --git a/src/app/tabs/staticanalysis/staticAnalysisView.js b/src/app/tabs/staticanalysis/staticAnalysisView.js
index 5c1a6e3a50b..a84b4bda20d 100644
--- a/src/app/tabs/staticanalysis/staticAnalysisView.js
+++ b/src/app/tabs/staticanalysis/staticAnalysisView.js
@@ -158,7 +158,7 @@ staticAnalysisView.prototype.renderModules = function () {
     var category = groupedModules[categoryId]
     var entriesDom = category.map((item, i) => {
       return yo`
-        <label class="${css.label}">
+        <label class="${css.label} form-check-label">
           <input id="staticanalysismodule_${categoryId}_${i}"
             type="checkbox"
             class="staticAnalysisItem"

From 2bcf6fd9a9502adaeff0f57a2bf989516b9443c0 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Tue, 14 Jan 2020 10:18:35 +0100
Subject: [PATCH 08/12] Decrease button font-size

---
 src/universal-dapp-styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index ccfb88a892e..2b8773a54bf 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -102,6 +102,7 @@ var css = csjs`
     height: 32px;
     border-radius: 3px;
     white-space: nowrap;
+    font-size: 11px;
     overflow: hidden;
     text-overflow: ellipsis;
   }

From e8ea346f6eb74fb8dc0a4b55087df41bcb63b4ba Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Tue, 14 Jan 2020 17:03:31 +0100
Subject: [PATCH 09/12] Fix select arrows appearence

---
 src/app/tabs/compileTab/compilerContainer.js | 2 +-
 src/app/tabs/runTab/settings.js              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js
index 71855580af6..8595361407e 100644
--- a/src/app/tabs/compileTab/compilerContainer.js
+++ b/src/app/tabs/compileTab/compilerContainer.js
@@ -250,7 +250,7 @@ class CompilerContainer {
               <div class="col-sm-8">
                 ${this._view.versionSelector}
                 <div class="pt-0 ${css.nightlyBuilds}">
-                  <label for="nightlies" class="text-dark p-0 m-0">Include nightly builds</label>
+                  <label for="nightlies" class="text-dark p-0 m-0 form-check-label">Include nightly builds</label>
                   ${this._view.includeNightlies}
                 </div>
               </div>
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index e545d3ddf20..236dc801906 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/src/app/tabs/runTab/settings.js
@@ -60,7 +60,7 @@ class SettingsUI {
           Environment
         </label>
         <div class="${css.environment}">
-          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}">
+          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select} custom-select">
             <option id="vm-mode"
               title="Execution environment does not connect to any node, everything is local and in memory only."
               value="vm" name="executionContext"> JavaScript VM
@@ -97,7 +97,7 @@ class SettingsUI {
           </span>
         </label>
         <div class="${css.account}">
-          <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
+          <select name="txorigin" class="form-control ${css.select} custom-select" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
           <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>
         </div>
@@ -116,7 +116,7 @@ class SettingsUI {
         <label class="${css.settingsLabel}">Value</label>
         <div class="${css.gasValueContainer}">
           <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
-          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit">
+          <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} custom-select" id="unit">
             <option data-unit="wei">wei</option>
             <option data-unit="gwei">gwei</option>
             <option data-unit="finney">finney</option>

From 593d3b56d24c44e97d732cc111aee27cdcf8689a Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Thu, 16 Jan 2020 16:45:04 +0100
Subject: [PATCH 10/12] Reduce space between sections

---
 src/app/tabs/runTab/contractDropdown.js | 2 +-
 src/app/tabs/runTab/settings.js         | 2 +-
 src/app/tabs/styles/run-tab-styles.js   | 6 +++---
 src/app/tabs/theme-module.js            | 4 ++--
 src/app/udapp/run-tab.js                | 2 +-
 src/app/ui/card.js                      | 5 +++--
 src/universal-dapp-styles.js            | 3 +--
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js
index 3f4ba363a4a..e8704e944a8 100644
--- a/src/app/tabs/runTab/contractDropdown.js
+++ b/src/app/tabs/runTab/contractDropdown.js
@@ -54,7 +54,7 @@ class ContractDropdownUI {
     this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
     this.orLabel = yo`<div class="${css.orLabel}">or</div>`
     let el = yo`
-      <div class="${css.container} border-bottom border-light">
+      <div class="${css.container}">
         <label class="${css.settingsLabel}">Contract</label>
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js
index 236dc801906..08f05226017 100644
--- a/src/app/tabs/runTab/settings.js
+++ b/src/app/tabs/runTab/settings.js
@@ -127,7 +127,7 @@ class SettingsUI {
     `
 
     const el = yo`
-      <div class="${css.settings} border-bottom border-light">
+      <div class="${css.settings}">
         ${environmentEl}
         ${networkEl}
         ${accountEl}
diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index 8ad42fea1d9..dd3d07839f5 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -18,7 +18,7 @@ var css = csjs`
     line-height: 19px;
   }
   .settings {
-    padding: 16px 24px;
+    padding: 0 24px 16px;
   }
   .crow {
     display: block;
@@ -69,7 +69,7 @@ var css = csjs`
     margin-bottom: 2%;
     border: none;
     text-align: center;
-    padding: 16px 14px;
+    padding: 0 14px 16px;
   }
   .pendingTxsContainer  {
     display: flex;
@@ -79,7 +79,7 @@ var css = csjs`
     text-align: center;
   }
   .container {
-    padding: 16px 24px;
+    padding: 0 24px 16px;
   }
   .recorderCollapsedView,
   .recorderExpandedView {
diff --git a/src/app/tabs/theme-module.js b/src/app/tabs/theme-module.js
index b13355f97dd..1723bdfb2d2 100644
--- a/src/app/tabs/theme-module.js
+++ b/src/app/tabs/theme-module.js
@@ -4,8 +4,8 @@ import * as packageJson from '../../../package.json'
 import yo from 'yo-yo'
 
 const themes = [
-  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1578991867/remix-dark-theme.css'},
-  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1578991821/light-theme.css'},
+  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1579188869/remix-dark-theme.css'},
+  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1579188869/light-theme.css'},
 
   // switching to the url Todo: remove when the theme is ready
   // {name: 'Dark', quality: 'dark', url: 'assets/css/remix-dark-theme.css'},
diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js
index 7da555816d2..9cb2c35ae29 100644
--- a/src/app/udapp/run-tab.js
+++ b/src/app/udapp/run-tab.js
@@ -62,7 +62,7 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderInstanceContainer () {
-    this.instanceContainer = yo`<div class="${css.instanceContainer} run-instance-section"></div>`
+    this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 run-instance-section"></div>`
 
     const instanceContainerTitle = yo`
       <div class="${css.instanceContainerTitle} run-instance-title"
diff --git a/src/app/ui/card.js b/src/app/ui/card.js
index 4acefe29428..fbac2693499 100644
--- a/src/app/ui/card.js
+++ b/src/app/ui/card.js
@@ -43,7 +43,7 @@ module.exports = class Card {
 
     // HTML
     self._view.el = yo`
-      <div class="${css.cardContainer} px-4 py-3 list-group-item">
+      <div class="${css.cardContainer} list-group-item border-0">
         ${self._view.cardHeader}
         ${self._view.cardBody}
       </div>`
@@ -55,8 +55,9 @@ module.exports = class Card {
 
 const css = csjs`
   .cardContainer {
-    padding             : 16px 24px;
+    padding             : 0 24px 16px;
     margin              : 0;
+    background          : none;
   }
   .cardHeader {
     display             : flex;
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 2b8773a54bf..68b71a403bd 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -14,7 +14,7 @@ var css = csjs`
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    padding: 8px 0;
+    padding: 0 0 8px;
     margin: 0;
     background: none;
     border: none;
@@ -116,7 +116,6 @@ var css = csjs`
     justify-content: flex-end;
   }
   .contractProperty {
-    margin: 0 0 8px;
     width:100%;
   }
   .contractProperty.hasArgs input {

From b5e6d9d53dc2bb68c4b62fc2f6100e966c36b464 Mon Sep 17 00:00:00 2001
From: alexcherman <sashacherman@gmail.com>
Date: Thu, 13 Feb 2020 10:42:37 +0100
Subject: [PATCH 11/12] Remove unnecessary classes

---
 src/app/tabs/theme-module.js    |  4 ++--
 src/app/udapp/run-tab.js        |  4 ++--
 src/app/ui/TreeView.js          |  5 +----
 src/app/ui/multiParamManager.js | 10 +++++-----
 src/app/ui/universal-dapp-ui.js |  8 ++++----
 src/universal-dapp-styles.js    |  7 ++++++-
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/app/tabs/theme-module.js b/src/app/tabs/theme-module.js
index 1723bdfb2d2..40d931e6397 100644
--- a/src/app/tabs/theme-module.js
+++ b/src/app/tabs/theme-module.js
@@ -4,8 +4,8 @@ import * as packageJson from '../../../package.json'
 import yo from 'yo-yo'
 
 const themes = [
-  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1579188869/remix-dark-theme.css'},
-  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1579188869/light-theme.css'},
+  {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/remix-dark-theme_w5nghe.css'},
+  {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/light-theme_fswxxf.css'},
 
   // switching to the url Todo: remove when the theme is ready
   // {name: 'Dark', quality: 'dark', url: 'assets/css/remix-dark-theme.css'},
diff --git a/src/app/udapp/run-tab.js b/src/app/udapp/run-tab.js
index 9cb2c35ae29..0494c5aeee1 100644
--- a/src/app/udapp/run-tab.js
+++ b/src/app/udapp/run-tab.js
@@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin {
   }
 
   renderInstanceContainer () {
-    this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 run-instance-section"></div>`
+    this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 list-group-item"></div>`
 
     const instanceContainerTitle = yo`
-      <div class="${css.instanceContainerTitle} run-instance-title"
+      <div class="${css.instanceContainerTitle}"
         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', [])}
diff --git a/src/app/ui/TreeView.js b/src/app/ui/TreeView.js
index c5d5b0780a1..391f8be10dc 100644
--- a/src/app/ui/TreeView.js
+++ b/src/app/ui/TreeView.js
@@ -13,9 +13,6 @@ var css = csjs`
   }
   .ul_tv {
     list-style-type: none;
-    margin: 0;
-    padding: 0;
-    border: none;
     -webkit-margin-before: 0px;
     -webkit-margin-after: 0px;
     -webkit-margin-start: 0px;
@@ -77,7 +74,7 @@ class TreeView {
     var children = Object.keys(json).map((innerkey) => {
       return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
     })
-    return yo`<ul key=${key} class="${css.ul_tv} run-instance-list">${children}</ul>`
+    return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>`
   }
 
   formatData (key, data, children, expand, keyPath) {
diff --git a/src/app/ui/multiParamManager.js b/src/app/ui/multiParamManager.js
index c706abf6546..baa2a37dd69 100644
--- a/src/app/ui/multiParamManager.js
+++ b/src/app/ui/multiParamManager.js
@@ -100,7 +100,7 @@ class MultiParamManager {
     if (this.funABI.inputs) {
       return yo`<div>
         ${this.funABI.inputs.map(function (inp) {
-          return yo`<div class="${css.multiArg} run-instance-multi-arg"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}"></div>`
+          return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}"></div>`
         })}
       </div>`
     }
@@ -125,7 +125,7 @@ class MultiParamManager {
     }
     let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>`
     this.contractActionsContainerSingle = yo`
-    <div class="${css.contractActionsContainerSingle} run-instance-dropdown-top" >
+    <div class="${css.contractActionsContainerSingle}" >
       ${funcButton}
       ${this.basicInputField}
       <i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
@@ -145,8 +145,8 @@ class MultiParamManager {
     var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
 
     this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
-      <div class="${css.contractActionsContainerMultiInner} text-dark run-instance-dropdown-content" >
-        <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader} run-instance-multi-header">
+      <div class="${css.contractActionsContainerMultiInner} text-dark" >
+        <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
           <div class="${css.multiTitle} run-instance-multi-title">${title}</div>
           <i class='fas fa-angle-up ${css.methCaret}'></i>
         </div>
@@ -174,7 +174,7 @@ class MultiParamManager {
     </div>`
 
     var contractProperty = yo`
-      <div class="${css.contractProperty} run-instance-dropdown">
+      <div class="${css.contractProperty}">
         ${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
       </div>
     `
diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js
index 142834c1e1a..997b1548105 100644
--- a/src/app/ui/universal-dapp-ui.js
+++ b/src/app/ui/universal-dapp-ui.js
@@ -54,7 +54,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   let self = this
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
   address = ethJSUtil.toChecksumAddress(address)
-  var instance = yo`<div class="instance run-instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   const context = this.blockchain.context()
 
   var shortAddress = helper.shortenAddress(address)
@@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`
-    <div class="${css.cActionsWrapper} run-instance-content">
+    <div class="${css.cActionsWrapper}">
     </div>
   `
 
@@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   }
 
   function toggleClass (e) {
-    $(instance).toggleClass(`${css.hidesub} expanded`)
+    $(instance).toggleClass(`${css.hidesub} bg-light`)
     // e.currentTarget.querySelector('i')
     e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
     e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
@@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
     self.blockchain.getInputs(args.funABI)
   )
 
-  const contractActionsContainer = yo`<div class="${css.contractActionsContainer} run-instance-container" >${multiParamManager.render()}</div>`
+  const contractActionsContainer = yo`<div class="${css.contractActionsContainer}" >${multiParamManager.render()}</div>`
   contractActionsContainer.appendChild(outputOverride)
 
   return contractActionsContainer
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 68b71a403bd..23750a28e28 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -62,6 +62,9 @@ var css = csjs`
     background: none;
     border-radius: 2px;
   }
+  .instance.hidesub {
+    border-bottom: 1px solid;
+  }
   .instance.hidesub .title {
       display: flex;
   }
@@ -155,10 +158,12 @@ var css = csjs`
   }
   .contractActionsContainer {
     width: 100%;
+    margin-bottom: 8px;
   }
   .contractActionsContainerSingle {
     display: flex;
     width: 100%;
+    margin-bottom: 8px;
   }
   .contractActionsContainerSingle i {
     line-height: 2;
@@ -170,8 +175,8 @@ var css = csjs`
   .contractActionsContainerMultiInner {
     width: 100%;
     padding: 16px 8px 16px 14px;
-    background-color: var(--light);
     border-radius: 3px;
+    margin-bottom: 8px;
   }
   .multiHeader {
     display: flex;

From 643293ed4fe6ef2ed70c798f5a6226536f843ab7 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@ethereum.org>
Date: Thu, 20 Feb 2020 19:25:12 +0100
Subject: [PATCH 12/12] adding form-control to input for Low level interactions

---
 src/app/ui/universal-dapp-ui.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/ui/universal-dapp-ui.js b/src/app/ui/universal-dapp-ui.js
index 997b1548105..2299a290c31 100644
--- a/src/app/ui/universal-dapp-ui.js
+++ b/src/app/ui/universal-dapp-ui.js
@@ -120,7 +120,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   })
 
   const calldataInput = yo`
-    <input id="deployAndRunLLTxCalldata" class="w-100 m-0" title="The Calldata to send to fallback function of the contract.">
+    <input id="deployAndRunLLTxCalldata" class="w-100 m-0 form-control" title="The Calldata to send to fallback function of the contract.">
   `
   const llIError = yo`
     <label id="deployAndRunLLTxError" class="text-danger"></label>