updated themes

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" style="color: var(--dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
-            <i class="m-1 fa fa-minus" style="color: var(--dark)" onclick=${decrease} aria-hidden="true" title="decrease 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" 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

@@ -5,36 +5,29 @@ var csjs = require('csjs-inject')
 var css = csjs`
     .container
     {
-        display: none;
-        position: fixed;
-        border: 1px solid var(--primary);
-        width:150px; 
-        border-radius: 2px;
-        z-index: 1000;
+      display: none;
+      position: fixed;
+      width:100px;
+      border-radius: 2px;
+      z-index: 1000;
+      box-shadow: 0 0 4px var(--dark);
     }
-    
     .liitem
     {
-        padding: 3px;
-        padding-left: 10px;
-        cursor: pointer;
+      padding: 2px;
+      padding-left: 6px;
+      cursor: pointer;
+      color: var(--text-dark);
+      background-color: var(--light)
     }
-    
-    #menuitems
+    .liitem:hover
     {
-        list-style: none;
-        margin: 0px;
-        margin-top: 4px;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-bottom: 3px;
-        color: var(--dark);
+      background-color:  var(--secondary);
     }
-
-    #menuitems :hover
+    #menuitems
     {
-        background-color: var(--secondary);
-        border-radius: 2px;
+      list-style: none;
+      margin: 0px;
     }
 `
 
@@ -53,7 +46,7 @@ module.exports = (event, items) => {
     current.onclick = () => { hide(null, true); items[item]() }
     return current
   })
-  var container = yo`<div class="${css.container} bg-ligh"><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/styles-guide/theme-chooser.js

@@ -3,16 +3,18 @@ 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: 'materia', quality: 'light', url: 'https://bootswatch.com/4/materia/bootstrap.min.css'},
-  {name: 'litera', quality: 'light', url: 'https://bootswatch.com/4/litera/bootstrap.min.css'},
-  {name: 'cosmo', quality: 'light', url: 'https://bootswatch.com/4/cosmo/bootstrap.min.css'},
-  {name: 'flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/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: '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: 'slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}
+  {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
+  {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'},
+  {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'},
+  {name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'},
+  {name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/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: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/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