diff --git a/package.json b/package.json index 37216a4682..c2ddc8faa9 100644 --- a/package.json +++ b/package.json @@ -84,21 +84,37 @@ }, "browserify": { "transform": [ - ["babelify", { - "plugins": [ - ["fast-async", { - "runtimePatten": null, - "compiler": { - "promises": true, - "es7": true, - "noRuntime": true, - "wrapAwait": true - } - }], "transform-object-assign" - ] - }], - ["yo-yoify"], - ["babelify", { "presets": ["es2015"] }] + [ + "babelify", + { + "plugins": [ + [ + "fast-async", + { + "runtimePatten": null, + "compiler": { + "promises": true, + "es7": true, + "noRuntime": true, + "wrapAwait": true + } + } + ], + "transform-object-assign" + ] + } + ], + [ + "yo-yoify" + ], + [ + "babelify", + { + "presets": [ + "es2015" + ] + } + ] ] } } diff --git a/src/index.js b/src/index.js index f5e3a0b58c..671368af4c 100644 --- a/src/index.js +++ b/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 () { } } } - diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js index 9a8d285878..112a4854a8 100644 --- a/src/ui/ButtonNavigator.js +++ b/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; } diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js index e14cc34bb1..c06270a975 100644 --- a/src/ui/TxBrowser.js +++ b/src/ui/TxBrowser.js @@ -24,8 +24,8 @@ var css = csjs` display: flex; justify-content: center; } - .txinput extends ${styles.inputField} { - width: 50%; + .txinput { + ${styles.inputField} min-width: 30px; margin: 3px; } @@ -34,7 +34,8 @@ var css = csjs` display: flex; justify-content: center; } - .txbutton extends ${styles.button} { + .txbutton { + ${styles.button} width: 50%; min-width: 30px; } diff --git a/src/ui/styles/style-guide.js b/src/ui/styles/style-guide.js index 900598f5cc..d81cb6d31f 100644 --- a/src/ui/styles/style-guide.js +++ b/src/ui/styles/style-guide.js @@ -35,44 +35,168 @@ function styleGuide () { // VIOLET violet: 'hsla(240, 64%, 68%, 1)' } -/* -------------------------------------------------------------------------- - BUTTONSsss --------------------------------------------------------------------------- */ -var buttons = csjs` - .button { - border-color : transparent; - border-radius : 3px; - border : .3px solid ${colors.veryLightGrey}; - cursor : pointer; - min-height : 25px; - max-height : 25px; - padding : 3px; - min-width : 100px; - font-size : 12px; - overflow : hidden; - word-break : normal; - background-color : ${colors.veryLightGrey}; - color : ${colors.grey}; - margin : 3px; + + /* -------------------------------------------------------------------------- + FONTS + -------------------------------------------------------------------------- */ + +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; + ` } -` - -var textBoxes = csjs` - .input { - border : 1px solid ${colors.lightGrey}; // light-grey - margin : .3em; - height : 25px; - font-size : 10px; - 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; + width : 70px; + min-width : 70px; + font-size : 12px; + overflow : hidden; + word-break : normal; + background-color : #E8E8E8; + `, + + 'button:hover': ` + opacity : 0.8; + `, + + 'dropdown': ` + font-size : 12px; + 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'] } }