From 5f2b4a481f090368ff86fa5ae047c367c095d863 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 19 Sep 2017 02:39:06 +0100
Subject: [PATCH 01/25] Cleanup browser-solidity.css, minor things left

---
 assets/css/browser-solidity.css   | 231 +-----------------------------
 src/app.js                        |  15 +-
 src/app/files/file-explorer.js    |   3 +
 src/app/panels/editor-panel.js    |  41 +++++-
 src/app/panels/righthand-panel.js |  88 +++++++++---
 src/app/tabs/analysis-tab.js      |   3 +
 src/app/tabs/compile-tab.js       |   4 +-
 src/app/tabs/run-tab.js           |   2 +-
 src/app/tabs/settings-tab.js      |   8 +-
 src/universal-dapp.js             |   6 +-
 10 files changed, 150 insertions(+), 251 deletions(-)

diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
index d72db57491..5685170271 100644
--- a/assets/css/browser-solidity.css
+++ b/assets/css/browser-solidity.css
@@ -1,223 +1,33 @@
-#files .file {
-    padding: 0 0.6em;
-    box-sizing: border-box;
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
-    cursor: pointer;
-    border-right: 0.5em solid white;
-    position: relative;
-    display: table-cell;
-    text-align: center;
-    vertical-align: middle;
-    color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
-}
-
-#files .file.active {
-    color: black;
-    font-weight: bold;
-    border-bottom: 0 none;
-    padding-right: 2em;
-}
-#files .file .remove {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 1.25em;
-    width: 1.25em;
-    line-height: 1em;
-    color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-    display: none;
-    margin: 0.4em;
-    text-align: center;
-}
-
-#files .file input {
-    background-color: transparent;
-    border: 0 none;
-    border-bottom: 1px dotted black;
-    line-height: 1em;
-    margin: 0.5em 0;
-}
-
-#files .file.active .remove {
-    display: inline-block;
-}
-
-#righthand-panel {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    overflow: hidden;
-}
-
-#righthand-panel {
-    display: flex;
-    flex-direction: column;
-}
-
-#righthand-panel #solIcon {
-    float: right;
-    height: 90%;
-    background-color: white;
-    padding-right: 5%;
-    padding-left: 5%;
-}
-
-#righthand-panel #menu {
-    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
-    height: 2em;
-    font-size: 1em;
-    margin-top: 0.5em;
-    box-sizing: content-box;
-    display: flex;
-}
-
-#righthand-panel #options {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: space-between;
-}
-
-#righthand-panel #options li.active {
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-}
-
-#righthand-panel #options li a {
-    color: inherit;
-}
-
-#righthand-panel #optionViews {
-    background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-    overflow: scroll;
-    height: 100%;
-}
-
-#righthand-panel #optionViews > div {
-    display: none;
-}
-
-#righthand-panel #optionViews.txView #txView {
+#optionViews.settingsView #settingsView {
     display: block;
 }
 
-#righthand-panel #optionViews.settingsView #settingsView {
+#optionViews.compileView #compileTabView {
     display: block;
 }
 
-#righthand-panel #optionViews.publishView #publishView {
+#optionViews.runView #runTabView {
     display: block;
 }
 
-#righthand-panel #optionViews.compileView #compileTabView {
+#optionViews.debugView #debugView {
     display: block;
 }
 
-#righthand-panel #optionViews.runView #runTabView {
-    display: block;
-}
-
-#righthand-panel #optionViews.debugView #debugView {
-    display: block;
-}
-
-#righthand-panel #optionViews.verificationView #verificationView {
-    display: block;
-}
 
-#righthand-panel #optionViews.staticanalysisView #staticanalysisView {
+#optionViews.staticanalysisView #staticanalysisView {
     display: block;
 }
 
-#header #optionViews.supportView #supportView {
+#optionViews.supportView #supportView {
     display: block;
 }
 
-#header #optionViews.txView input,
-#header #optionViews.txView select {
-    max-width: 13em;
-    padding: 0.3em;
-    box-sizing: border-box;
-    border: 1px solid hsl(0, 0%, 0%); /* black in style-guide.js */
-    border-radius: 3px;
-}
-
-#righthand-panel #optionViews .pre {
-    word-wrap: break-word;
-    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
-    border-radius: 3px;
-    display: inline-block;
-    padding: 0 0.6em;
-}
-
-#righthand-panel #optionViews .hide {
-    display: none;
-}
 
-#righthand-panel .info {
-    min-height: 6em;
-    padding: 0.25em 0;
-    padding-left: 6em;
-}
 
-#settingsView button {
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    font-size: 12px;
-    padding: 0.25em;
-    margin: 3em 1em .5em 0;
-    color: black;
-    border:0 none;
-    border-radius: 3px;
-    width: 8em;
-    cursor: pointer;
-}
 
-#header .origin {
-    display: block;
-    word-wrap: break-word;
-    padding: 1.5em;
-    font-weight: bold;
-}
-
-#output .udapp {
-    border: 0 none;
-    box-shadow: none;
-    border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
-}
-
-.crow {
-    overflow: auto;
-    display: block;
-    clear: both;
-    margin: .5em .5em 0 .5em;
-    padding: .5em;
-    font-weight: bold;
-}
 
-.crow #txorigin {
-    margin-left: 0.5em;
-    text-decoration: none;
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    cursor: pointer;
-    font-size: 12px;
-    color: black;
-    border-radius: 3px;
-    border: 0 none;
-}
 
-.contractDetails button {
-    background-color: transparent;
-    border: 0 none;
-    padding: 0;
-    display: inline-block;
-    text-decoration: underline;
-    color: blue;
-    cursor: pointer;
-    width: auto;
-    min-width: 4em;
-    margin-bottom: 1em;
-}
 
 .sol.success,
 .sol.error,
@@ -268,28 +78,6 @@
     border: .2em dotted hsla(141, 40%, 48%, 1);
 }
 
-#ghostbar {
-    width: 1px;
-    background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
-    opacity: 0.5;
-    position: absolute;
-    cursor: col-resize;
-    z-index: 9999;
-    top: 0;
-    bottom: 0;
-}
-
-input[readonly] {
-    display: block;
-    width: 100%;
-    height: 7px;
-    padding: .8em;
-}
-
-input[type="file"] {
-    display: none;
-}
-
 .highlightreference {
     position:absolute;
     z-index:20;
@@ -310,13 +98,6 @@ input[type="file"] {
     background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
 }
 
-.highlightcode_fullLine {
-    position:absolute;
-    z-index:20;
-    background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
-    opacity: 0.5;
-}
-
 .ace_gutter-cell.ace_breakpoint{
     background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
 }
diff --git a/src/app.js b/src/app.js
index f888d9d52a..e249285617 100644
--- a/src/app.js
+++ b/src/app.js
@@ -82,6 +82,17 @@ var css = csjs`
     bottom             : 0;
     overflow           : hidden;
   }
+  .highlightcode {
+      position:absolute;
+      z-index:20;
+      background-color: ${styles.colors.lightOrange};
+  }
+  .highlightcode_fullLine {
+      position:absolute;
+      z-index:20;
+      background-color: ${styles.colors.lightOrange};
+      opacity: 0.5;
+  }
 `
 
 class App {
@@ -576,7 +587,7 @@ function run () {
         if (config.get('currentFile') !== this.source) {
           fileManager.switchFile(this.source)
         }
-        this.statementMarker = editor.addMarker(lineColumnPos, this.source, 'highlightcode')
+        this.statementMarker = editor.addMarker(lineColumnPos, this.source, css.highlightcode)
         editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
         if (lineColumnPos.start.line === lineColumnPos.end.line) {
           this.fullLineMarker = editor.addMarker({
@@ -588,7 +599,7 @@ function run () {
               line: lineColumnPos.start.line + 1,
               column: 0
             }
-          }, this.source, 'highlightcode_fullLine')
+          }, this.source, css.highlightcode_fullLine)
         }
       }
     },
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index 28da9ceca8..b2c5941d62 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -15,6 +15,9 @@ var css = csjs`
   .fileexplorer       {
     box-sizing        : border-box;
   }
+  input[type="file"] {
+      display: none;
+  }
   .folder,
   .file               {
     font-size         : 14px;
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index fc66620965..ecb73a82a2 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -114,7 +114,6 @@ var css = csjs`
     pointer-events    : none;
     transition        : .3s opacity ease-in;
   }
-  
   .content            {
     position          : relative;
     display           : flex;
@@ -133,6 +132,46 @@ var css = csjs`
     right             : 20px;
     top               : 10px;
     width             : 20em;
+
+  #files .file {
+      padding: 0 0.6em;
+      box-sizing: border-box;
+      background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
+      cursor: pointer;
+      border-right: 0.5em solid white;
+      position: relative;
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
+  }
+  #files .file.active {
+      color: black;
+      font-weight: bold;
+      border-bottom: 0 none;
+      padding-right: 2em;
+  }
+  #files .file .remove {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 1.25em;
+      width: 1.25em;
+      line-height: 1em;
+      color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+      display: none;
+      margin: 0.4em;
+      text-align: center;
+  }
+  #files .file input {
+      background-color: transparent;
+      border: 0 none;
+      border-bottom: 1px dotted black;
+      line-height: 1em;
+      margin: 0.5em 0;
+  }
+  #files .file.active .remove {
+      display: inline-block;
   }
 `
 
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index b3d37e7f4c..8a448e877b 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -15,15 +15,60 @@ var styleGuide = remix.ui.styleGuide
 var styles = styleGuide()
 
 var css = csjs`
+  #righthand-panel {
+    display: flex;
+    flex-direction: column;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+  #optionViews {
+    background-color: ${styles.colors.backgroundBlue};
+    overflow: scroll;
+    height: 100%;
+  }
+  #optionViews > div {
+    display: none;
+  }
+  #optionViews .pre {
+    word-wrap: break-word;
+    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
+    border-radius: 3px;
+    display: inline-block;
+    padding: 0 0.6em;
+  }
+  #optionViews .hide {
+    display: none;
+  }
+  .menu {
+    display: flex;
+  }
   .options {
-      float: left;
-      padding-top: 0.7em;
-      min-width: 60px;
-      font-size: 0.9em;
-      cursor: pointer;
-      background-color: ${styles.colors.transparent};
-      font-size: 1em;
-      text-align: center;
+    float: left;
+    padding-top: 0.7em;
+    min-width: 60px;
+    font-size: 0.9em;
+    cursor: pointer;
+    background-color: ${styles.colors.transparent};
+    font-size: 1em;
+    text-align: center;
+  }
+  .opts {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .opts_li:active {
+    background-color: ${styles.colors.backgroundBlue};
+  }
+  .opts_li a {
+    color: inherit;
+  }
+  .opts_li {
+    display: block;
   }
   .dragbar             {
     position           : absolute;
@@ -50,6 +95,15 @@ var css = csjs`
   .header             {
     height            : 100%;
   }
+  .solIcon {
+    margin-left: 10px;
+    margin-right: 30px;
+    display: flex;
+    align-self: center;
+    height: 20px;
+    width: 20px;
+    background-color: white;
+  }
 `
 
 // ------------------------------------------------------------------
@@ -64,13 +118,13 @@ function RighthandPanel (appAPI, events, opts) {
 
   var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
   var options = yo`
-    <ul id="options">
-      <li class="compileView" title="Compile">Compile</li>
-      <li class="runView" title="Run">Run</li>
-      <li class="settingsView" title="Settings">Settings</li>
-      <li class="debugView" title="Debugger">Debugger</li>
-      <li class="staticanalysisView" title="Static Analysis">Analysis</li>
-      <li class="supportView" title="Help and support">Support</li>
+    <ul class=${css.opts}>
+      <li class="${css.opts_li} compileView" title="Compile">Compile</li>
+      <li class="${css.opts_li} runView" title="Run">Run</li>
+      <li class="${css.opts_li} settingsView" title="Settings">Settings</li>
+      <li class="${css.opts_li} debugView" title="Debugger">Debugger</li>
+      <li class="${css.opts_li} staticanalysisView" title="Static Analysis">Analysis</li>
+      <li class="${css.opts_li} supportView" title="Help and support">Support</li>
     </ul>
   `
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@@ -78,8 +132,8 @@ function RighthandPanel (appAPI, events, opts) {
     <div id="righthand-panel" class=${css.panel}>
       ${self._view.dragbar}
       <div id="header" class=${css.header}>
-        <div id="menu">
-          <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
+        <div class=${css.menu}>
+          <img class=${css.solIcon} title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
           ${options}
         </div>
         ${optionViews}
diff --git a/src/app/tabs/analysis-tab.js b/src/app/tabs/analysis-tab.js
index 942368272d..7f2f6083d5 100644
--- a/src/app/tabs/analysis-tab.js
+++ b/src/app/tabs/analysis-tab.js
@@ -13,6 +13,9 @@ var css = csjs`
     display: flex;
     flex-direction: column;
   }
+  #staticanalysisView {
+    display: block;
+  }
   .infoBox  {
     ${styles.infoTextBox}
     margin-bottom: 1em;
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index e0ff31abf8..184b7ba105 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -291,9 +291,9 @@ function compileTab (container, appAPI, appEvents, opts) {
       getContractNames(success, data)
       // hightlight the tab if error
       if (success) {
-        document.querySelector('#righthand-panel #menu .compileView').style.color = ''
+        document.querySelector('.compileView').style.color = ''
       } else {
-        document.querySelector('#righthand-panel #menu .compileView').style.color = styles.colors.red
+        document.querySelector('.compileView').style.color = styles.colors.red
       }
       // display warning error if any
       var errorContainer = container.querySelector('.error')
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 6a0979641c..7b32ccf007 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -187,7 +187,7 @@ var css = csjs`
 module.exports = runTab
 
 var instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
-var noInstancesText = yo`<div class="${css.noInstancesText}">No Contract Instances.</div>`
+var noInstancesText = yo`<div class="${css.noInstancesText}">0 contract Instances</div>`
 
 var pendingTxsText = yo`<div class="${css.pendingTxsText}"></div>`
 var pendingTxsContainer = yo`<div class="${css.pendingTxsContainer}">${pendingTxsText}</div>`
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index b7346b7c96..e19a8d9d39 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -20,12 +20,18 @@ var css = csjs`
     word-break: break-word;
   }
   .crow {
-    margin-top: 1em;
     display: flex;
+    overflow: auto;
+    clear: both;
+    padding: .5em;
+    font-weight: bold;
   }
   .select {
     ${styles.dropdown}
   }
+  input {
+    margin-right: 3px;
+  }
 }
 `
 module.exports = SettingsTab
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index da094b24d3..d4f3a7edac 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -78,6 +78,8 @@ var css = csjs`
   }
   .buttonsContainer {
     margin-top: 2%;
+    display: flex;
+    overflow: hidden;
   }
   .contractActions {
     display: flex;
@@ -136,10 +138,10 @@ var css = csjs`
     display: none;
   }
   .contractProperty > .value {
-    padding: 0 0.4em;
     box-sizing: border-box;
     float: left;
-    min-width: 100%;
+    align-self: center;
+    color: ${styles.colors.grey};
   }
   .hasArgs input {
     display: block;

From 864501940f6495b49c909aad7e120f94822a92d9 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 19 Sep 2017 11:09:54 +0200
Subject: [PATCH 02/25] move css tab display rule

---
 assets/css/browser-solidity.css   | 31 -------------------------------
 src/app/panels/righthand-panel.js | 27 ++++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
index 5685170271..376f11f4b8 100644
--- a/assets/css/browser-solidity.css
+++ b/assets/css/browser-solidity.css
@@ -1,34 +1,3 @@
-#optionViews.settingsView #settingsView {
-    display: block;
-}
-
-#optionViews.compileView #compileTabView {
-    display: block;
-}
-
-#optionViews.runView #runTabView {
-    display: block;
-}
-
-#optionViews.debugView #debugView {
-    display: block;
-}
-
-
-#optionViews.staticanalysisView #staticanalysisView {
-    display: block;
-}
-
-#optionViews.supportView #supportView {
-    display: block;
-}
-
-
-
-
-
-
-
 .sol.success,
 .sol.error,
 .sol.warning {
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 8a448e877b..eeff752612 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -116,7 +116,7 @@ function RighthandPanel (appAPI, events, opts) {
   self.event = new EventManager()
   self._view = {}
 
-  var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
+  var optionViews = yo`<div id="optionViews" class="settingsView">${cssTabs}</div>`
   var options = yo`
     <ul class=${css.opts}>
       <li class="${css.opts_li} compileView" title="Compile">Compile</li>
@@ -202,3 +202,28 @@ function RighthandPanel (appAPI, events, opts) {
     }
   }
 }
+
+var cssTabs = yo`<style>#optionViews.settingsView #settingsView {
+    display: block;
+}
+
+#optionViews.compileView #compileTabView {
+    display: block;
+}
+
+#optionViews.runView #runTabView {
+    display: block;
+}
+
+#optionViews.debugView #debugView {
+    display: block;
+}
+
+
+#optionViews.staticanalysisView #staticanalysisView {
+    display: block;
+}
+
+#optionViews.supportView #supportView {
+    display: block;
+}</style>`

From bd17dd248beae62ec0d583689020b4c4513dbfc9 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 19 Sep 2017 11:27:10 +0200
Subject: [PATCH 03/25] remove browser-solidity.css

---
 assets/css/browser-solidity.css | 72 ---------------------------------
 src/app/editor/editor.js        | 22 ++++++++++
 src/app/ui/renderer.js          | 55 ++++++++++++++++++++++++-
 3 files changed, 76 insertions(+), 73 deletions(-)
 delete mode 100644 assets/css/browser-solidity.css

diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css
deleted file mode 100644
index 376f11f4b8..0000000000
--- a/assets/css/browser-solidity.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.sol.success,
-.sol.error,
-.sol.warning {
-    word-wrap: break-word;
-    cursor: pointer;
-    position: relative;
-    margin: 0.5em 0 1em 0;
-    border-radius: 5px;
-    line-height: 20px;
-    padding: 8px 15px;
-}
-
-.sol.success pre,
-.sol.error pre,
-.sol.warning pre {
-    background-color: transparent;
-    margin: 0;
-    font-size: 12px;
-    border: 0 none;
-    padding: 0;
-    border-radius: 0;
-}
-
-.sol.success .close,
-.sol.error .close,
-.sol.warning .close {
-    font-weight: bold;
-    position: absolute;
-    color: hsl(0, 0%, 0%); /* black in style-guide.js */
-    top: 0;
-    right: 0;
-    padding: 0.5em;
-}
-
-.sol.error {
-    background-color: hsla(0, 82%, 82%, 0.1);
-    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.sol.warning {
-    background-color: hsla(59, 56%, 78%, 0.5);
-    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
-}
-
-.sol.success {
-    background-color: hsla(141, 58%, 95%, 1);
-    border: .2em dotted hsla(141, 40%, 48%, 1);
-}
-
-.highlightreference {
-    position:absolute;
-    z-index:20;
-    background-color: lightgrey;
-    opacity: 0.7
-}
-
-.highlightreferenceline {
-    position:absolute;
-    z-index:20;
-    background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
-    opacity: 0.7
-}
-
-.highlightcode {
-    position:absolute;
-    z-index:20;
-    background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
-
-.ace_gutter-cell.ace_breakpoint{
-    background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-}
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index a06d92059f..45ec619f3e 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -20,6 +20,28 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
         background-color: rgba(225, 229, 251, 0.5);
+    }  
+    .ace_gutter-cell.ace_breakpoint{
+      background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+    }
+    .highlightreference {
+      position:absolute;
+      z-index:20;
+      background-color: lightgrey;
+      opacity: 0.7
+    }
+
+    .highlightreferenceline {
+      position:absolute;
+      z-index:20;
+      background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
+      opacity: 0.7
+    }
+
+    .highlightcode {
+      position:absolute;
+      z-index:20;
+      background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
     }
   </style>
 `)
diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index eee2108dbe..52f50ab6b2 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -1,9 +1,59 @@
 'use strict'
 
 var $ = require('jquery')
-
+var yo = require('yo-yo')
 var utils = require('../../lib/utils')
 
+var css = yo`<style>
+.sol.success,
+.sol.error,
+.sol.warning {
+    word-wrap: break-word;
+    cursor: pointer;
+    position: relative;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
+}
+
+.sol.success pre,
+.sol.error pre,
+.sol.warning pre {
+    background-color: transparent;
+    margin: 0;
+    font-size: 12px;
+    border: 0 none;
+    padding: 0;
+    border-radius: 0;
+}
+
+.sol.success .close,
+.sol.error .close,
+.sol.warning .close {
+    font-weight: bold;
+    position: absolute;
+    color: hsl(0, 0%, 0%); /* black in style-guide.js */
+    top: 0;
+    right: 0;
+    padding: 0.5em;
+}
+
+.sol.error {
+    background-color: hsla(0, 82%, 82%, 0.1);
+    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+}
+
+.sol.warning {
+    background-color: hsla(59, 56%, 78%, 0.5);
+    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
+}
+
+.sol.success {
+    background-color: hsla(141, 58%, 95%, 1);
+    border: .2em dotted hsla(141, 40%, 48%, 1);
+}</style>`
+
 /**
  * After refactor, the renderer is only used to render error/warning
  * TODO: This don't need to be an object anymore. Simplify and just export the renderError function.
@@ -11,6 +61,9 @@ var utils = require('../../lib/utils')
  */
 function Renderer (appAPI) {
   this.appAPI = appAPI
+  if (document && document.head) {
+    document.head.appendChild(css)
+  }
 }
 
 Renderer.prototype.error = function (message, container, options) {

From fb3dda119b25d8f023129e71b83954bdaf68909e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Tue, 19 Sep 2017 15:12:06 +0200
Subject: [PATCH 04/25] fix tab list

---
 src/app/panels/editor-panel.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index ecb73a82a2..a2cecc8aa1 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -132,8 +132,11 @@ var css = csjs`
     right             : 20px;
     top               : 10px;
     width             : 20em;
+  }  
+`
 
-  #files .file {
+var cssTabs = yo`<style>
+#files .file {
       padding: 0 0.6em;
       box-sizing: border-box;
       background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
@@ -173,7 +176,7 @@ var css = csjs`
   #files .file.active .remove {
       display: inline-block;
   }
-`
+  </style>`
 
 class EditorPanel {
   constructor (opts = {}) {
@@ -223,6 +226,9 @@ class EditorPanel {
         self._api.txListener.setListenOnNetwork(listenOnNetWork)
       })
     }
+    if (document && document.head) {
+      document.head.appendChild(cssTabs)
+    }
   }
   _adjustLayout (direction, delta) {
     var limitUp = 0

From 9b551f452ff5b55752008e2bad9394cb59481d9a Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 20 Sep 2017 00:09:25 +0100
Subject: [PATCH 05/25] Fix selected tab background color

---
 src/app/files/file-explorer.js    |  1 +
 src/app/panels/righthand-panel.js |  7 -------
 src/app/tabs/tabbed-menu.js       | 24 +++++++++++++++++++-----
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index b2c5941d62..1437ba6a8f 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -21,6 +21,7 @@ var css = csjs`
   .folder,
   .file               {
     font-size         : 14px;
+    cursor            : pointer;
   }
   .hasFocus           {
     background-color  : ${styles.colors.backgroundBlue};
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index eeff752612..55f220cc3f 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -51,7 +51,6 @@ var css = csjs`
     min-width: 60px;
     font-size: 0.9em;
     cursor: pointer;
-    background-color: ${styles.colors.transparent};
     font-size: 1em;
     text-align: center;
   }
@@ -61,12 +60,6 @@ var css = csjs`
     margin: 0;
     padding: 0;
   }
-  .opts_li:active {
-    background-color: ${styles.colors.backgroundBlue};
-  }
-  .opts_li a {
-    color: inherit;
-  }
   .opts_li {
     display: block;
   }
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 12a2e60647..dfbededa82 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -1,7 +1,19 @@
 var $ = require('jquery')
 
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+
 module.exports = tabbedMenu
 
+var css = csjs`
+  .active {
+    background-color: ${styles.colors.backgroundBlue};
+  }
+`
+
 function tabbedMenu (container, appAPI, events, opts) {
   var lis = container.querySelectorAll('li')
   for (var li = 0; li < lis.length; ++li) {
@@ -20,15 +32,17 @@ function tabbedMenu (container, appAPI, events, opts) {
   selectTab(container.querySelector('.compileView'))
 
   // select tab
+
   function selectTab (el) {
-    el = $(el)
-    var match = /[a-z]+View/.exec(el.get(0).className)
+    var match = /[a-z]+View/.exec(el.className)
     if (!match) return
     var cls = match[0]
-    if (!el.hasClass('active')) {
-      el.parent().find('li').removeClass('active')
+    if (!el.classList.contains(css.active)) {
+      el.parentNode.querySelectorAll('li').forEach(function (x) {
+        x.classList.remove(css.active)
+      })
       $('#optionViews').attr('class', '').addClass(cls)
-      el.addClass('active')
+      el.classList.add(css.active)
     }
     events.app.trigger('tabChanged', [cls])
   }

From 7a118a6dd8eb66b6bc3dadf82b6952a123548acc Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 20 Sep 2017 05:05:08 +0100
Subject: [PATCH 06/25] Remove styles.css and start theme-draft.js

---
 assets/css/styles.css       | 281 ------------------------------------
 src/app.js                  |   4 +
 src/app/tabs/compile-tab.js |   3 +-
 src/app/ui/modaldialog.js   |   2 +-
 src/app/ui/theme-draft.js   | 126 ++++++++++++++++
 5 files changed, 133 insertions(+), 283 deletions(-)
 delete mode 100644 assets/css/styles.css
 create mode 100644 src/app/ui/theme-draft.js

diff --git a/assets/css/styles.css b/assets/css/styles.css
deleted file mode 100644
index 0c7d7070d4..0000000000
--- a/assets/css/styles.css
+++ /dev/null
@@ -1,281 +0,0 @@
-/*@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);*/
-
-body {
-  padding: 50px;
-  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #777;
-  font-weight: 300;
-  overflow: hidden;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 20px 0 10px;
-}
-
-p, ul, ol, table, pre, dl {
-  margin: 0 0 20px;
-}
-
-h1, h2, h3 {
-  line-height: 1.1;
-}
-
-h1 {
-  font-size: 28px;
-}
-
-h2 {
-  color: #393939;
-}
-
-a {
-  color: #39c;
-  font-weight: 400;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #069;
-}
-
-a small {
-  font-size: 11px;
-  color: #777;
-  margin-top: -0.6em;
-  display: block;
-}
-
-a:hover small {
-  color: #777;
-}
-
-.wrapper {
-  width: 860px;
-  margin: 0 auto;
-}
-
-blockquote {
-  border-left: 1px solid #e5e5e5;
-  margin: 0;
-  padding: 0 0 0 20px;
-  font-style: italic;
-}
-
-code, pre {
-  color: #333;
-  font-size: 11px;
-}
-
-pre {
-  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 12px;
-  padding: 8px 15px;
-  background: #f8f8f8;
-  border-radius: 5px;
-  border: 1px solid #e5e5e5;
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-th, td {
-  text-align: left;
-  padding: 5px 10px;
-  border-bottom: 1px solid #e5e5e5;
-}
-
-dt {
-  color: #444;
-  font-weight: 700;
-}
-
-th {
-  color: #444;
-}
-
-img {
-  max-width: 100%;
-}
-
-header {
-  width: 270px;
-  float: left;
-  position: fixed;
-}
-
-header ul {
-  list-style: none;
-  height: 40px;
-  padding: 0;
-  background: #eee;
-  background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
-  background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-  border-radius: 5px;
-  border: 1px solid #d2d2d2;
-  box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
-  width: 270px;
-}
-
-header li {
-  width: 89px;
-  float: left;
-  border-right: 1px solid #d2d2d2;
-  height: 40px;
-}
-
-header li:first-child a {
-  border-radius: 5px 0 0 5px;
-}
-
-header li:last-child a {
-  border-radius: 0 5px 5px 0;
-}
-
-header ul a {
-  line-height: 1;
-  font-size: 11px;
-  color: #999;
-  display: block;
-  text-align: center;
-  padding-top: 6px;
-  height: 34px;
-}
-
-header ul a:hover {
-  color: #999;
-  background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #ddd));
-  background: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -o-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: -ms-linear-gradient(top, #fff 0%, #ddd 100%);
-  background: linear-gradient(top, #fff 0%, #ddd 100%);
-}
-
-header ul a:active {
-  -webkit-box-shadow: inset 0 2px 2px 0 #ddd;
-  -moz-box-shadow: inset 0 2px 2px 0 #ddd;
-  box-shadow: inset 0 2px 2px 0 #ddd;
-}
-
-strong {
-  color: #222;
-  font-weight: 700;
-}
-
-header ul li + li {
-  width: 88px;
-  border-left: 1px solid #fff;
-}
-
-header ul li + li + li {
-  border-right: none;
-  width: 89px;
-}
-
-header ul a strong {
-  font-size: 14px;
-  display: block;
-  color: #222;
-}
-
-section {
-  width: 500px;
-  float: right;
-  padding-bottom: 50px;
-}
-
-small {
-  font-size: 11px;
-}
-
-hr {
-  border: 0;
-  background: #e5e5e5;
-  height: 1px;
-  margin: 0 0 20px;
-}
-
-footer {
-  width: 270px;
-  float: left;
-  position: fixed;
-  bottom: 50px;
-}
-
-@media print, screen and (max-width: 960px) {
-
-  div.wrapper {
-    width: auto;
-    margin: 0;
-  }
-
-  header, section, footer {
-    float: none;
-    position: static;
-    width: auto;
-  }
-
-  header {
-    padding-right:320px;
-  }
-
-  section {
-    border: 1px solid #e5e5e5;
-    border-width: 1px 0;
-    padding: 20px 0;
-    margin: 0 0 20px;
-  }
-
-  header a small {
-    display: inline;
-  }
-
-  header ul {
-    position: absolute;
-    right: 50px;
-    top: 52px;
-  }
-}
-
-@media print, screen and (max-width: 720px) {
-  body {
-    word-wrap: break-word;
-  }
-
-  header {
-    padding: 0;
-  }
-
-  header ul, header p.view {
-    position: static;
-  }
-
-  pre, code {
-    word-wrap: normal;
-  }
-}
-
-@media print, screen and (max-width: 480px) {
-  body {
-    padding: 15px;
-  }
-
-  header ul {
-    display: none;
-  }
-}
-
-@media print {
-  body {
-    padding: 0.4in;
-    font-size: 12pt;
-    color: #444;
-  }
-}
diff --git a/src/app.js b/src/app.js
index e249285617..7d065633a7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -44,12 +44,16 @@ var css = csjs`
   html { box-sizing: border-box; }
   *, *:before, *:after { box-sizing: inherit; }
   body                 {
+    font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
     margin             : 0;
     padding            : 0;
     font-size          : 12px;
     color              : ${styles.colors.black};
     font-weight        : normal;
   }
+  pre {
+    overflow-x: auto;
+  }
   .browsersolidity     {
     position           : relative;
     width              : 100vw;
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 184b7ba105..b0472359f9 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -92,9 +92,10 @@ var css = csjs`
     width: 120px;
   }
   .log {
+    ${styles.displayBox}
     display: flex;
     flex-direction: column;
-    align-items: baseline
+    margin-bottom: 5%;
   }
   .key {
     margin-right: 5px;
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 1bd14f98d0..338bb8814e 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -20,7 +20,7 @@ var css = csjs`
   .modalHeader {
     padding: 2px 16px;
     background-color: ${styles.colors.backgroundBlue};
-    color: ${styles.colors.white};
+    color: ${styles.colors.grey};
     display: flex;
     justify-content: space-between;
   }
diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
new file mode 100644
index 0000000000..454e1341a1
--- /dev/null
+++ b/src/app/ui/theme-draft.js
@@ -0,0 +1,126 @@
+// THEMEABLE parameters
+
+// REMIX
+var remix = {
+  'background-color': '',
+  'font': '',
+  'font-size': '',
+  'color': ''
+}
+
+// LEFT PANEL
+var filePanel = {
+  icons: {
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  },
+  toggle: {
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  },
+  treeview: {
+    'color': '',
+    highlightedLine: {
+      'background-color': ''
+    }
+  }
+}
+
+// EDITOR
+var editor = {
+  'background-color': '',
+  'color': '',
+  gutter: {
+    'background-color': '',
+    highlightedNumber: {
+      'background-color': ''
+    },
+  },
+  navTabs: {
+    'background-color': '',
+    'color': ''
+  }
+  icons: {
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  },
+  code: {
+    // types, comments, parameters...
+    highlightedLine: {
+      'background-color': ''
+    },
+    debuggerMode: {
+      highlightedArea: {
+        'background-color': ''
+      },
+    }
+  }
+
+}
+
+// TERMINAL
+var terminal = {
+  menu: {
+    'background-color': '',
+    'color': '',
+    icon: {
+      'color': '',
+      ':hover': {
+        'color': ''
+      }
+    },
+    dropdown: {
+      'background-color': ''
+    },
+    toggle: {
+      'color': '',
+      ':hover': {
+        'color': ''
+      }
+    }
+  },
+  terminalWindow: {
+    'background-color': '',
+    logo: {
+      'url': '',
+    },
+    infoLog: {
+      'color': ''
+    },
+    errorLog: {
+      'color': ''
+    },
+    transactionLog: {
+      title: {
+        'color': ''
+      },
+      text: {
+        'color': ''
+      },
+      detailsButton: {
+        'background-color': '',
+        'color': ''
+      }
+      debugButton: {
+        'background-color': '',
+        'color': ''
+      }
+    }
+  }
+}
+
+// RIGHT PANEL
+var rightPanel = {
+  toggle: {
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  },
+}

From d20c6eef6f8fb613d6f1f648cfadb4521bbda5e7 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 21 Sep 2017 01:33:42 +0100
Subject: [PATCH 07/25] Update theme-draft.js

---
 src/app/ui/theme-draft.js | 305 ++++++++++++++++++++++++++++++++++----
 1 file changed, 273 insertions(+), 32 deletions(-)

diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
index 454e1341a1..8ba05d1913 100644
--- a/src/app/ui/theme-draft.js
+++ b/src/app/ui/theme-draft.js
@@ -1,50 +1,95 @@
 // THEMEABLE parameters
 
 // REMIX
-var remix = {
-  'background-color': '',
-  'font': '',
-  'font-size': '',
-  'color': ''
+var remixGeneral = {
+  general_BackgroundColor: {
+    'background-color': ''
+  },
+  highlight_BackgroundColor: {
+    'background-color': ''
+  },
+  fonts: {
+    'font': '',
+    'font-size': '',
+    mainText: {
+      'color': ''
+    },
+    supportText: {
+      'color': ''
+    }
+  },
+  dropdown: {
+    'background-color': '',
+    'color': ''
+  },
+  textBox: {
+    'background-color': '',
+    'border': '',
+    'color': ''
+  },
+  infoTextBox: {
+    'background-color': '',
+    'border': '',
+    'color': ''
+  },
+  inputField: {
+    'background-color': '',
+    'color': ''
+  },
+  icons: {   // All icons
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  },
+  butons: {
+    'background-color': ''
+  },
+  copyToClipboard: {  // same as icons @TODO
+    'color': '',
+    ':hover': {
+      'color': ''
+    }
+  }
 }
 
 // LEFT PANEL
 var filePanel = {
-  icons: {
+  icons: {   // icons
     'color': '',
     ':hover': {
       'color': ''
     }
   },
-  toggle: {
+  togglePannel: {   // icons
     'color': '',
     ':hover': {
       'color': ''
     }
   },
   treeview: {
-    'color': '',
+    'color': '',   // already defined in Remix general
     highlightedLine: {
-      'background-color': ''
+      'background-color': ''  // highlight_BackgroundColor
     }
   }
 }
 
 // EDITOR
 var editor = {
-  'background-color': '',
-  'color': '',
+  'background-color': '',  // general_BackgroundColor
+  'color': '',  // fonts/color
   gutter: {
-    'background-color': '',
+    'background-color': '',  // highlight_BackgroundColor
     highlightedNumber: {
-      'background-color': ''
+      'background-color': ''  // highlight_BackgroundColor
     },
   },
   navTabs: {
-    'background-color': '',
-    'color': ''
-  }
-  icons: {
+    'background-color': '',  // highlight_BackgroundColor
+    'color': ''  // fonts/color
+  },
+  icons: {  // icons
     'color': '',
     ':hover': {
       'color': ''
@@ -53,32 +98,32 @@ var editor = {
   code: {
     // types, comments, parameters...
     highlightedLine: {
-      'background-color': ''
+      'background-color': ''   //highlight_BackgroundColor
     },
     debuggerMode: {
       highlightedArea: {
-        'background-color': ''
-      },
+        'background-color': ''   // same as Debug button in Terminal window
+      }
     }
   }
-
 }
 
 // TERMINAL
 var terminal = {
   menu: {
-    'background-color': '',
-    'color': '',
-    icon: {
+    'background-color': '', // highlight_BackgroundColor
+    'color': '',  // fonts/color
+    icons: {  // icons
       'color': '',
       ':hover': {
         'color': ''
       }
     },
-    dropdown: {
-      'background-color': ''
+    dropdown: {  // dropdown
+      'background-color': '',
+      'color': ''
     },
-    toggle: {
+    togglePannel: {   // icons
       'color': '',
       ':hover': {
         'color': ''
@@ -87,14 +132,15 @@ var terminal = {
   },
   terminalWindow: {
     'background-color': '',
+    'color': '',
     logo: {
       'url': '',
     },
     infoLog: {
-      'color': ''
+      'color': ''  // fonts/color
     },
     errorLog: {
-      'color': ''
+      'color': ''  // same as border in errorMessage in rightPanel/compileTab  @TODO
     },
     transactionLog: {
       title: {
@@ -106,9 +152,9 @@ var terminal = {
       detailsButton: {
         'background-color': '',
         'color': ''
-      }
+      },
       debugButton: {
-        'background-color': '',
+        'background-color': '',  // same as highlightedArea in editor/debuggerMode
         'color': ''
       }
     }
@@ -117,10 +163,205 @@ var terminal = {
 
 // RIGHT PANEL
 var rightPanel = {
-  toggle: {
+  'background-color': '',  // already defined in Remix general
+  'color': '', // already defined in Remix general
+  textBox: {        // already defined in Remix general
+    'background-color': '',
+    'border': '',
+    'color': ''
+  },
+  infoTextBox: {     // already defined in Remix general
+    'background-color': '',
+    'border': '',
+    'color': ''
+  },
+  togglePannel: {   // icons
     'color': '',
     ':hover': {
       'color': ''
     }
   },
+  logo: {
+    'url': ''
+  },
+  warningMessage: {
+    'border': '',
+    'background-color': '',
+    'color': ''
+  },
+  errorMessage: {
+    'border': '',   // same as font color in terminal error  @TODO
+    'background-color': '',
+    'color': ''
+  },
+  successMessage: {
+    'border': '',
+    'background-color': '',
+    'color': ''
+  },
+  dropdown: {
+    'background-color': '',  // dropdown
+    'color': ''
+  },
+  inputField: {   // inputField
+    'background-color': '',
+    'color': ''
+  },
+
+  compileTab: {
+    compileButton: {
+      'background-color': '', // or import a special image 'url': ''
+      'color': ''
+    },
+    buttons: {
+      'background-color': '',  // general buttons background color
+      'color': ''
+    },
+    details: {
+      'background-color': '',  // already defined in Remix general
+      header: {
+        'background-color': '',  // same as highlight_BackgroundColor
+        'color': ''
+      },
+      infoTextBox: {     // already in rightPanel general theme
+        'background-color': '',
+        'border': '',
+        'color': '',
+        copyToClipboard: { // copyToClipboard  @TODO
+          'color': '',
+          ':hover': {
+            'color': ''
+          }
+        },
+        icons: {  // icons
+          'color': '',
+          ':hover': {
+            'color': ''
+          }
+        },
+        title: {
+          'color': ''
+        }
+      }
+    }
+  },
+
+  runTab: {
+    compileButton: {
+      'background-color': '', // or import new 'url': ''
+      'color': ''
+    },
+    atAddressButton: {
+      'background-color': '',
+      'color': ''
+    },
+    createButton: {
+      'background-color': '',
+      'color': ''
+    },
+    instance_callButton: {
+      'background-color': '',
+      'color': ''
+    },
+    instance_transactButton: {
+      'background-color': '',
+      'color': ''
+    },
+    instance_transactPayableButton: {
+      'background-color': '',
+      'color': ''
+    },
+    copyToClipboard: { // copyToClipboard  @TODO
+      'color': '',
+      ':hover': {
+        'color': ''
+      }
+    }
+  },
+
+  settingsTab: {
+    infoTextBox: {     // already in rightPanel general theme
+      'background-color': '',
+      'border': '',
+      'color': ''
+    }
+  },
+
+  debuggerTab: {
+    buttons: {
+      'background-color': '',  // including eye button (needs to get ${styles.button} applied)
+      'color': '',
+      icons: {  // icons
+        'color': '',
+        ':hover': {
+          'color': ''
+        }
+      }
+    },
+    dropdowns: {  // dropdown
+      'background-color': '',  // see if ${styles.dropdown} is applied
+      'color': '',
+      instructions: {
+        highlightedKey: {
+          'background-color': ''  // highlight_BackgroundColor
+        }
+      },
+      solidityState: {
+        label: {
+          'color': ''  // supportText
+        }
+      }
+    }
+  },
+
+  analysisTab: {
+    textBox: {   // already in rightPanel general theme
+      'background-color': '',
+      'color': ''
+    },
+    warningMessage: {  // already in rightPanel general theme
+      'border': '',
+      'background-color': '',
+      'color': ''
+    }
+  },
+
+  supportTab: {
+    textBox: {   // already in rightPanel general theme
+      'background-color': '',
+      'color': ''
+    },
+    infoTextBox: {     // already in rightPanel general theme
+      'background-color': '',
+      'border': '',
+      'color': ''
+    }
+  }
 }
+
+/* @TODO
+
+ALL:
+- text: mainText or supportText
+- unify color and hover for all icons (files panel, debuger, toggle etc.) => maybe add to styleguide
+
+COMPILE TAB:
+- details => copyToClipboard (same color and hover as other icons)
+
+RUN TAB:
+- unify copyToClipboard color and hover
+
+DEBUGGER TAB:
+- apply ${styles.button} + the rest (copy styling from below) to `eye button`
+  ${styles.button}
+  margin: 3px;
+  float: right;
+
+- Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
+- apply ${styles.dropdown} to Debugger
+
+TERMINAL:
+- apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
+
+
+*/

From 1a45f85eb3bd7c6a950423d2b26400f687e9b2ea Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 19 Sep 2017 02:39:06 +0100
Subject: [PATCH 08/25] Cleanup browser-solidity.css, minor things left

---
 src/app/panels/editor-panel.js    | 10 +++++-----
 src/app/panels/righthand-panel.js |  8 +++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index a2cecc8aa1..105b697493 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -121,11 +121,7 @@ var css = csjs`
     height            : 100%;
     width             : 100%;
   }
-  
-  .banner             {
-    width             : 25em;
-  }
-  
+
   .contextviewcontainer{
     position          : absolute;
     z-index           : 100;
@@ -133,6 +129,10 @@ var css = csjs`
     top               : 10px;
     width             : 20em;
   }  
+  
+  .banner             {
+    width             : 25em;
+  }
 `
 
 var cssTabs = yo`<style>
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 55f220cc3f..7413699deb 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -51,6 +51,7 @@ var css = csjs`
     min-width: 60px;
     font-size: 0.9em;
     cursor: pointer;
+    background-color: ${styles.colors.transparent};
     font-size: 1em;
     text-align: center;
   }
@@ -60,6 +61,12 @@ var css = csjs`
     margin: 0;
     padding: 0;
   }
+  .opts_li:active {
+    background-color: ${styles.colors.backgroundBlue};
+  }
+  .opts_li a {
+    color: inherit;
+  }
   .opts_li {
     display: block;
   }
@@ -212,7 +219,6 @@ var cssTabs = yo`<style>#optionViews.settingsView #settingsView {
     display: block;
 }
 
-
 #optionViews.staticanalysisView #staticanalysisView {
     display: block;
 }

From 72a74225124cd0c80e61af439c61f722f7e0a99b Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 20 Sep 2017 00:09:25 +0100
Subject: [PATCH 09/25] Fix selected tab background color

---
 src/app/panels/righthand-panel.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 7413699deb..d01d9b74d0 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -51,7 +51,6 @@ var css = csjs`
     min-width: 60px;
     font-size: 0.9em;
     cursor: pointer;
-    background-color: ${styles.colors.transparent};
     font-size: 1em;
     text-align: center;
   }
@@ -61,12 +60,6 @@ var css = csjs`
     margin: 0;
     padding: 0;
   }
-  .opts_li:active {
-    background-color: ${styles.colors.backgroundBlue};
-  }
-  .opts_li a {
-    color: inherit;
-  }
   .opts_li {
     display: block;
   }

From d9c99e599c955c44421c993e665860f63566b414 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 20 Sep 2017 05:05:08 +0100
Subject: [PATCH 10/25] Remove styles.css and start theme-draft.js

---
 src/app/ui/theme-draft.js | 87 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)

diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
index 8ba05d1913..e773ce6ee2 100644
--- a/src/app/ui/theme-draft.js
+++ b/src/app/ui/theme-draft.js
@@ -1,6 +1,7 @@
 // THEMEABLE parameters
 
 // REMIX
+<<<<<<< HEAD
 var remixGeneral = {
   general_BackgroundColor: {
     'background-color': ''
@@ -51,32 +52,54 @@ var remixGeneral = {
       'color': ''
     }
   }
+=======
+var remix = {
+  'background-color': '',
+  'font': '',
+  'font-size': '',
+  'color': ''
+>>>>>>> Remove styles.css and start theme-draft.js
 }
 
 // LEFT PANEL
 var filePanel = {
+<<<<<<< HEAD
   icons: {   // icons
+=======
+  icons: {
+>>>>>>> Remove styles.css and start theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
+<<<<<<< HEAD
   togglePannel: {   // icons
+=======
+  toggle: {
+>>>>>>> Remove styles.css and start theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
   treeview: {
+<<<<<<< HEAD
     'color': '',   // already defined in Remix general
     highlightedLine: {
       'background-color': ''  // highlight_BackgroundColor
+=======
+    'color': '',
+    highlightedLine: {
+      'background-color': ''
+>>>>>>> Remove styles.css and start theme-draft.js
     }
   }
 }
 
 // EDITOR
 var editor = {
+<<<<<<< HEAD
   'background-color': '',  // general_BackgroundColor
   'color': '',  // fonts/color
   gutter: {
@@ -90,6 +113,21 @@ var editor = {
     'color': ''  // fonts/color
   },
   icons: {  // icons
+=======
+  'background-color': '',
+  'color': '',
+  gutter: {
+    'background-color': '',
+    highlightedNumber: {
+      'background-color': ''
+    },
+  },
+  navTabs: {
+    'background-color': '',
+    'color': ''
+  }
+  icons: {
+>>>>>>> Remove styles.css and start theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
@@ -98,6 +136,7 @@ var editor = {
   code: {
     // types, comments, parameters...
     highlightedLine: {
+<<<<<<< HEAD
       'background-color': ''   //highlight_BackgroundColor
     },
     debuggerMode: {
@@ -106,24 +145,48 @@ var editor = {
       }
     }
   }
+=======
+      'background-color': ''
+    },
+    debuggerMode: {
+      highlightedArea: {
+        'background-color': ''
+      },
+    }
+  }
+
+>>>>>>> Remove styles.css and start theme-draft.js
 }
 
 // TERMINAL
 var terminal = {
   menu: {
+<<<<<<< HEAD
     'background-color': '', // highlight_BackgroundColor
     'color': '',  // fonts/color
     icons: {  // icons
+=======
+    'background-color': '',
+    'color': '',
+    icon: {
+>>>>>>> Remove styles.css and start theme-draft.js
       'color': '',
       ':hover': {
         'color': ''
       }
     },
+<<<<<<< HEAD
     dropdown: {  // dropdown
       'background-color': '',
       'color': ''
     },
     togglePannel: {   // icons
+=======
+    dropdown: {
+      'background-color': ''
+    },
+    toggle: {
+>>>>>>> Remove styles.css and start theme-draft.js
       'color': '',
       ':hover': {
         'color': ''
@@ -132,15 +195,25 @@ var terminal = {
   },
   terminalWindow: {
     'background-color': '',
+<<<<<<< HEAD
     'color': '',
+=======
+>>>>>>> Remove styles.css and start theme-draft.js
     logo: {
       'url': '',
     },
     infoLog: {
+<<<<<<< HEAD
       'color': ''  // fonts/color
     },
     errorLog: {
       'color': ''  // same as border in errorMessage in rightPanel/compileTab  @TODO
+=======
+      'color': ''
+    },
+    errorLog: {
+      'color': ''
+>>>>>>> Remove styles.css and start theme-draft.js
     },
     transactionLog: {
       title: {
@@ -152,9 +225,15 @@ var terminal = {
       detailsButton: {
         'background-color': '',
         'color': ''
+<<<<<<< HEAD
       },
       debugButton: {
         'background-color': '',  // same as highlightedArea in editor/debuggerMode
+=======
+      }
+      debugButton: {
+        'background-color': '',
+>>>>>>> Remove styles.css and start theme-draft.js
         'color': ''
       }
     }
@@ -163,6 +242,7 @@ var terminal = {
 
 // RIGHT PANEL
 var rightPanel = {
+<<<<<<< HEAD
   'background-color': '',  // already defined in Remix general
   'color': '', // already defined in Remix general
   textBox: {        // already defined in Remix general
@@ -176,11 +256,15 @@ var rightPanel = {
     'color': ''
   },
   togglePannel: {   // icons
+=======
+  toggle: {
+>>>>>>> Remove styles.css and start theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
+<<<<<<< HEAD
   logo: {
     'url': ''
   },
@@ -365,3 +449,6 @@ TERMINAL:
 
 
 */
+=======
+}
+>>>>>>> Remove styles.css and start theme-draft.js

From bd465eeb1124c7f4f3f3906c76df9879853a52e9 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 21 Sep 2017 01:33:42 +0100
Subject: [PATCH 11/25] Update theme-draft.js

---
 src/app/ui/theme-draft.js | 118 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 114 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
index e773ce6ee2..f90bdcf470 100644
--- a/src/app/ui/theme-draft.js
+++ b/src/app/ui/theme-draft.js
@@ -2,6 +2,9 @@
 
 // REMIX
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Update theme-draft.js
 var remixGeneral = {
   general_BackgroundColor: {
     'background-color': ''
@@ -52,6 +55,7 @@ var remixGeneral = {
       'color': ''
     }
   }
+<<<<<<< HEAD
 =======
 var remix = {
   'background-color': '',
@@ -59,31 +63,42 @@ var remix = {
   'font-size': '',
   'color': ''
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+>>>>>>> Update theme-draft.js
 }
 
 // LEFT PANEL
 var filePanel = {
+<<<<<<< HEAD
 <<<<<<< HEAD
   icons: {   // icons
 =======
   icons: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+  icons: {   // icons
+>>>>>>> Update theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
+<<<<<<< HEAD
 <<<<<<< HEAD
   togglePannel: {   // icons
 =======
   toggle: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+  togglePannel: {   // icons
+>>>>>>> Update theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
   treeview: {
+<<<<<<< HEAD
 <<<<<<< HEAD
     'color': '',   // already defined in Remix general
     highlightedLine: {
@@ -93,12 +108,18 @@ var filePanel = {
     highlightedLine: {
       'background-color': ''
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+    'color': '',   // already defined in Remix general
+    highlightedLine: {
+      'background-color': ''  // highlight_BackgroundColor
+>>>>>>> Update theme-draft.js
     }
   }
 }
 
 // EDITOR
 var editor = {
+<<<<<<< HEAD
 <<<<<<< HEAD
   'background-color': '',  // general_BackgroundColor
   'color': '',  // fonts/color
@@ -116,18 +137,29 @@ var editor = {
 =======
   'background-color': '',
   'color': '',
+=======
+  'background-color': '',  // general_BackgroundColor
+  'color': '',  // fonts/color
+>>>>>>> Update theme-draft.js
   gutter: {
-    'background-color': '',
+    'background-color': '',  // highlight_BackgroundColor
     highlightedNumber: {
-      'background-color': ''
+      'background-color': ''  // highlight_BackgroundColor
     },
   },
   navTabs: {
+<<<<<<< HEAD
     'background-color': '',
     'color': ''
   }
   icons: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+    'background-color': '',  // highlight_BackgroundColor
+    'color': ''  // fonts/color
+  },
+  icons: {  // icons
+>>>>>>> Update theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
@@ -136,6 +168,7 @@ var editor = {
   code: {
     // types, comments, parameters...
     highlightedLine: {
+<<<<<<< HEAD
 <<<<<<< HEAD
       'background-color': ''   //highlight_BackgroundColor
     },
@@ -147,20 +180,27 @@ var editor = {
   }
 =======
       'background-color': ''
+=======
+      'background-color': ''   //highlight_BackgroundColor
+>>>>>>> Update theme-draft.js
     },
     debuggerMode: {
       highlightedArea: {
-        'background-color': ''
-      },
+        'background-color': ''   // same as Debug button in Terminal window
+      }
     }
   }
+<<<<<<< HEAD
 
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+>>>>>>> Update theme-draft.js
 }
 
 // TERMINAL
 var terminal = {
   menu: {
+<<<<<<< HEAD
 <<<<<<< HEAD
     'background-color': '', // highlight_BackgroundColor
     'color': '',  // fonts/color
@@ -170,11 +210,17 @@ var terminal = {
     'color': '',
     icon: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+    'background-color': '', // highlight_BackgroundColor
+    'color': '',  // fonts/color
+    icons: {  // icons
+>>>>>>> Update theme-draft.js
       'color': '',
       ':hover': {
         'color': ''
       }
     },
+<<<<<<< HEAD
 <<<<<<< HEAD
     dropdown: {  // dropdown
       'background-color': '',
@@ -187,6 +233,13 @@ var terminal = {
     },
     toggle: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+    dropdown: {  // dropdown
+      'background-color': '',
+      'color': ''
+    },
+    togglePannel: {   // icons
+>>>>>>> Update theme-draft.js
       'color': '',
       ':hover': {
         'color': ''
@@ -195,14 +248,19 @@ var terminal = {
   },
   terminalWindow: {
     'background-color': '',
+<<<<<<< HEAD
 <<<<<<< HEAD
     'color': '',
 =======
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+    'color': '',
+>>>>>>> Update theme-draft.js
     logo: {
       'url': '',
     },
     infoLog: {
+<<<<<<< HEAD
 <<<<<<< HEAD
       'color': ''  // fonts/color
     },
@@ -214,6 +272,12 @@ var terminal = {
     errorLog: {
       'color': ''
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+      'color': ''  // fonts/color
+    },
+    errorLog: {
+      'color': ''  // same as border in errorMessage in rightPanel/compileTab  @TODO
+>>>>>>> Update theme-draft.js
     },
     transactionLog: {
       title: {
@@ -225,6 +289,7 @@ var terminal = {
       detailsButton: {
         'background-color': '',
         'color': ''
+<<<<<<< HEAD
 <<<<<<< HEAD
       },
       debugButton: {
@@ -234,6 +299,11 @@ var terminal = {
       debugButton: {
         'background-color': '',
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+      },
+      debugButton: {
+        'background-color': '',  // same as highlightedArea in editor/debuggerMode
+>>>>>>> Update theme-draft.js
         'color': ''
       }
     }
@@ -243,6 +313,9 @@ var terminal = {
 // RIGHT PANEL
 var rightPanel = {
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Update theme-draft.js
   'background-color': '',  // already defined in Remix general
   'color': '', // already defined in Remix general
   textBox: {        // already defined in Remix general
@@ -256,15 +329,21 @@ var rightPanel = {
     'color': ''
   },
   togglePannel: {   // icons
+<<<<<<< HEAD
 =======
   toggle: {
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+>>>>>>> Update theme-draft.js
     'color': '',
     ':hover': {
       'color': ''
     }
   },
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Update theme-draft.js
   logo: {
     'url': ''
   },
@@ -421,6 +500,7 @@ var rightPanel = {
       'color': ''
     }
   }
+<<<<<<< HEAD
 }
 
 /* @TODO
@@ -452,3 +532,33 @@ TERMINAL:
 =======
 }
 >>>>>>> Remove styles.css and start theme-draft.js
+=======
+}
+
+/* @TODO
+
+ALL:
+- text: mainText or supportText
+- unify color and hover for all icons (files panel, debuger, toggle etc.) => maybe add to styleguide
+
+COMPILE TAB:
+- details => copyToClipboard (same color and hover as other icons)
+
+RUN TAB:
+- unify copyToClipboard color and hover
+
+DEBUGGER TAB:
+- apply ${styles.button} + the rest (copy styling from below) to `eye button`
+  ${styles.button}
+  margin: 3px;
+  float: right;
+
+- Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
+- apply ${styles.dropdown} to Debugger
+
+TERMINAL:
+- apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
+
+
+*/
+>>>>>>> Update theme-draft.js

From d5c15aa71d33039deb6cbadcf4de11ab83386fea Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Fri, 22 Sep 2017 03:54:50 +0100
Subject: [PATCH 12/25] Update theme-draft.js & refactoring styling

---
 src/app.js                        | 14 +++++++-------
 src/app/execution/txLogger.js     | 12 +++++++++---
 src/app/panels/editor-panel.js    |  6 +++++-
 src/app/panels/righthand-panel.js |  5 +++++
 src/app/panels/terminal.js        | 18 ++++++++++++------
 src/app/tabs/compile-tab.js       | 20 +++++++-------------
 src/app/tabs/debugger-tab.js      |  4 ++++
 src/app/tabs/run-tab.js           |  4 ++--
 src/app/ui/dropdown.js            | 23 +++++++++++++++--------
 src/app/ui/theme-draft.js         | 28 +++++++++++++++++-----------
 src/universal-dapp.js             |  6 ++----
 11 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/src/app.js b/src/app.js
index 7d065633a7..8a706c4be7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -87,15 +87,15 @@ var css = csjs`
     overflow           : hidden;
   }
   .highlightcode {
-      position:absolute;
-      z-index:20;
-      background-color: ${styles.colors.lightOrange};
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.colors.lightOrange};
   }
   .highlightcode_fullLine {
-      position:absolute;
-      z-index:20;
-      background-color: ${styles.colors.lightOrange};
-      opacity: 0.5;
+    position:absolute;
+    z-index:20;
+    background-color: ${styles.colors.lightOrange};
+    opacity: 0.5;
   }
 `
 
diff --git a/src/app/execution/txLogger.js b/src/app/execution/txLogger.js
index c7b170e56f..5a29208e13 100644
--- a/src/app/execution/txLogger.js
+++ b/src/app/execution/txLogger.js
@@ -22,13 +22,14 @@ var css = csjs`
   }
   .tx {
     color: ${styles.colors.violet};
+    font-weight: bold;
     width: 45%;
   }
   .txTable, .tr, .td {
     border-collapse: collapse;
     font-size: 10px;
-    color: ${styles.colors.grey};
-    border: 1px dashed ${styles.colors.black};
+    color: ${styles.colors.black};
+    border: 1px solid ${styles.colors.black};
   }
   #txTable {
     margin-top: 1%;
@@ -62,7 +63,12 @@ var css = csjs`
   .clipboardCopy {
     margin-right: 0.5em;
     cursor: pointer;
-  }`
+    color: ${styles.colors.black};
+  }
+  .clipboardCopy:hover {
+    color: ${styles.colors.lightOrange};
+  }
+  `
 /**
   * This just export a function that register to `newTransaction` and forward them to the logger.
   * Emit debugRequested
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 105b697493..dc45d35e81 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -71,6 +71,8 @@ var css = csjs`
   }
   .toggleLHP i        {
     cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
   }
   .toggleLHP i:hover  {
     color             : ${styles.colors.orange};
@@ -94,13 +96,15 @@ var css = csjs`
     left              : 0;
   }
   .toggleRHP          {
-    margin-top        : 0.5em;
+    margin            : 0.3em;
     font-weight       : bold;
     color             : ${styles.colors.black};
     right             : 0;
   }
   .toggleRHP i        {
     cursor            : pointer;
+    font-size         : 14px;
+    font-weight       : bold;
   }
   .toggleRHP i:hover  {
     color             : ${styles.colors.orange};
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index d01d9b74d0..f749b3ed6e 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -62,6 +62,11 @@ var css = csjs`
   }
   .opts_li {
     display: block;
+    font-weight: bold;
+    color: ${styles.colors.black};
+  }
+  .opts_li:hover {
+    color: ${styles.colors.orange};
   }
   .dragbar             {
     position           : absolute;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index f9342ea59c..ab96aa846f 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -1,6 +1,5 @@
 /* global Node, requestAnimationFrame */
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var javascriptserialize = require('javascript-serialize')
 var jsbeautify = require('js-beautify')
 var type = require('component-type')
@@ -10,6 +9,11 @@ var Web3 = require('web3')
 
 var executionContext = require('../../execution-context')
 var Dropdown = require('../ui/dropdown')
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .panel              {
@@ -38,15 +42,16 @@ var css = csjs`
     width             : 100%;
     padding           : 5px;
   }
-  .minimize           {
+  .toggleTerminal           {
     margin-left       : auto;
     width             : 10px;
     cursor            : pointer;
     color             : black;
+    font-size         : 14px;
+    font-weight       : bold;
   }
   .clear              {
     margin-right      : 5px;
-    font-size         : 15px;
     cursor            : pointer;
     color             : black;
   }
@@ -83,6 +88,7 @@ var css = csjs`
     font-family       : monospace;
     font-weight       : bold;
     font-size         : large;
+    color             : ${styles.colors.black}
   }
   .input              {
     word-break        : break-all;
@@ -90,8 +96,8 @@ var css = csjs`
     font-family       : monospace;
   }
   .filter             {
-    padding           : 3px;
-    width             : 20em;    
+    ${styles.inputField}
+    width             : 150px;
   }
 
   .dragbarHorizontal  {
@@ -198,7 +204,7 @@ class Terminal {
         ${self._view.input}
       </div>
     `
-    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.minimize} fa fa-angle-double-down"></i>`
+    self._view.icon = yo`<i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize} class="${css.toggleTerminal} fa fa-angle-double-down"></i>`
     self._view.dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
     self._view.bar = yo`
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index b0472359f9..7989310260 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -99,7 +99,7 @@ var css = csjs`
   }
   .key {
     margin-right: 5px;
-    color: grey;
+    color: ${styles.colors.black};
     text-transform: uppercase;
     width: 100%;
   }
@@ -108,22 +108,16 @@ var css = csjs`
     width: 100%;
     margin-top: 1.5%;
   }
-  .copyDetails {
+  .copyDetails,
+  .questionMark {
     margin-left: 2%;
-    font-size: 14px;
     cursor: pointer;
-    color: ${styles.colors.grey};
-    opacity: .3;
+    color: ${styles.colors.black};
   }
-  .copyDetails:hover {
-    opacity: 1;
+  .copyDetails:hover,
+  .questionMark:hover {
+    color: ${styles.colors.lightOrange};
   }
-  .questionMark {
-    margin-left: 1%;
-    font-size: 14px;
-    color: ${styles.colors.grey};
-    opacity: .3;
-  },
   .detailsJSON {
     padding: 8px 0;
     background-color: ${styles.colors.white};
diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 37938ebfc0..7ca40a2326 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -2,6 +2,9 @@ var yo = require('yo-yo')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .debuggerTabView {
@@ -9,6 +12,7 @@ var css = csjs`
   }
   .debugger {
     margin-bottom: 1%;
+    ${styles.displayBox}
   }
 `
 
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 7b32ccf007..33837dd165 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -54,13 +54,13 @@ var css = csjs`
     min-width: 150px;
   }
   .copyaddress {
-    color: ${styles.colors.blue};
     margin-left: 0.5em;
     margin-top: 0.7em;
     cursor: pointer;
+    color: ${styles.colors.black};
   }
   .copyaddress:hover {
-    color: ${styles.colors.grey};
+    color: ${styles.colors.lightOrange};
   }
   .instanceContainer {
     ${styles.displayBox}
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 0621027566..72718bee12 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -1,18 +1,23 @@
 var yo = require('yo-yo')
-var csjs = require('csjs-inject')
 var EventManager = require('ethereum-remix').lib.EventManager
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .dropdown           {
+    ${styles.dropdown}
+    color:            : ${styles.colors.black};
+    overflow          : visible;
     position          : relative;
     display           : flex;
     flex-direction    : column;
-    color : black;
   }
   .selectbox          {
     display           : flex;
     align-items       : center;
-    background-color  : lightgrey;
     margin            : 3px;
     cursor            : pointer;
   }
@@ -32,12 +37,14 @@ var css = csjs`
     position          : absolute;
     display           : flex;
     flex-direction    : column;
-    min-width         : 30ch;
-    max-width         : 30ch;
-    top               : 21px;
-    left              : 10px;
+    align-items       : end;
+    top               : 24px;
+    left              : 0;
+    width             : 250px;
     background-color  : white;
-    border            : 1px solid black;
+    border            : 1px solid ${styles.colors.veryLightGrey};
+    border-radius     : 3px;
+    border-top        : 0;
   }
   .option {
     margin: 0;
diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
index f90bdcf470..c21e1fd825 100644
--- a/src/app/ui/theme-draft.js
+++ b/src/app/ui/theme-draft.js
@@ -507,25 +507,31 @@ var rightPanel = {
 
 ALL:
 - text: mainText or supportText
-- unify color and hover for all icons (files panel, debuger, toggle etc.) => maybe add to styleguide
+
+DEBUGGER TAB:
+- DropdownPanel.js - refactor css
+  - apply ${styles.dropdown} to Debugger
+  - apply ${styles.button} + the rest (copy styling from below) to `eye button`
+    ${styles.button}
+    margin: 3px;
+    float: right;
+
+---
+DONE
+ALL:
+DONE - unify color and hover for all icons (files panel, debuger, toggle etc.)
 
 COMPILE TAB:
-- details => copyToClipboard (same color and hover as other icons)
+DONE - details => copyToClipboard (same color and hover as other icons)
 
 RUN TAB:
-- unify copyToClipboard color and hover
+DONE - unify copyToClipboard color and hover
 
 DEBUGGER TAB:
-- apply ${styles.button} + the rest (copy styling from below) to `eye button`
-  ${styles.button}
-  margin: 3px;
-  float: right;
-
-- Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
-- apply ${styles.dropdown} to Debugger
+DONE - Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
 
 TERMINAL:
-- apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
+DONE - apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
 
 
 */
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index d4f3a7edac..326bee42f5 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -67,14 +67,12 @@ var css = csjs`
       display: flex;
   }
   .copy  {
-    font-size: 13px;
     cursor: pointer;
-    opacity: 0.8;
     margin-left: 3%;
-    color: ${styles.colors.blue};
+    color: ${styles.colors.black};
   }
   .copy:hover{
-    color: ${styles.colors.grey};
+    color: ${styles.colors.lightOrange};
   }
   .buttonsContainer {
     margin-top: 2%;

From 303005cc3ce4d0a0bb9167f6069d48c5586b208f Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Sun, 24 Sep 2017 02:38:25 +0100
Subject: [PATCH 13/25] Start applying new parameters from style-guide etc.

---
 src/app.js                     | 3 +++
 src/app/editor/editor.js       | 2 ++
 src/app/files/file-explorer.js | 2 +-
 src/app/panels/editor-panel.js | 2 +-
 src/app/panels/file-panel.js   | 2 +-
 src/app/tabs/compile-tab.js    | 2 +-
 src/app/tabs/run-tab.js        | 2 --
 src/app/ui/modaldialog.js      | 2 +-
 src/app/ui/renderer.js         | 1 +
 src/universal-dapp.js          | 2 +-
 10 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app.js b/src/app.js
index 8a706c4be7..84ac431188 100644
--- a/src/app.js
+++ b/src/app.js
@@ -61,6 +61,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .centerpanel         {
+    background-color  : ${styles.colors.general_BackgroundColor};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -69,6 +70,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .leftpanel           {
+    background-color  : ${styles.colors.general_BackgroundColor};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -78,6 +80,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .rightpanel          {
+    background-color  : ${styles.colors.general_BackgroundColor};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index 45ec619f3e..8644012437 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -11,6 +11,8 @@ require('./mode-solidity.js')
 
 var css = csjs`
   .ace-editor {
+    background-color  : ${styles.colors.general_BackgroundColor};
+    border-top: 20px solid ${styles.colors.backgroundBlue};
     width     : 100%;
   }
 `
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index 1437ba6a8f..2a52a1a44f 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -27,7 +27,7 @@ var css = csjs`
     background-color  : ${styles.colors.backgroundBlue};
   }
   .rename             {
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.colors.general_BackgroundColor};
   }
   .remove             {
     margin-left       : auto;
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index dc45d35e81..600a7883af 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -83,7 +83,7 @@ var css = csjs`
     text-align        : center;
     cursor            : pointer;
     vertical-align    : middle;
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.colors.general_BackgroundColor};
     height            : 100%;
     font-size         : 1.3em;
     color             : orange;
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index 94356b1058..8df4c41da2 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -82,7 +82,7 @@ var css = csjs`
     cursor            : pointer;
   }
   .treeview {
-    background-color  : ${styles.colors.white};
+    background-color  : ${styles.colors.general_BackgroundColor};
   }
   .treeviews {
     overflow-y        : auto;
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 7989310260..05efbd107c 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -120,7 +120,7 @@ var css = csjs`
   }
   .detailsJSON {
     padding: 8px 0;
-    background-color: ${styles.colors.white};
+    background-color: ${styles.colors.general_BackgroundColor};
     border: none;
     color: ${styles.colors.grey};
   }
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 33837dd165..9dc373da13 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -31,13 +31,11 @@ var css = csjs`
     display: flex;
   }
   .col1 {
-    ${styles.titleL}
     width: 30%;
     float: left;
     align-self: center;
   }
   .col1_1 {
-    ${styles.titleM}
     font-size: 12px;
     width: 25%;
     min-width: 75px;
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 338bb8814e..27a4e26a7e 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -40,7 +40,7 @@ var css = csjs`
   }
   .modalContent {
     position: relative;
-    background-color: ${styles.colors.white};
+    background-color: ${styles.colors.general_BackgroundColor};
     margin: auto;
     padding: 0;
     line-height: 18px;
diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index 52f50ab6b2..e390ba6e18 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -20,6 +20,7 @@ var css = yo`<style>
 .sol.success pre,
 .sol.error pre,
 .sol.warning pre {
+    overflow-y: hidden;
     background-color: transparent;
     margin: 0;
     font-size: 12px;
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index 326bee42f5..b6f3c80a27 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -40,7 +40,7 @@ var css = csjs`
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
-    background-color: ${styles.colors.white};
+    background-color: ${styles.colors.general_BackgroundColor};
   }
   .titleText {
     margin-right: 1em;

From 7bfd03eb1c0966626242d5eca4384be3625aa9a1 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Mon, 25 Sep 2017 04:33:07 +0100
Subject: [PATCH 14/25] Trying out new style guide

---
 src/app/tabs/compile-tab.js | 3 +++
 src/app/tabs/run-tab.js     | 1 -
 src/app/ui/dropdown.js      | 1 -
 src/universal-dapp.js       | 4 +---
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 05efbd107c..ae29c63ad9 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -62,6 +62,7 @@ var css = csjs`
   }
   .compileButton {
     ${styles.button}
+    background-color: ${styles.elementColors.rightPanel_compileTab_compileButton_BackgroundColor};
     width: 120px;
     min-width: 110px;
     margin-right: 1%;
@@ -85,9 +86,11 @@ var css = csjs`
   }
   .details {
     ${styles.button}
+    background-color: ${styles.elementColors.rightPanel_compileTab_otherButtons_BackgroundColor};
   }
   .publish {
     ${styles.button}
+    background-color: ${styles.elementColors.rightPanel_compileTab_otherButtons_BackgroundColor};
     margin-left: 2%;
     width: 120px;
   }
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 9dc373da13..50844d99f1 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -47,7 +47,6 @@ var css = csjs`
   }
   .select {
     ${styles.dropdown}
-    text-align: center;
     font-weight: normal;
     min-width: 150px;
   }
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 72718bee12..e5282e10b3 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -9,7 +9,6 @@ var styles = styleGuide()
 var css = csjs`
   .dropdown           {
     ${styles.dropdown}
-    color:            : ${styles.colors.black};
     overflow          : visible;
     position          : relative;
     display           : flex;
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index b6f3c80a27..6b5f23554f 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -31,16 +31,14 @@ var css = csjs`
     align-items: center;
   }
   .title {
-    font-size: 11px;
     ${styles.dropdown}
+    font-size: 11px;
     width: 400px;
     display: flex;
     justify-content: space-between;
-    align-items: center;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
-    background-color: ${styles.colors.general_BackgroundColor};
   }
   .titleText {
     margin-right: 1em;

From 8e3ffb8a2c6fa39be6e7451c1b9882b11d8816f1 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 26 Sep 2017 04:51:38 +0100
Subject: [PATCH 15/25] Remove draft for style guide to remix repo

---
 src/app/ui/theme-draft.js | 570 --------------------------------------
 1 file changed, 570 deletions(-)
 delete mode 100644 src/app/ui/theme-draft.js

diff --git a/src/app/ui/theme-draft.js b/src/app/ui/theme-draft.js
deleted file mode 100644
index c21e1fd825..0000000000
--- a/src/app/ui/theme-draft.js
+++ /dev/null
@@ -1,570 +0,0 @@
-// THEMEABLE parameters
-
-// REMIX
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> Update theme-draft.js
-var remixGeneral = {
-  general_BackgroundColor: {
-    'background-color': ''
-  },
-  highlight_BackgroundColor: {
-    'background-color': ''
-  },
-  fonts: {
-    'font': '',
-    'font-size': '',
-    mainText: {
-      'color': ''
-    },
-    supportText: {
-      'color': ''
-    }
-  },
-  dropdown: {
-    'background-color': '',
-    'color': ''
-  },
-  textBox: {
-    'background-color': '',
-    'border': '',
-    'color': ''
-  },
-  infoTextBox: {
-    'background-color': '',
-    'border': '',
-    'color': ''
-  },
-  inputField: {
-    'background-color': '',
-    'color': ''
-  },
-  icons: {   // All icons
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  },
-  butons: {
-    'background-color': ''
-  },
-  copyToClipboard: {  // same as icons @TODO
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  }
-<<<<<<< HEAD
-=======
-var remix = {
-  'background-color': '',
-  'font': '',
-  'font-size': '',
-  'color': ''
->>>>>>> Remove styles.css and start theme-draft.js
-=======
->>>>>>> Update theme-draft.js
-}
-
-// LEFT PANEL
-var filePanel = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-  icons: {   // icons
-=======
-  icons: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-  icons: {   // icons
->>>>>>> Update theme-draft.js
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  },
-<<<<<<< HEAD
-<<<<<<< HEAD
-  togglePannel: {   // icons
-=======
-  toggle: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-  togglePannel: {   // icons
->>>>>>> Update theme-draft.js
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  },
-  treeview: {
-<<<<<<< HEAD
-<<<<<<< HEAD
-    'color': '',   // already defined in Remix general
-    highlightedLine: {
-      'background-color': ''  // highlight_BackgroundColor
-=======
-    'color': '',
-    highlightedLine: {
-      'background-color': ''
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-    'color': '',   // already defined in Remix general
-    highlightedLine: {
-      'background-color': ''  // highlight_BackgroundColor
->>>>>>> Update theme-draft.js
-    }
-  }
-}
-
-// EDITOR
-var editor = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-  'background-color': '',  // general_BackgroundColor
-  'color': '',  // fonts/color
-  gutter: {
-    'background-color': '',  // highlight_BackgroundColor
-    highlightedNumber: {
-      'background-color': ''  // highlight_BackgroundColor
-    },
-  },
-  navTabs: {
-    'background-color': '',  // highlight_BackgroundColor
-    'color': ''  // fonts/color
-  },
-  icons: {  // icons
-=======
-  'background-color': '',
-  'color': '',
-=======
-  'background-color': '',  // general_BackgroundColor
-  'color': '',  // fonts/color
->>>>>>> Update theme-draft.js
-  gutter: {
-    'background-color': '',  // highlight_BackgroundColor
-    highlightedNumber: {
-      'background-color': ''  // highlight_BackgroundColor
-    },
-  },
-  navTabs: {
-<<<<<<< HEAD
-    'background-color': '',
-    'color': ''
-  }
-  icons: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-    'background-color': '',  // highlight_BackgroundColor
-    'color': ''  // fonts/color
-  },
-  icons: {  // icons
->>>>>>> Update theme-draft.js
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  },
-  code: {
-    // types, comments, parameters...
-    highlightedLine: {
-<<<<<<< HEAD
-<<<<<<< HEAD
-      'background-color': ''   //highlight_BackgroundColor
-    },
-    debuggerMode: {
-      highlightedArea: {
-        'background-color': ''   // same as Debug button in Terminal window
-      }
-    }
-  }
-=======
-      'background-color': ''
-=======
-      'background-color': ''   //highlight_BackgroundColor
->>>>>>> Update theme-draft.js
-    },
-    debuggerMode: {
-      highlightedArea: {
-        'background-color': ''   // same as Debug button in Terminal window
-      }
-    }
-  }
-<<<<<<< HEAD
-
->>>>>>> Remove styles.css and start theme-draft.js
-=======
->>>>>>> Update theme-draft.js
-}
-
-// TERMINAL
-var terminal = {
-  menu: {
-<<<<<<< HEAD
-<<<<<<< HEAD
-    'background-color': '', // highlight_BackgroundColor
-    'color': '',  // fonts/color
-    icons: {  // icons
-=======
-    'background-color': '',
-    'color': '',
-    icon: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-    'background-color': '', // highlight_BackgroundColor
-    'color': '',  // fonts/color
-    icons: {  // icons
->>>>>>> Update theme-draft.js
-      'color': '',
-      ':hover': {
-        'color': ''
-      }
-    },
-<<<<<<< HEAD
-<<<<<<< HEAD
-    dropdown: {  // dropdown
-      'background-color': '',
-      'color': ''
-    },
-    togglePannel: {   // icons
-=======
-    dropdown: {
-      'background-color': ''
-    },
-    toggle: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-    dropdown: {  // dropdown
-      'background-color': '',
-      'color': ''
-    },
-    togglePannel: {   // icons
->>>>>>> Update theme-draft.js
-      'color': '',
-      ':hover': {
-        'color': ''
-      }
-    }
-  },
-  terminalWindow: {
-    'background-color': '',
-<<<<<<< HEAD
-<<<<<<< HEAD
-    'color': '',
-=======
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-    'color': '',
->>>>>>> Update theme-draft.js
-    logo: {
-      'url': '',
-    },
-    infoLog: {
-<<<<<<< HEAD
-<<<<<<< HEAD
-      'color': ''  // fonts/color
-    },
-    errorLog: {
-      'color': ''  // same as border in errorMessage in rightPanel/compileTab  @TODO
-=======
-      'color': ''
-    },
-    errorLog: {
-      'color': ''
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-      'color': ''  // fonts/color
-    },
-    errorLog: {
-      'color': ''  // same as border in errorMessage in rightPanel/compileTab  @TODO
->>>>>>> Update theme-draft.js
-    },
-    transactionLog: {
-      title: {
-        'color': ''
-      },
-      text: {
-        'color': ''
-      },
-      detailsButton: {
-        'background-color': '',
-        'color': ''
-<<<<<<< HEAD
-<<<<<<< HEAD
-      },
-      debugButton: {
-        'background-color': '',  // same as highlightedArea in editor/debuggerMode
-=======
-      }
-      debugButton: {
-        'background-color': '',
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-      },
-      debugButton: {
-        'background-color': '',  // same as highlightedArea in editor/debuggerMode
->>>>>>> Update theme-draft.js
-        'color': ''
-      }
-    }
-  }
-}
-
-// RIGHT PANEL
-var rightPanel = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> Update theme-draft.js
-  'background-color': '',  // already defined in Remix general
-  'color': '', // already defined in Remix general
-  textBox: {        // already defined in Remix general
-    'background-color': '',
-    'border': '',
-    'color': ''
-  },
-  infoTextBox: {     // already defined in Remix general
-    'background-color': '',
-    'border': '',
-    'color': ''
-  },
-  togglePannel: {   // icons
-<<<<<<< HEAD
-=======
-  toggle: {
->>>>>>> Remove styles.css and start theme-draft.js
-=======
->>>>>>> Update theme-draft.js
-    'color': '',
-    ':hover': {
-      'color': ''
-    }
-  },
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> Update theme-draft.js
-  logo: {
-    'url': ''
-  },
-  warningMessage: {
-    'border': '',
-    'background-color': '',
-    'color': ''
-  },
-  errorMessage: {
-    'border': '',   // same as font color in terminal error  @TODO
-    'background-color': '',
-    'color': ''
-  },
-  successMessage: {
-    'border': '',
-    'background-color': '',
-    'color': ''
-  },
-  dropdown: {
-    'background-color': '',  // dropdown
-    'color': ''
-  },
-  inputField: {   // inputField
-    'background-color': '',
-    'color': ''
-  },
-
-  compileTab: {
-    compileButton: {
-      'background-color': '', // or import a special image 'url': ''
-      'color': ''
-    },
-    buttons: {
-      'background-color': '',  // general buttons background color
-      'color': ''
-    },
-    details: {
-      'background-color': '',  // already defined in Remix general
-      header: {
-        'background-color': '',  // same as highlight_BackgroundColor
-        'color': ''
-      },
-      infoTextBox: {     // already in rightPanel general theme
-        'background-color': '',
-        'border': '',
-        'color': '',
-        copyToClipboard: { // copyToClipboard  @TODO
-          'color': '',
-          ':hover': {
-            'color': ''
-          }
-        },
-        icons: {  // icons
-          'color': '',
-          ':hover': {
-            'color': ''
-          }
-        },
-        title: {
-          'color': ''
-        }
-      }
-    }
-  },
-
-  runTab: {
-    compileButton: {
-      'background-color': '', // or import new 'url': ''
-      'color': ''
-    },
-    atAddressButton: {
-      'background-color': '',
-      'color': ''
-    },
-    createButton: {
-      'background-color': '',
-      'color': ''
-    },
-    instance_callButton: {
-      'background-color': '',
-      'color': ''
-    },
-    instance_transactButton: {
-      'background-color': '',
-      'color': ''
-    },
-    instance_transactPayableButton: {
-      'background-color': '',
-      'color': ''
-    },
-    copyToClipboard: { // copyToClipboard  @TODO
-      'color': '',
-      ':hover': {
-        'color': ''
-      }
-    }
-  },
-
-  settingsTab: {
-    infoTextBox: {     // already in rightPanel general theme
-      'background-color': '',
-      'border': '',
-      'color': ''
-    }
-  },
-
-  debuggerTab: {
-    buttons: {
-      'background-color': '',  // including eye button (needs to get ${styles.button} applied)
-      'color': '',
-      icons: {  // icons
-        'color': '',
-        ':hover': {
-          'color': ''
-        }
-      }
-    },
-    dropdowns: {  // dropdown
-      'background-color': '',  // see if ${styles.dropdown} is applied
-      'color': '',
-      instructions: {
-        highlightedKey: {
-          'background-color': ''  // highlight_BackgroundColor
-        }
-      },
-      solidityState: {
-        label: {
-          'color': ''  // supportText
-        }
-      }
-    }
-  },
-
-  analysisTab: {
-    textBox: {   // already in rightPanel general theme
-      'background-color': '',
-      'color': ''
-    },
-    warningMessage: {  // already in rightPanel general theme
-      'border': '',
-      'background-color': '',
-      'color': ''
-    }
-  },
-
-  supportTab: {
-    textBox: {   // already in rightPanel general theme
-      'background-color': '',
-      'color': ''
-    },
-    infoTextBox: {     // already in rightPanel general theme
-      'background-color': '',
-      'border': '',
-      'color': ''
-    }
-  }
-<<<<<<< HEAD
-}
-
-/* @TODO
-
-ALL:
-- text: mainText or supportText
-
-DEBUGGER TAB:
-- DropdownPanel.js - refactor css
-  - apply ${styles.dropdown} to Debugger
-  - apply ${styles.button} + the rest (copy styling from below) to `eye button`
-    ${styles.button}
-    margin: 3px;
-    float: right;
-
----
-DONE
-ALL:
-DONE - unify color and hover for all icons (files panel, debuger, toggle etc.)
-
-COMPILE TAB:
-DONE - details => copyToClipboard (same color and hover as other icons)
-
-RUN TAB:
-DONE - unify copyToClipboard color and hover
-
-DEBUGGER TAB:
-DONE - Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
-
-TERMINAL:
-DONE - apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
-
-
-*/
-=======
-}
->>>>>>> Remove styles.css and start theme-draft.js
-=======
-}
-
-/* @TODO
-
-ALL:
-- text: mainText or supportText
-- unify color and hover for all icons (files panel, debuger, toggle etc.) => maybe add to styleguide
-
-COMPILE TAB:
-- details => copyToClipboard (same color and hover as other icons)
-
-RUN TAB:
-- unify copyToClipboard color and hover
-
-DEBUGGER TAB:
-- apply ${styles.button} + the rest (copy styling from below) to `eye button`
-  ${styles.button}
-  margin: 3px;
-  float: right;
-
-- Put whole debugger in textBox => then we get blue background like on other tabs + we have white background in the textBox so we can make highlighted color same as everywhere else
-- apply ${styles.dropdown} to Debugger
-
-TERMINAL:
-- apply ${styles.dropdown} + other fixes (already made in one PR - where is it?) to dropdown
-
-
-*/
->>>>>>> Update theme-draft.js

From d0d4dcaecc4d415cbd232d795d40fa97daf53b5b Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Mon, 2 Oct 2017 05:13:34 +0100
Subject: [PATCH 16/25] Start applying new style-guide css to csjs

---
 src/app.js                        | 12 ++--
 src/app/editor/editor.js          | 15 +++--
 src/app/files/file-explorer.js    |  6 +-
 src/app/panels/editor-panel.js    | 99 ++++++++++++++++---------------
 src/app/panels/righthand-panel.js |  6 +-
 src/app/panels/terminal.js        | 29 +++++----
 src/app/ui/dropdown.js            |  7 ++-
 7 files changed, 92 insertions(+), 82 deletions(-)

diff --git a/src/app.js b/src/app.js
index 84ac431188..7c5e68b1b5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -48,7 +48,7 @@ var css = csjs`
     margin             : 0;
     padding            : 0;
     font-size          : 12px;
-    color              : ${styles.colors.black};
+    color              : ${styles.leftPanel.text_Primary};
     font-weight        : normal;
   }
   pre {
@@ -61,7 +61,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .centerpanel         {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.colors.transparent};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -70,7 +70,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .leftpanel           {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -80,7 +80,7 @@ var css = csjs`
     overflow           : hidden;
   }
   .rightpanel          {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.rightPanel.backgroundColor_Panel};
     display            : flex;
     flex-direction     : column;
     position           : absolute;
@@ -92,12 +92,12 @@ var css = csjs`
   .highlightcode {
     position:absolute;
     z-index:20;
-    background-color: ${styles.colors.lightOrange};
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
   }
   .highlightcode_fullLine {
     position:absolute;
     z-index:20;
-    background-color: ${styles.colors.lightOrange};
+    background-color: ${styles.editor.backgroundColor_DebuggerMode};
     opacity: 0.5;
   }
 `
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index 8644012437..c5720d4bfa 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -8,11 +8,14 @@ var Range = ace.acequire('ace/range').Range
 require('brace/ext/language_tools')
 var langTools = ace.acequire('ace/ext/language_tools')
 require('./mode-solidity.js')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
 
 var css = csjs`
   .ace-editor {
-    background-color  : ${styles.colors.general_BackgroundColor};
-    border-top: 20px solid ${styles.colors.backgroundBlue};
+    background-color  : ${styles.editor.backgroundColor_Editor};
+    border-top: 20px solid ${styles.editor.backgroundColor_Tabs_Highlights};
     width     : 100%;
   }
 `
@@ -21,10 +24,10 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter,
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
-        background-color: rgba(225, 229, 251, 0.5);
-    }  
+        background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+    }
     .ace_gutter-cell.ace_breakpoint{
-      background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+      background-color: ${styles.editor.backgroundColor_DebuggerMode};
     }
     .highlightreference {
       position:absolute;
@@ -44,7 +47,7 @@ document.head.appendChild(yo`
       position:absolute;
       z-index:20;
       background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-    }
+     }    
   </style>
 `)
 
diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index 2a52a1a44f..42ff19ee9d 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -24,10 +24,10 @@ var css = csjs`
     cursor            : pointer;
   }
   .hasFocus           {
-    background-color  : ${styles.colors.backgroundBlue};
+    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
   }
   .rename             {
-    background-color  : ${styles.colors.general_BackgroundColor};
+    background-color  : ${styles.leftPanel.backgroundColor_Panel};
   }
   .remove             {
     margin-left       : auto;
@@ -186,7 +186,7 @@ function fileExplorer (appAPI, files) {
       this.style.paddingRight = '19px'
       return this.removeChild(deleteButton)
     }
-    this.style.backgroundColor = styles.colors.backgroundBlue
+    this.style.backgroundColor = styles.leftPanel.backgroundColor_FileExplorer
     this.style.paddingRight = '0px'
     this.appendChild(deleteButton)
   }
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 600a7883af..97e6174c20 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -7,6 +7,49 @@ var styles = styleGuide()
 
 var Terminal = require('./terminal')
 
+var cssTabs = yo`
+  <style>
+    #files .file {
+      padding: 0 0.6em;
+      box-sizing: border-box;
+      background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+      cursor: pointer;
+      margin-right: 10px;
+      margin-top: 5px;
+      position: relative;
+      display: table-cell;
+      text-align: center;
+      vertical-align: middle;
+      color: ${styles.editor.text_Secondary};
+    }
+    #files .file.active {
+      color: ${styles.editor.text_Primary};
+      font-weight: bold;
+      border-bottom: 0 none;
+      padding-right: 1.5em;
+    }
+    #files .file .remove {
+      font-size: 12px;
+      display: flex;
+      color: ${styles.editor.text_Primary};
+      position: absolute;
+      top: -7px;
+      right: 5px;
+      display: none;
+    }
+    #files .file input {
+      background-color: ${styles.colors.transparent};
+      border: 0 none;
+      border-bottom: 1px dotted ${styles.editor.text_Primary};
+      line-height: 1em;
+      margin: 0.5em 0;
+    }
+    #files .file.active .remove {
+      display: inline-block;
+    }
+  </style>
+`
+
 var css = csjs`
   .editorpanel         {
     display            : flex;
@@ -14,10 +57,10 @@ var css = csjs`
     height             : 100%;
   }
   .tabsbar             {
+    background-color   : ${styles.editor.backgroundColor_Panel};
     display            : flex;
     overflow           : hidden;
-    height             : 2em;
-    margin-top         : 0.5em;
+    height             : 30px;
   }
   .tabs               {
     position          : relative;
@@ -29,6 +72,7 @@ var css = csjs`
     overflow          : hidden;
   }
   .files              {
+    display           : flex;
     position          : relative;
     list-style        : none;
     margin            : 0;
@@ -67,7 +111,7 @@ var css = csjs`
     padding           : 10px;
     width             : 100%;
     font-weight       : bold;
-    color             : ${styles.colors.black};
+    color             : ${styles.leftPanel.icon_Color_TogglePanel};
   }
   .toggleLHP i        {
     cursor            : pointer;
@@ -75,7 +119,7 @@ var css = csjs`
     font-weight       : bold;
   }
   .toggleLHP i:hover  {
-    color             : ${styles.colors.orange};
+    color             : ${styles.leftPanel.icon_HoverColor_TogglePanel};
   }
   .scroller           {
     position          : absolute;
@@ -96,7 +140,7 @@ var css = csjs`
     left              : 0;
   }
   .toggleRHP          {
-    margin            : 0.3em;
+    margin            : 0.5em;
     font-weight       : bold;
     color             : ${styles.colors.black};
     right             : 0;
@@ -139,49 +183,6 @@ var css = csjs`
   }
 `
 
-var cssTabs = yo`<style>
-#files .file {
-      padding: 0 0.6em;
-      box-sizing: border-box;
-      background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
-      cursor: pointer;
-      border-right: 0.5em solid white;
-      position: relative;
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-      color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
-  }
-  #files .file.active {
-      color: black;
-      font-weight: bold;
-      border-bottom: 0 none;
-      padding-right: 2em;
-  }
-  #files .file .remove {
-      position: absolute;
-      right: 0;
-      top: 0;
-      height: 1.25em;
-      width: 1.25em;
-      line-height: 1em;
-      color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-      display: none;
-      margin: 0.4em;
-      text-align: center;
-  }
-  #files .file input {
-      background-color: transparent;
-      border: 0 none;
-      border-bottom: 1px dotted black;
-      line-height: 1em;
-      margin: 0.5em 0;
-  }
-  #files .file.active .remove {
-      display: inline-block;
-  }
-  </style>`
-
 class EditorPanel {
   constructor (opts = {}) {
     var self = this
@@ -236,7 +237,7 @@ class EditorPanel {
   }
   _adjustLayout (direction, delta) {
     var limitUp = 0
-    var limitDown = 20
+    var limitDown = 32
     var containerHeight = window.innerHeight - limitUp // - menu bar containerHeight
     var self = this
     var layout = self.data._layout[direction]
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index f749b3ed6e..44dfd5640c 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -66,7 +66,7 @@ var css = csjs`
     color: ${styles.colors.black};
   }
   .opts_li:hover {
-    color: ${styles.colors.orange};
+    color: ${styles.colors.grey};
   }
   .dragbar             {
     position           : absolute;
@@ -98,9 +98,9 @@ var css = csjs`
     margin-right: 30px;
     display: flex;
     align-self: center;
-    height: 20px;
+    height: 29px;
     width: 20px;
-    background-color: white;
+    background-color: ${styles.colors.transparent};
   }
 `
 
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index ab96aa846f..c70e3845a4 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -21,8 +21,8 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     font-size         : 12px;
-    color             : #777;
-    background-color  : #ededed;
+    color             : ${styles.terminal.text_Regular_TransactionLog}
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     height            : 100%;
     min-height        : 1.7em;
     overflow          : hidden;
@@ -30,12 +30,13 @@ var css = csjs`
 
   .bar                {
     display           : flex;
-    min-height        : 1.7em;
+    min-height        : 3em;
     padding           : 2px;
-    background-color  : #eef;
+    background-color  : ${styles.terminal.backgroundColor_Menu};
     z-index           : 3;
   }
   .menu               {
+    color             : ${styles.terminal.text_Primary};
     position          : relative;
     display           : flex;
     align-items       : center;
@@ -46,20 +47,24 @@ var css = csjs`
     margin-left       : auto;
     width             : 10px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_TogglePanel};
     font-size         : 14px;
     font-weight       : bold;
   }
+  .toggleTerminal:hover              {
+    color             : ${styles.terminal.icon_HoverColor_TogglePanel};
+  }
   .clear              {
     margin-right      : 5px;
     cursor            : pointer;
-    color             : black;
+    color             : ${styles.terminal.icon_Color_Menu};
   }
-  .hover              {
-    color             : orange;
+  .clear:hover              {
+    color             : ${styles.terminal.icon_HoverColor_Menu};
   }
 
   .terminal           {
+    background-color  : ${styles.terminal.backgroundColor_Terminal};
     display           : flex;
     flex-direction    : column;
     height            : 100%;
@@ -88,7 +93,7 @@ var css = csjs`
     font-family       : monospace;
     font-weight       : bold;
     font-size         : large;
-    color             : ${styles.colors.black}
+    color             : ${styles.colors.black};
   }
   .input              {
     word-break        : break-all;
@@ -96,7 +101,7 @@ var css = csjs`
     font-family       : monospace;
   }
   .filter             {
-    ${styles.inputField}
+    ${styles.terminal.input_Search_MenuBar}
     width             : 150px;
   }
 
@@ -108,12 +113,12 @@ var css = csjs`
     left              : 0;
     cursor            : ns-resize;
     z-index           : 999;
-    border-top        : 2px solid hsla(215, 81%, 79%, .3);
+    border-top        : 2px solid ${styles.terminal.bar_Dragging};
   }
   .ghostbar           {
     position          : absolute;
     height            : 6px;
-    background-color  : #C6CFF7;
+    background-color  : ${styles.terminal.bar_Ghost};
     opacity           : 0.5;
     cursor            : row-resize;
     z-index           : 9999;
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index e5282e10b3..6407bd3252 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -8,11 +8,12 @@ var styles = styleGuide()
 
 var css = csjs`
   .dropdown           {
-    ${styles.dropdown}
+    ${styles.terminal.dropdown_Filter_MenuBar}
     overflow          : visible;
     position          : relative;
     display           : flex;
     flex-direction    : column;
+    margin-right      : 3px;
   }
   .selectbox          {
     display           : flex;
@@ -40,8 +41,8 @@ var css = csjs`
     top               : 24px;
     left              : 0;
     width             : 250px;
-    background-color  : white;
-    border            : 1px solid ${styles.colors.veryLightGrey};
+    background-color  : ${styles.app_properties.dropdown_BackgroundColor};
+    border            : 1px solid ${styles.app_properties.dropdown_BorderColor};
     border-radius     : 3px;
     border-top        : 0;
   }

From 8a39e61749a6ff57f698d27ca25a3490f0784bbb Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Tue, 3 Oct 2017 00:24:27 +0100
Subject: [PATCH 17/25] First draft - themeable Remix

---
 src/app/execution/txLogger.js                | 25 +++++-----
 src/app/panels/editor-panel.js               |  8 ++--
 src/app/panels/righthand-panel.js            | 12 ++---
 src/app/panels/terminal.js                   |  5 +-
 src/app/staticanalysis/staticAnalysisView.js |  6 +--
 src/app/tabs/compile-tab.js                  | 31 ++++++-------
 src/app/tabs/debugger-tab.js                 |  2 +-
 src/app/tabs/run-tab.js                      | 48 +++++++-------------
 src/app/tabs/settings-tab.js                 |  4 +-
 src/app/tabs/support-tab.js                  |  5 +-
 src/app/tabs/tabbed-menu.js                  |  2 +-
 src/app/ui/modaldialog.js                    | 17 +++----
 src/app/ui/renderer.js                       | 21 ++++++---
 src/universal-dapp.js                        | 14 +++---
 14 files changed, 96 insertions(+), 104 deletions(-)

diff --git a/src/app/execution/txLogger.js b/src/app/execution/txLogger.js
index 5a29208e13..828bfea654 100644
--- a/src/app/execution/txLogger.js
+++ b/src/app/execution/txLogger.js
@@ -17,19 +17,19 @@ var typeConversion = require('../../lib/typeConversion')
 var css = csjs`
   .log {
     display: flex;
-    align-items: baseline;
+    align-items: end;
     justify-content: space-between;
   }
   .tx {
-    color: ${styles.colors.violet};
+    color: ${styles.terminal.text_Title_TransactionLog};
     font-weight: bold;
     width: 45%;
   }
   .txTable, .tr, .td {
     border-collapse: collapse;
     font-size: 10px;
-    color: ${styles.colors.black};
-    border: 1px solid ${styles.colors.black};
+    color: ${styles.terminal.text_Primary};
+    border: 1px solid ${styles.terminal.text_Primary};
   }
   #txTable {
     margin-top: 1%;
@@ -45,8 +45,13 @@ var css = csjs`
   .buttons {
     display: flex;
   }
+  .debug {
+    ${styles.terminal.button_Log_Debug}
+  }
+  .details {
+    ${styles.terminal.button_Log_Details}
+  }
   .debug, .details {
-    ${styles.button}
     min-height: 18px;
     max-height: 18px;
     width: 45px;
@@ -54,19 +59,13 @@ var css = csjs`
     font-size: 10px;
     margin-left: 5px;
   }
-  .debug {
-    background-color: ${styles.colors.lightOrange};
-  }
-  .details {
-    background-color: ${styles.colors.lightGrey};
-  }
   .clipboardCopy {
     margin-right: 0.5em;
     cursor: pointer;
-    color: ${styles.colors.black};
+    color: ${styles.terminal.icon_Color_CopyToClipboard};
   }
   .clipboardCopy:hover {
-    color: ${styles.colors.lightOrange};
+    color: ${styles.terminal.icon_HoverColor_CopyToClipboard};
   }
   `
 /**
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 97e6174c20..6392dd3b9a 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -91,13 +91,13 @@ var css = csjs`
   .changeeditorfontsize i {
     cursor            : pointer;
     display           : block;
-    color             : ${styles.colors.black};
+    color             : ${styles.editor.icon_Color_Editor};
   }
   .changeeditorfontsize i {
     cursor            : pointer;
   }
   .changeeditorfontsize i:hover {
-    color             : ${styles.colors.orange};
+    color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .buttons            {
     display           : flex;
@@ -142,7 +142,7 @@ var css = csjs`
   .toggleRHP          {
     margin            : 0.5em;
     font-weight       : bold;
-    color             : ${styles.colors.black};
+    color             : ${styles.rightPanel.icon_Color_TogglePanel};
     right             : 0;
   }
   .toggleRHP i        {
@@ -151,7 +151,7 @@ var css = csjs`
     font-weight       : bold;
   }
   .toggleRHP i:hover  {
-    color             : ${styles.colors.orange};
+    color             : ${styles.rightPanel.icon_HoverColor_TogglePanel};
   }
   .show               {
     opacity           : 1;
diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js
index 44dfd5640c..f540456851 100644
--- a/src/app/panels/righthand-panel.js
+++ b/src/app/panels/righthand-panel.js
@@ -25,7 +25,7 @@ var css = csjs`
     overflow: hidden;
   }
   #optionViews {
-    background-color: ${styles.colors.backgroundBlue};
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
     overflow: scroll;
     height: 100%;
   }
@@ -34,7 +34,7 @@ var css = csjs`
   }
   #optionViews .pre {
     word-wrap: break-word;
-    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
+    background-color: ${styles.rightPanel.BackgroundColor_Pre};
     border-radius: 3px;
     display: inline-block;
     padding: 0 0.6em;
@@ -63,10 +63,10 @@ var css = csjs`
   .opts_li {
     display: block;
     font-weight: bold;
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.text_Primary};
   }
   .opts_li:hover {
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.text_Secondary};
   }
   .dragbar             {
     position           : absolute;
@@ -75,11 +75,11 @@ var css = csjs`
     bottom             : 0;
     cursor             : col-resize;
     z-index            : 999;
-    border-left        : 2px solid hsla(215, 81%, 79%, .3);
+    border-left        : 2px solid ${styles.rightPanel.bar_Dragging};
   }
   .ghostbar           {
     width             : 3px;
-    background-color  : ${styles.colors.lightBlue};
+    background-color  : ${styles.rightPanel.bar_Ghost};
     opacity           : 0.5;
     position          : absolute;
     cursor            : col-resize;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index c70e3845a4..0c20fc6502 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -21,7 +21,7 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     font-size         : 12px;
-    color             : ${styles.terminal.text_Regular_TransactionLog}
+    color             : ${styles.terminal.text_Regular_TransactionLog};
     background-color  : ${styles.terminal.backgroundColor_Terminal};
     height            : 100%;
     min-height        : 1.7em;
@@ -83,6 +83,7 @@ var css = csjs`
     white-space       : pre-wrap;
     line-height       : 2ch;
     margin            : 1ch;
+    margin-top        : 2ch;
   }
   .cli                {
     line-height       : 1.7em;
@@ -551,7 +552,7 @@ class Terminal {
     }, 0)
   }
   _blocksRenderer (mode) {
-    mode = { log: 'black', info: 'blue', error: 'red' }[mode] // defaults
+    mode = { log: styles.terminal.text_RegularLog, info: styles.terminal.text_InfoLog, error: styles.terminal.text_ErrorLog }[mode] // defaults
     if (mode) {
       return function logger (args, scopedCommands, append) {
         var types = args.map(type)
diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js
index b60a5b3de1..1b03e35bd3 100644
--- a/src/app/staticanalysis/staticAnalysisView.js
+++ b/src/app/staticanalysis/staticAnalysisView.js
@@ -20,16 +20,16 @@ var css = csjs`
     margin-top: 1%;
   }
   .buttons  {
-    ${styles.displayBox}
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
     display: flex;
     align-items: center;
   }
   .buttonRun  {
-    ${styles.button}
+    ${styles.rightPanel.analysisTab.button_Run_AnalysisTab}
     margin-right: 1%;
   }
   .analysisModulesContainer {
-    ${styles.displayBox}
+    ${styles.rightPanel.analysisTab.box_AnalysisContainer}
     margin-bottom: 1%;
     line-height: 2em;
     display: flex;
diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index ae29c63ad9..5490295db1 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -25,7 +25,7 @@ var css = csjs`
     margin: 3% 0;
   }
   .compileContainer  {
-    ${styles.displayBox}
+    ${styles.rightPanel.compileTab.box_CompileContainer}
     margin-bottom: 2%;
   }
   .autocompileContainer {
@@ -46,7 +46,7 @@ var css = csjs`
     line-height: initial;
   }
   .warnCompilationSlow {
-    color: ${styles.colors.orange};
+    color: ${styles.rightPanel.compileTab.icon_WarnCompilation_Color};
     margin-left: 1%;
   }
   .compileButtons {
@@ -61,21 +61,20 @@ var css = csjs`
     display: flex;
   }
   .compileButton {
-    ${styles.button}
-    background-color: ${styles.elementColors.rightPanel_compileTab_compileButton_BackgroundColor};
+    ${styles.rightPanel.compileTab.button_Compile}
     width: 120px;
     min-width: 110px;
     margin-right: 1%;
     font-size: 12px;
   }
   .container {
-    ${styles.displayBox}
+    ${styles.rightPanel.compileTab.box_CompileContainer}
     margin: 0;
     display: flex;
     align-items: center;
   }
   .contractNames {
-    ${styles.dropdown}
+    ${styles.rightPanel.compileTab.dropdown_CompileContract}
     margin-right: 5%;
   }
   .contractButtons {
@@ -85,24 +84,22 @@ var css = csjs`
     text-align: center;
   }
   .details {
-    ${styles.button}
-    background-color: ${styles.elementColors.rightPanel_compileTab_otherButtons_BackgroundColor};
+    ${styles.rightPanel.compileTab.button_Details}
   }
   .publish {
-    ${styles.button}
-    background-color: ${styles.elementColors.rightPanel_compileTab_otherButtons_BackgroundColor};
+    ${styles.rightPanel.compileTab.button_Publish}
     margin-left: 2%;
     width: 120px;
   }
   .log {
-    ${styles.displayBox}
+    ${styles.rightPanel.compileTab.box_CompileContainer}
     display: flex;
     flex-direction: column;
     margin-bottom: 5%;
   }
   .key {
     margin-right: 5px;
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.text_Primary};
     text-transform: uppercase;
     width: 100%;
   }
@@ -115,17 +112,17 @@ var css = csjs`
   .questionMark {
     margin-left: 2%;
     cursor: pointer;
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.icon_Color_TogglePanel};
   }
   .copyDetails:hover,
   .questionMark:hover {
-    color: ${styles.colors.lightOrange};
+    color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
   }
   .detailsJSON {
     padding: 8px 0;
-    background-color: ${styles.colors.general_BackgroundColor};
+    background-color: ${styles.rightPanel.modalDialog_BackgroundColor_Primary};
     border: none;
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.modalDialog_text_Secondary};
   }
   .icon {
     margin-right: 3%;
@@ -149,7 +146,7 @@ var css = csjs`
   }
   70% {
     margin-bottom: 0;
-    color: ${styles.colors.grey};
+    color: ${styles.rightPanel.text_Secondary};
   }
   100% {
     margin-bottom: 0;
diff --git a/src/app/tabs/debugger-tab.js b/src/app/tabs/debugger-tab.js
index 7ca40a2326..de73a9c8f2 100644
--- a/src/app/tabs/debugger-tab.js
+++ b/src/app/tabs/debugger-tab.js
@@ -12,7 +12,7 @@ var css = csjs`
   }
   .debugger {
     margin-bottom: 1%;
-    ${styles.displayBox}
+    ${styles.rightPanel.debuggerTab.box_Debugger}
   }
 `
 
diff --git a/src/app/tabs/run-tab.js b/src/app/tabs/run-tab.js
index 50844d99f1..1b0f463b7c 100644
--- a/src/app/tabs/run-tab.js
+++ b/src/app/tabs/run-tab.js
@@ -22,7 +22,7 @@ var css = csjs`
     flex-direction: column;
   }
   .settings {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_RunTab}
     margin-bottom: 2%;
     padding: 10px 15px 15px 15px;
   }
@@ -43,10 +43,10 @@ var css = csjs`
     align-self: center;
   }
   .col2 {
-    ${styles.inputField}
+    ${styles.rightPanel.runTab.input_RunTab}
   }
   .select {
-    ${styles.dropdown}
+    ${styles.rightPanel.runTab.dropdown_RunTab}
     font-weight: normal;
     min-width: 150px;
   }
@@ -54,34 +54,33 @@ var css = csjs`
     margin-left: 0.5em;
     margin-top: 0.7em;
     cursor: pointer;
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.runTab.icon_Color_Instance_CopyToClipboard};
   }
   .copyaddress:hover {
-    color: ${styles.colors.lightOrange};
+    color: ${styles.rightPanel.runTab.icon_HoverColor_Instance_CopyToClipboard};
   }
   .instanceContainer {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    background-color: ${styles.colors.transparent};
     margin-top: 2%;
     border: none;
+    text-align: center;
   }
   .pendingTxsContainer  {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     display: flex;
     flex-direction: column;
-    background-color: ${styles.colors.transparent};
     margin-top: 2%;
     border: none;
-    padding-bottom: 0;
+    text-align: center;
   }
   .container {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_RunTab}
     margin-top: 2%;
   }
   .contractNames {
-    ${styles.dropdown}
+    ${styles.rightPanel.runTab.dropdown_RunTab}
   }
   .subcontainer {
     display: flex;
@@ -102,35 +101,20 @@ var css = csjs`
     margin-top: 2%;
   }
   .atAddress {
-    ${styles.button}
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: ${styles.colors.lightGreen};
-    border-color: ${styles.colors.lightGreen};
+    ${styles.rightPanel.runTab.button_atAddress}
   }
   .create {
-    ${styles.button}
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    background-color: ${styles.colors.lightRed};
-    border-color: ${styles.colors.lightRed};
+    ${styles.rightPanel.runTab.button_Create}
   }
   .input {
-    ${styles.inputField}
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    padding-left: 10px;
+    ${styles.rightPanel.runTab.input_RunTab}
   }
   .noInstancesText {
-    ${styles.displayBox}
-    text-align: center;
-    color: ${styles.colors.lightGrey};
+    ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
   }
   .pendingTxsText {
-    ${styles.displayBox}
-    text-align: center;
-    color: ${styles.colors.lightGrey};
+    ${styles.rightPanel.runTab.box_Instance}
     font-style: italic;
   }
   .item {
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index e19a8d9d39..2e92b088ac 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -15,7 +15,7 @@ var css = csjs`
     display: flex;
   }
   .info {
-    ${styles.infoTextBox}
+    ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
     margin-bottom: 2em;
     word-break: break-word;
   }
@@ -27,7 +27,7 @@ var css = csjs`
     font-weight: bold;
   }
   .select {
-    ${styles.dropdown}
+    ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
   }
   input {
     margin-right: 3px;
diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js
index 3435e5ef3d..c6d89efbe4 100644
--- a/src/app/tabs/support-tab.js
+++ b/src/app/tabs/support-tab.js
@@ -16,7 +16,7 @@ var css = csjs`
     overflow: hidden;
   }
   .chat {
-    ${styles.displayBox}
+    ${styles.rightPanel.supportTab.box_IframeContainer}
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -46,14 +46,13 @@ var css = csjs`
     opacity: 0.8;
   }
   .chatIframe {
-    ${styles.displayBox}
     width: 100%;
     height: 100%;
     transform: scale(0.9);
     padding: 0;
   }
   .infoBox {
-    ${styles.infoTextBox}
+    ${styles.rightPanel.supportTab.box_SupportInfo}
   }
 `
 
diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index dfbededa82..15ec283b92 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -10,7 +10,7 @@ module.exports = tabbedMenu
 
 var css = csjs`
   .active {
-    background-color: ${styles.colors.backgroundBlue};
+    background-color: ${styles.rightPanel.backgroundColor_Tab};
   }
 `
 
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
index 27a4e26a7e..c628874943 100644
--- a/src/app/ui/modaldialog.js
+++ b/src/app/ui/modaldialog.js
@@ -19,12 +19,13 @@ var css = csjs`
   }
   .modalHeader {
     padding: 2px 16px;
-    background-color: ${styles.colors.backgroundBlue};
-    color: ${styles.colors.grey};
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     display: flex;
     justify-content: space-between;
   }
   .modalBody {
+    background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
     padding: 1.5em;
     line-height: 1.5em;
   }
@@ -32,15 +33,15 @@ var css = csjs`
     display: flex;
     justify-content: flex-end;
     padding: 10px 30px;
-    background-color: ${styles.colors.backgroundBlue};
-    color: ${styles.colors.white};
+    background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     text-align: right;
     font-weight: 700;
     cursor: pointer;
   }
   .modalContent {
     position: relative;
-    background-color: ${styles.colors.general_BackgroundColor};
+    background-color: ${styles.colors.black};
     margin: auto;
     padding: 0;
     line-height: 18px;
@@ -55,16 +56,16 @@ var css = csjs`
   }
   .modalFooterOk {
     cursor: pointer;
-    color: ${styles.colors.grey};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalFooterCancel {
     margin-left: 1em;
     cursor: pointer;
-    color: ${styles.colors.grey};
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
   }
   .modalClose {
     margin: auto 0;
-    color: #393939;
+    color: ${styles.remix.modalDialog_Header_Footer_Color};
     cursor: pointer;
   }
   @-webkit-keyframes animatetop {
diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js
index e390ba6e18..0c15d32077 100644
--- a/src/app/ui/renderer.js
+++ b/src/app/ui/renderer.js
@@ -4,6 +4,12 @@ var $ = require('jquery')
 var yo = require('yo-yo')
 var utils = require('../../lib/utils')
 
+// -------------- styling ----------------------
+// var csjs = require('csjs-inject')
+var remix = require('ethereum-remix')
+var styleGuide = remix.ui.styleGuide
+var styles = styleGuide()
+
 var css = yo`<style>
 .sol.success,
 .sol.error,
@@ -41,18 +47,21 @@ var css = yo`<style>
 }
 
 .sol.error {
-    background-color: hsla(0, 82%, 82%, 0.1);
-    border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+    background-color: ${styles.rightPanel.message_Error_BackgroundColor};
+    border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
+    color: ${styles.rightPanel.message_Error_Color};
 }
 
 .sol.warning {
-    background-color: hsla(59, 56%, 78%, 0.5);
-    border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */
+  background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Warning_BorderColor};
+  color: ${styles.rightPanel.message_Warning_Color};
 }
 
 .sol.success {
-    background-color: hsla(141, 58%, 95%, 1);
-    border: .2em dotted hsla(141, 40%, 48%, 1);
+  background-color: ${styles.rightPanel.message_Success_BackgroundColor};
+  border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
+  color: ${styles.rightPanel.message_Success_Color};
 }</style>`
 
 /**
diff --git a/src/universal-dapp.js b/src/universal-dapp.js
index 6b5f23554f..3195acccd7 100644
--- a/src/universal-dapp.js
+++ b/src/universal-dapp.js
@@ -31,11 +31,13 @@ var css = csjs`
     align-items: center;
   }
   .title {
-    ${styles.dropdown}
-    font-size: 11px;
-    width: 400px;
+    ${styles.rightPanel.runTab.dropdown_RunTab}
     display: flex;
     justify-content: space-between;
+    align-items: center;
+    font-size: 11px;
+    width: 75%;
+    min-width: 500px;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
@@ -46,7 +48,7 @@ var css = csjs`
     min-width: 230px;
   }
   .instance {
-    ${styles.displayBox}
+    ${styles.rightPanel.runTab.box_Instance}
     margin-bottom: 2px;
     padding: 10px 15px 6px 15px;
   }
@@ -67,10 +69,10 @@ var css = csjs`
   .copy  {
     cursor: pointer;
     margin-left: 3%;
-    color: ${styles.colors.black};
+    color: ${styles.rightPanel.runTab.icon_Color_Instance_CopyToClipboard};
   }
   .copy:hover{
-    color: ${styles.colors.lightOrange};
+    color: ${styles.rightPanel.runTab.icon_HoverColor_Instance_CopyToClipboard};
   }
   .buttonsContainer {
     margin-top: 2%;

From 34492241ee3183d22163e2a4cb57228983a9204a Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Wed, 4 Oct 2017 00:47:21 +0100
Subject: [PATCH 18/25] Replace the logo with ascii and subtext

---
 src/app/panels/editor-panel.js | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 6392dd3b9a..d59b36eb87 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -169,7 +169,6 @@ var css = csjs`
     height            : 100%;
     width             : 100%;
   }
-
   .contextviewcontainer{
     position          : absolute;
     z-index           : 100;
@@ -177,7 +176,6 @@ var css = csjs`
     top               : 10px;
     width             : 20em;
   }  
-  
   .banner             {
     width             : 25em;
   }
@@ -217,9 +215,26 @@ class EditorPanel {
             return self._api.context()
           }
         },
-        banner: yo`<div>
-          <img class=${css.banner} title="Remix" src="assets/img/remix_logo_512x512.svg" alt="Remix">
-        </div>`
+        banner: yo`
+        <div>
+          <div class=${css.banner} title="Remix" alt="Remix">
+
+            ########  ######## ##     ## #### ##     ##
+            ##     ## ##       ###   ###  ##   ##   ##
+            ##     ## ##       #### ####  ##    ## ##
+            ########  ######   ## ### ##  ##     ###
+            ##   ##   ##       ##     ##  ##    ## ##
+            ##    ##  ##       ##     ##  ##   ##   ##
+            ##     ## ######## ##     ## #### ##     ##
+
+
+            welcome to browser solidity
+
+            new features:
+            - dom terminal v0.0.1-alpha
+          </div>
+        </div>
+        `
       })
     }
     self._components.terminal.event.register('filterChanged', (type, value) => {

From 5cbe8ce24266037a87e1d016485a8b9410e4a23e Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 4 Oct 2017 17:43:10 +0200
Subject: [PATCH 19/25] standard

---
 src/app/files/file-explorer.js | 2 +-
 src/app/panels/file-panel.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js
index 42ff19ee9d..146886f192 100755
--- a/src/app/files/file-explorer.js
+++ b/src/app/files/file-explorer.js
@@ -253,7 +253,7 @@ function fileExplorer (appAPI, files) {
       var isFolder = label.className.indexOf('folder') !== -1
       var save = textUnderEdit !== label.innerText
       if (save) {
-        modalDialogCustom.confirm(null, `Do you want to rename?`, () => { rename() }, () => { cancelRename() })
+        modalDialogCustom.confirm(null, 'Do you want to rename?', () => { rename() }, () => { cancelRename() })
       }
       label.removeAttribute('contenteditable')
       label.classList.remove(css.rename)
diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js
index 8df4c41da2..83f2061b0c 100644
--- a/src/app/panels/file-panel.js
+++ b/src/app/panels/file-panel.js
@@ -340,7 +340,7 @@ function filepanel (appAPI, filesProvider) {
         }
       })
     }
-    modalDialogCustom.confirm(null, `Are you very sure you want to publish all your files anonymously as a public gist on github.com?`, () => {
+    modalDialogCustom.confirm(null, 'Are you very sure you want to publish all your files anonymously as a public gist on github.com?', () => {
       toGist()
     })
   }

From 892d860708ff465fb6924065905ae9827d6c56f7 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 4 Oct 2017 18:01:38 +0200
Subject: [PATCH 20/25] small fixes

---
 src/app/tabs/compile-tab.js | 14 +++++++-------
 src/app/ui/dropdown.js      |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js
index 5490295db1..708742b286 100644
--- a/src/app/tabs/compile-tab.js
+++ b/src/app/tabs/compile-tab.js
@@ -25,7 +25,7 @@ var css = csjs`
     margin: 3% 0;
   }
   .compileContainer  {
-    ${styles.rightPanel.compileTab.box_CompileContainer}
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     margin-bottom: 2%;
   }
   .autocompileContainer {
@@ -61,20 +61,20 @@ var css = csjs`
     display: flex;
   }
   .compileButton {
-    ${styles.rightPanel.compileTab.button_Compile}
+    ${styles.rightPanel.compileTab.button_Compile};
     width: 120px;
     min-width: 110px;
     margin-right: 1%;
     font-size: 12px;
   }
   .container {
-    ${styles.rightPanel.compileTab.box_CompileContainer}
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     margin: 0;
     display: flex;
     align-items: center;
   }
   .contractNames {
-    ${styles.rightPanel.compileTab.dropdown_CompileContract}
+    ${styles.rightPanel.compileTab.dropdown_CompileContract};
     margin-right: 5%;
   }
   .contractButtons {
@@ -84,15 +84,15 @@ var css = csjs`
     text-align: center;
   }
   .details {
-    ${styles.rightPanel.compileTab.button_Details}
+    ${styles.rightPanel.compileTab.button_Details};
   }
   .publish {
-    ${styles.rightPanel.compileTab.button_Publish}
+    ${styles.rightPanel.compileTab.button_Publish};
     margin-left: 2%;
     width: 120px;
   }
   .log {
-    ${styles.rightPanel.compileTab.box_CompileContainer}
+    ${styles.rightPanel.compileTab.box_CompileContainer};
     display: flex;
     flex-direction: column;
     margin-bottom: 5%;
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 6407bd3252..27622904f3 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -41,8 +41,8 @@ var css = csjs`
     top               : 24px;
     left              : 0;
     width             : 250px;
-    background-color  : ${styles.app_properties.dropdown_BackgroundColor};
-    border            : 1px solid ${styles.app_properties.dropdown_BorderColor};
+    background-color  : ${styles.appProperties.dropdown_BackgroundColor};
+    border            : 1px solid ${styles.appProperties.dropdown_BorderColor};
     border-radius     : 3px;
     border-top        : 0;
   }

From 34667610a3f21c53341382824556087265b89fb4 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 4 Oct 2017 18:09:01 +0200
Subject: [PATCH 21/25] readd remix icon

---
 src/app/panels/editor-panel.js | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index d59b36eb87..491d8668e3 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -215,26 +215,9 @@ class EditorPanel {
             return self._api.context()
           }
         },
-        banner: yo`
-        <div>
-          <div class=${css.banner} title="Remix" alt="Remix">
-
-            ########  ######## ##     ## #### ##     ##
-            ##     ## ##       ###   ###  ##   ##   ##
-            ##     ## ##       #### ####  ##    ## ##
-            ########  ######   ## ### ##  ##     ###
-            ##   ##   ##       ##     ##  ##    ## ##
-            ##    ##  ##       ##     ##  ##   ##   ##
-            ##     ## ######## ##     ## #### ##     ##
-
-
-            welcome to browser solidity
-
-            new features:
-            - dom terminal v0.0.1-alpha
-          </div>
-        </div>
-        `
+        banner: yo`<div>
+          <img class=${css.banner} title="Remix" src="assets/img/remix_logo_512x512.svg" alt="Remix">
+        </div>`
       })
     }
     self._components.terminal.event.register('filterChanged', (type, value) => {

From 14ffd954b885f6e8025b5de27b7fa644146d1fa8 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 5 Oct 2017 02:51:52 +0100
Subject: [PATCH 22/25] Update contextView

---
 src/app/editor/contextView.js  | 39 ++++++++++++++++++----------------
 src/app/editor/editor.js       |  3 +--
 src/app/panels/editor-panel.js | 12 +++++------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 1763a9e6b7..0df13e80dd 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -1,40 +1,43 @@
 'use strict'
 var yo = require('yo-yo')
+var csjs = require('csjs-inject')
 var remix = require('ethereum-remix')
 var styleGuide = remix.ui.styleGuide
-var SourceMappingDecoder = remix.util.SourceMappingDecoder
 var styles = styleGuide()
-var csjs = require('csjs-inject')
+var SourceMappingDecoder = remix.util.SourceMappingDecoder
 
 var css = csjs`
   .contextview            {
-      background-color  : ${styles.colors.backgroundBlue};
       opacity           : 0.8;
-      width             : 20em;
-      height            : 6em;
-      border-color      : transparent;
-      border-radius     : 3px;
-      border            : .3px solid hsla(0, 0%, 40%, .2);
     }
   .container              {
-    padding             : 1em;
+    padding             : 5px 15px;
+  }
+  .line                   {
+    display             : flex;
+    justify-content     : flex-end;
+    align-items         : center;
+    text-overflow       : ellipsis;
+    overflow            : hidden;
+    white-space         : nowrap;
+    color               : ${styles.editor.text_Primary};
+    font-size           : 11px;
   }
   .type                   {
     font-style        : italic;
-    text-overflow     : ellipsis;
-    width             : 18em;
-    overflow          : hidden;
-    white-space       : nowrap;
+    margin-right      : 5px;
   }
   .name                   {
     font-weight       : bold;
-    text-overflow     : ellipsis;
-    width             : 18em;
-    overflow          : hidden;
-    white-space       : nowrap;
+    margin-right      : 15px;
   }
   .jumpto                 {
     cursor            : pointer;
+    margin-right      : 5px;
+    color             : ${styles.editor.icon_Color_Editor};
+  }
+  jumpto:hover            {
+    color             : ${styles.editor.icon_HoverColor_Editor};
   }
   .referencesnb           {
     float             : right;
@@ -126,7 +129,7 @@ class ContextView {
       }
     }
 
-    return yo`<div>
+    return yo`<div class=${css.line}>
       <div title=${type} class=${css.type} >${type}</div>
       <div title=${node.attributes.name} class=${css.name} >${node.attributes.name}</div>
       <i title='Go to Definition' class="fa fa-share ${css.jumpto}" aria-hidden="true" onclick=${jumpTo}></i>
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index c5720d4bfa..31ffea1bcf 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -15,7 +15,6 @@ var styles = styleGuide()
 var css = csjs`
   .ace-editor {
     background-color  : ${styles.editor.backgroundColor_Editor};
-    border-top: 20px solid ${styles.editor.backgroundColor_Tabs_Highlights};
     width     : 100%;
   }
 `
@@ -47,7 +46,7 @@ document.head.appendChild(yo`
       position:absolute;
       z-index:20;
       background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
-     }    
+     }
   </style>
 `)
 
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 491d8668e3..9132df398b 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -170,12 +170,10 @@ var css = csjs`
     width             : 100%;
   }
   .contextviewcontainer{
-    position          : absolute;
-    z-index           : 100;
-    right             : 20px;
-    top               : 10px;
-    width             : 20em;
-  }  
+    width             : 100%;
+    height            : 30px;
+    background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
+  }
   .banner             {
     width             : 25em;
   }
@@ -279,7 +277,7 @@ class EditorPanel {
       <div class=${css.content}>
         <div class=${css.contextviewcontainer}>
           ${self._api.contextview.render()}
-        </div>      
+        </div>
         ${self._view.editor}
         ${self._view.terminal}
       </div>

From 0732f5e4c10c578d55e6313782866ae2e9e23602 Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 5 Oct 2017 03:09:10 +0100
Subject: [PATCH 23/25] Update Terminal Logo

---
 src/app/panels/editor-panel.js |  8 +-------
 src/app/panels/terminal.js     | 21 +++++++++++++--------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 9132df398b..2385845ef7 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -174,9 +174,6 @@ var css = csjs`
     height            : 30px;
     background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
   }
-  .banner             {
-    width             : 25em;
-  }
 `
 
 class EditorPanel {
@@ -212,10 +209,7 @@ class EditorPanel {
           context () {
             return self._api.context()
           }
-        },
-        banner: yo`<div>
-          <img class=${css.banner} title="Remix" src="assets/img/remix_logo_512x512.svg" alt="Remix">
-        </div>`
+        }
       })
     }
     self._components.terminal.event.register('filterChanged', (type, value) => {
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 0c20fc6502..43be29ea4a 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -74,6 +74,19 @@ var css = csjs`
     overflow-y        : auto;
     font-family       : monospace;
   }
+  .terminal::after {
+    content           : "";
+    background-image  : url(assets/img/remix_logo_512x512.svg);
+    opacity           : 0.1;
+    top               : 15%;
+    left              : 33%;
+    bottom            : 0;
+    right             : 0;
+    position          : absolute;
+    z-index           : -1;
+    background-repeat : no-repeat;
+    background-size   : 45%;
+  }
   .journal            {
     margin-top        : auto;
     font-family       : monospace;
@@ -142,7 +155,6 @@ class Terminal {
     self.data = {
       lineLength: opts.lineLength || 80,
       session: [],
-      banner: opts.banner,
       activeFilters: { commands: {}, input: '' }
     }
     self._view = { el: null, bar: null, input: null, term: null, journal: null, cli: null }
@@ -177,9 +189,6 @@ class Terminal {
     self._INDEX.allMain = []
     self._INDEX.commands = {}
     self._INDEX.commandsMain = {}
-    self.registerCommand('banner', function (args, scopedCommands, append) {
-      append(args[0])
-    }, { activate: true })
     self.registerCommand('log', self._blocksRenderer('log'), { activate: true })
     self.registerCommand('info', self._blocksRenderer('info'), { activate: true })
     self.registerCommand('error', self._blocksRenderer('error'), { activate: true })
@@ -243,10 +252,6 @@ class Terminal {
         ${self._view.term}
       </div>
     `
-    if (self.data.banner) {
-      self.data.activeFilters.commands['banner'] = true
-      self.commands.banner(self.data.banner)
-    }
 
     function throttle (fn, wait) {
       var time = Date.now()

From 907649d92554670682cb9248609296c3babbe62f Mon Sep 17 00:00:00 2001
From: ninabreznik <ninabreznik@gmail.com>
Date: Thu, 5 Oct 2017 22:41:22 +0100
Subject: [PATCH 24/25] Update editor.js and context viewer

---
 src/app/editor/contextView.js  | 2 +-
 src/app/editor/editor.js       | 6 +++---
 src/app/panels/editor-panel.js | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/editor/contextView.js b/src/app/editor/contextView.js
index 0df13e80dd..39bfc39ffc 100644
--- a/src/app/editor/contextView.js
+++ b/src/app/editor/contextView.js
@@ -11,7 +11,7 @@ var css = csjs`
       opacity           : 0.8;
     }
   .container              {
-    padding             : 5px 15px;
+    padding             : 1px 15px;
   }
   .line                   {
     display             : flex;
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index 31ffea1bcf..cd352da540 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -31,21 +31,21 @@ document.head.appendChild(yo`
     .highlightreference {
       position:absolute;
       z-index:20;
-      background-color: lightgrey;
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights};
       opacity: 0.7
     }
 
     .highlightreferenceline {
       position:absolute;
       z-index:20;
-      background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Highlights};
       opacity: 0.7
     }
 
     .highlightcode {
       position:absolute;
       z-index:20;
-      background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
+      background-color: ${styles.editor.backgroundColor_Editor_Context_Error_Highlights};
      }
   </style>
 `)
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index 2385845ef7..51240689b8 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -171,7 +171,7 @@ var css = csjs`
   }
   .contextviewcontainer{
     width             : 100%;
-    height            : 30px;
+    height            : 20px;
     background-color  : ${styles.editor.backgroundColor_Tabs_Highlights};
   }
 `

From 23343f171792de921f02e19103f31a63e8909cc1 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Fri, 6 Oct 2017 16:13:11 +0200
Subject: [PATCH 25/25] fix IE comp

---
 src/app/tabs/tabbed-menu.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/tabs/tabbed-menu.js b/src/app/tabs/tabbed-menu.js
index 15ec283b92..ce7fc698d8 100644
--- a/src/app/tabs/tabbed-menu.js
+++ b/src/app/tabs/tabbed-menu.js
@@ -38,9 +38,10 @@ function tabbedMenu (container, appAPI, events, opts) {
     if (!match) return
     var cls = match[0]
     if (!el.classList.contains(css.active)) {
-      el.parentNode.querySelectorAll('li').forEach(function (x) {
-        x.classList.remove(css.active)
-      })
+      var nodes = el.parentNode.querySelectorAll('li')
+      for (var i = 0; i < nodes.length; ++i) {
+        nodes[i].classList.remove(css.active)
+      }
       $('#optionViews').attr('class', '').addClass(cls)
       el.classList.add(css.active)
     }