diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index e85e856fc0..a46bcac951 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -5,15 +5,6 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') var ace = require('brace') -// var aceCss = editor.setTheme("bace/theme/twilight"); -// require('brace/theme/solarized_dark') -// require('brace/theme/clouds_midnight') -// require('brace/theme/pastel_on_dark') -// require('brace/theme/tomorrow_night') -require('brace/theme/tomorrow_night_blue') -// require('brace/theme/tomorrow_night_eighties') -// require('brace/theme/twilight') - var Range = ace.acequire('ace/range').Range require('brace/ext/language_tools') require('brace/ext/searchbox') @@ -22,6 +13,24 @@ require('./mode-solidity.js') var styleGuide = remixLib.ui.styleGuide var styles = styleGuide() +function setTheme (cb) { + if (styles.appProperties.aceTheme) { + cb('brace/theme/', styles.appProperties.aceTheme) + } +} + +setTheme((path, theme) => { + // require(path + theme) + require('brace/theme/tomorrow_night_blue') +}) + + // editor.setTheme(styleguide.aceTheme) ==> where styleguide.aceTheme is 'ace/theme/tomorrow_night_blue' + // var themeIs = 'brace/theme/' + styles.appProperties.aceTheme + // var themeIs = 'brace/theme/' + 'tomorrow_night_blue' + // console.log(themeIs) + // require(`${themeIs}`) + // require('brace/theme/tomorrow_night_blue') + var css = csjs` .ace-editor { background-color : ${styles.editor.backgroundColor_Editor}; @@ -64,13 +73,10 @@ function Editor (opts = {}) { var self = this var el = yo`
` var editor = ace.edit(el) - // editor.setTheme('ace/theme/solarized_dark') - // editor.setTheme('ace/theme/clouds_midnight') - // editor.setTheme('ace/theme/pastel_on_dark') - // editor.setTheme('ace/theme/tomorrow_night') - editor.setTheme('ace/theme/tomorrow_night_blue') - // editor.setTheme('ace/theme/tomorrow_night_eighties') - // editor.setTheme('ace/theme/twilight') + if (styles.appProperties.aceTheme) { + editor.setTheme('ace/theme/' + styles.appProperties.aceTheme) + } + ace.acequire('ace/ext/language_tools') editor.setOptions({ enableBasicAutocompletion: true, diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js index 5a51474d7e..6f79dc82ef 100644 --- a/src/app/panels/righthand-panel.js +++ b/src/app/panels/righthand-panel.js @@ -42,6 +42,9 @@ var css = csjs` #optionViews .hide { display: none; } + a { + color: ${styles.rightPanel.text_link}; + } .menu { display: flex; background-color: ${styles.rightPanel.BackgroundColor_Pre}; diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js index 7e17b98196..3c2c68ff71 100644 --- a/src/app/panels/terminal.js +++ b/src/app/panels/terminal.js @@ -76,7 +76,7 @@ var css = csjs` } .terminal::after { content : ""; - background-image : url(assets/img/remix-redesign-white-512w_v0.1.gif); + background-image : url(assets/img/remix_logo_white_512x512.svg); opacity : .1; top : 15%; left : 33%; diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js index 9d86eabaf8..2d4ffba1c2 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -113,7 +113,7 @@ var css = csjs` ${styles.rightPanel.runTab.box_Instance} font-style: italic; } - .pendingTxsText { iElements + .pendingTxsText { ${styles.rightPanel.runTab.borderBox_Instance} font-style: italic; } diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js index 2a8a3e49c1..be611569a9 100644 --- a/src/app/tabs/tabbed-menu.js +++ b/src/app/tabs/tabbed-menu.js @@ -9,8 +9,9 @@ var styles = styleGuide() module.exports = tabbedMenu var css = csjs` - .active { + li.active { background-color: ${styles.rightPanel.backgroundColor_Tab}; + color: ${styles.appProperties.mainText_Color}; } ` diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 36975aaadb..9a5f1a13c6 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -26,9 +26,16 @@ var css = csjs` } .modalBody { background-color: ${styles.remix.modalDialog_BackgroundColor_Primary}; + color: ${styles.remix.modalDialog_text_Primary}; padding: 1.5em; line-height: 1.5em; } + .modalBody em{ + color: ${styles.remix.modalDialog_text_Em}; + } + .modalBody a{ + color: ${styles.remix.modalDialog_text_Link}; + } .modalFooter { display: flex; justify-content: flex-end; diff --git a/src/universal-dapp.js b/src/universal-dapp.js index 4458fe0d0a..5b1179073c 100644 --- a/src/universal-dapp.js +++ b/src/universal-dapp.js @@ -34,7 +34,7 @@ var css = csjs` align-items: center; font-size: 11px; height: 30px; - width: 100%; + width: 97%; overflow: hidden; word-break: break-word; line-height: initial; @@ -56,7 +56,7 @@ var css = csjs` .instance { ${styles.rightPanel.runTab.box_Instance}; margin-bottom: 10px; - padding: 10px 15px 6px 15px; + padding: 10px 15px 15px 15px; } .instance .title:before { content: "\\25BE"; @@ -100,35 +100,44 @@ var css = csjs` width: 75%; padding: .36em; } + + // .call { + // background-color: ${styles.colors.lightRed}; + // border-color: ${styles.colors.lightRed}; + // } + // .constant .call { + // background-color: ${styles.colors.lightBlue}; + // border-color: ${styles.colors.lightBlue}; + // width: 25%; + // outline: none; + // } + // .payable .call { + // background-color: ${styles.colors.red}; + // border-color: ${styles.colors.red}; + // width: 25%; + // } .contractProperty button { - border-radius : 3px; - border : .3px solid #dddddd; - cursor : pointer; - min-height : 25px; - max-height : 25px; - padding : 3px; - min-width : 100px; - width : 25%; - font-size : 10px; + ${styles.rightPanel.runTab.button_Create} + min-width: 100px; + width: 100px; + font-size: 10px; + margin:0; + word-break: inherit; } .contractProperty button:disabled { cursor: not-allowed; background-color: white; border-color: lightgray; } - .call { - background-color: ${styles.colors.blueFairyDust}; - border-color: ${styles.colors.blueFairyDust}; - } - .constant .call { - background-color: ${styles.colors.greenZing}; - width: 25%; + .contractProperty.constant button { + ${styles.rightPanel.runTab.button_Constant} + min-width: 100px; + width: 100px; + font-size: 10px; + margin:0; + word-break: inherit; outline: none; - } - .payable .call { - background-color: ${styles.colors.red}; - border-color: ${styles.colors.red}; - width: 25%; + width: inherit; } .contractProperty input { display: none;