From 52f8fc29ba9d83b62c4a838017cefd12a737b6ad Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 18 May 2017 23:59:52 +0700
Subject: [PATCH] Cleanup

---
 src/app/style-guide.js |  2 +-
 src/universal-dapp.js  | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/style-guide.js b/src/app/style-guide.js
index 8c00e2e08c..e2bdb7a171 100644
--- a/src/app/style-guide.js
+++ b/src/app/style-guide.js
@@ -93,7 +93,7 @@ function styleGuide () {
 
     .title-box {
       margin-bottom         : 0.4em;
-      padding               : 1em;
+      padding               : .3em;
       background-color      : transparent;
       font-weight           : bold;
       display               : flex;
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index 9ae5d7068a..2a02bc6117 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -54,9 +54,10 @@ var css = csjs`
 var cssInstance = csjs`
   .title {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
+    align-items: center;
     margin-bottom: 1em;
-    padding: 1em;
+    padding: .3em;
     font-size: .95em;
     cursor: pointer;
     background-color: ${styles.colors.violet};
@@ -89,12 +90,11 @@ var cssInstance = csjs`
     border: 1px dotted ${styles.colors.grey};
     border-radius: 5px;
     text-align: center;
-    padding: 1em .3em;
+    padding: .3em .3em;
     min-width: 30%;
   }
   .copy:hover{
-    background-color: ${styles.colors.lightGrey};
-    opacity: .8;
+    opacity: .7;
   }
 `
 
@@ -349,9 +349,11 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
     var context = self.executionContext.isVM() ? 'memory' : 'blockchain'
 
     address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
+    var len = address.length
+    var shortAddress = address.slice(0, 5) + '...' + address.slice(len - 5, len)
     var title = yo`
       <div class="${cssInstance.title}">
-        <div class="${cssInstance.titleText}" onclick=${toggleClass}> ${contract.name} at ${address} (${context}) </div>
+        <div class="${cssInstance.titleText}" onclick=${toggleClass}> ${contract.name} at ${shortAddress} (${context}) </div>
         <div class="${cssInstance.copy}" onclick=${copyToClipboard}> <i class="fa fa-clipboard" aria-hidden="true"></i> Copy address </div>
       </div>
     `