From 515e49e4d64c05d9313a09adb53e4dc0b7bd9b42 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 3 Jan 2018 01:42:55 +0800
Subject: [PATCH] Apply basic styling

---
 src/app/execution/txRunner.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/execution/txRunner.js b/src/app/execution/txRunner.js
index d5f3b2009b..5a49c0ce8a 100644
--- a/src/app/execution/txRunner.js
+++ b/src/app/execution/txRunner.js
@@ -4,8 +4,19 @@ var EthJSBlock = require('ethereumjs-block')
 var ethJSUtil = require('ethereumjs-util')
 var BN = ethJSUtil.BN
 var executionContext = require('../../execution-context')
-var yo = require('yo-yo')
 var modalDialog = require('../ui/modaldialog')
+var helper = require('../../lib/helper')
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var remixLib = require('remix-lib')
+var styleGuide = remixLib.ui.styleGuide
+var styles = styleGuide()
+
+var css = csjs`
+  .txInfoBox {
+    ${styles.rightPanel.compileTab.box_CompileContainer};  // add askToConfirmTXContainer to Remix and then replace this styling
+  }
+`
 
 function TxRunner (vmaccounts, opts) {
   this.personalMode = opts.personalMode
@@ -174,24 +185,20 @@ function run (self, tx, stamp, callback) {
   }
 }
 
-
 function remixdDialog (tx) {
   return yo`
   <div>
     <div>You are trying to execute transaction on the main network. Please, click confirm to continue!</div>
-    <div>
+    <div class=${css.txInfoBox}>
       <div>from: ${tx.from}</div>
       <div>to: ${tx.from}</div>
       <div>tx value: ${tx.value}</div>
       <div>gas limit: ${tx.gasLimit}</div>
       <div>gas price: ${tx.gasEstimation}</div>
-      <div>data: ${tx.data}</div>
+      <div>data: ${helper.shortenHexData(tx.data)}</div>
     </div>
   </div>
   `
-
 }
 
-
-
 module.exports = TxRunner