Merge pull request #686 from ethereum/buttons

assets/css/browser-solidity.css

 #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;
@@ -51,7 +51,6 @@
 }
 
 #righthand-panel {
-    font-size: 13px;
     display: flex;
     flex-direction: column;
 }
@@ -65,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;
@@ -82,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 {
@@ -90,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%;
 }
@@ -140,14 +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);
-    font-family: monospace;
+    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
     border-radius: 3px;
     display: inline-block;
     padding: 0 0.6em;
@@ -158,14 +156,13 @@
 }
 
 #righthand-panel .info {
-    font-family: monospace;
     min-height: 6em;
     padding: 0.25em 0;
     padding-left: 6em;
 }
 
 #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;
@@ -177,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;
@@ -189,10 +186,6 @@
     cursor: pointer;
 }
 
-#staticanalysismodules label {
-    display: block;
-}
-
 #header .origin {
     display: block;
     word-wrap: break-word;
@@ -200,16 +193,6 @@
     font-weight: bold;
 }
 
-#righthand-panel #versionSelector {
-    text-decoration: none;
-    background-color: #C6CFF7;
-    cursor: pointer;
-    font-size: 12px;
-    color: black;
-    border-radius: 3px;
-    border: 0 none;
-}
-
 .contract.hidesub {
     padding-bottom: 0;
     margin: 0;
@@ -226,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 {
@@ -241,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;
@@ -279,7 +262,7 @@
 .sol.warning pre {
     background-color: transparent;
     margin: 0;
-    font-size: 10px;
+    font-size: 12px;
     border: 0 none;
     padding: 0;
     border-radius: 0;
@@ -290,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 {
@@ -313,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;
@@ -336,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) */
@@ -360,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 */
@@ -391,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;

assets/css/styles.css

@@ -62,12 +62,13 @@ blockquote {
 }
 
 code, pre {
-  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
   color: #333;
-  font-size: 12px;
+  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;

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,26 +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%;
-	font-style: italic;
 	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%;
 }
 

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     {

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

src/app/panels/editor-panel.js

 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')
 
@@ -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;

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)

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;

src/app/staticanalysis/staticAnalysisView.js

@@ -10,7 +10,8 @@ var styles = styleGuide()
 
 var css = csjs`
   .analysis {
-    font-height: 1.5em;
+    display: flex;
+    flex-direction: column;
   }
   .result {
     margin-top: 1%;
@@ -20,11 +21,17 @@ var css = csjs`
     align-items: center;
   }
   .buttonRun extends ${styles.button} {
-    background-color: ${styles.colors.blue};
     margin-right: 1%;
   }
   .analysisModulesContainer extends ${styles.displayBox} {
     margin-bottom: 1%;
+    line-height: 2em;
+    display: flex;
+    flex-direction: column;
+  }
+  .label {
+    display: flex;
+    align-items: center;
   }
 `
 
@@ -56,7 +63,7 @@ staticAnalysisView.prototype.render = function () {
       </div>
       <div class="${css.buttons}">
         <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
-        <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
+        <label class="${css.label}" for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
       </div>
       <div class="${css.result}" "id='staticanalysisresult'></div>
     </div>
@@ -109,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 {
@@ -125,7 +132,7 @@ function renderModules (modules) {
     var category = groupedModules[categoryId]
     var entriesDom = category.map((item, i) => {
       return yo`
-        <label>
+        <label class="${css.label}">
           <input id="staticanalysismodule_${categoryId}_${i}"
             type="checkbox"
             name="staticanalysismodule"
@@ -137,9 +144,7 @@ function renderModules (modules) {
             `
     })
     return yo`<div class="${css.analysisModulesContainer}">
-                <label>
-                <b>${category[0].categoryDisplayName}</b>
-                </label>
+                <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
                 ${entriesDom}
               </div>`
   })

src/app/tabs/analysis-tab.js

@@ -9,6 +9,8 @@ var css = csjs`
   .analysisTabView {
     padding: 2%;
     padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
   }
   .infoBox extends ${styles.infoTextBox} {
     margin-bottom: 1em;

src/app/tabs/compile-tab.js

@@ -26,30 +26,28 @@ var css = csjs`
   }
   .autocompileContainer {
     width: 90px;
+    display: flex;
+    align-items: center;
   }
+  .autocompile {}
   .autocompileTitle {
     font-weight: bold;
     margin: 1% 0;
   }
-  .autocompile {
-    float: left;
-    align-self: center;
-  }
   .autocompileText {
-    align-self: center;
     margin: 1% 0;
-    font-size: 11px;
+    font-size: 12px;
     overflow: hidden;
     word-break: normal;
     line-height: initial;
-    margin-left: 3%;
   }
   .warnCompilationSlow {
-    color:  orange;
+    color:  ${styles.colors.orange};
+    margin-left: 1%;
   }
   .compileButtons {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     flex-wrap: wrap;
   }
   .name {
@@ -59,13 +57,10 @@ var css = csjs`
     display: flex;
   }
   .compileButton extends ${styles.button} {
-    width: 130px;
-    min-width: 130px;
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
+    width: 120px;
+    min-width: 110px;
     margin-right: 1%;
-    font-size: 13px;
+    font-size: 12px;
   }
   .container extends ${styles.displayBox} {
     margin: 0;
@@ -73,11 +68,7 @@ var css = csjs`
     align-items: center;
   }
   .contractNames extends ${styles.dropdown} {
-    width: 250px;
     margin-right: 5%;
-    height: 32px;
-    font-size: 12px;
-    font-weight: bold;
   }
   .contractButtons {
     display: flex;
@@ -86,10 +77,8 @@ var css = csjs`
     text-align: center;
   }
   .details extends ${styles.button} {
-    min-width: 70px;
   }
   .publish extends ${styles.button} {
-    min-width: 70px;
     margin-left: 2%;
   }
   .log {
@@ -174,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 = ''
@@ -233,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')

src/app/tabs/run-tab.js

@@ -35,49 +35,37 @@ var css = csjs`
   .col1_1 extends ${styles.titleM} {
     font-size: 12px;
     width: 25%;
-    min-width: 50px;
+    min-width: 75px;
     float: left;
     align-self: center;
   }
   .col2 extends ${styles.inputField}{
-    width: 75%;
-    float: left;
   }
   .select extends ${styles.dropdown} {
-    width: 75%;
-    float: left;
     text-align: center;
+    font-weight: normal;
+    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;
-  }
-  .selectAddress extends ${styles.dropdown} {
-    width: 70%;
-    float: left;
-    text-align: center;
+    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%;
   }
   .contractNames extends ${styles.dropdown} {
-    height: 32px;
-    font-size: 12px;
-    width: 100%;
-    font-weight: bold;
-    background-color: ${styles.colors.lightGrey}
   }
   .buttons {
     display: flex;
@@ -89,24 +77,24 @@ var css = csjs`
   }
   .button {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     margin-top: 2%;
   }
   .atAddress extends ${styles.button} {
-    background-color: ${styles.colors.green};
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    background-color: ${styles.colors.lightGreen};
+    border-color: ${styles.colors.lightGreen};
   }
   .create extends ${styles.button} {
-    background-color: ${styles.colors.lightRed};
     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;
     border-bottom-left-radius: 0;
-    width: 75%;
-    font-size: 10px;
     padding-left: 10px;
   }
   .noInstancesText extends ${styles.displayBox} {
@@ -114,13 +102,11 @@ var css = csjs`
     color: ${styles.colors.lightGrey};
     font-style: italic;
   }
-  .legend extends ${styles.displayBox} {
-    border-radius: 5px;
+  .legend {
+    float: right;
     display: flex;
-    justify-content: center;
-    padding: 15px 8px;
     word-break: normal;
-    flex-wrap: wrap;
+    margin-left: auto;
   }
   .item {
     margin-right: 1em;
@@ -136,7 +122,7 @@ var css = csjs`
     margin-right: .3em;
   }
   .call {
-    color: #9DC1F5;
+    color: ${styles.colors.lightBlue};
     margin-right: .3em;
   }
   .pending {
@@ -158,7 +144,6 @@ function runTab (container, appAPI, appEvents, opts) {
   var el = yo`
   <div class="${css.runTabView}" id="runTabView">
     ${settings(appAPI, appEvents)}    
-    ${legend()}
     ${contractDropdown(appAPI, appEvents, instanceContainer)}
     ${instanceContainer}
   </div>
@@ -231,7 +216,7 @@ function contractDropdown (appAPI, appEvents, instanceContainer) {
   var selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
   var el = yo`
     <div class="${css.container}">
-      ${selectContractNames}
+      ${selectContractNames} ${legend()}
       <div class="${css.buttons}">
         <div class="${css.button}">
           <div class="${css.atAddress}" onclick=${function () { loadFromAddress(appAPI) }}>At Address</div>
@@ -371,7 +356,7 @@ function settings (appAPI, appEvents) {
       </div>
       <div class="${css.crow}">
         <div class="${css.col1_1}">Account</div>
-        <select name="txorigin" class="${css.selectAddress}" id="txorigin"></select>
+        <select name="txorigin" class="${css.select}" id="txorigin"></select>
         <i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i>
       </div>
       <div class="${css.crow}">

src/app/tabs/settings-tab.js

@@ -19,8 +19,6 @@ var css = csjs`
     display: flex;
   }
   .select extends ${styles.dropdown} {
-    float: left;
-    max-width: 90%;
   }
 }
 `

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

src/app/ui/modaldialog.js

 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: 13px;
-    border: 1px solid #888;
+    font-size: 12px;
+    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;

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)'
   }
 
   /* --------------------------------------------------------------------------
@@ -59,19 +70,19 @@ function styleGuide () {
   -------------------------------------------------------------------------- */
   var textBoxes = csjs`
     .display-box {
-      font-size             : 1em;
+      font-size             : 12px;
       padding               : 10px 15px;
       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,10 +128,10 @@ function styleGuide () {
       word-break            : normal;
     }
     .input {
-      border                : 1px solid ${colors.lightGrey};  // light-grey
-      margin                : .3em;
+      border                : 1px solid ${colors.veryLightGrey};
       height                : 25px;
-      font-size             : 10px;
+      width                 : 250px;
+      font-size             : 12px;
       border-radius         : 3px;
       padding               : 0 8px;
       overflow              : hidden;
@@ -132,14 +143,17 @@ function styleGuide () {
   -------------------------------------------------------------------------- */
   var buttons = csjs`
     .button {
+      display                 : flex;
+      align-items             : center;
+      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;
-      padding                 : 3px;
-      min-width               : 100px;
+      width                   : 70px;
+      min-width               : 70px;
       font-size               : 12px;
       overflow                : hidden;
       word-break              : normal;
@@ -151,14 +165,16 @@ function styleGuide () {
     }
 
     .dropdown {
-      font-size               : 10px;
+      font-size               : 12px;
+      font-weight             : bold;
       padding                 : 0 8px;
       text-decoration         : none;
       background-color        : ${colors.white};
       cursor                  : pointer;
-      border                  : 1px solid ${colors.lightGrey};
+      border                  : 1px solid ${colors.veryLightGrey};
       border-radius           : 3px;
-      height                  : 30px;
+      height                  : 25px;
+      width                   : 250px;
       text-align              : center;
       overflow                : hidden;
       word-break              : normal;

src/universal-dapp.js

@@ -29,16 +29,13 @@ var css = csjs`
     align-items: center;
   }
   .title extends ${styles.dropdown} {
+    width: 400px;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    height: 32px;
-    font-size: 11px;
-    width: 100%;
+    align-items: center;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
-    font-weight: bold;
     background-color: ${styles.colors.white};
   }
   .titleText {
@@ -71,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%;