update to metro theme and theming

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`<div id="input"></div>`
   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,

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};

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%;

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;
   }

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};
   }
 `
 

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;

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;