Resizing, styling fixes...

assets/css/browser-solidity.css

@@ -161,6 +161,8 @@ body {
     list-style: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
 }
 
 #header #options li.active {
@@ -254,12 +256,12 @@ body {
 #publishView button {
     background-color: #C6CFF7;
     font-size: 12px;
-    padding: 0.25em;
     margin-bottom: .5em;
     color: black;
     border:0 none;
     border-radius: 3px;
     width: 8em;
+    height: 20px;
     margin-right: 1em;
     cursor: pointer;
 }
@@ -384,9 +386,10 @@ body {
     word-wrap: break-word;
     cursor: pointer;
     position: relative;
-    margin: 0.5em 0;
-    border-radius: 0.6em;
-    padding: 1em 1.5em;
+    margin: 0.5em 0 1em 0;
+    border-radius: 5px;
+    line-height: 20px;
+    padding: 8px 15px;
 }
 
 .sol.error pre,
@@ -410,11 +413,13 @@ body {
 }
 
 .sol.error {
-    background-color: rgba(255, 0, 0, 0.4);
+    background-color: hsla(0, 100%, 75%, 0.1);
+    border: .2em dotted #FF8080;
 }
 
 .sol.warning {
-    background-color: rgba(210, 202, 36, 0.4);
+    background-color: hsla(59, 56%, 78%, 0.5);
+    border: .2em dotted #ffbd01;
 }
 
 #ghostbar {
@@ -437,7 +442,7 @@ body {
     bottom: 0;
     cursor: col-resize;
     z-index: 999;
-    border-right: 2px solid #C6CFF7;
+    border-right: 2px solid hsla(215, 81%, 79%, .3);
 }
 
 #editor .ace-tm .ace_gutter,

assets/css/universal-dapp.css

@@ -310,7 +310,8 @@
 	border-radius: 5px;
 	margin-bottom: 1em;
 	display: flex;
-	justify-content: space-around;
+	justify-content: initial;
+	flex-wrap: wrap;
 }
 
 .udapp .legend div {
@@ -319,6 +320,7 @@
 	display: flex;
 	align-items: center;
 	line-height: 0px;
+	padding: 5px;
 }
 
 .udapp .legend div:before {
@@ -329,6 +331,7 @@
 	height: 1em;
 	margin-right: 0.5em;
 	width: 1em;
+	border-radius: 50%;
 }
 
 .udapp .legend .publish:before {

index.html

@@ -55,6 +55,7 @@
 		<div id="righthand-panel">
 			<div id="header">
 				<div id="menu">
+					<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
 					<ul id="options">
 						<li class="settingsView active" title="Settings">Settings</li>
 						<li class="publishView" title="Publish" >Files</li>
@@ -63,7 +64,6 @@
 						<li class="staticanalysisView" title="Static Analysis">Analysis</li>
 						<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
 					</ul>
-					<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
 				</div>
 				<div id="optionViews" class="settingsView">
 					<!-- contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js -->

src/app.js

@@ -802,7 +802,8 @@ var run = function () {
     }
   }
   var staticanalysis = new StaticAnalysis(staticAnalysisAPI, compiler.event)
-  $('#staticanalysisView').append(staticanalysis.render())
+  var node = document.getElementById('staticanalysisView')
+  node.insertBefore(staticanalysis.render(), node.childNodes[0])
 
   // ----------------- autoCompile -----------------
   var autoCompile = document.querySelector('#autoCompile').checked
@@ -973,7 +974,7 @@ var run = function () {
     loadVersion($('#versionSelector').val())
   })
 
-  var header = new Option('Click to select new compiler version')
+  var header = new Option('Select new compiler version')
   header.disabled = true
   header.selected = true
   $('#versionSelector').append(header)

src/app/analysis-tab.js

@@ -8,6 +8,7 @@ var styles = styleGuide()
 var css = csjs`
   .analysisTabView {
     padding: 2%;
+    margin-top: 1em;
   }
   .infoBox extends ${styles.infoTextBox} {
     margin-bottom: 1em;

src/app/contract-tab.js

@@ -32,6 +32,7 @@ var css = csjs`
   .select extends ${styles.dropdown} {
     width: 70%;
     float: left;
+    text-align: center;
   }
   .contract {
     display: block;

src/app/editor.js

@@ -19,8 +19,7 @@ var css = csjs`
   }
   .ace-editor         {
     top               : 4px;
-    border-top        : 3px solid transparent;
-    font-size         : 15px;
+    font-size         : 2vmin;
     width             : 100%;
   }
 `

src/app/file-panel.js

@@ -55,10 +55,10 @@ var css = csjs`
   }
   .dragbar            {
     position          : relative;
-    top               : 6px;
+    top               : 4px;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : 2px solid #C6CFF7;
+    border-right      : 2px solid hsla(215, 81%, 79%, .3);
   }
   .ghostbar           {
     width             : 3px;

src/app/settings-tab.js

@@ -18,8 +18,8 @@ var css = csjs`
     display: flex;
   }
   .select extends ${styles.dropdown} {
-    width: 50%;
     float: left;
+    max-width: 90%;
   }
   .button extends ${styles.button} {
     background-color: #C6CFF7;

src/app/staticanalysis/modules/gasCosts.js

@@ -1,5 +1,5 @@
-var name = 'gas costs'
-var desc = 'Warn if the gas requiremets of functions are too high.'
+var name = 'gas costs: '
+var desc = 'warn if the gas requiremets of functions are too high.'
 var categories = require('./categories')
 
 function gasCosts () {

src/app/staticanalysis/modules/thisLocal.js

@@ -1,5 +1,5 @@
-var name = 'this on local'
-var desc = 'Invocation of local functions via this'
+var name = 'this on local: '
+var desc = 'invocation of local functions via this'
 var categories = require('./categories')
 var common = require('./staticAnalysisCommon')
 

src/app/staticanalysis/modules/txOrigin.js

@@ -1,4 +1,4 @@
-var name = 'tx origin'
+var name = 'tx origin: '
 var desc = 'warn if tx.origin is used'
 var categories = require('./categories')
 

src/app/staticanalysis/staticAnalysisView.js

@@ -9,6 +9,9 @@ var css = csjs`
   .analysis {
     font-height: 1.5em;
   }
+  .result {
+    margin-top: 1em;
+  }
 `
 
 function staticAnalysisView (appAPI, compilerEvent) {
@@ -32,17 +35,19 @@ function staticAnalysisView (appAPI, compilerEvent) {
 
 staticAnalysisView.prototype.render = function () {
   var self = this
-  var view = yo`<div class="${css.analysis}">
-    <strong>Static Analysis</strong>
-    <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
-    <div id="staticanalysismodules">
-    ${this.modulesView}
-    </div>
-    <div>
-      <button onclick=${function () { self.run() }} >Run</button>
+  var view = yo`
+    <div class="${css.analysis}">
+      <strong class="${css.title}">Static Analysis</strong><br>
+      <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
+      <div id="staticanalysismodules">
+      ${this.modulesView}
+      </div>
+      <div>
+        <button onclick=${function () { self.run() }} >Run</button>
+      </div>
+      <div class="${css.result}" "id='staticanalysisresult'></div>
     </div>
-    <div id='staticanalysisresult'></div>
-    </div>`
+  `
   if (!this.view) {
     this.view = view
   }

src/app/style-guide.js

@@ -7,7 +7,7 @@ function styleGuide () {
   COLORS
   -------------------------------------------------------------------------- */
   var colors = {
-    blue: '#9DC1F5',
+    blue: '#9DC1F5',  // hsla(215, 81%, 79%, 1)
     lightBlue: '#F4F6FF',
     greyBlue: '#102026',
     grey: '#666',
@@ -17,7 +17,7 @@ function styleGuide () {
     green: '#B1EAC5',
     violet: '#C6CFF7',
     pink: '#EC96EC',
-    yellow: '#E6E5A7'
+    yellow: '#ffbd01'
   }
 
   /* --------------------------------------------------------------------------
@@ -113,6 +113,7 @@ function styleGuide () {
       cursor                  : pointer;
       font-size               : 12px;
       border                  : none;
+      height                  : 20px;
     }
 
   `

src/universal-dapp.js

@@ -165,7 +165,7 @@ UniversalDApp.prototype.render = function () {
     .append($('<div class="publish"/>').text('Publish'))
     .append($('<div class="attach"/>').text('Attach'))
     .append($('<div class="transact"/>').text('Transact'))
-    .append($('<div class="payable"/>').text('Transact (Payable)'))
+    .append($('<div class="payable"/>').text('T/Payable'))
     .append($('<div class="call"/>').text('Call'))
 
   self.$el.append($legend)