added filter invert to images

package-lock.json

@@ -17777,7 +17777,7 @@
       "requires": {
         "underscore": "1.8.3",
         "web3-core-helpers": "1.0.0-beta.27",
-        "websocket": "git://github.com/frozeman/WebSocket-Node.git#browserifyCompatible"
+        "websocket": "git://github.com/frozeman/WebSocket-Node.git#6c72925e3f8aaaea8dc8450f97627e85263999f2"
       },
       "dependencies": {
         "debug": {

src/app/panels/tab-proxy.js

@@ -1,6 +1,7 @@
 var yo = require('yo-yo')
 var $ = require('jquery')
 const EventEmitter = require('events')
+const globalRegistry = require('../../global/registry')
 
 require('remix-tabs')
 
@@ -14,6 +15,11 @@ export class TabProxy {
     this._view = {}
     this._handlers = {}
 
+    globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
+    // update invert for all icons
+      this.updateImgStyles()
+    })
+
     fileManager.events.on('fileRemoved', (name) => {
       this.removeTab(name)
     })
@@ -78,6 +84,14 @@ export class TabProxy {
       }
     })
   }
+  updateImgStyles () {
+    const images = this._view.filetabs.getElementsByClassName('image')
+    if (images.length !== 0) {
+      for (let element of images) {
+        globalRegistry.get('themeModule').api.fixInvert(element)
+      };
+    }
+  }
 
   switchTab (tabName) {
     if (this._handlers[tabName]) {
@@ -130,6 +144,7 @@ export class TabProxy {
       icon,
       tooltip: name
     })
+    this.updateImgStyles()
     this._handlers[name] = { switchTo, close }
   }
 

src/app/tabs/compile-tab.js

@@ -168,12 +168,8 @@ class CompileTab extends ViewPlugin {
       }
     })
 
-    globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
-      const invert = theme.quality === 'dark' ? 1 : 0
-      const img = document.getElementById('swarmLogo')
-      if (img) {
-        img.style.filter = `invert(${invert})`
-      }
+    globalRegistry.get('themeModule').api.events.on('themeChanged', () => {
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('swarmLogo'))
     })
 
     // Run the compiler instead of trying to save the website

src/app/tabs/settings-tab.js

@@ -68,7 +68,7 @@ module.exports = class SettingsTab extends ViewPlugin {
     if (self._view.el) return self._view.el
 
     // Gist settings
-    var gistAccessToken = yo`<input id="gistaccesstoken" type="password" class="form-control mb-2 ${css.inline}" placeholder="Token">`
+    var gistAccessToken = yo`<input id="gistaccesstoken" type="password" class="border form-control mb-2 ${css.inline}" placeholder="Token">`
     var token = this.config.get('settings/gist-access-token')
     if (token) gistAccessToken.value = token
     var gistAddToken = yo`<input class="${css.savegisttoken} btn btn-sm btn-primary" id="savegisttoken" onclick=${() => { this.config.set('settings/gist-access-token', gistAccessToken.value); tooltip('Access token saved') }} value="Save" type="button">`

src/app/tabs/styles/settings-tab-styles.js

@@ -85,7 +85,7 @@ const css = csjs`
   }
   .inline {
     display: inline;
-    width: 50%;
+    width: 40%;
   }
 `
 

src/app/tabs/theme-module.js

@@ -24,7 +24,7 @@ const themes = [
 const profile = {
   name: 'theme',
   events: ['themeChanged'],
-  methods: ['switchTheme', 'getThemes', 'currentTheme'],
+  methods: ['switchTheme', 'getThemes', 'currentTheme', 'fixInvert'],
   version: packageJson.version,
   kind: 'theme'
 }
@@ -84,4 +84,15 @@ export class ThemeModule extends Plugin {
     this.emit('themeChanged', nextTheme)
     this.events.emit('themeChanged', nextTheme)
   }
+
+  /**
+   * fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes
+   * @param {element} [image] - the dom element which invert should be fixed to increase visibility
+   */
+  fixInvert (image) {
+    const invert = this.currentTheme().quality === 'dark' ? 1 : 0
+    if (image) {
+      image.style.filter = `invert(${invert})`
+    }
+  }
 }

src/app/ui/landing-page/landing-page.js

@@ -163,12 +163,8 @@ export class LandingPage extends ViewPlugin {
       this.verticalIcons.select('fileExplorers')
     }
 
-    globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
-      const invert = theme.quality === 'dark' ? 1 : 0
-      const img = document.getElementById('remixLogo')
-      if (img) {
-        img.style.filter = `invert(${invert})`
-      }
+    globalRegistry.get('themeModule').api.events.on('themeChanged', () => {
+      globalRegistry.get('themeModule').api.fixInvert(document.getElementById('remixLogo'))
     })
 
     let switchToPreviousVersion = () => {

src/app/ui/persmission-handler.js

@@ -3,6 +3,7 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const addTooltip = require('./tooltip')
 const modalDialog = require('./modaldialog')
+const globalRegistry = require('../../global/registry')
 
 const css = csjs`
 .permission h4 {
@@ -140,20 +141,26 @@ export class PermissionHandler {
         : delete this.permissions[to.name][from.name]
     }
     const rememberSwitch = remember
-      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="custom-control-input" id="remember" data-id="permissionHandlerRememberChecked">`
-      : yo`<input type="checkbox" onchange="${switchMode}" class="custom-control-input" id="remember" data-id="permissionHandlerRememberUnchecked">`
+      ? yo`<input type="checkbox" onchange="${switchMode}" checkbox class="form-check-input" id="remember" data-id="permissionHandlerRememberChecked">`
+      : yo`<input type="checkbox" onchange="${switchMode}" class="form-check-input" id="remember" data-id="permissionHandlerRememberUnchecked">`
     const message = remember
       ? `"${fromName}" has changed and would like to access "${toName}"`
       : `"${fromName}" would like to access "${toName}"`
 
-    return yo`
-    <section class="${css.permission}">
-      <article class="${css.images}">
+    const pluginsImages = yo`
+      <article id="permissionModalImages" class="${css.images}">
         <img src="${from.icon}" />
-        <i class="fas fa-arrow-right"></i>
+        <i class="text-warning fas fa-arrow-right"></i>
         <img src="${to.icon}" />
       </article>
-      
+
+    `
+
+    globalRegistry.get('themeModule').api.fixInvert(pluginsImages)
+
+    return yo`
+    <section class="${css.permission}">
+      ${pluginsImages}
       <article>
         <h4 data-id="permissionHandlerMessage">${message} :</h4>
         <h6>${fromName}</h6>
@@ -163,9 +170,9 @@ export class PermissionHandler {
       </article>
 
       <article class="${css.remember}">
-        <div class="custom-control custom-checkbox">
+        <div class="form-check">
           ${rememberSwitch}
-          <label class="custom-control-label" for="remember" data-id="permissionHandlerRememberChoice">Remember this choice</label>
+          <label class="form-check-label" for="remember" data-id="permissionHandlerRememberChoice">Remember this choice</label>
         </div>
         <button class="btn btn-sm" onclick="${_ => this.clear()}">Reset all Permissions</button>
       </article>
@@ -173,4 +180,12 @@ export class PermissionHandler {
     </section>
     `
   }
+
+  listenOnThemeChange (images) {
+    // update invert for Plugin icons
+    if (!globalRegistry.get('themeModule')) return
+    globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
+      globalRegistry.get('themeModule').api.fixInvert(images)
+    })
+  }
 }