Merge pull request #1765 from ethereum/swap_it_style_fixes_l

Swap it key navigation on modal dialog and context menu style fixes

src/app/panels/tab-proxy.js

@@ -110,8 +110,8 @@ export class TabProxy {
       <div class="d-flex">
         <div class="m-1">
           <span class="p-1">
-            <i class="m-1 fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
+            <i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
-            <i class="m-1 fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
+            <i class="m-1 fa fa-minus" style="color: var(--text-dark)" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
           </span>
         </div>
         ${this._view.tabs}

src/app/ui/contextMenu.js

@@ -7,34 +7,27 @@ var css = csjs`
     {
       display: none;
       position: fixed;
-        border: 1px solid var(--primary);
+      width:100px;
-        width:150px; 
       border-radius: 2px;
       z-index: 1000;
+      box-shadow: 0 0 4px var(--dark);
     }
-    
     .liitem
     {
-        padding: 3px;
+      padding: 2px;
-        padding-left: 10px;
+      padding-left: 6px;
       cursor: pointer;
+      color: var(--text-dark);
+      background-color: var(--light);
+    }
+    .liitem:hover
+    {
+      background-color:  var(--secondary);
     }
-    
     #menuitems
     {
       list-style: none;
       margin: 0px;
-        margin-top: 4px;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-bottom: 3px;
-        color: var(--primary);
-    }
-
-    #menuitems :hover
-    {
-        background: $var(--seconday);
-        border-radius: 2px;
     }
 `
 
@@ -53,7 +46,7 @@ module.exports = (event, items) => {
     current.onclick = () => { hide(null, true); items[item]() }
     return current
   })
-  var container = yo`<div class=${css.container}><ul id='menuitems'>${menu}</ul></div>`
+  var container = yo`<div class="${css.container} bg-light"><ul id='menuitems'>${menu}</ul></div>`
   container.style.left = event.pageX + 'px'
   container.style.top = event.pageY + 'px'
   container.style.display = 'block'

src/app/ui/modaldialog.js

@@ -2,6 +2,7 @@ var yo = require('yo-yo')
 var css = require('./styles/modaldialog-styles')
 
 module.exports = (title, content, ok, cancel, focusSelector, opts) => {
+  let agreed = true
   opts = opts || {}
   var container = document.querySelector(`.${css.modal}`)
   if (!container) {
@@ -29,12 +30,26 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
   modal.innerHTML = ''
   if (content) modal.appendChild(content)
 
+  setFocusOn('ok')
+
   show()
 
+  function setFocusOn (btn) {
+    var okDiv = document.getElementById('modal-footer-ok')
+    var cancelDiv = document.getElementById('modal-footer-cancel')
+    if (btn === 'ok') {
+      okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
+    } else {
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
+    }
+  }
+
   function okListener () {
     removeEventListener()
     hide()
-    if (ok && ok.fn) ok.fn()
+    if (ok && ok.fn && agreed) ok.fn()
   }
 
   function cancelListener () {
@@ -53,6 +68,14 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
     } else if (e.keyCode === 13) {
       e.preventDefault()
       okListener()
+    } else if (e.keyCode === 37) {
+      e.preventDefault()
+      agreed = true
+      setFocusOn('ok')
+    } else if (e.keyCode === 39) {
+      e.preventDefault()
+      agreed = false
+      setFocusOn('cancel')
     }
   }
 
@@ -104,7 +127,8 @@ function html (opts) {
       <div class="${css['modalBody']}"> -
       </div>
       <div class="${css['modalFooter']}">
-    <span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-primary">OK</span><span id="modal-footer-cancel"  class="${css['modalFooterCancel']} btn btn-sm btn-primary">Cancel</span>
+        <span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-light">OK</span>
+        <span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-light">Cancel</span>
       </div>
     </div>
   </div>`

src/app/ui/styles-guide/theme-chooser.js

@@ -3,19 +3,21 @@ var EventEmitter = require('events')
 
 // TODO : Put it somewhere else
 const themes = [
-  {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'},
+  {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
-  {name: 'materia', quality: 'light', url: 'https://bootswatch.com/4/materia/bootstrap.min.css'},
+  {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'},
-  {name: 'litera', quality: 'light', url: 'https://bootswatch.com/4/litera/bootstrap.min.css'},
+  {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'},
-  {name: 'cosmo', quality: 'light', url: 'https://bootswatch.com/4/cosmo/bootstrap.min.css'},
+  {name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'},
-  {name: 'flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
+  {name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/bootstrap.min.css'},
-  {name: 'lux', quality: 'light', url: 'https://bootswatch.com/4/lux/bootstrap.min.css'},
+  {name: 'Spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'},
-  {name: 'spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'},
+  {name: 'United', quality: 'light', url: 'https://bootswatch.com/4/united/bootstrap.min.css'},
-  {name: 'yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
+  {name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
-  {name: 'darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
+  {name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'},
-  {name: 'slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}
+  {name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
+  {name: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'},
+  {name: 'Superhero', quality: 'dark', url: 'https://bootswatch.com/4/superhero/bootstrap.min.css'}
 ]
 
-const defaultTheme = themes[0].name
+const defaultTheme = 'Superhero'
 
 module.exports = {
   event: new EventEmitter(),

src/app/ui/styles/modaldialog-styles.js

@@ -56,9 +56,20 @@ var css = csjs`
     animation-duration: 0.4s
   }
   .modalFooterOk {
+    background-color: var(--light);
+    color: var(--dark);
+    cursor: pointer;
+  }
+  .modalFooterOk:hover {
     cursor: pointer;
   }
   .modalFooterCancel {
+    background-color: var(--light);
+    color: var(--dark);
+    margin-left: 1em;
+    cursor: pointer;
+  }
+  .modalFooterCancel:hover {
     margin-left: 1em;
     cursor: pointer;
   }