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}
`
- self._view.icon = yo``
+ self._view.icon = yo``
self._view.dragbar = yo``
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%;