Remove spinner from contract tab, add warning msg, moved settings tab…

… to second place

index.html

@@ -58,10 +58,10 @@
 					<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="envView" title="Environment">Contract</li>
+						<li class="settingsView" title="Settings">Settings</li>
 						<li class="publishView" title="Publish" >Files</li>
 						<li class="debugView" title="Debugger">Debugger</li>
 						<li class="staticanalysisView" title="Static Analysis">Analysis</li>
-						<li class="settingsView" title="Settings">Settings</li>
 						<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
 					</ul>
 				</div>

src/app/loading-spinner.js

@@ -1,5 +1,8 @@
 var yo = require('yo-yo')
+// -------------- styling ----------------------
 var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
 
 module.exports = loadingSpinner
 
@@ -14,7 +17,6 @@ var css = csjs`
     height: 8px;
     animation: spin 2s linear infinite;
   }
-
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
@@ -26,6 +28,9 @@ function loadingSpinner (cb) {
     cb(function finish () {
       var p = el.parentElement
       if (p) p.removeChild(el)
+      var node = document.querySelector('[class^=contractTabView]')
+      var loadingMsg = document.querySelector('[class^=loadingMsg]')
+      node.removeChild(loadingMsg)
     })
   }
   return el

src/app/style-guide.js

@@ -74,11 +74,11 @@ function styleGuide () {
     }
 
     .warning-text-box {
-      background-color      : #E6E5A7;  // yellow
+      background-color      : hsla(59, 56%, 78%, 0.5);  // yellow
       line-height           : 20px;
-      padding               : 1em 1em .5em 1em;
-      border-radius         : 3px;
-      box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
+      padding               : 8px 15px;
+      border-radius         : 5px;
+      border                : .2em dotted #ffbd01; // orange-yellow
       margin-bottom         : 1em;
     }
 
@@ -143,6 +143,7 @@ function styleGuide () {
   return {
     textBoxL: textBoxes['display-box-L'],
     infoTextBox: textBoxes['info-text-box'],
+    warningTextBox: textBoxes['warning-text-box'],
     titleL: texts['title-L'],
     titleM: texts['title-M'],
     dropdown: buttons['dropdown-menu'],

src/app/tabbed-menu.js

@@ -1,8 +1,19 @@
 var $ = require('jquery')
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
 
 module.exports = tabbedMenu
 
 function tabbedMenu (compiler, loadingSpinner, self) {
+
+  var css = csjs`
+    .loadingMsg extends ${styles.warningTextBox} {
+      display: block;
+    }
+  `
+
   $('#options li').click(function (ev) {
     var $el = $(this)
     selectTab($el)
@@ -18,7 +29,9 @@ function tabbedMenu (compiler, loadingSpinner, self) {
   compiler.event.register('loadingCompiler', function compilationStarted () {
     var contractTab = document.querySelector('.envView')
     if (!contractTab.children.length) {
-      contractTab.appendChild(loadingSpinner(cb))
+      var el = document.querySelector('[class^=contractTabView]')
+      var loadingMsg = yo`<div class=${css.loadingMsg}>Solidity compiler is currently loading. Please wait a moment...</div>`
+      el.appendChild(loadingMsg)
     }
     var settingsTab = document.querySelector('.settingsView')
     if (!settingsTab.children.length) {