Create style-guide.js and test with udapp output (contract tab)

assets/css/browser-solidity.css

@@ -312,6 +312,7 @@ body {
 }
 
 #selectExEnv {
+    margin-left: 0.5em;
     text-decoration: none;
     background-color: #C6CFF7;
     cursor: pointer;
@@ -331,15 +332,6 @@ body {
     border: 0 none;
 }
 
-.col1 {
-    width: 30%;
-    float: left;
-}
-.col2 {
-    width: 70%;
-    float: left;
-}
-
 #formalVerificationInput {
     height: 4.5em;
     width: 100%;
@@ -380,11 +372,13 @@ body {
     overflow: auto;
     display: block;
     clear: both;
-    margin: 1.5em;
+    margin: .5em .5em 0 .5em;
+    padding: .5em;
     font-weight: bold;
 }
 
 .crow #txorigin {
+    margin-left: 0.5em;
     text-decoration: none;
     background-color: #C6CFF7;
     cursor: pointer;
@@ -475,9 +469,6 @@ body {
 }
 
 input[readonly] {
-    padding: .4em;
-    border: 1px solid #ccc;
-    box-sizing: border-box;
     display: block;
     width: 100%;
 }

assets/css/universal-dapp.css

@@ -16,7 +16,6 @@
 	color: #7A7AE2;
 }
 
-.udapp input,
 .udapp button,
 .udapp-setup textarea,
 .udapp-setup button {
@@ -205,10 +204,6 @@
 	border-radius: 3px;
 }
 
-.udapp input {
-	border-left: 0 none;
-}
-
 .udapp button {
 	background-color: #666;
 	color: #4C4B4B;

src/app/contract-tab.js

+var yo = require('yo-yo')
+
+module.exports = contractTab
+
+function contractTab () {
+  return yo`
+    <div id="envView">
+    <div class="crow">
+    <label for="txorigin">Transaction origin:<select name="txorigin" id="txorigin"></select></label>
+    </div>
+    <div class="crow">
+    <label for="gasLimit"><input type="number" id="gasLimit" value="3000000"> Transaction gas limit</label>
+    </div>
+    <div class="crow hide">
+    <label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
+    </div>
+    <div class="crow">
+    <label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
+    </div>
+    <span id="executionContext">
+    Select execution environment: <br><br>
+    <select id='selectExEnv'>
+    <option id="vm-mode"
+    title="Execution environment does not connect to any node, everything is local and in memory only."
+    value="vm"
+    checked name="executionContext">
+    JavaScript VM
+    </option>
+    <option id="injected-mode"
+    title="Execution environment has been provided by Mist or similar provider."
+    value="injected"
+    checked name="executionContext">
+    Injected Web3
+    </option>
+    <option id="web3-mode"
+    title="Execution environment connects to node at localhost (or via IPC if available), transactions will be sent to the network and can cause loss of money or worse!
+    If this page is served via https and you access your node via http, it might not work. In this case, try cloning the repository and serving it via http."
+    value="web3"
+    name="executionContext">
+    Web3 Provider
+    </option>
+    </select>
+    </span>
+    <div id="output"></div>
+    </div>
+  `
+}

src/app/renderer.js

@@ -4,6 +4,24 @@ var $ = require('jquery')
 
 var utils = require('./utils')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .col2 {
+      width: 70%;
+      float: left;
+  }
+  .col1 extends ${styles.titleL} {
+      width: 30%;
+      float: left;
+      padding-top: 0.75em;
+  }
+`
+// ----------------------------------------------
+
 function Renderer (appAPI, formalVerificationEvent, compilerEvent) {
   this.appAPI = appAPI
   var self = this
@@ -96,16 +114,17 @@ Renderer.prototype.contracts = function (data, source) {
   }
 
   var tableRowItems = function (first, second, cls) {
+    second.get(0).classList.add(styles.textBoxL) // replace <pre> styling with textBoxL
     return $('<div class="crow"/>')
       .addClass(cls)
-      .append($('<div class="col1">').append(first))
-      .append($('<div class="col2">').append(second))
+      .append($(`<div class="${css.col1}">`).append(first))
+      .append($(`<div class="${css.col2}">`).append(second))
   }
 
   var tableRow = function (description, data) {
     return tableRowItems(
       $('<span/>').text(description),
-      $('<input readonly="readonly"/>').val(data))
+      $(`<input class="${css.col2} ${styles.textBoxL}" readonly="readonly"/>`).val(data))
   }
 
   var preRow = function (description, data) {
@@ -308,7 +327,7 @@ Renderer.prototype.contracts = function (data, source) {
 
   $contractOutput.find('.title').click(function (ev) { $(this).closest('.contract').toggleClass('hidesub') })
   $('#output').append($contractOutput)
-  $('.col2 input,textarea').click(function () { this.select() })
+  $('.' + css.col2 + ' input,textarea').click(function () { this.select() })
 }
 
 module.exports = Renderer

src/app/style-guide.js

+var csjs = require('csjs-inject')
+
+module.exports = styleGuide
+
+function styleGuide () {
+  /* --------------------------------------------------------------------------
+  COLORS
+  -------------------------------------------------------------------------- */
+  var blue                = '#9DC1F5'
+  var lightBlue           = '#F4F6FF'
+  var greyBlue            = '#102026'
+  var grey                = '#666'
+  var lightGrey           = '#f8f8f8'
+  var red                 = '#FF8080'
+  var lightRed            = '#FFB9B9'
+  var green               = '#B1EAC5'
+  var violet              = '#C6CFF7'
+  var pink                = '#EC96EC'
+  var yellow              = '#E6E5A7'
+  /* --------------------------------------------------------------------------
+                              FONTS
+  -------------------------------------------------------------------------- */
+  var texts = csjs `
+    .title-XL {
+      font-size             : 2em;
+      font-weight           : 500;
+      letter-spacing        : .05em;
+    }
+
+    .title-L {
+      font-size             : .9em;
+      font-weight           : 500;
+    }
+
+    .title-M {
+      font-size             : .8em;
+      font-weight           : 400;
+    }
+
+    .title-S {
+      font-size             : .8em;
+      font-weight           : 300;
+    }
+
+    .text {
+      font-size             : .8em;
+    }
+  `
+  /* --------------------------------------------------------------------------
+                                TEXT-BOXES
+  -------------------------------------------------------------------------- */
+  var textBoxes = csjs`
+    .display-box-L {
+      font-size             : 1em;
+      padding               : 8px 15px;
+      line-height           : 20px;
+      background            : #f8f8f8;
+      border-radius         : 3px;
+      border                : 1px solid #e5e5e5;
+      overflow-x            : auto;
+      width                 : 100%;
+    }
+
+    .info-text-box {
+      background-color      : white;
+      line-height           : 20px;
+      border                : .3em dotted #B1EAC5;
+      padding               : 8px 15px;
+      border-radius         : 3px;
+      margin-bottom         : 1em;
+    }
+
+    .warning-text-box {
+      background-color      : #E6E5A7;  // yellow
+      line-height           : 20px;
+      padding               : 1em 1em .5em 1em;
+      border-radius         : 3px;
+      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
+      margin-bottom         : 1em;
+    }
+
+    .error-text-box {
+      background-color      : #FFB9B9;  // light-red
+      line-height           : 20px;
+      padding               : 1em 1em .5em 1em;
+      border-radius         : 3px;
+      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
+      margin-bottom         : 1em;
+    }
+  `
+  /* --------------------------------------------------------------------------
+                                    BUTTONS
+  -------------------------------------------------------------------------- */
+  /*
+  .button {
+    border-color: transparent;
+    margin-right: 1em;
+    border-radius: 3px;
+    cursor: pointer;
+    padding: .3em;
+  }
+
+  .button:hover {
+  	opacity: 0.8;
+  }
+
+  */
+
+  /* --------------------------------------------------------------------------
+                                INPUT FIELDS
+  -------------------------------------------------------------------------- */
+  /*
+  .input-field {
+    border                : 1px solid #f0f0f0;  // light-grey
+    padding               : .3em;
+    margin                : .3em;
+  }
+  */
+  return {
+    textBoxL: textBoxes['display-box-L'],
+    titleL: texts['title-L']
+  }
+}
+
+/*
+HOW TO USE IT
+var csjs = require('csjs-inject')
+var styleGuide = require('./app/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .foobar extends ${styles.fontXL} {
+    color: red;
+  }
+`
+var el = yo`
+  <div class=${css.foobar}> alasdalsd </div>
+`
+*/
+
+/*
+var text = 'foobar'
+
+var example1 = 'hello ' + text + ' "world"'
+var example2 = "hello " + text + " \"world\""
+var example3 = `hello ${text} "world"`
+
+// hello foobar "world"
+
+<div class='title foo'></div>
+<div class="${css.title} ${css.foo}"></div>
+
+`<div class="${css.col2} ${styles.textBoxL} ${5+5}">`
+// <div class="col2_s3ad textBoxL_13 10">
+
+'<div class="${css.col2} ${styles.textBoxL} ${5+5}">'
+// <div class="${css.col2} ${styles.textBoxL} ${5+5}">
+
+append($('<div class="col2_wefwq textBoxL_efwq">'))
+
+
+*/