Update safari settings for saucelabs

assets/css/universal-dapp.css

@@ -303,15 +303,22 @@
 }
 
 .udapp .legend {
-	font-size: 12px;
+	background-color: white;
-	float: left;
+	line-height: 20px;
-	color: #666;
+	border: .2em dotted lightGrey;
+	padding: 8px 15px;
+	border-radius: 5px;
+	margin-bottom: 1em;
+	display: flex;
+	justify-content: space-around;
 }
 
 .udapp .legend div {
 	display: inline-block;
 	margin-right: 0.5em;
-	margin-bottom: 1em;
+	display: flex;
+	align-items: center;
+	line-height: 0px;
 }
 
 .udapp .legend div:before {

nightwatch.js

@@ -50,8 +50,8 @@ module.exports = {
       'desiredCapabilities': {
         'browserName': 'safari',
         'javascriptEnabled': true,
-        'platform': 'OS X 10.10',
+        'platform': 'OS X 10.11',
-        'version': '8.0',
+        'version': '10.0',
         'acceptSslCerts': true,
         'build': 'build-' + TRAVIS_JOB_NUMBER,
         'tunnel-identifier': 'browsersolidity_tests_' + TRAVIS_JOB_NUMBER

src/app/contract-tab.js

@@ -35,7 +35,7 @@ var css = csjs`
   }
   .contract {
     display: block;
-    margin: 5em 0 2em 0;
+    margin: 4em 0 2em 0;
   }
 `
 

src/app/renderer.js

@@ -18,13 +18,19 @@ var css = csjs`
       width: 30%;
       float: left;
   }
-  .toggle  {
+  .toggleText  {
-    font-size: 1em;
     text-decoration: underline;
+    margin-left: 2px;
+    font-size: .9em;
+  }
+  .toggle  {
+    font-size: 1.1em;
     color: ${styles.colors.blue};
     margin: 1em;
     cursor: pointer;
     font-weight: 400;
+    display: flex;
+    align-items: center;
   }
   .toggle:hover {
     opacity: .8;
@@ -248,7 +254,7 @@ Renderer.prototype.contracts = function (data, source) {
 
   var detailsOpen = {}
   var getDetails = function (contract, source, contractName) {
-    var button = $(`<div class="${css.toggle}"><i class="fa fa-info-circle" aria-hidden="true"></i> Contract details (bytecode, interface etc.)</div>`)
+    var button = $(`<div class="${css.toggle}"><i class="fa fa-info-circle" aria-hidden="true"></i><div class="${css.toggleText}">Contract details (bytecode, interface etc.)</div></div>`)
     var details = $('<div style="display: none;"/>')
 
     if (contract.bytecode) {

src/app/settings-tab.js

@@ -28,10 +28,12 @@ var css = csjs`
     text-align: -webkit-center;
   }
   .col1 extends ${styles.titleL} {
-    width: 30%;
     float: left;
     align-self: center;
   }
+  .checkboxText {
+    margin-left: 3px;
+  }
 }
 `
 module.exports = settingsTab
@@ -47,16 +49,16 @@ function settingsTab () {
         <select class="${css.select}" id="versionSelector"></select>
       </div>
       <div class="${css.crow}">
-        Text Wrap
+        <div><input class="${css.col1}" id="editorWrap" type="checkbox"></div>
-        <input class="${css.col1}" id="editorWrap" type="checkbox">
+        <span class="${css.checkboxText}">Text Wrap</span>
       </div>
       <div class="${css.crow}">
-        Enable Optimization
+        <div><input class="${css.col1}" id="optimize" type="checkbox"></div>
-        <input id="optimize" type="checkbox">
+        <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
       <div class="${css.crow}">
-        Auto Compile
+        <div><input class="${css.col1}" id="autoCompile" type="checkbox" checked></div>
-        <input id="autoCompile" type="checkbox" checked>
+        <span class="${css.checkboxText}">Auto Compile</span>
       </div>
       </div>
       <div class="${css.crow}">