Merge pull request #1053 from ethereum/runTabTransactionActions

Restyle transactionActions and unify icons with other icons

src/app/tabs/run-tab.js

@@ -19,12 +19,12 @@ var css = require('./styles/run-tab-styles')
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
 var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
 
-var pendingTxsText = yo`<span></span>`
+var pendingTxsText = yo`<span>0 pending transactions</span>`
 
 function runTab (container, appAPI, appEvents) {
   var events = new EventManager()
 
-  var clearInstanceElement = yo`<i class="${css.clearinstance} fa fa-minus-square-o" title="Clear Instances List" aria-hidden="true"></i>`
+  var clearInstanceElement = yo`<i class="${css.clearinstance} ${css.icon} fa fa-trash" title="Clear Instances List" aria-hidden="true"></i>`
   clearInstanceElement.addEventListener('click', () => {
     events.trigger('clearInstance', [])
   })
@@ -34,9 +34,9 @@ function runTab (container, appAPI, appEvents) {
     <div class="${css.pendingTxsText}">
       ${pendingTxsText}
       <span class="${css.transactionActions}">
-        ${clearInstanceElement}
         ${recorderInterface.recordButton}
         ${recorderInterface.runButton}
+        ${clearInstanceElement}
       </span>
     </div>
   </div>`
@@ -139,21 +139,14 @@ function makeRecorder (events, appAPI, appEvents) {
     api: appAPI
   })
   var css2 = csjs`
-    .container {
-    }
+    .container,
+    .runTxs,
     .recorder {
-      font-size: 20px;
-      cursor: pointer;
-    }
-    .runTxs {
-      margin-left: 10px;
-      font-size: 20px;
-      cursor: pointer;
     }
   `
 
-  var recordButton = yo`<i class="fa fa-floppy-o savetransaction ${css2.recorder}" title="Save Transactions" aria-hidden="true"></i>`
-  var runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs}"  title="Run Transactions" aria-hidden="true"></i>`
+  var recordButton = yo`<i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}" title="Save Transactions" aria-hidden="true"></i>`
+  var runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
 
   recordButton.onclick = () => {
     var txJSON = JSON.stringify(recorder.getAll(), null, 2)

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

@@ -109,6 +109,10 @@ var css = csjs`
   .pendingTxsText {
     ${styles.rightPanel.runTab.borderBox_Instance}
     font-style: italic;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-wrap: wrap;
   }
   .item {
     margin-right: 1em;
@@ -141,6 +145,7 @@ var css = csjs`
   .icon {
     cursor: pointer;
     font-size: 12px;
+    cursor: pointer;
     color: ${styles.rightPanel.runTab.icon_Color};
     margin-left: 5px;
   }
@@ -171,13 +176,15 @@ var css = csjs`
   .networkItem {
     margin-right: 5px;
   }
-  .clearinstance {
-    font-size: 20px;
-    cursor: pointer;
-    margin-right: 10px;
-  }
+  .clearinstance {}
   .transactionActions {
-    float: right;
+    display: flex;
+    width: 70px;
+    justify-content: space-between;
+    border: 1px solid ${styles.rightPanel.runTab.additionalText_Color};
+    padding: 5px;
+    border-radius: 3px;
+}
 `
 
 module.exports = css