styling

src/basicPanel.js

@@ -38,7 +38,7 @@ module.exports = React.createClass({
         ret.push(
           <tr key={key}>
             <td>
-              <pre>{this.props.data[key]}</pre>
+              <pre style={style.font} >{this.props.data[key]}</pre>
             </td>
           </tr>)
       }

src/basicStyles.js

 'use strict'
 module.exports = {
-  wrapper: {
+  font: {
     'fontFamily': 'arial,sans-serif'
   },
   container: {
@@ -11,7 +11,8 @@ module.exports = {
     'fontStyle': 'italic'
   },
   instructionsList: {
-    'width': '320px'
+    'width': '320px',
+    'height': '300px'
   },
   transactionInfo: {
     'marginTop': '5px'
@@ -22,7 +23,7 @@ module.exports = {
       'width': '600px'
     },
     tableContainer: {
-      'height': '150px',
+      'height': '300px',
       'overflowY': 'auto'
     },
     table: {

src/debugger.js

@@ -37,7 +37,7 @@ module.exports = React.createClass({
 
   render: function () {
     return (
-      <div style={style.wrapper}>
+      <div style={style.font}>
         <h1 style={style.container}>Eth Debugger</h1>
         <TxBrowser onNewTxRequested={this.startDebugging} />
         <StepManager ref='stepManager' onStepChanged={this.stepChanged} />

src/memoryPanel.js

 'use strict'
 var React = require('react')
 var BasicPanel = require('./basicPanel')
+var style = require('./basicStyles')
 
 module.exports = React.createClass({
   contextTypes: {
@@ -50,13 +51,13 @@ module.exports = React.createClass({
         ret.push(
           <tr key={key}>
             <td>
-              <pre>{memSlot.address}</pre>
+              <pre style={style.font}>{memSlot.address}</pre>
             </td>
             <td>
-              <pre>{memSlot.content.raw}</pre>
+              <pre style={style.font}>{memSlot.content.raw}</pre>
             </td>
             <td>
-              <pre>{memSlot.content.ascii}</pre>
+              <pre style={style.font}>{memSlot.content.ascii}</pre>
             </td>
           </tr>)
       }

src/sticker.js

@@ -55,7 +55,7 @@ module.exports = React.createClass({
                 remaining gas
               </td>
               <td>
-                {this.state.remaingas}
+                {this.state.remainingGas}
               </td>
             </tr>
           </tbody>
@@ -119,7 +119,7 @@ module.exports = React.createClass({
         console.log(error)
       } else {
         self.setState({
-          remaininGas: remaingas
+          remainingGas: remaingas
         })
       }
     })

src/storagePanel.js

 'use strict'
 var React = require('react')
 var BasicPanel = require('./basicPanel')
+var style = require('./basicStyles')
 
 module.exports = React.createClass({
   contextTypes: {
@@ -49,10 +50,10 @@ module.exports = React.createClass({
         ret.push(
           <tr key={key}>
             <td>
-              <pre>{key}</pre>
+              <pre style={style.font} >{key}</pre>
             </td>
             <td>
-              <pre>{data[key]}</pre>
+              <pre style={style.font}>{data[key]}</pre>
             </td>
           </tr>)
       }