Update theme-draft.js & refactoring styling

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};
+    color: ${styles.colors.black};
-    border: 1px dashed ${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

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

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;

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;
+    ${styles.inputField}
-    width             : 20em;    
+    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`

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};
+    color: ${styles.colors.black};
-    opacity: .3;
   }
-  .copyDetails:hover {
+  .copyDetails:hover,
-    opacity: 1;
+  .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};

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

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}

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;
+    align-items       : end;
-    max-width         : 30ch;
+    top               : 24px;
-    top               : 21px;
+    left              : 0;
-    left              : 10px;
+    width             : 250px;
     background-color  : white;
-    border            : 1px solid black;
+    border            : 1px solid ${styles.colors.veryLightGrey};
+    border-radius     : 3px;
+    border-top        : 0;
   }
   .option {
     margin: 0;

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
-
-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`
+- 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;
 
-- 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
+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:
-- 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
 
 
 */

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