From 1ac03a7ce6b23f3085a9e5a44d3628626eab13d9 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Mon, 4 Sep 2017 23:15:59 +0100
Subject: [PATCH] Improve styling for terminal logs and details table

---
 assets/css/universal-dapp.css |  2 +-
 src/app/execution/txLogger.js | 26 +++++++++++++++++---------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/assets/css/universal-dapp.css b/assets/css/universal-dapp.css
index 1c68020991..693c730be8 100644
--- a/assets/css/universal-dapp.css
+++ b/assets/css/universal-dapp.css
@@ -215,7 +215,7 @@
 	padding: 0 0.4em;
 	box-sizing: border-box;
 	float: left;
-	word-wrap: break-word;
+	min-width: 100%;
 }
 
 #runTabView .contractProperty.hasArgs input {
diff --git a/src/app/execution/txLogger.js b/src/app/execution/txLogger.js
index 358b208004..da2387b136 100644
--- a/src/app/execution/txLogger.js
+++ b/src/app/execution/txLogger.js
@@ -17,12 +17,17 @@ var css = csjs`
   .log {
     display: flex;
     align-items: baseline;
+    justify-content: space-between;
+  }
+  .txBlock, .txVM {
+    color: ${styles.colors.violet};
+    width: 45%;
   }
   .txTable, .tr, .td {
-    border: 1px solid ${styles.colors.lightOrange};
     border-collapse: collapse;
     font-size: 10px;
     color: ${styles.colors.grey};
+    border: 1px dashed ${styles.colors.black};
   }
   #txTable {
     width: 450px;
@@ -32,6 +37,9 @@ var css = csjs`
   .tr, .td {
     padding: 4px;
   }
+  .tableTitle {
+    width: 25%;
+  }
   .buttons {
     display: flex;
   }
@@ -229,36 +237,36 @@ function createTable (opts) {
   var table = yo`
   <table class="${css.txTable}" id="txTable">
     <tr class="${css.tr}">
-      <td class="${css.td}">from</td>
+      <td class="${css.td} ${css.tableTitle}"> from </td>
       <td class="${css.td}">${from}</td>
     </tr class="${css.tr}">
     <tr class="${css.tr}">
-      <td class="${css.td}">to:</td>
+      <td class="${css.td}"> to </td>
       <td class="${css.td}">${to}</td>
     </tr class="${css.tr}">
     <tr class="${css.tr}">
-      <td class="${css.td}">value:</td>
+      <td class="${css.td}"> value </td>
       <td class="${css.td}">${value(val)} wei</td>
     </tr class="${css.tr}">
     <tr class="${css.tr}">
-      <td class="${css.td}">input:</td>
+      <td class="${css.td}"> input </td>
       <td class="${css.td}">${helper.shortenHexData(input)}</td>
     </tr class="${css.tr}">
     <tr class="${css.tr}">
-      <td class="${css.td}">hash:</td>
+      <td class="${css.td}"> hash </td>
       <td class="${css.td}">${hash}</td>
     </tr class="${css.tr}">
     <tr class="${css.tr}">
-      <td class="${css.td}">gas:</td>
+      <td class="${css.td}"> gas </td>
       <td class="${css.td}">${gas}</td>
     </tr class="${css.tr}">
   </table>
   `
   if (opts.logs) {
     var logs = opts.logs
-    var logs = yo`
+    logs = yo`
     <tr class="${css.tr}">
-    <td class="${css.td}">logs:</td>
+    <td class="${css.td}"> logs </td>
     <td class="${css.td}">${logs}</td>
     </tr class="${css.tr}">
     `