From b3c88a976b2dc72bd0ee1e39e85796389a519002 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Fri, 22 Mar 2019 16:31:40 +0100
Subject: [PATCH 1/3] bootstrap_swapit_header

---
 src/app/components/swap-panel-component.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/swap-panel-component.js b/src/app/components/swap-panel-component.js
index 485a9027a1..47e0ebb359 100644
--- a/src/app/components/swap-panel-component.js
+++ b/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} bg-dark"><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;
+  }
 `

From 12bf04f916a5a4db39d17f96f4d4ac338344551b Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Wed, 27 Mar 2019 14:44:17 +0100
Subject: [PATCH 2/3] updating bootstrap cleanup

---
 src/app.js                                 | 2 +-
 src/app/components/swap-panel-component.js | 2 +-
 src/app/ui/styles-guide/theme-chooser.js   | 7 ++-----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/app.js b/src/app.js
index 097d9e79c4..0d6de8e3a9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -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>
     `
diff --git a/src/app/components/swap-panel-component.js b/src/app/components/swap-panel-component.js
index 47e0ebb359..47c433bbb0 100644
--- a/src/app/components/swap-panel-component.js
+++ b/src/app/components/swap-panel-component.js
@@ -59,7 +59,7 @@ class SwapPanelComponent {
       <div id='plugins' class=${css.plugins} >
       </div>
     `
-    this.header = yo`<header class="${css.swapitHeader} bg-dark"><h6 class="${css.swapitTitle}"></h6></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}>
diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js
index dfc2d021f6..b5cc126985 100644
--- a/src/app/ui/styles-guide/theme-chooser.js
+++ b/src/app/ui/styles-guide/theme-chooser.js
@@ -3,18 +3,15 @@ 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: '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: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}
 ]
 
 const defaultTheme = 'Superhero'

From c2771dae911f08a858201e2954ce3c5774a2a5a7 Mon Sep 17 00:00:00 2001
From: Rob Stupay <rob@stupay.com>
Date: Tue, 2 Apr 2019 14:43:48 +0200
Subject: [PATCH 3/3] take out borders around swap panel & update theme list

---
 src/app.js                               | 2 +-
 src/app/ui/styles-guide/theme-chooser.js | 7 +++++--
 src/lib/panels-resize.js                 | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app.js b/src/app.js
index 0d6de8e3a9..b3a4a55070 100644
--- a/src/app.js
+++ b/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;
diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js
index b5cc126985..bcc530a420 100644
--- a/src/app/ui/styles-guide/theme-chooser.js
+++ b/src/app/ui/styles-guide/theme-chooser.js
@@ -6,15 +6,18 @@ 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: '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: '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: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/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(),
diff --git a/src/lib/panels-resize.js b/src/lib/panels-resize.js
index b5b7c177db..27f8679371 100644
--- a/src/lib/panels-resize.js
+++ b/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;