Refactor style-guide and enable it to be exported

package.json

@@ -84,9 +84,13 @@
   },
   "browserify": {
     "transform": [
-      ["babelify", {
+      [
+        "babelify",
+        {
           "plugins": [
-          ["fast-async", {
+            [
+              "fast-async",
+              {
                 "runtimePatten": null,
                 "compiler": {
                   "promises": true,
@@ -94,11 +98,23 @@
                   "noRuntime": true,
                   "wrapAwait": true
                 }
-          }], "transform-object-assign"
+              }
+            ],
+            "transform-object-assign"
+          ]
+        }
+      ],
+      [
+        "yo-yoify"
+      ],
+      [
+        "babelify",
+        {
+          "presets": [
+            "es2015"
+          ]
+        }
       ]
-      }],
-      ["yo-yoify"],
-      ["babelify", { "presets": ["es2015"] }]
     ]
   }
 }

src/index.js

@@ -15,6 +15,7 @@ var astHelper = require('./solidity/astHelper')
 var EventManager = require('./lib/eventManager')
 var codeUtil = require('./helpers/util')
 var web3VMProvider = require('./web3Provider/web3VmProvider')
+var styleGuide = require('./ui/styles/style-guide')
 
 if (typeof (module) !== 'undefined' && typeof (module.exports) !== 'undefined') {
   module.exports = modules()
@@ -38,7 +39,8 @@ function modules () {
       Debugger: Debugger,
       VMdebugger: VMDebugger,
       BasicPanel: BasicPanel,
-      TreeView: TreeView
+      TreeView: TreeView,
+      styleGuide: styleGuide
     },
     util: {
       SourceMappingDecoder: SourceMappingDecoder,
@@ -58,4 +60,3 @@ function modules () {
     }
   }
 }
-

src/ui/ButtonNavigator.js

@@ -18,7 +18,8 @@ var css = csjs`
     display: flex;
     justify-content: center
   }
-  .stepButton extends ${styles.button} {
+  .stepButton {
+    ${styles.button}
     width: 25%;
     min-width: 30px;
   }
@@ -27,7 +28,8 @@ var css = csjs`
     display: flex;
     justify-content: center
   }
-  .jumpButton extends ${styles.button} {
+  .jumpButton {
+    ${styles.button} 
     width: 33%;
     min-width: 30px;
   }

src/ui/TxBrowser.js

@@ -9,6 +9,8 @@ var style = require('./styles/basicStyles')
 var csjs = require('csjs-inject')
 var styleGuide = require('./styles/style-guide')
 var styles = styleGuide()
+var styles = styleGuide()
+var styles = styleGuide()
 
 var css = csjs`
   .container {
@@ -24,8 +26,8 @@ var css = csjs`
     display: flex;
     justify-content: center;
   }
-  .txinput extends ${styles.inputField} {
+  .txinput {
-    width: 50%;
+    ${styles.inputField}
     min-width: 30px;
     margin: 3px;
   }
@@ -34,7 +36,8 @@ var css = csjs`
     display: flex;
     justify-content: center;
   }
-  .txbutton extends ${styles.button} {
+  .txbutton {
+    ${styles.button}
     width: 50%;
     min-width: 30px;
   }

src/ui/styles/style-guide.js

@@ -35,44 +35,168 @@ function styleGuide () {
     // VIOLET
     violet: 'hsla(240, 64%, 68%, 1)'
   }
-/* --------------------------------------------------------------------------
+
-                                  BUTTONSsss
+  /* --------------------------------------------------------------------------
--------------------------------------------------------------------------- */
+                              FONTS
-var buttons = csjs`
+  -------------------------------------------------------------------------- */
-  .button {
+
+var texts = {
+  'title-XL': `
+    font-size             : 2em;
+    font-weight           : 700;
+    letter-spacing        : .05em;
+  `,
+
+  'title-L': `
+    font-size             : 1em;
+    font-weight           : 600;
+  `,
+
+  'title-M': `
+    font-size             : 1em;
+    font-weight           : 400;
+  `,
+
+  'title-S': `
+    font-size             : .8em;
+    font-weight           : 300;
+  `,
+
+  'text': `
+    font-size             : .8em;
+  `
+}
+
+  /* --------------------------------------------------------------------------
+                                TEXT-BOXES
+  -------------------------------------------------------------------------- */
+  var textBoxes = {
+
+    'display-box': `
+      font-size             : 12px;
+      padding               : 10px 15px;
+      line-height           : 20px;
+      background            : ${colors.white};
+      border-radius         : 3px;
+      border                : 1px solid ${colors.veryLightGrey};
+      overflow              : hidden;
+      word-break            : break-word;
+      width                 : 100%;
+    `,
+
+    'info-text-box': `
+      background-color      : ${colors.white};
+      line-height           : 20px;
+      border                : .2em dotted ${colors.lightGrey};
+      padding               : 8px 15px;
+      border-radius         : 5px;
+      margin-bottom         : 1em;
+      overflow              : hidden;
+      word-break            : break-word;
+    `,
+
+    'warning-text-box': `
+      background-color      : ${colors.lightOrange};
+      line-height           : 20px;
+      padding               : 8px 15px;
+      border-radius         : 5px;
+      border                : .2em dotted ${colors.orange};
+      margin-bottom         : 1em;
+      overflow              : hidden;
+      word-break            : break-word;
+    `,
+
+    'error-text-box': `
+      background-color      : ${colors.lightRed};
+      line-height           : 20px;
+      padding               : 1em 1em .5em 1em;
+      border-radius         : 3px;
+      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
+      margin-bottom         : 1em;
+      overflow              : hidden;
+      word-break            : break-word;
+    `,
+
+    'title-box': `
+      margin-bottom         : 0.4em;
+      padding               : .3em;
+      background-color      : transparent;
+      font-weight           : bold;
+      display               : flex;
+      justify-content       : space-between;
+      word-wrap             : break-word;
+      position              : relative;
+      border-radius         : 3px;
+      overflow              : hidden;
+      word-break            : normal;
+    `,
+
+    'input': `
+      border                : 1px solid ${colors.veryLightGrey};
+      height                : 25px;
+      width                 : 250px;
+      border-radius         : 3px;
+      padding               : 0 8px;
+      overflow              : hidden;
+      word-break            : normal;
+    `
+  }
+  /* --------------------------------------------------------------------------
+                                    BUTTONS
+  -------------------------------------------------------------------------- */
+  var buttons = {
+
+    'button': `
+      display                 : flex;
+      align-items             : center;
+      justify-content         : center;
       border-color            : transparent;
       border-radius           : 3px;
       border                  : .3px solid ${colors.veryLightGrey};
       cursor                  : pointer;
       min-height              : 25px;
       max-height              : 25px;
-    padding                 : 3px;
+      width                   : 70px;
-    min-width               : 100px;
+      min-width               : 70px;
       font-size               : 12px;
       overflow                : hidden;
       word-break              : normal;
-    background-color        : ${colors.veryLightGrey};
+      background-color        : #E8E8E8;
-    color                   : ${colors.grey};
+    `,
-    margin                  : 3px;
-  }
-`
 
-var textBoxes = csjs`
+    'button:hover': `
-  .input {
+      opacity                 : 0.8;
-    border                : 1px solid ${colors.lightGrey};  // light-grey
+    `,
-    margin                : .3em;
+
-    height                : 25px;
+    'dropdown': `
-    font-size             : 10px;
+      font-size               : 12px;
-    border-radius         : 3px;
+      font-weight             : bold;
       padding                 : 0 8px;
+      text-decoration         : none;
+      background-color        : ${colors.white};
+      cursor                  : pointer;
+      border                  : 1px solid ${colors.veryLightGrey};
+      border-radius           : 3px;
+      height                  : 25px;
+      width                   : 250px;
+      text-align              : center;
       overflow                : hidden;
       word-break              : normal;
+    `
+
   }
-`
 
   return {
+    textBoxL: textBoxes['display-box-L'],
+    infoTextBox: textBoxes['info-text-box'],
+    inputField: textBoxes['input'],
+    displayBox: textBoxes['display-box'],
+    warningTextBox: textBoxes['warning-text-box'],
+    titleL: texts['title-L'],
+    titleM: texts['title-M'],
+    dropdown: buttons['dropdown'],
     button: buttons['button'],
     colors: colors,
-    inputField: textBoxes['input']
+    titleBox: textBoxes['title-box']
   }
 }