added bootstrap classes instead of css styleing

src/app/ui/modaldialog.js

@@ -38,17 +38,11 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
     var okDiv = document.getElementById('modal-footer-ok')
     var cancelDiv = document.getElementById('modal-footer-cancel')
     if (btn === 'ok') {
-      agreed = true
-      okDiv.style.backgroundColor = 'var(--dark)'
-      okDiv.style.color = 'var(--light)'
-      cancelDiv.style.backgroundColor = 'var(--light)'
-      cancelDiv.style.color = 'var(--dark)'
+      okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
     } else {
-      agreed = false
-      okDiv.style.backgroundColor = 'var(--light)'
-      okDiv.style.color = 'var(--dark)'
-      cancelDiv.style.backgroundColor = 'var(--dark)'
-      cancelDiv.style.color = 'var(--light)'
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
     }
   }
 
@@ -76,9 +70,11 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
       okListener()
     } else if (e.keyCode === 37) {
       e.preventDefault()
+      agreed = true
       setFocusOn('ok')
     } else if (e.keyCode === 39) {
       e.preventDefault()
+      agreed = false
       setFocusOn('cancel')
     }
   }
@@ -131,9 +127,10 @@ function html (opts) {
       <div class="${css['modalBody']}"> -
       </div>
       <div class="${css['modalFooter']}">
-        <span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-dark autofocus tabindex='1'">OK</span>
-        <span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-light tabindex='0'">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/modaldialog-styles.js

@@ -61,8 +61,6 @@ var css = csjs`
     cursor: pointer;
   }
   .modalFooterOk:hover {
-    background-color: var(--dark);
-    color: var(--light);
     cursor: pointer;
   }
   .modalFooterCancel {
@@ -72,8 +70,6 @@ var css = csjs`
     cursor: pointer;
   }
   .modalFooterCancel:hover {
-    background-color: var(--dark);
-    color: var(--light);
     margin-left: 1em;
     cursor: pointer;
   }