Merge pull request #575 from ethereum/theme

src/ui/BasicPanel.js

@@ -3,6 +3,14 @@ var style = require('./styles/basicStyles')
 var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .container {
+    width: 70%;
+  }
+`
+
 function BasicPanel (_name, _width, _height) {
   this.data
   this.name = _name
@@ -24,7 +32,8 @@ BasicPanel.prototype.show = function () {
 }
 
 BasicPanel.prototype.render = function () {
-  var view = yo`<div id='container' style=${ui.formatCss({'width': this.width}, style.panel.container)}>
+  var view = yo`
+    <div css=${css.container} id='container' style=${ui.formatCss({'width': this.width})}>
     <div style=${ui.formatCss(style.panel.title)}>
       ${this.name}
     </div>

src/ui/ButtonNavigator.js

@@ -14,21 +14,24 @@ var css = csjs`
   .stepButtons {
     width: 100%;
     display: flex;
-    justify-content: center
+    justify-content: center;
   }
   .stepButton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
   }
   .jumpButtons {
     width: 100%;
     display: flex;
-    justify-content: center
+    justify-content: center;
   }
   .jumpButton {
-    ${styles.button} 
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+  }
+  .navigator {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .navigator:hover {
-    color: ${styles.colors.black}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
   }
 `
 

src/ui/CodeListView.js

@@ -4,7 +4,18 @@ var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var DropdownPanel = require('./DropdownPanel')
 var EventManager = require('../lib/eventManager')
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
 
+var css = csjs`
+  .instructions {
+    ${styles.rightPanel.debuggerTab.box_Debugger}
+    width: 75%;
+    overflow-y: scroll;
+    max-height: 250px;
+  }
+`
 function CodeListView (_parent, _codeManager) {
   this.event = new EventManager()
   this.parent = _parent
@@ -69,7 +80,7 @@ CodeListView.prototype.renderAssemblyItems = function () {
     var codeView = this.code.map(function (item, i) {
       return yo`<div key=${i} value=${i}><span>${item}</span></div>`
     })
-    return yo`<div id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
+    return yo`<div class=${css.instructions} id='asmitems' ref='itemsList'>
       ${codeView}
     </div>`
   }

src/ui/DropdownPanel.js

@@ -2,10 +2,38 @@
 var yo = require('yo-yo')
 var ui = require('../helpers/ui')
 var styleDropdown = require('./styles/dropdownPanel')
-var basicStyles = require('./styles/basicStyles')
 var TreeView = require('./TreeView')
 var EventManager = require('../lib/eventManager')
 
+var csjs = require('csjs-inject')
+var styleGuide = require('./styles/style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .title {
+    margin-top: 10px;
+    ${styles.rightPanel.debuggerTab.dropdown_Debugger}
+    display: flex;
+    align-items: center;
+  }
+  .name {
+    font-weight: bold;
+  }
+  .icon {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin-right: 5%;
+  }
+  .eyeButton {
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
+    margin: 3px;
+    float: right;
+  }
+  .eyeButton:hover {
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+`
+
 function DropdownPanel (_name, _opts) {
   this.event = new EventManager()
   if (!_opts) {
@@ -79,12 +107,12 @@ DropdownPanel.prototype.render = function (overridestyle) {
         to {transform:rotate(359deg);}
       }
     </style>
-    <div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
-      <div style=${ui.formatCss(styleDropdown.caret)} class='fa fa-caret-right'></div>
-      <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div><span></span>
+    <div class='${css.title} title' onclick=${function () { self.toggle() }}>
+      <div class='${css.icon} fa fa-caret-right'></div>
+      <div class=${css.name}>${this.name}</div><span></span>
     </div>
     <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
-      <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} title='raw' class="btn fa fa-eye" type="button">
+      <button onclick=${function () { self.toggleRaw() }} title='raw' class="${css.eyeButton} btn fa fa-eye" type="button">
       </button>
       <i class="fa fa-refresh" style=${ui.formatCss(styleDropdown.inner, overridestyle, {display: 'none', 'margin-left': '4px', 'margin-top': '4px', 'animation': 'spin 2s linear infinite'})} aria-hidden="true"></i>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'>${content}</div>
@@ -110,11 +138,11 @@ DropdownPanel.prototype.toggle = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   if (el.style.display === '') {
     el.style.display = 'none'
-    caret.className = 'fa fa-caret-right'
+    caret.className = `${css.icon} fa fa-caret-right`
     this.event.trigger('hide', [])
   } else {
     el.style.display = ''
-    caret.className = 'fa fa-caret-down'
+    caret.className = `${css.icon} fa fa-caret-down`
     this.event.trigger('show', [])
   }
 }
@@ -124,7 +152,7 @@ DropdownPanel.prototype.hide = function () {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = 'none'
-    caret.className = 'fa fa-caret-right'
+    caret.className = `${css.icon} fa fa-caret-right`
     this.event.trigger('hide', [])
   }
 }
@@ -134,7 +162,7 @@ DropdownPanel.prototype.show = function () {
     var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = ''
-    caret.className = 'fa fa-caret-down'
+    caret.className = `${css.icon} fa fa-caret-down`
     this.event.trigger('show', [])
   }
 }

src/ui/TxBrowser.js

@@ -25,7 +25,7 @@ var css = csjs`
     justify-content: center;
   }
   .txinput {
-    ${styles.inputField}
+    ${styles.rightPanel.debuggerTab.input_Debugger}
     min-width: 30px;
     margin: 3px;
   }
@@ -35,10 +35,14 @@ var css = csjs`
     justify-content: center;
   }
   .txbutton {
-    ${styles.button}
+    ${styles.rightPanel.debuggerTab.button_Debugger}
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_Color};
   }
   .txbutton:hover {
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.debuggerTab.button_Debugger_icon_HoverColor};
+  }
+  .txinfo {
+    margin-top: 5px;
   }
 `
 function TxBrowser (_parent) {
@@ -192,7 +196,7 @@ TxBrowser.prototype.render = function () {
           </div>
         </div>
         <span id='error'></span>
-        <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
+        <div style=${css.txinfo} id='txinfo'>
           ${this.basicPanel.render()}
         </div>
       </div>`