EthWorks update for deploy & run module for the dark theme

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>
@@ -250,22 +250,22 @@ 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>
             </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}
               </div>
             </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>

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}">
+        <label class="${css.settingsLabel}">Contract</label>
         <div class="${css.subcontainer}">
           ${this.selectContractNames} ${this.compFails} ${info}
         </div>

src/app/tabs/runTab/settings.js

@@ -56,11 +56,11 @@ class SettingsUI {
 
     var environmentEl = yo`
       <div class="${css.crow}">
-        <div id="selectExEnv" class="${css.col1_1}">
+        <label id="selectExEnv" class="${css.settingsLabel}">
           Environment
-        </div>
-        <div class=${css.environment}>
-          <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}">
+        </label>
+        <div class="${css.environment}">
+          <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
@@ -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,14 +90,14 @@ class SettingsUI {
     `
     const accountEl = yo`
       <div class="${css.crow}">
-        <div class="${css.col1_1}">
+        <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>
-        <div class=${css.account}>
-          <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
+        </label>
+        <div class="${css.account}">
+          <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>
@@ -106,17 +106,17 @@ class SettingsUI {
 
     const gasPriceEl = yo`
       <div class="${css.crow}">
-        <div class="${css.col1_1}">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.col1_1}">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">
+          <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>

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"

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

@@ -5,55 +5,50 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  .runTabView::-webkit-scrollbar {
+    display: none;
+  }
   .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;
-  }
-  .recorderCount {
-    /* margin-right: 30px; */
-    /* min-width: 13px; */
-    /* display: flex; */
-    /* justify-content: center; */
-    /* align-items: center; */
-    /* font-size: 10px; */
+    padding: 0 24px 16px;
   }
   .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 +69,7 @@ var css = csjs`
     margin-bottom: 2%;
     border: none;
     text-align: center;
-    padding: 10px 0px 15px 0px;
+    padding: 0 14px 16px;
   }
   .pendingTxsContainer  {
     display: flex;
@@ -84,8 +79,7 @@ var css = csjs`
     text-align: center;
   }
   .container {
-    margin-bottom: 4%;
-    padding-left: 15px;
+    padding: 0 24px 16px;
   }
   .recorderCollapsedView,
   .recorderExpandedView {
@@ -104,7 +98,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,21 +128,21 @@ 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;
   }
   .create {
   }
   .input {
-    font-size: 10px;
+    font-size: 10px !important;
   }
   .noInstancesText {
     font-style: italic;
@@ -209,10 +210,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 +223,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;
   }
 `
 

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] {

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/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'},

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} border-0 list-group-item"></div>`
 
     const instanceContainerTitle = yo`
-      <div class=${css.instanceContainerTitle}
+      <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', [])}
@@ -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>