diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css index ee9daa71bd..efc0f08888 100644 --- a/assets/css/browser-solidity.css +++ b/assets/css/browser-solidity.css @@ -1,14 +1,14 @@ #files .file { padding: 0 0.6em; box-sizing: border-box; - background-color: #F4F6FF; + 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: #999; + color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */ } #files .file.active { @@ -24,7 +24,7 @@ height: 1.25em; width: 1.25em; line-height: 1em; - color: #FF8080; + color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */ display: none; margin: 0.4em; text-align: center; @@ -64,7 +64,7 @@ } #righthand-panel #menu { - border-bottom: 3px solid #F4F6FF; + border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/ height: 2em; font-size: 1em; padding-top: 0.5em; @@ -81,7 +81,7 @@ } #righthand-panel #options li.active { - background-color: #F4F6FF; + background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/; } #righthand-panel #options li a { @@ -89,7 +89,7 @@ } #righthand-panel #optionViews { - background-color: #F4F6FF; + background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/; overflow: scroll; height: 100%; } @@ -139,13 +139,13 @@ max-width: 13em; padding: 0.3em; box-sizing: border-box; - border: 1px solid rgba(0, 0, 0, 0.3); + 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: rgba(255, 255, 255, 0.5); + background-color: hsl(0, 0%, 100%); /* white in style-guide.js */ border-radius: 3px; display: inline-block; padding: 0 0.6em; @@ -162,7 +162,7 @@ } #settingsView button { - background-color: #C6CFF7; + background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/ font-size: 12px; padding: 0.25em; margin: 3em 1em .5em 0; @@ -174,7 +174,7 @@ } #debugView button { - background-color: #C6CFF7; + background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/ font-size: 12px; padding: 0.25em; margin-bottom: .5em; @@ -209,7 +209,7 @@ #output .udapp { border: 0 none; box-shadow: none; - border-bottom: 3px solid #F4F6FF; + border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/; } .crow { @@ -224,7 +224,7 @@ .crow #txorigin { margin-left: 0.5em; text-decoration: none; - background-color: #C6CFF7; + background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/ cursor: pointer; font-size: 12px; color: black; @@ -273,20 +273,20 @@ .sol.warning .close { font-weight: bold; position: absolute; - color: rgba(0, 0, 0, 0.5); + color: hsl(0, 0%, 0%); /* black in style-guide.js */ top: 0; right: 0; padding: 0.5em; } .sol.error { - background-color: hsla(0, 100%, 75%, 0.1); - border: .2em dotted #FF8080; + 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 #ffbd01; + border: .2em dotted hsla(44, 100%, 50%, 1); /* orange in style-guide.js */ } .sol.success { @@ -296,7 +296,7 @@ #ghostbar { width: 1px; - background-color: red; + background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */ opacity: 0.5; position: absolute; cursor: col-resize; @@ -319,18 +319,18 @@ input[type="file"] { .highlightcode { position:absolute; z-index:20; - background-color:#F77E79; + background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */ } .highlightcode_fullLine { position:absolute; z-index:20; - background-color:#F4B9B7; + background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ ; opacity: 0.5; } .ace_gutter-cell.ace_breakpoint{ - background-color: #F77E79; + background-color: hsla(0, 82%, 82%, 1); // red in style-guide.js } /* The Modal (background) */ @@ -343,8 +343,8 @@ input[type="file"] { width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + background-color: hsla(0, 0%, 0%, 1); /* Fallback color */ + background-color: hsla(0, 0%, 0%, .4); /* Black w/ opacity */ } /* Modal Header */ @@ -374,7 +374,7 @@ input[type="file"] { /* Modal Content */ .modal-content { position: relative; - background-color: #fefefe; + background-color: hsl(0, 0%, 100%); /* white in style-guide.js */ margin: auto; padding: 0; border-top-right-radius: 3px; diff --git a/assets/css/universal-dapp.css b/assets/css/universal-dapp.css index b38ce4b1a8..ef363cff4a 100644 --- a/assets/css/universal-dapp.css +++ b/assets/css/universal-dapp.css @@ -151,22 +151,15 @@ } .udapp .atAddress { - background-color: #B1EAC5; - border-color: #B1EAC5; - margin-right: 1em; - border-radius: 3px; -} - -.udapp .publishContract { - background-color: #EC96EC; - border-color: #EC96EC; + background-color: hsla(141, 58%, 95%, .5); + border-color: hsla(141, 58%, 95%, .5); margin-right: 1em; border-radius: 3px; } .udapp button { padding: .36em; - color: #4C4B4B; + color: hsla(0, 0%, 40%, 1); cursor: pointer; overflow: hidden; text-overflow: ellipsis; @@ -206,25 +199,25 @@ } #runTabView .contractProperty .call { - background-color: #FFB9B9; - border-color: #FFB9B9; + background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ + border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ } #runTabView .contractProperty .debug { - background-color: #9DC1F5; - border-color: #9DC1F5; + background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */ + border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */ } #runTabView .contractProperty.constant .call { - background-color: #9DC1F5; - border-color: #9DC1F5; + background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */ + border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */ width: 25%; outline: none; } #runTabView .contractProperty.payable .call { - background-color: #FF8B8B; - border-color: #FF8B8B; + background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ + border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ width: 25%; } diff --git a/src/app.js b/src/app.js index 3e6ef7cd97..12a2cd4f89 100644 --- a/src/app.js +++ b/src/app.js @@ -36,6 +36,9 @@ var TxLogger = require('./app/execution/txLogger') var EventsDecoder = require('./app/execution/eventsDecoder') var Web3VMProvider = remix.web3.web3VMProvider +var styleGuide = require('./style-guide') +var styles = styleGuide() + var css = csjs` html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @@ -43,7 +46,7 @@ var css = csjs` margin : 0; padding : 0; font-size : 12px; - color : #111111; + color : ${styles.colors.black}; font-weight : normal; } .browsersolidity { diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js index 02664f30ee..37dc865e2c 100755 --- a/src/app/files/file-explorer.js +++ b/src/app/files/file-explorer.js @@ -7,6 +7,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom') var EventManager = require('ethereum-remix').lib.EventManager +var styleGuide = require('../../style-guide') +var styles = styleGuide() + var css = csjs` .fileexplorer { box-sizing : border-box; @@ -16,10 +19,10 @@ var css = csjs` font-size : 14px; } .hasFocus { - background-color : #F4F6FF; + background-color : ${styles.colors.backgroundBlue}; } .rename { - background-color : white; + background-color : ${styles.colors.white}; } .remove { margin-left : auto; @@ -171,7 +174,7 @@ function fileExplorer (appAPI, files) { this.style.paddingRight = '19px' return this.removeChild(deleteButton) } - this.style.backgroundColor = '#F4F6FF' + this.style.backgroundColor = styles.colors.backgroundBlue this.style.paddingRight = '0px' this.appendChild(deleteButton) } diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index a8bf6f5fdf..3f202fdf9c 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -1,6 +1,8 @@ var csjs = require('csjs-inject') var yo = require('yo-yo') var EventManager = require('ethereum-remix').lib.EventManager +var styleGuide = require('../../style-guide') +var styles = styleGuide() var Terminal = require('./terminal') @@ -24,7 +26,7 @@ var css = csjs` overflow : hidden; } .files { - position : relative; + position : relative; list-style : none; margin : 0; font-size : 15px; @@ -41,13 +43,13 @@ var css = csjs` .changeeditorfontsize i { cursor : pointer; display : block; - color : #111111; + color : ${styles.colors.black}; } .changeeditorfontsize i { cursor : pointer; } .changeeditorfontsize i:hover { - color : orange; + color : ${styles.colors.orange}; } .buttons { display : flex; @@ -61,13 +63,13 @@ var css = csjs` padding : 10px; width : 100%; font-weight : bold; - color : black; + color : ${styles.colors.black}; } .toggleLHP i { cursor : pointer; } .toggleLHP i:hover { - color : orange; + color : ${styles.colors.orange}; } .scroller { position : absolute; @@ -76,7 +78,7 @@ var css = csjs` cursor : pointer; padding : 0 0.9em; vertical-align : middle; - background-color : rgba(255, 255, 255, 0.8); + background-color : ${styles.colors.white}; height : 100%; font-size : 1.3em; } @@ -94,14 +96,14 @@ var css = csjs` margin-top : 0.5em; padding : 0.6em; font-weight : bold; - color : black; + color : ${styles.colors.black}; right : 0; } .toggleRHP i { cursor : pointer; } .toggleRHP i:hover { - color : orange; + color : ${styles.colors.orange}; } .show { opacity : 1; diff --git a/src/app/panels/file-panel.js b/src/app/panels/file-panel.js index ba0d7f26ed..c197379f6c 100644 --- a/src/app/panels/file-panel.js +++ b/src/app/panels/file-panel.js @@ -10,6 +10,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom') var QueryParams = require('../../lib/query-params') var queryParams = new QueryParams() +var styleGuide = require('../../style-guide') +var styles = styleGuide() + module.exports = filepanel var css = csjs` @@ -37,7 +40,7 @@ var css = csjs` cursor : pointer; } .newFile i:hover { - color : orange; + color : ${styles.colors.orange}; } .gist { padding : 10px; @@ -64,19 +67,19 @@ var css = csjs` cursor : pointer; } .connectToLocalhost i:hover { - color : orange; + color : ${styles.colors.orange}; } .uploadFile { padding : 10px; } .uploadFile label:hover { - color : orange; + color : ${styles.colors.orange}; } .uploadFile label { cursor : pointer; } .treeview { - background-color : white; + background-color : ${styles.colors.white}; } .dragbar { position : absolute; @@ -90,7 +93,7 @@ var css = csjs` } .ghostbar { width : 3px; - background-color : #C6CFF7; + background-color : ${styles.colors.lightBlue}; opacity : 0.5; position : absolute; cursor : col-resize; @@ -160,17 +163,17 @@ function filepanel (appAPI, filesProvider) { var containerFileSystem = element.querySelector('.filesystemexplorer') var websocketconn = element.querySelector('.websocketconn') filesProvider['localhost'].remixd.event.register('connecting', (event) => { - websocketconn.style.color = 'orange' + websocketconn.style.color = styles.colors.yellow websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event)) }) filesProvider['localhost'].remixd.event.register('connected', (event) => { - websocketconn.style.color = 'green' + websocketconn.style.color = styles.colors.green websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event)) }) filesProvider['localhost'].remixd.event.register('errored', (event) => { - websocketconn.style.color = 'red' + websocketconn.style.color = styles.colors.red websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event)) if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { containerFileSystem.removeChild(fileSystemExplorer.element) @@ -178,7 +181,7 @@ function filepanel (appAPI, filesProvider) { }) filesProvider['localhost'].remixd.event.register('closed', (event) => { - websocketconn.style.color = '#111111' + websocketconn.style.color = styles.colors.black websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event)) if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { containerFileSystem.removeChild(fileSystemExplorer.element) diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js index 2e2b5e594b..a52b3fc0cc 100644 --- a/src/app/panels/righthand-panel.js +++ b/src/app/panels/righthand-panel.js @@ -35,7 +35,7 @@ var css = csjs` } .ghostbar { width : 3px; - background-color : #C6CFF7; + background-color : ${styles.colors.lightBlue}; opacity : 0.5; position : absolute; cursor : col-resize; diff --git a/src/app/staticanalysis/staticAnalysisView.js b/src/app/staticanalysis/staticAnalysisView.js index d063f3d98d..4e2c23bbd2 100644 --- a/src/app/staticanalysis/staticAnalysisView.js +++ b/src/app/staticanalysis/staticAnalysisView.js @@ -116,7 +116,7 @@ staticAnalysisView.prototype.run = function () { $('#righthand-panel #menu .staticanalysisView').css('color', '') warningContainer.html('No warning to report') } else { - $('#righthand-panel #menu .staticanalysisView').css('color', '#FF8B8B') + $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red) } }) } else { diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index 95a6d308df..fbbb853c53 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -42,7 +42,7 @@ var css = csjs` line-height: initial; } .warnCompilationSlow { - color: orange; + color: ${styles.colors.orange}; margin-left: 1%; } .compileButtons { @@ -163,7 +163,7 @@ function compileTab (container, appAPI, appEvents, opts) { if (speed > 1000) { warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) warnCompilationSlow.style.display = 'inline-block' - settingsView.style.color = '#FF8B8B' + settingsView.style.color = styles.colors.red } else { warnCompilationSlow.style.display = 'none' settingsView.style.color = '' @@ -222,7 +222,7 @@ function compileTab (container, appAPI, appEvents, opts) { if (success) { document.querySelector('#righthand-panel #menu .compileView').style.color = '' } else { - document.querySelector('#righthand-panel #menu .compileView').style.color = '#FF8B8B' + document.querySelector('#righthand-panel #menu .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 f46fdf5245..79216fa27e 100644 --- a/src/app/tabs/run-tab.js +++ b/src/app/tabs/run-tab.js @@ -47,20 +47,20 @@ var css = csjs` min-width: 150px; } .copyaddress { - color: #C6CFF7; + color: ${styles.colors.blue}; margin-left: 0.5em; margin-top: 0.7em; cursor: pointer; - opacity: .7; } .copyaddress:hover { - opacity: 1; + color: ${styles.colors.grey}; } .instanceContainer extends ${styles.displayBox} { display: flex; flex-direction: column; - background-color: ${styles.colors.lightBlue}; + background-color: ${styles.colors.transparent}; margin-top: 2%; + border: none; } .container extends ${styles.displayBox} { margin-top: 2%; @@ -77,16 +77,20 @@ var css = csjs` } .button { display: flex; - align-items: flex-end; + align-items: center; margin-top: 2%; } .atAddress extends ${styles.button} { border-top-right-radius: 0; border-bottom-right-radius: 0; + background-color: ${styles.colors.lightGreen}; + border-color: ${styles.colors.lightGreen}; } .create extends ${styles.button} { border-top-right-radius: 0; border-bottom-right-radius: 0; + background-color: ${styles.colors.lightRed}; + border-color: ${styles.colors.lightRed}; } .input extends ${styles.inputField} { border-top-left-radius: 0; @@ -120,7 +124,7 @@ var css = csjs` margin-right: .3em; } .call { - color: #9DC1F5; + color: ${styles.colors.lightBlue}; margin-right: .3em; } .pending { diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js index 3eb2c88ea7..c9ec3600fe 100644 --- a/src/app/tabs/support-tab.js +++ b/src/app/tabs/support-tab.js @@ -19,38 +19,35 @@ var css = csjs` flex-direction: column; align-items: center; height: 85%; + padding: 0; } .chatTitle { - cursor: pointer; height: 40px; width: 90%; display: flex; align-items: center; justify-content: center; - border-radius: 3px; - background-color: white; - border: 2px dotted ${styles.colors.lightGrey}; + margin-top: 15px; } .chatTitle:hover { - background-color: ${styles.colors.lightYellow}; + cursor: pointer; } .icon { height: 70%; margin-right: 2%; } .chatTitleText { - font-size: 13px; + font-size: 17px; font-weight: bold; } .chatTitleText { opacity: 0.8; } - .chatIframe { + .chatIframe extends ${styles.displayBox} { width: 100%; height: 100%; - border: 2px dotted ${styles.colors.lightGrey}; - overflow: hidden; transform: scale(0.9); + padding: 0; } .infoBox extends ${styles.infoTextBox}{ diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 56d680e19b..b755e32cba 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -1,5 +1,7 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') +var styleGuide = require('../../style-guide') +var styles = styleGuide() var css = csjs` .modal { @@ -11,13 +13,13 @@ var css = csjs` width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ - background-color: rgb(0,0,0); /* Fallback color */ - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + background-color: ${styles.colors.black}; /* Fallback color */ + background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */ } .modalHeader { padding: 2px 16px; - background-color: orange; - color: white; + background-color: ${styles.colors.orange}; + color: ${styles.colors.white}; } .modalBody { padding: 1.5em; @@ -25,20 +27,20 @@ var css = csjs` } .modalFooter { padding: 10px 30px; - background-color: orange; - color: white; + background-color: ${styles.colors.orange}; + color: ${styles.colors.white}; text-align: right; font-weight: 700; cursor: pointer; } .modalContent { position: relative; - background-color: #fefefe; + background-color: ${styles.colors.white}; margin: auto; padding: 0; line-height: 18px; font-size: 12px; - border: 1px solid #888; + border: 1px solid ${styles.colors.grey}; width: 50%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; diff --git a/src/style-guide.js b/src/style-guide.js index 574367bdf5..03864e1784 100644 --- a/src/style-guide.js +++ b/src/style-guide.js @@ -7,22 +7,33 @@ function styleGuide () { COLORS -------------------------------------------------------------------------- */ var colors = { + // BASIC COLORS (B&W and transparent) transparent: 'transparent', - white: '#fff', - black: '#000', - blue: '#C6CFF7', - lightBlue: '#F4F6FF', - greyBlue: '#999999', - grey: '#666', - lightGrey: '#dddddd', - red: '#FF8080', - lightRed: '#FFB9B9', - green: 'hsla(141, 58%, 81%, 1)', - lightGreen: 'hsla(141, 58%, 95%, 1)', - violet: '#C6CFF7', - pink: '#EC96EC', - yellow: '#ffbd01', - lightYellow: 'hsla(59, 56%, 78%, 0.5)' + white: 'hsl(0, 0%, 100%)', + black: 'hsl(0, 0%, 0%)', + opacityBlack: 'hsla(0, 0%, 0%, .4)', + // BLUE + blue: 'hsla(229, 75%, 87%, 1)', + lightBlue: 'hsla(229, 75%, 87%, .5)', + backgroundBlue: 'hsla(229, 100%, 97%, 1)', + // GREY + grey: 'hsla(0, 0%, 40%, 1)', + lightGrey: 'hsla(0, 0%, 40%, .5)', + veryLightGrey: 'hsla(0, 0%, 40%, .2)', + // RED + red: 'hsla(0, 82%, 82%, 1)', + lightRed: 'hsla(0, 82%, 82%, .5)', + // GREEN + green: 'hsla(141, 75%, 84%, 1)', + lightGreen: 'hsla(141, 75%, 84%, .5)', + // PINK + pink: 'hsla(300, 69%, 76%, 1)', + lightPink: 'hsla(300, 69%, 76%, .5)', + // YELLOW + orange: 'hsla(44, 100%, 50%, 1)', + lightOrange: 'hsla(44, 100%, 50%, .5)', + // VIOLET + violet: 'hsla(240, 64%, 68%, 1)' } /* -------------------------------------------------------------------------- @@ -64,14 +75,14 @@ function styleGuide () { line-height : 20px; background : ${colors.white}; border-radius : 3px; - border : 1px solid ${colors.lightGrey}; + border : 1px solid ${colors.veryLightGrey}; overflow : hidden; word-break : break-word; width : 100%; } .info-text-box { - background-color : white; + background-color : ${colors.white}; line-height : 20px; border : .2em dotted ${colors.lightGrey}; padding : 8px 15px; @@ -82,18 +93,18 @@ function styleGuide () { } .warning-text-box { - background-color : hsla(59, 56%, 78%, 0.5); // light yellow + background-color : ${colors.lightOrange}; line-height : 20px; padding : 8px 15px; border-radius : 5px; - border : .2em dotted ${colors.yellow}; // orange-yellow + border : .2em dotted ${colors.orange}; margin-bottom : 1em; overflow : hidden; word-break : break-word; } .error-text-box { - background-color : ${colors.lightRed}; // light-red + background-color : ${colors.lightRed}; line-height : 20px; padding : 1em 1em .5em 1em; border-radius : 3px; @@ -117,8 +128,7 @@ function styleGuide () { word-break : normal; } .input { - border : 1px solid ${colors.lightGrey}; // light-grey - margin : .3em; + border : 1px solid ${colors.veryLightGrey}; height : 25px; width : 250px; font-size : 12px; @@ -138,7 +148,7 @@ function styleGuide () { justify-content : center; border-color : transparent; border-radius : 3px; - border : .3px solid ${colors.lightGrey}; + border : .3px solid ${colors.veryLightGrey}; cursor : pointer; min-height : 25px; max-height : 25px; @@ -161,7 +171,7 @@ function styleGuide () { text-decoration : none; background-color : ${colors.white}; cursor : pointer; - border : 1px solid ${colors.lightGrey}; + border : 1px solid ${colors.veryLightGrey}; border-radius : 3px; height : 25px; width : 250px; diff --git a/src/universal-dapp.js b/src/universal-dapp.js index 3264989fae..e7376d9c7c 100644 --- a/src/universal-dapp.js +++ b/src/universal-dapp.js @@ -68,11 +68,10 @@ var css = csjs` cursor: pointer; opacity: 0.8; margin-left: 3%; - color: ${styles.colors.black}; - opacity: .5; + color: ${styles.colors.blue}; } .copy:hover{ - opacity: 1; + color: ${styles.colors.grey}; } .buttonsContainer { margin-top: 2%;