Merge pull request #563 from ethereum/compilationWarning

Restyle compilation warning

src/app.js

@@ -6,6 +6,8 @@ var $ = require('jquery')
 var base64 = require('js-base64').Base64
 var swarmgw = require('swarmgw')
 var csjs = require('csjs-inject')
+var styleGuide = require('./app/style-guide')
+var styles = styleGuide()
 
 var QueryParams = require('./app/query-params')
 var queryParams = new QueryParams()
@@ -797,11 +799,20 @@ var run = function () {
     config.set('autoCompile', autoCompile)
   })
 
+  var cssCompilationWarning = csjs`
+    .compilationWarning extends ${styles.warningTextBox} {
+      margin-top: 1em;
+      margin-left: 0.5em;
+    }
+  `
   var warnMsg = ' Last compilation took {X}ms. We suggest to turn off autocompilation.'
   compiler.event.register('compilationDuration', (speed) => {
     $('#warnCompilationSlow').html('')
+    $('#warnCompilationSlow').hide()
     $('#header #menu .settingsView').css('color', '')
     if (speed > 1000) {
+      document.querySelector('#warnCompilationSlow').className = cssCompilationWarning.compilationWarning
+      $('#warnCompilationSlow').show()
       $('#warnCompilationSlow').html(warnMsg.replace('{X}', speed))
       $('#header #menu .settingsView').css('color', '#FF8B8B')
     }

src/app/settings-tab.js

@@ -34,9 +34,6 @@ var css = csjs`
   .checkboxText {
     margin-left: 3px;
   }
-  #warnCompilationSlow {
-    color: #FF8B8B;
-  }
 }
 `
 module.exports = settingsTab
@@ -61,12 +58,13 @@ function settingsTab () {
       </div>
       <div class="${css.crow}">
         <div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
-        <span class="${css.checkboxText}">Auto Compile</span><span id="warnCompilationSlow"></span>
+        <span class="${css.checkboxText}">Auto Compile</span>
       </div>
       </div>
       <div class="${css.crow}">
         <div class="${css.button} "id="compile" title="Compile source code">Compile</div>
       </div>
+      <div id="warnCompilationSlow" class="${css.compilationWarning}"></div>
     </div>
   `
 }