Fixes to Terminal buttons

src/app.js

@@ -221,10 +221,10 @@ function run () {
         var unit = 'ether' // default
         if (selectedUnit === 'ether') {
           unit = 'ether'
-        } else if (selectedUnit === 'microether') {
-          unit = 'microether'
-        } else if (selectedUnit === 'mwei') {
-          unit = 'mwei'
+        } else if (selectedUnit === 'finney') {
+          unit = 'finney'
+        } else if (selectedUnit === 'gwei') {
+          unit = 'gwei'
         } else if (selectedUnit === 'wei') {
           unit = 'wei'
         }

src/app/execution/txLogger.js

@@ -20,6 +20,9 @@ var css = csjs`
     align-items: end;
     justify-content: space-between;
   }
+  .txLog {
+    width: 75;
+  }
   .tx {
     color: ${styles.terminal.text_Title_TransactionLog};
     font-weight: bold;
@@ -45,19 +48,16 @@ var css = csjs`
   .buttons {
     display: flex;
   }
-  .debug {
-    ${styles.terminal.button_Log_Debug}
-  }
-  .details {
-    ${styles.terminal.button_Log_Details}
-  }
   .debug, .details {
+    color: ${styles.terminal.link_Debug};
+    text-decoration: underline;
+    font-weight: bold;
     min-height: 18px;
     max-height: 18px;
-    width: 45px;
-    min-width: 45px;
-    font-size: 10px;
+    width: 55px;
+    min-width: 55px;
     margin-left: 5px;
+    cursor: pointer;
   }
   .clipboardCopy {
     margin-right: 0.5em;
@@ -157,8 +157,8 @@ function renderKnownTransaction (self, data) {
       <div class="${css.log}">
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-        <button class=${css.details} onclick=${txDetails}>Details</button>
-        <button class=${css.debug} onclick=${debug}>Debug</button>
+        <div class=${css.details} onclick=${txDetails}>Details</div>
+        <div class=${css.debug} onclick=${debug}>Debug</div>
         </div>
       </div>
     </span>
@@ -206,10 +206,10 @@ function renderCall (self, data) {
   var tx = yo`
     <span id="tx${data.tx.hash}">
       <div class="${css.log}">
-        <span><span class=${css.tx}>[call]</span> from:${from}, to:${to}, data:${input}, return: </span>
+        <span class=${css.txLog}><span class=${css.tx}>[call]</span> from:${from}, to:${to}, data:${input}, return: </span>
         <div class=${css.buttons}>
-          <button class=${css.details} onclick=${txDetails}>Details</button>
-          <button class=${css.debug} onclick=${debug}>Debug</button>
+          <div class=${css.debug} onclick=${debug}>Debug</div>
+          <div class=${css.details} onclick=${txDetails}>Details</div>
         </div>
       </div>
       <div> ${JSON.stringify(typeConversion.stringify(data.resolvedData.decodedReturnValue), null, '\t')}</div>
@@ -253,8 +253,8 @@ function renderUnknownTransaction (self, data) {
       <div class="${css.log}">
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-          <button class=${css.details} onclick=${txDetails}>Details</button>
-          <button class=${css.debug} onclick=${debug}>Debug</button>
+          <div class=${css.details} onclick=${txDetails}>Details</div>
+          <div class=${css.debug} onclick=${debug}>Debug</div>
         </div>
       </div>
     </span>
@@ -284,7 +284,7 @@ function renderUnknownTransaction (self, data) {
 }
 
 function renderEmptyBlock (self, data) {
-  return yo`<span><span class='${css.tx}'>[block:${data.block.number} - 0 transactions]</span></span>`
+  return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${data.block.number} - 0 transactions]</span></span>`
 }
 
 function context (self, opts) {
@@ -300,13 +300,13 @@ function context (self, opts) {
   var i = data.tx.transactionIndex
   var value = val ? typeConversion.toInt(val) : 0
   if (executionContext.getProvider() === 'vm') {
-    return yo`<span><span class=${css.tx}>[vm]</span> from:${from}, to:${to}, value:${value} wei, data:${input}, ${logs} logs, hash:${hash}</span>`
+    return yo`<span class=${css.txLog}><span class=${css.tx}>[vm]</span> from:${from}, to:${to}, value:${value} wei, data:${input}, ${logs} logs, hash:${hash}</span>`
   } else if (executionContext.getProvider() !== 'vm' && data.resolvedData) {
-    return yo`<span><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei, ${logs} logs, data:${input}, hash:${hash}</span>`
+    return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei, ${logs} logs, data:${input}, hash:${hash}</span>`
   } else {
     to = helper.shortenHexData(to)
     hash = helper.shortenHexData(data.tx.blockHash)
-    return yo`<span><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei</span>`
+    return yo`<span class=${css.txLog}><span class='${css.tx}'>[block:${block} txIndex:${i}]</span> from:${from}, to:${to}, value:${value} wei</span>`
   }
 }
 

src/app/tabs/run-tab.js

@@ -91,6 +91,7 @@ var css = csjs`
   }
   .contractNames {
     ${styles.rightPanel.runTab.dropdown_RunTab}
+    width: 100%;
   }
   .subcontainer {
     display: flex;
@@ -274,8 +275,8 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
       </div>
       <div class="${css.buttons}">
         <div class="${css.button}">
-        ${createButtonInput}
-        <div class="${css.create}" onclick=${function () { createInstance() }} >Create</div>
+          ${createButtonInput}
+          <div class="${css.create}" onclick=${function () { createInstance() }} >Create</div>
         </div>
         <div class="${css.button}">
           ${atAddressButtonInput}
@@ -425,8 +426,8 @@ function settings (appAPI, appEvents) {
         <input type="text" class="${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit">
         <select name="unit" class="${css.col2_2}" id="unit">
           <option data-unit="wei">wei</option>
-          <option data-unit="mwei">mwei</option>
-          <option data-unit="microether">microether</option>
+          <option data-unit="gwei">gwei</option>
+          <option data-unit="finney">finney</option>
           <option data-unit="ether">ether</option>
         </select>
       </div>