Style terminal logs

src/app/execution/txLogger.js

@@ -35,8 +35,7 @@ var css = csjs`
   }
   .caret {
     color: ${styles.terminal.icon_Color};
-    font-weight: bold;
-    font-size: small;
+    font-size: 15px;
     cursor: pointer;
     float: left;
   }
@@ -63,8 +62,17 @@ var css = csjs`
   .txTable, .tr, .td {
     border-collapse: collapse;
     font-size: 10px;
-    color: ${styles.terminal.text_Primary};
-    border: 1px solid ${styles.terminal.text_Secondary};
+  }
+  .tr {
+    width: 70%;
+    border-bottom: 1px solid white;
+    display: flex;
+    justify-content: space-between;
+  }
+  .td:first-child {
+    min-width: 130px;
+    display: flex;
+    align-items: baseline;
   }
   #txTable {
     margin-top: 1%;
@@ -383,20 +391,22 @@ function createTable (opts) {
 
   var contractAddress = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> contractAddress </td>
-      <td class="${css.td}">${opts.contractAddress}
+      <td class="${css.td}"> contractAddress
         ${copyToClipboard(() => opts.contractAddress)}
       </td>
+      <td class="${css.td}">${opts.contractAddress}
+      </td>
     </tr>
   `
   if (opts.contractAddress) table.appendChild(contractAddress)
 
   var from = yo`
     <tr class="${css.tr}">
-      <td class="${css.td} ${css.tableTitle}"> from </td>
-      <td class="${css.td}">${opts.from}
+      <td class="${css.td} ${css.tableTitle}"> from
         ${copyToClipboard(() => opts.from)}
       </td>
+      <td class="${css.td}">${opts.from}
+      </td>
     </tr>
   `
   if (opts.from) table.appendChild(from)
@@ -410,20 +420,22 @@ function createTable (opts) {
   }
   var to = yo`
     <tr class="${css.tr}">
-    <td class="${css.td}"> to </td>
-    <td class="${css.td}">${toHash}
+    <td class="${css.td}"> to
       ${copyToClipboard(() => data.to ? data.to : toHash)}
     </td>
+    <td class="${css.td}">${toHash}
+    </td>
     </tr>
   `
   if (opts.to) table.appendChild(to)
 
   var gas = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> gas </td>
-      <td class="${css.td}">${opts.gas} gas
+      <td class="${css.td}"> gas
         ${copyToClipboard(() => opts.gas)}
       </td>
+      <td class="${css.td}">${opts.gas} gas
+      </td>
     </tr>
   `
   if (opts.gas) table.appendChild(gas)
@@ -435,39 +447,43 @@ function createTable (opts) {
   if (opts.transactionCost) {
     table.appendChild(yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> transaction cost </td>
-      <td class="${css.td}">${opts.transactionCost} gas ${callWarning}
+      <td class="${css.td}"> transaction cost
         ${copyToClipboard(() => opts.transactionCost)}
       </td>
+      <td class="${css.td}">${opts.transactionCost} gas ${callWarning}
+      </td>
     </tr>`)
   }
 
   if (opts.executionCost) {
     table.appendChild(yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> execution cost </td>
-      <td class="${css.td}">${opts.executionCost} gas ${callWarning}
+      <td class="${css.td}"> execution cost
         ${copyToClipboard(() => opts.executionCost)}
       </td>
+      <td class="${css.td}">${opts.executionCost} gas ${callWarning}
+      </td>
     </tr>`)
   }
 
   var hash = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> hash </td>
-      <td class="${css.td}">${opts.hash}
+      <td class="${css.td}"> hash
         ${copyToClipboard(() => opts.hash)}
       </td>
+      <td class="${css.td}">${opts.hash}
+      </td>
     </tr>
   `
   if (opts.hash) table.appendChild(hash)
 
   var input = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> input </td>
-      <td class="${css.td}">${opts.input}
+      <td class="${css.td}"> input
         ${copyToClipboard(() => opts.input)}
       </td>
+      <td class="${css.td}">${opts.input}
+      </td>
     </tr>
   `
   if (opts.input) table.appendChild(input)
@@ -475,10 +491,11 @@ function createTable (opts) {
   if (opts['decoded input']) {
     var inputDecoded = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> decoded input </td>
-      <td class="${css.td}">${opts['decoded input']}
+      <td class="${css.td}"> decoded input
         ${copyToClipboard(opts['decoded input'])}
       </td>
+      <td class="${css.td}">${opts['decoded input']}
+      </td>
     </tr>`
     table.appendChild(inputDecoded)
   }
@@ -498,12 +515,13 @@ function createTable (opts) {
   }
   var logs = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> logs </td>
-      <td class="${css.td}" id="logs">
-        ${JSON.stringify(stringified, null, '\t')}
+      <td class="${css.td}"> logs
         ${copyToClipboard(() => JSON.stringify(stringified, null, '\t'))}
         ${copyToClipboard(() => JSON.stringify(opts.logs.raw || '0'))}
       </td>
+      <td class="${css.td}" id="logs">
+        ${JSON.stringify(stringified, null, '\t')}
+      </td>
     </tr>
   `
   if (opts.logs) table.appendChild(logs)
@@ -511,10 +529,11 @@ function createTable (opts) {
   var val = opts.val != null ? typeConversion.toInt(opts.val) : 0
   val = yo`
     <tr class="${css.tr}">
-      <td class="${css.td}"> value </td>
-      <td class="${css.td}">${val} wei
+      <td class="${css.td}"> value
         ${copyToClipboard(() => `${val} wei`)}
       </td>
+      <td class="${css.td}">${val} wei
+      </td>
     </tr>
   `
   if (opts.val) table.appendChild(val)