From 121ffa83bc9a67a8b00a6c92427c51defc66ae56 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Thu, 4 Apr 2019 18:20:16 +0200
Subject: [PATCH] getting boostrap into the instance & multiparam manager

---
 src/app/tabs/styles/run-tab-styles.js |  2 +-
 src/universal-dapp-styles.js          | 28 +++++++++++++++++++--------
 src/universal-dapp-ui.js              | 21 ++++++++++++--------
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/app/tabs/styles/run-tab-styles.js b/src/app/tabs/styles/run-tab-styles.js
index 47661923d3..75a14112b4 100644
--- a/src/app/tabs/styles/run-tab-styles.js
+++ b/src/app/tabs/styles/run-tab-styles.js
@@ -117,7 +117,7 @@ var css = csjs`
     margin: 0;
     min-width: 100px;
     width: 100px;
-    font-size: 10px;
+    /* font-size: 10px; */
     word-break: inherit;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/src/universal-dapp-styles.js b/src/universal-dapp-styles.js
index 183b233b85..a3d65df622 100644
--- a/src/universal-dapp-styles.js
+++ b/src/universal-dapp-styles.js
@@ -10,13 +10,14 @@ var css = csjs`
     justify-content: space-between;
     align-items: center;
     font-size: 11px;
-    height: 30px;
-    width: 97%;
+    /* height: 30px; */
+    /* width: 97%; */
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
     overflow: visible;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
+    padding-left: 10px;
   }
   .noInstancesText {
 
@@ -26,7 +27,7 @@ var css = csjs`
     align-items: baseline;
   }
   .titleText {
-    margin-right: 1em;
+    /* margin-right: 1em; */
     word-break: break-word;
     min-width: 230px;
   }
@@ -34,12 +35,18 @@ var css = csjs`
   .title .copy {
     color: var(--primary);
   }
+  .titleExpander {
+    margin-right: 10px;
+  }
+  .nameNbuts {
+    flex-wrap: nowrap;
+  }
   .instance {
     min-width: 310px;
     display: block;
     /* display: flex; */
     flex-direction: column;
-    padding: 5px 0 0 10px;
+    /* padding: 5px 0 0 10px; */
     margin-bottom: 10px;
   }
   .instance.hidesub .title {
@@ -59,7 +66,12 @@ var css = csjs`
     vertical-align: top;
   }
   .cActionsWrapper {
-    
+    padding: 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;
   }
   .group:after {
     content: "";
@@ -184,7 +196,7 @@ var css = csjs`
   .contractProperty.constant .multiTitle {
     display: inline-block;
     width: 90%;
-    font-size: 10px;
+    /* font-size: 10px; */
     height: 25px;
     padding-left: 20px;
     font-weight: bold;
@@ -232,7 +244,7 @@ var css = csjs`
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right: 0;
-    height: 25px;
+    /* height: 25px; */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/universal-dapp-ui.js b/src/universal-dapp-ui.js
index ca0d57d52f..06b856a92a 100644
--- a/src/universal-dapp-ui.js
+++ b/src/universal-dapp-ui.js
@@ -63,19 +63,23 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
 UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
   var self = this
   address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-  var instance = yo`<div class="instance card ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
+  var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
   var context = self.udapp.context()
 
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
     <div class="${css.title} alert alert-dark">
-      <button onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
-      <div class="${css.titleText}"> ${contractName} at ${shortAddress} (${context}) </div>
-    ${copyToClipboard(() => address)}
+      <button class="btn btn-light ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+      <div class="input-group ${css.nameNbuts}">
+        <div class="${css.titleText} input-group-prepend"><span class="input-group-text"> ${contractName} at ${shortAddress} (${context})</span></div>
+        <div class="btn-group">
+          <button class="btn btn-secondary">${copyToClipboard(() => address)}</button>
+        </div>
+      </div>
   </div>`
 
-  var close = yo`<div class="${css.udappClose}" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></div>`
-  title.appendChild(close)
+  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></button>`
+  title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`
   <div class="${css.cActionsWrapper}">
@@ -94,11 +98,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   }
 
   instance.appendChild(title)
+  instance.appendChild(contractActionsWrapper)
 
   // Add the fallback function
   var fallback = self.udapp.getFallbackInterface(contractABI)
   if (fallback) {
-    instance.appendChild(this.getCallButton({
+    contractActionsWrapper.appendChild(this.getCallButton({
       funABI: fallback,
       address: address,
       contractAbi: contractABI,
@@ -111,7 +116,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
       return
     }
     // @todo getData cannot be used with overloaded functions
-    instance.appendChild(this.getCallButton({
+    contractActionsWrapper.appendChild(this.getCallButton({
       funABI: funABI,
       address: address,
       contractAbi: contractABI,