mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Colors

Browse Source
pull/1/head
ninabreznik 8 years ago committed by yann300
parent 334fc5a0d4
commit ab46fe8c5d
14 changed files with 133 additions and 117 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 46
      assets/css/browser-solidity.css
  2. 29
      assets/css/universal-dapp.css
  3. 5
      src/app.js
  4. 9
      src/app/files/file-explorer.js
  5. 18
      src/app/panels/editor-panel.js
  6. 21
      src/app/panels/file-panel.js
  7. 2
      src/app/panels/righthand-panel.js
  8. 2
      src/app/staticanalysis/staticAnalysisView.js
  9. 6
      src/app/tabs/compile-tab.js
  10. 16
      src/app/tabs/run-tab.js
  11. 15
      src/app/tabs/support-tab.js
  12. 18
      src/app/ui/modaldialog.js
  13. 58
      src/style-guide.js
  14. 5
      src/universal-dapp.js

46
assets/css/browser-solidity.css
Unescape View File

@ -1,14 +1,14 @@
#files .file { #files .file {
padding: 0 0.6em; padding: 0 0.6em;
box-sizing: border-box; box-sizing: border-box;
background-color: #F4F6FF; background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js */
cursor: pointer; cursor: pointer;
border-right: 0.5em solid white; border-right: 0.5em solid white;
position: relative; position: relative;
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: #999; color: hsla(0, 0%, 40%, 1); /* grey in style-guide.js */
} }
#files .file.active { #files .file.active {
@ -24,7 +24,7 @@
height: 1.25em; height: 1.25em;
width: 1.25em; width: 1.25em;
line-height: 1em; line-height: 1em;
color: #FF8080; color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
display: none; display: none;
margin: 0.4em; margin: 0.4em;
text-align: center; text-align: center;
@ -64,7 +64,7 @@
} }
#righthand-panel #menu { #righthand-panel #menu {
border-bottom: 3px solid #F4F6FF; border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/
height: 2em; height: 2em;
font-size: 1em; font-size: 1em;
padding-top: 0.5em; padding-top: 0.5em;
@ -81,7 +81,7 @@
} }
#righthand-panel #options li.active { #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 { #righthand-panel #options li a {
@ -89,7 +89,7 @@
} }
#righthand-panel #optionViews { #righthand-panel #optionViews {
background-color: #F4F6FF; background-color: hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
} }
@ -139,13 +139,13 @@
max-width: 13em; max-width: 13em;
padding: 0.3em; padding: 0.3em;
box-sizing: border-box; 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; border-radius: 3px;
} }
#righthand-panel #optionViews .pre { #righthand-panel #optionViews .pre {
word-wrap: break-word; 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; border-radius: 3px;
display: inline-block; display: inline-block;
padding: 0 0.6em; padding: 0 0.6em;
@ -162,7 +162,7 @@
} }
#settingsView button { #settingsView button {
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
font-size: 12px; font-size: 12px;
padding: 0.25em; padding: 0.25em;
margin: 3em 1em .5em 0; margin: 3em 1em .5em 0;
@ -174,7 +174,7 @@
} }
#debugView button { #debugView button {
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
font-size: 12px; font-size: 12px;
padding: 0.25em; padding: 0.25em;
margin-bottom: .5em; margin-bottom: .5em;
@ -209,7 +209,7 @@
#output .udapp { #output .udapp {
border: 0 none; border: 0 none;
box-shadow: none; box-shadow: none;
border-bottom: 3px solid #F4F6FF; border-bottom: 3px solid hsla(229, 100%, 97%, 1); /* backgroundBlue in style-guide.js*/;
} }
.crow { .crow {
@ -224,7 +224,7 @@
.crow #txorigin { .crow #txorigin {
margin-left: 0.5em; margin-left: 0.5em;
text-decoration: none; text-decoration: none;
background-color: #C6CFF7; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js*/
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: black; color: black;
@ -273,20 +273,20 @@
.sol.warning .close { .sol.warning .close {
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
color: rgba(0, 0, 0, 0.5); color: hsl(0, 0%, 0%); /* black in style-guide.js */
top: 0; top: 0;
right: 0; right: 0;
padding: 0.5em; padding: 0.5em;
} }
.sol.error { .sol.error {
background-color: hsla(0, 100%, 75%, 0.1); background-color: hsla(0, 82%, 82%, 0.1);
border: .2em dotted #FF8080; border: .2em dotted hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
.sol.warning { .sol.warning {
background-color: hsla(59, 56%, 78%, 0.5); 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 { .sol.success {
@ -296,7 +296,7 @@
#ghostbar { #ghostbar {
width: 1px; width: 1px;
background-color: red; background-color: hsla(0, 82%, 82%, 1); /* orange in style-guide.js */
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
@ -319,18 +319,18 @@ input[type="file"] {
.highlightcode { .highlightcode {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color:#F77E79; background-color:hsla(0, 82%, 82%, 1); /* red in style-guide.js */
} }
.highlightcode_fullLine { .highlightcode_fullLine {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color:#F4B9B7; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */ ;
opacity: 0.5; opacity: 0.5;
} }
.ace_gutter-cell.ace_breakpoint{ .ace_gutter-cell.ace_breakpoint{
background-color: #F77E79; background-color: hsla(0, 82%, 82%, 1); // red in style-guide.js
} }
/* The Modal (background) */ /* The Modal (background) */
@ -343,8 +343,8 @@ input[type="file"] {
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: hsla(0, 0%, 0%, 1); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: hsla(0, 0%, 0%, .4); /* Black w/ opacity */
} }
/* Modal Header */ /* Modal Header */
@ -374,7 +374,7 @@ input[type="file"] {
/* Modal Content */ /* Modal Content */
.modal-content { .modal-content {
position: relative; position: relative;
background-color: #fefefe; background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
margin: auto; margin: auto;
padding: 0; padding: 0;
border-top-right-radius: 3px; border-top-right-radius: 3px;

29
assets/css/universal-dapp.css
Unescape View File

@ -151,22 +151,15 @@
} }
.udapp .atAddress { .udapp .atAddress {
background-color: #B1EAC5; background-color: hsla(141, 58%, 95%, .5);
border-color: #B1EAC5; border-color: hsla(141, 58%, 95%, .5);
margin-right: 1em;
border-radius: 3px;
}
.udapp .publishContract {
background-color: #EC96EC;
border-color: #EC96EC;
margin-right: 1em; margin-right: 1em;
border-radius: 3px; border-radius: 3px;
} }
.udapp button { .udapp button {
padding: .36em; padding: .36em;
color: #4C4B4B; color: hsla(0, 0%, 40%, 1);
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -206,25 +199,25 @@
} }
#runTabView .contractProperty .call { #runTabView .contractProperty .call {
background-color: #FFB9B9; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: #FFB9B9; border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
} }
#runTabView .contractProperty .debug { #runTabView .contractProperty .debug {
background-color: #9DC1F5; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: #9DC1F5; border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
} }
#runTabView .contractProperty.constant .call { #runTabView .contractProperty.constant .call {
background-color: #9DC1F5; background-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
border-color: #9DC1F5; border-color: hsla(229, 75%, 87%, .5); /* lightBlue in style-guide.js */
width: 25%; width: 25%;
outline: none; outline: none;
} }
#runTabView .contractProperty.payable .call { #runTabView .contractProperty.payable .call {
background-color: #FF8B8B; background-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
border-color: #FF8B8B; border-color: hsla(0, 82%, 82%, .5); /* lightRed in style-guide.js */
width: 25%; width: 25%;
} }

5
src/app.js
Unescape View File

@ -36,6 +36,9 @@ var TxLogger = require('./app/execution/txLogger')
var EventsDecoder = require('./app/execution/eventsDecoder') var EventsDecoder = require('./app/execution/eventsDecoder')
var Web3VMProvider = remix.web3.web3VMProvider var Web3VMProvider = remix.web3.web3VMProvider
var styleGuide = require('./style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
html { box-sizing: border-box; } html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; } *, *:before, *:after { box-sizing: inherit; }
@ -43,7 +46,7 @@ var css = csjs`
margin : 0; margin : 0;
padding : 0; padding : 0;
font-size : 12px; font-size : 12px;
color : #111111; color : ${styles.colors.black};
font-weight : normal; font-weight : normal;
} }
.browsersolidity { .browsersolidity {

9
src/app/files/file-explorer.js
Unescape View File

@ -7,6 +7,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
.fileexplorer { .fileexplorer {
box-sizing : border-box; box-sizing : border-box;
@ -16,10 +19,10 @@ var css = csjs`
font-size : 14px; font-size : 14px;
} }
.hasFocus { .hasFocus {
background-color : #F4F6FF; background-color : ${styles.colors.backgroundBlue};
} }
.rename { .rename {
background-color : white; background-color : ${styles.colors.white};
} }
.remove { .remove {
margin-left : auto; margin-left : auto;
@ -171,7 +174,7 @@ function fileExplorer (appAPI, files) {
this.style.paddingRight = '19px' this.style.paddingRight = '19px'
return this.removeChild(deleteButton) return this.removeChild(deleteButton)
} }
this.style.backgroundColor = '#F4F6FF' this.style.backgroundColor = styles.colors.backgroundBlue
this.style.paddingRight = '0px' this.style.paddingRight = '0px'
this.appendChild(deleteButton) this.appendChild(deleteButton)
} }

18
src/app/panels/editor-panel.js
Unescape View File

@ -1,6 +1,8 @@
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var Terminal = require('./terminal') var Terminal = require('./terminal')
@ -24,7 +26,7 @@ var css = csjs`
overflow : hidden; overflow : hidden;
} }
.files { .files {
position : relative; position : relative;
list-style : none; list-style : none;
margin : 0; margin : 0;
font-size : 15px; font-size : 15px;
@ -41,13 +43,13 @@ var css = csjs`
.changeeditorfontsize i { .changeeditorfontsize i {
cursor : pointer; cursor : pointer;
display : block; display : block;
color : #111111; color : ${styles.colors.black};
} }
.changeeditorfontsize i { .changeeditorfontsize i {
cursor : pointer; cursor : pointer;
} }
.changeeditorfontsize i:hover { .changeeditorfontsize i:hover {
color : orange; color : ${styles.colors.orange};
} }
.buttons { .buttons {
display : flex; display : flex;
@ -61,13 +63,13 @@ var css = csjs`
padding : 10px; padding : 10px;
width : 100%; width : 100%;
font-weight : bold; font-weight : bold;
color : black; color : ${styles.colors.black};
} }
.toggleLHP i { .toggleLHP i {
cursor : pointer; cursor : pointer;
} }
.toggleLHP i:hover { .toggleLHP i:hover {
color : orange; color : ${styles.colors.orange};
} }
.scroller { .scroller {
position : absolute; position : absolute;
@ -76,7 +78,7 @@ var css = csjs`
cursor : pointer; cursor : pointer;
padding : 0 0.9em; padding : 0 0.9em;
vertical-align : middle; vertical-align : middle;
background-color : rgba(255, 255, 255, 0.8); background-color : ${styles.colors.white};
height : 100%; height : 100%;
font-size : 1.3em; font-size : 1.3em;
} }
@ -94,14 +96,14 @@ var css = csjs`
margin-top : 0.5em; margin-top : 0.5em;
padding : 0.6em; padding : 0.6em;
font-weight : bold; font-weight : bold;
color : black; color : ${styles.colors.black};
right : 0; right : 0;
} }
.toggleRHP i { .toggleRHP i {
cursor : pointer; cursor : pointer;
} }
.toggleRHP i:hover { .toggleRHP i:hover {
color : orange; color : ${styles.colors.orange};
} }
.show { .show {
opacity : 1; opacity : 1;

21
src/app/panels/file-panel.js
Unescape View File

@ -10,6 +10,9 @@ var modalDialogCustom = require('../ui/modal-dialog-custom')
var QueryParams = require('../../lib/query-params') var QueryParams = require('../../lib/query-params')
var queryParams = new QueryParams() var queryParams = new QueryParams()
var styleGuide = require('../../style-guide')
var styles = styleGuide()
module.exports = filepanel module.exports = filepanel
var css = csjs` var css = csjs`
@ -37,7 +40,7 @@ var css = csjs`
cursor : pointer; cursor : pointer;
} }
.newFile i:hover { .newFile i:hover {
color : orange; color : ${styles.colors.orange};
} }
.gist { .gist {
padding : 10px; padding : 10px;
@ -64,19 +67,19 @@ var css = csjs`
cursor : pointer; cursor : pointer;
} }
.connectToLocalhost i:hover { .connectToLocalhost i:hover {
color : orange; color : ${styles.colors.orange};
} }
.uploadFile { .uploadFile {
padding : 10px; padding : 10px;
} }
.uploadFile label:hover { .uploadFile label:hover {
color : orange; color : ${styles.colors.orange};
} }
.uploadFile label { .uploadFile label {
cursor : pointer; cursor : pointer;
} }
.treeview { .treeview {
background-color : white; background-color : ${styles.colors.white};
} }
.dragbar { .dragbar {
position : absolute; position : absolute;
@ -90,7 +93,7 @@ var css = csjs`
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
background-color : #C6CFF7; background-color : ${styles.colors.lightBlue};
opacity : 0.5; opacity : 0.5;
position : absolute; position : absolute;
cursor : col-resize; cursor : col-resize;
@ -160,17 +163,17 @@ function filepanel (appAPI, filesProvider) {
var containerFileSystem = element.querySelector('.filesystemexplorer') var containerFileSystem = element.querySelector('.filesystemexplorer')
var websocketconn = element.querySelector('.websocketconn') var websocketconn = element.querySelector('.websocketconn')
filesProvider['localhost'].remixd.event.register('connecting', (event) => { 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)) websocketconn.setAttribute('title', 'Connecting to localhost. ' + JSON.stringify(event))
}) })
filesProvider['localhost'].remixd.event.register('connected', (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)) websocketconn.setAttribute('title', 'Connected to localhost. ' + JSON.stringify(event))
}) })
filesProvider['localhost'].remixd.event.register('errored', (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)) websocketconn.setAttribute('title', 'localhost connection errored. ' + JSON.stringify(event))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element) containerFileSystem.removeChild(fileSystemExplorer.element)
@ -178,7 +181,7 @@ function filepanel (appAPI, filesProvider) {
}) })
filesProvider['localhost'].remixd.event.register('closed', (event) => { 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)) websocketconn.setAttribute('title', 'localhost connection closed. ' + JSON.stringify(event))
if (fileSystemExplorer.element && containerFileSystem.children.length > 0) { if (fileSystemExplorer.element && containerFileSystem.children.length > 0) {
containerFileSystem.removeChild(fileSystemExplorer.element) containerFileSystem.removeChild(fileSystemExplorer.element)

2
src/app/panels/righthand-panel.js
Unescape View File

@ -35,7 +35,7 @@ var css = csjs`
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
background-color : #C6CFF7; background-color : ${styles.colors.lightBlue};
opacity : 0.5; opacity : 0.5;
position : absolute; position : absolute;
cursor : col-resize; cursor : col-resize;

2
src/app/staticanalysis/staticAnalysisView.js
Unescape View File

@ -116,7 +116,7 @@ staticAnalysisView.prototype.run = function () {
$('#righthand-panel #menu .staticanalysisView').css('color', '') $('#righthand-panel #menu .staticanalysisView').css('color', '')
warningContainer.html('No warning to report') warningContainer.html('No warning to report')
} else { } else {
$('#righthand-panel #menu .staticanalysisView').css('color', '#FF8B8B') $('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
} }
}) })
} else { } else {

6
src/app/tabs/compile-tab.js
Unescape View File

@ -42,7 +42,7 @@ var css = csjs`
line-height: initial; line-height: initial;
} }
.warnCompilationSlow { .warnCompilationSlow {
color: orange; color: ${styles.colors.orange};
margin-left: 1%; margin-left: 1%;
} }
.compileButtons { .compileButtons {
@ -163,7 +163,7 @@ function compileTab (container, appAPI, appEvents, opts) {
if (speed > 1000) { if (speed > 1000) {
warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`) warnCompilationSlow.setAttribute('title', `Last compilation took ${speed}ms. We suggest to turn off autocompilation.`)
warnCompilationSlow.style.display = 'inline-block' warnCompilationSlow.style.display = 'inline-block'
settingsView.style.color = '#FF8B8B' settingsView.style.color = styles.colors.red
} else { } else {
warnCompilationSlow.style.display = 'none' warnCompilationSlow.style.display = 'none'
settingsView.style.color = '' settingsView.style.color = ''
@ -222,7 +222,7 @@ function compileTab (container, appAPI, appEvents, opts) {
if (success) { if (success) {
document.querySelector('#righthand-panel #menu .compileView').style.color = '' document.querySelector('#righthand-panel #menu .compileView').style.color = ''
} else { } 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 // display warning error if any
var errorContainer = container.querySelector('.error') var errorContainer = container.querySelector('.error')

16
src/app/tabs/run-tab.js
Unescape View File

@ -47,20 +47,20 @@ var css = csjs`
min-width: 150px; min-width: 150px;
} }
.copyaddress { .copyaddress {
color: #C6CFF7; color: ${styles.colors.blue};
margin-left: 0.5em; margin-left: 0.5em;
margin-top: 0.7em; margin-top: 0.7em;
cursor: pointer; cursor: pointer;
opacity: .7;
} }
.copyaddress:hover { .copyaddress:hover {
opacity: 1; color: ${styles.colors.grey};
} }
.instanceContainer extends ${styles.displayBox} { .instanceContainer extends ${styles.displayBox} {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: ${styles.colors.lightBlue}; background-color: ${styles.colors.transparent};
margin-top: 2%; margin-top: 2%;
border: none;
} }
.container extends ${styles.displayBox} { .container extends ${styles.displayBox} {
margin-top: 2%; margin-top: 2%;
@ -77,16 +77,20 @@ var css = csjs`
} }
.button { .button {
display: flex; display: flex;
align-items: flex-end; align-items: center;
margin-top: 2%; margin-top: 2%;
} }
.atAddress extends ${styles.button} { .atAddress extends ${styles.button} {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background-color: ${styles.colors.lightGreen};
border-color: ${styles.colors.lightGreen};
} }
.create extends ${styles.button} { .create extends ${styles.button} {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background-color: ${styles.colors.lightRed};
border-color: ${styles.colors.lightRed};
} }
.input extends ${styles.inputField} { .input extends ${styles.inputField} {
border-top-left-radius: 0; border-top-left-radius: 0;
@ -120,7 +124,7 @@ var css = csjs`
margin-right: .3em; margin-right: .3em;
} }
.call { .call {
color: #9DC1F5; color: ${styles.colors.lightBlue};
margin-right: .3em; margin-right: .3em;
} }
.pending { .pending {

15
src/app/tabs/support-tab.js
Unescape View File

@ -19,38 +19,35 @@ var css = csjs`
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
height: 85%; height: 85%;
padding: 0;
} }
.chatTitle { .chatTitle {
cursor: pointer;
height: 40px; height: 40px;
width: 90%; width: 90%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 3px; margin-top: 15px;
background-color: white;
border: 2px dotted ${styles.colors.lightGrey};
} }
.chatTitle:hover { .chatTitle:hover {
background-color: ${styles.colors.lightYellow}; cursor: pointer;
} }
.icon { .icon {
height: 70%; height: 70%;
margin-right: 2%; margin-right: 2%;
} }
.chatTitleText { .chatTitleText {
font-size: 13px; font-size: 17px;
font-weight: bold; font-weight: bold;
} }
.chatTitleText { .chatTitleText {
opacity: 0.8; opacity: 0.8;
} }
.chatIframe { .chatIframe extends ${styles.displayBox} {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 2px dotted ${styles.colors.lightGrey};
overflow: hidden;
transform: scale(0.9); transform: scale(0.9);
padding: 0;
} }
.infoBox extends ${styles.infoTextBox}{ .infoBox extends ${styles.infoTextBox}{

18
src/app/ui/modaldialog.js
Unescape View File

@ -1,5 +1,7 @@
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../../style-guide')
var styles = styleGuide()
var css = csjs` var css = csjs`
.modal { .modal {
@ -11,13 +13,13 @@ var css = csjs`
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */ background-color: ${styles.colors.black}; /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
} }
.modalHeader { .modalHeader {
padding: 2px 16px; padding: 2px 16px;
background-color: orange; background-color: ${styles.colors.orange};
color: white; color: ${styles.colors.white};
} }
.modalBody { .modalBody {
padding: 1.5em; padding: 1.5em;
@ -25,20 +27,20 @@ var css = csjs`
} }
.modalFooter { .modalFooter {
padding: 10px 30px; padding: 10px 30px;
background-color: orange; background-color: ${styles.colors.orange};
color: white; color: ${styles.colors.white};
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
} }
.modalContent { .modalContent {
position: relative; position: relative;
background-color: #fefefe; background-color: ${styles.colors.white};
margin: auto; margin: auto;
padding: 0; padding: 0;
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 12px;
border: 1px solid #888; border: 1px solid ${styles.colors.grey};
width: 50%; width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 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; -webkit-animation-name: animatetop;

58
src/style-guide.js
Unescape View File

@ -7,22 +7,33 @@ function styleGuide () {
COLORS COLORS
-------------------------------------------------------------------------- */ -------------------------------------------------------------------------- */
var colors = { var colors = {
// BASIC COLORS (B&W and transparent)
transparent: 'transparent', transparent: 'transparent',
white: '#fff', white: 'hsl(0, 0%, 100%)',
black: '#000', black: 'hsl(0, 0%, 0%)',
blue: '#C6CFF7', opacityBlack: 'hsla(0, 0%, 0%, .4)',
lightBlue: '#F4F6FF', // BLUE
greyBlue: '#999999', blue: 'hsla(229, 75%, 87%, 1)',
grey: '#666', lightBlue: 'hsla(229, 75%, 87%, .5)',
lightGrey: '#dddddd', backgroundBlue: 'hsla(229, 100%, 97%, 1)',
red: '#FF8080', // GREY
lightRed: '#FFB9B9', grey: 'hsla(0, 0%, 40%, 1)',
green: 'hsla(141, 58%, 81%, 1)', lightGrey: 'hsla(0, 0%, 40%, .5)',
lightGreen: 'hsla(141, 58%, 95%, 1)', veryLightGrey: 'hsla(0, 0%, 40%, .2)',
violet: '#C6CFF7', // RED
pink: '#EC96EC', red: 'hsla(0, 82%, 82%, 1)',
yellow: '#ffbd01', lightRed: 'hsla(0, 82%, 82%, .5)',
lightYellow: 'hsla(59, 56%, 78%, 0.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; line-height : 20px;
background : ${colors.white}; background : ${colors.white};
border-radius : 3px; border-radius : 3px;
border : 1px solid ${colors.lightGrey}; border : 1px solid ${colors.veryLightGrey};
overflow : hidden; overflow : hidden;
word-break : break-word; word-break : break-word;
width : 100%; width : 100%;
} }
.info-text-box { .info-text-box {
background-color : white; background-color : ${colors.white};
line-height : 20px; line-height : 20px;
border : .2em dotted ${colors.lightGrey}; border : .2em dotted ${colors.lightGrey};
padding : 8px 15px; padding : 8px 15px;
@ -82,18 +93,18 @@ function styleGuide () {
} }
.warning-text-box { .warning-text-box {
background-color : hsla(59, 56%, 78%, 0.5); // light yellow background-color : ${colors.lightOrange};
line-height : 20px; line-height : 20px;
padding : 8px 15px; padding : 8px 15px;
border-radius : 5px; border-radius : 5px;
border : .2em dotted ${colors.yellow}; // orange-yellow border : .2em dotted ${colors.orange};
margin-bottom : 1em; margin-bottom : 1em;
overflow : hidden; overflow : hidden;
word-break : break-word; word-break : break-word;
} }
.error-text-box { .error-text-box {
background-color : ${colors.lightRed}; // light-red background-color : ${colors.lightRed};
line-height : 20px; line-height : 20px;
padding : 1em 1em .5em 1em; padding : 1em 1em .5em 1em;
border-radius : 3px; border-radius : 3px;
@ -117,8 +128,7 @@ function styleGuide () {
word-break : normal; word-break : normal;
} }
.input { .input {
border : 1px solid ${colors.lightGrey}; // light-grey border : 1px solid ${colors.veryLightGrey};
margin : .3em;
height : 25px; height : 25px;
width : 250px; width : 250px;
font-size : 12px; font-size : 12px;
@ -138,7 +148,7 @@ function styleGuide () {
justify-content : center; justify-content : center;
border-color : transparent; border-color : transparent;
border-radius : 3px; border-radius : 3px;
border : .3px solid ${colors.lightGrey}; border : .3px solid ${colors.veryLightGrey};
cursor : pointer; cursor : pointer;
min-height : 25px; min-height : 25px;
max-height : 25px; max-height : 25px;
@ -161,7 +171,7 @@ function styleGuide () {
text-decoration : none; text-decoration : none;
background-color : ${colors.white}; background-color : ${colors.white};
cursor : pointer; cursor : pointer;
border : 1px solid ${colors.lightGrey}; border : 1px solid ${colors.veryLightGrey};
border-radius : 3px; border-radius : 3px;
height : 25px; height : 25px;
width : 250px; width : 250px;

5
src/universal-dapp.js
Unescape View File

@ -68,11 +68,10 @@ var css = csjs`
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
margin-left: 3%; margin-left: 3%;
color: ${styles.colors.black}; color: ${styles.colors.blue};
opacity: .5;
} }
.copy:hover{ .copy:hover{
opacity: 1; color: ${styles.colors.grey};
} }
.buttonsContainer { .buttonsContainer {
margin-top: 2%; margin-top: 2%;

Write Preview
Loading…
Cancel
Save