Remove unnecessary classes

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

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', [])}

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

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>
     `

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

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;