Merge pull request #1788 from ethereum/bootstrap_icon_plus

src/app.js

@@ -91,7 +91,7 @@ var css = csjs`
     left               : 0;
     overflow           : hidden;
     width              : 50px;
-    border-right       : 1px solid var(--primary);
+    /* border-right       : 1px solid var(--primary); */
   }
   .swappanel          {
     display            : flex;
@@ -187,7 +187,7 @@ class App extends ApiFactory {
     if (self._view.el) return self._view.el
     // not resizable
     self._view.iconpanel = yo`
-      <div id="icon-panel" class="${css.iconpanel} bg-primary">
+      <div id="icon-panel" class="${css.iconpanel} bg-light">
       ${''}
       </div>
     `

src/app/components/swap-panel-component.js

@@ -36,7 +36,7 @@ class SwapPanelComponent {
       this.contents[moduleName].style.display = 'block'
       this.currentNode = moduleName
       var api = this.store.getOne(moduleName)
-      this.header.innerHTML = api.profile ? api.profile.displayName : ' - '
+      this.header.querySelector('h6').innerHTML = api.profile ? api.profile.displayName : ' - '
       return
     }
   }
@@ -59,7 +59,7 @@ class SwapPanelComponent {
       <div id='plugins' class=${css.plugins} >
       </div>
     `
-    this.header = yo`<header class="navbar navbar-dark bg-dark text-warning"><h2 class="navbar-brand"></h2> </header>`
+    this.header = yo`<header class="${css.swapitHeader}"><h6 class="${css.swapitTitle}"></h6></header>`
     if (!this.opt.displayHeader) this.header.style.display = 'none'
 
     return yo`<div class=${css.pluginsContainer}>
@@ -77,7 +77,7 @@ const css = csjs`
   }
   .plugItIn       {
     display        : none;
-    height         : 100%;
+    height: calc(100% - 50px);
   }
   .plugItIn > div {
     overflow-y     : auto;
@@ -91,4 +91,12 @@ const css = csjs`
     height: 100%;
     overflow-y: hidden;
   }
+  .swapitTitle {
+    text-transform: uppercase;
+  }
+  .swapitHeader {
+    height: 50px;
+    padding-top: 16px;
+    padding-left: 27px;
+  }
 `

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

@@ -3,21 +3,21 @@ var EventEmitter = require('events')
 
 // TODO : Put it somewhere else
 const themes = [
+  {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/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: 'Pulse', quality: 'light', url: 'https://bootswatch.com/4/pulse/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'}
+  {name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'}
 ]
 
-const defaultTheme = 'Superhero'
+const defaultTheme = 'Cerulean'
 
 module.exports = {
   event: new EventEmitter(),

src/lib/panels-resize.js

@@ -10,7 +10,7 @@ const css = csjs`
     bottom            : 0;
     cursor            : col-resize;
     z-index           : 999;
-    border-right      : 2px solid var(--primary);
+    /* border-right      : 2px solid var(--primary); */
   }
   .ghostbar           {
     width             : 3px;