css change

src/app/editor/sourceHighlighter.js

@@ -42,21 +42,20 @@ class SourceHighlighter {
         this._deps.fileManager.switchFile(this.source)
       }
 
+      const backgoundClass = style || 'bg-info'
       const css = csjs`
         .highlightcode {
           position:absolute;
           z-index:20;
-          background-color: ${style || 'var(--text-info)'};
         }
         .highlightcode_fullLine {
           position:absolute;
           z-index:20;
-          background-color: ${style || 'var(--text-info)'};
           opacity: 0.5;
         }
         `
 
-      this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode)
+      this.statementMarker = this._deps.editor.addMarker(lineColumnPos, this.source, css.highlightcode + ' ' + backgoundClass)
       this._deps.editor.scrollToLine(lineColumnPos.start.line, true, true, function () {})
 
       if (lineColumnPos.start.line === lineColumnPos.end.line) {

src/app/execution/txLogger.js

@@ -81,7 +81,7 @@ var css = csjs`
     border-collapse: collapse;
     font-size: 10px;
     color: var(--primary);
-    border: 1px solid var(--secondary);
+    border: 1px solid var(--primary);
   }
   #txTable {
     margin-top: 1%;
@@ -107,11 +107,6 @@ var css = csjs`
     margin-left: auto;
   }
   .debug {
-    width: 55px;
-    min-width: 55px;
-    min-height: 20px;
-    max-height: 20px;
-    font-size: 11px;
   }
   .debug:hover {
     opacity: 0.8;
@@ -236,7 +231,7 @@ function renderKnownTransaction (self, data) {
         ${checkTxStatus(data.receipt, txType)}
         ${context(self, {from, to, data})}
         <div class=${css.buttons}>
-          <button class="${css.debug} btn" onclick=${(e) => debug(e, data, self)}>Debug</div>
+          <button class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
         <i class="${css.arrow} fa fa-angle-down"></i>
       </div>

src/app/ui/modaldialog.js

@@ -82,7 +82,7 @@ module.exports = (title, content, ok, cancel, focusSelector) => {
 function html () {
   return yo`<div id="modal-dialog" class="${css.modal}">
   <div id="modal-background" class="${css['modalBackground']}"> </div>
-  <div class="${css['modalContent']} bg-warning text-info">
+  <div class="${css['modalContent']} bg-light text-secondary">
     <div class="${css['modalHeader']}">
     <h2></h2>
     <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>

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

@@ -1,6 +1,3 @@
-var styleGuideLight = require('./style-guide')
-var styleGuideDark = require('./styleGuideDark')
-var styleGuideClean = require('./styleGuideClean')
 var Storage = require('remix-lib').Storage
 var EventEmitter = require('events')
 
@@ -25,20 +22,16 @@ module.exports = {
       if (themeStorage.get('theme') === 'dark') {
         document.getElementById('theme-link').setAttribute('href', themes['dark'])
         document.documentElement.style.setProperty('--theme', 'dark')
-        return styleGuideDark()
       } else if (themeStorage.get('theme') === 'clean') {
         document.getElementById('theme-link').setAttribute('href', themes['clean'])
         document.documentElement.style.setProperty('--theme', 'light')
-        return styleGuideClean()
       } else {
         document.getElementById('theme-link').setAttribute('href', themes['light'])
         document.documentElement.style.setProperty('--theme', 'light')
-        return styleGuideLight()
       }
     } else {
       document.getElementById('theme-link').setAttribute('href', themes['light'])
       document.documentElement.style.setProperty('--theme', 'light')
-      return styleGuideLight()
     }
   },
 
@@ -53,14 +46,5 @@ module.exports = {
       document.documentElement.style.setProperty('--theme', themeVariable[theme])
       this.event.emit('switchTheme', themeVariable[theme])
     }
-    // if (theme === 'dark') {
-    //   return styleGuideDark()
-    // } else if (theme === 'light') {
-    //   return styleGuideLight()
-    // } else if (theme === 'clean') {
-    //   return styleGuideClean()
-    // } else {
-    //   return styleGuideLight()
-    // }
   }
 }

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

@@ -22,10 +22,10 @@ var css = csjs`
     line-height: 1.5em;
   }
   .modalBody em {
-    color: var(--text-info)
+    color: var(--text-secondary);
   }
   .modalBody a {
-    color: color: var(--text-info)
+    color: var(--text-secondary);
   }
   .modalFooter {
     display: flex;

src/app/ui/tooltip.js

@@ -2,7 +2,7 @@ var yo = require('yo-yo')
 var css = require('./styles/tooltip-styles')
 
 module.exports = function addTooltip (tooltipText) {
-  var tooltip = yo`<div class="${css.tooltip} bg-primary">${tooltipText}</div>`
+  var tooltip = yo`<div class="${css.tooltip} bg-secondary">${tooltipText}</div>`
   document.body.appendChild(tooltip)
   setTimeout(function () {
     document.body.removeChild(tooltip)