update to universal dapp

src/universal-dapp-styles.js

@@ -17,7 +17,8 @@ var css = csjs`
     line-height: initial;
     overflow: visible;
     margin-bottom: 0px;
-    padding-left: 10px;
+    padding-left: 0px;
+    padding-right: 10px;
   }
   .noInstancesText {
 
@@ -29,7 +30,13 @@ var css = csjs`
   .titleText {
     /* margin-right: 1em; */
     word-break: break-word;
-    min-width: 230px;
+    min-width: 170px;
+    width: 100%;
+  }
+  .spanTitleText {
+    /* font-size: .8rem; */
+    font-size: 11px;
+    width:100%;
   }
   .inputGroupText {
     width: 100%;
@@ -38,10 +45,12 @@ var css = csjs`
     color: var(--primary);
   }
   .titleExpander {
-    margin-right: 10px;
+    /* margin-right: 10px; */
+    padding: 5px 7px;
   }
   .nameNbuts {
     flex-wrap: nowrap;
+    width: 100%;
   }
   .instance {
     display: block;

src/universal-dapp-ui.js

@@ -68,10 +68,10 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
 
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
-    <div class="${css.title} alert alert-dark">
-      <button class="btn btn-light ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+    <div class="${css.title} alert alert-info">
+      <button class="btn ${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="${css.titleText} input-group-prepend"><span class="input-group-text ${css.spanTitleText}"> ${contractName} at ${shortAddress} (${context})</span></div>
         <div class="btn-group">
           <button class="btn btn-secondary">${copyToClipboard(() => address)}</button>
         </div>