Merge pull request #1427 from ethereum/runTabUI

Run tab ui

src/app/tabs/run-tab.js

@@ -530,10 +530,14 @@ function settings (container, self) {
   `
   var accountEl = yo`
     <div class="${css.crow}">
-      <div class="${css.col1_1}">Account</div>
-      <select name="txorigin" class="${css.select}" id="txorigin"></select>
-        ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+      <div class="${css.col1_1}">
+        Account
         <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${newAccount} title="Create a new account"></i>
+      </div>
+      <div class=${css.account}>
+        <select name="txorigin" class="${css.select}" id="txorigin"></select>
+        ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
+      </div>
     </div>
   `
   var gasPriceEl = yo`

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

@@ -35,6 +35,7 @@ var css = csjs`
     margin-top: .5em;
     display: flex;
     align-items: center;
+    width: 500px;
   }
   .col1 {
     width: 30%;
@@ -52,14 +53,21 @@ var css = csjs`
     display: flex;
     align-items: center;
     position: relative;
+    width: 259px;
+  }
+  .account {
+    display: flex;
+    align-items: center;
+    width: 266px;
   }
   .col2 {
     ${styles.rightPanel.runTab.input_RunTab}
+    border-radius: 3px;
   }
   .col2_1 {
     ${styles.rightPanel.runTab.input_RunTab}
-    width: 165px;
-    min-width: 165px;
+    width: 164px;
+    min-width: 164px;
   }
   .col2_2 {
     ${styles.rightPanel.runTab.dropdown_RunTab}

src/app/ui/card.js

@@ -80,7 +80,6 @@ const css = csjs`
   }
   .expandCollapseButton {}
   .arrow {
-    margin-right        : 15px;
     color               : ${styles.appProperties.icon_Color};
     font-weight         : bold;
     cursor              : pointer;

src/universal-dapp-styles.js

@@ -78,7 +78,10 @@ var css = csjs`
   }
   .contractActions {
   }
-  .instanceButton {}
+  .instanceButton {
+    border-radius: 3px;
+    border: .3px solid hsla(0, 82%, 82%, .5);
+  }
   .closeIcon {
     font-size: 12px;
     cursor: pointer;
@@ -157,7 +160,8 @@ var css = csjs`
     border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
     padding: 0px 5px 5px 0px;
     background-color: ${styles.appProperties.primary_BackgroundColor};
-    width: 100%;
+    width: 99%;
+    border-radius: 3px;
   }
   .multiHeader {
     text-align: left;