From 65a867e82dbda9ef760b4e95677bf05b61239760 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 11:05:12 +0100
Subject: [PATCH 01/10] Fix css references on bootstrap kitchensink page

---
 BTCPayServer/wwwroot/_bootstrap_kitchensink.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/BTCPayServer/wwwroot/_bootstrap_kitchensink.html b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
index 6c2647a0a..fcb7ba071 100644
--- a/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
+++ b/BTCPayServer/wwwroot/_bootstrap_kitchensink.html
@@ -7,11 +7,11 @@
     <title>Bootstrap 4 Kitchen Sink</title>
 
     <!-- Bootstrap -->
-    <link href="css/bootstrap.css" rel="stylesheet" />
-    <link href="css/creative.css" rel="stylesheet" />
+    <link href="main/bootstrap/bootstrap.css" rel="stylesheet" />
+    <link href="main/bootstrap4-creativestart/creative.css" rel="stylesheet" />
     <script>
         const theme = window.location.search.replace('?theme=','') || 'classic';
-        document.write(`<link href="css/themes/${theme}.css" rel="stylesheet" />`)
+        document.write(`<link href="main/themes/${theme}.css" rel="stylesheet" />`)
     </script>
 
     <!-- BTCPay bundles -->

From 3501920956e080753a629481dc072510d48aa508 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 11:06:09 +0100
Subject: [PATCH 02/10] Set apart theme select from custom css file references

---
 BTCPayServer/Views/Server/Theme.cshtml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BTCPayServer/Views/Server/Theme.cshtml b/BTCPayServer/Views/Server/Theme.cshtml
index 1e0a1f2c4..1735a3f96 100644
--- a/BTCPayServer/Views/Server/Theme.cshtml
+++ b/BTCPayServer/Views/Server/Theme.cshtml
@@ -13,7 +13,7 @@
 <div class="row">
     <div class="col-lg-6">
         <form method="post">
-            <div class="form-group">
+            <div class="form-group mb-5">
                 <label asp-for="ThemeCssUri"></label>
                 <select id=themes asp-for="ThemeCssUri" class="form-control">
                     <option value="/main/themes/classic.css">Classic</option>

From 584528f903b4fc23635441f71b867696dfa79ae4 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 11:08:10 +0100
Subject: [PATCH 03/10] Improve pay button display on dark background

---
 BTCPayServer/Views/Stores/PayButton.cshtml | 28 ++++++++++++----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 138cee5b2..de8c9dca7 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -57,15 +57,15 @@
             <div class="form-group">
                 <label>Button Size</label>
                 <div style="vertical-align:top; font-size:12px; display:flex;">
-                    <button class="btn" style="width:146px;height:40px;margin-right:40px;"
+                    <button class="btn text-nowrap" style="width:146px;height:40px;margin-right:40px;"
                             v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
                         146 x 40 px
                     </button>
-                    <button class="btn btn-default" style="width:168px;height:46px;margin-right:40px;"
+                    <button class="btn text-nowrap btn-default" style="width:168px;height:46px;margin-right:40px;"
                             v-on:click="inputChanges($event, 1)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 1) }">
                         168 x 46 px
                     </button>
-                    <button class="btn btn-default" style="width:209px;height:57px;"
+                    <button class="btn text-nowrap btn-default" style="width:209px;height:57px;"
                             v-on:click="inputChanges($event, 2)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 2) }">
                         209 x 57 px
                     </button>
@@ -271,17 +271,20 @@
             cursor:pointer;
             font-size:25px;
             line-height: 25px;
-            background: rgba(0,0,0,.1);
+            background: #DFE0E1;
             height: 30px;
             width: 45px;
             border:none;
             border-radius: 60px;
-            margin: auto;
+            margin: auto 5px;
+            display: inline-flex;
+            justify-content: center;
         }
         .btcpay-form select {
             -moz-appearance: none;
             -webkit-appearance: none;
             appearance: none;
+            color: currentColor;
             background: transparent;
             border:1px solid transparent;
             display: block;
@@ -314,6 +317,7 @@
         input[type=range].btcpay-input-range {
             -webkit-appearance:none;
             width:100%;
+            background: transparent;
         }
         input[type=range].btcpay-input-range:focus {
             outline:0;
@@ -325,10 +329,10 @@
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
             background:#f3f3f3;
             border-radius:1px;
-            border:0 solid rgba(24,213,1,0)
+            border:0;
         }
         input[type=range].btcpay-input-range::-webkit-slider-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;
@@ -348,10 +352,10 @@
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
             background:#f3f3f3;
             border-radius:1px;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
         }
         input[type=range].btcpay-input-range::-moz-range-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;
@@ -369,18 +373,18 @@
         }
         input[type=range].btcpay-input-range::-ms-fill-lower {
             background:#e6e6e6;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
             border-radius:2px;
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
         }
         input[type=range].btcpay-input-range::-ms-fill-upper {
             background:#f3f3f3;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
             border-radius:2px;
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
         }
         input[type=range].btcpay-input-range::-ms-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;

From 9298eab30dbb42bc81b91fcc7984313e249265c2 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 11:23:52 +0100
Subject: [PATCH 04/10] Improve QR code display on dark background

---
 BTCPayServer/wwwroot/main/site.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index f6acbe881..0d079a188 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -116,3 +116,9 @@ a.nav-link:hover {
 .invoice-details a {
     word-break: break-word;
 }
+
+#qrCode {
+    padding: 10px;
+    background: white;
+    display: inline-block;
+}

From e1bf376f10ffe0f45ab966c28bcd9ee487992b16 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 11:24:27 +0100
Subject: [PATCH 05/10] Mark up alert-links for better display

---
 BTCPayServer/Views/Manage/Disable2fa.cshtml               | 2 +-
 BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml  | 6 +++---
 BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml | 2 +-
 BTCPayServer/Views/Shared/_Layout.cshtml                  | 2 +-
 BTCPayServer/Views/Stores/ListTokens.cshtml               | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/BTCPayServer/Views/Manage/Disable2fa.cshtml b/BTCPayServer/Views/Manage/Disable2fa.cshtml
index 52963342d..dd887ef5e 100644
--- a/BTCPayServer/Views/Manage/Disable2fa.cshtml
+++ b/BTCPayServer/Views/Manage/Disable2fa.cshtml
@@ -11,7 +11,7 @@
     </p>
     <p>
         Disabling 2FA does not change the keys used in authenticator apps. If you wish to change the key
-        used in an authenticator app you should <a asp-action="ResetAuthenticatorWarning">
+        used in an authenticator app you should <a asp-action="ResetAuthenticatorWarning" class="alert-link">
             reset your
             authenticator keys.
         </a>
diff --git a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml b/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
index ae9e8b7c3..e599b2b92 100644
--- a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
+++ b/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
@@ -9,21 +9,21 @@
     {
         <div class="alert alert-danger">
             <strong>You have no recovery codes left.</strong>
-            <p>You must <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
+            <p>You must <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft == 1)
     {
         <div class="alert alert-danger">
             <strong>You have 1 recovery code left.</strong>
-            <p>You can <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+            <p>You can <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft <= 3)
     {
         <div class="alert alert-warning">
             <strong>You have @Model.RecoveryCodesLeft recovery codes left.</strong>
-            <p>You should <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+            <p>You should <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
 
diff --git a/BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml b/BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml
index 3d62354e6..ac945d9c9 100644
--- a/BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml
+++ b/BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml
@@ -1,5 +1,5 @@
 <div class="alert alert-warning alert-dismissible">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
-    </button>The Email settings have not been configured on this server or store yet. Setting this field will not send emails until then. <a asp-action="Emails" asp-controller="Stores" asp-route-storeId="@Model">Configure store email settings</a>
+    </button>The Email settings have not been configured on this server or store yet. Setting this field will not send emails until then. <a asp-action="Emails" asp-controller="Stores" asp-route-storeId="@Model" class="alert-link">Configure store email settings</a>
 </div>
diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml
index 3fb0d0b59..9d6b88aa4 100644
--- a/BTCPayServer/Views/Shared/_Layout.cshtml
+++ b/BTCPayServer/Views/Shared/_Layout.cshtml
@@ -79,7 +79,7 @@
             </div>
             <div id="badUrl" class="alert alert-danger alert-dismissible" style="display:none; position:absolute; top:75px;" role="alert">
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <span>BTCPay is expecting you to access this website from <b>@(env.ExpectedProtocol)://@(env.ExpectedHost)/</b>. If you use a reverse proxy, please set the <b>X-Forwarded-Proto</b> header to <b id="browserScheme">@(env.ExpectedProtocol)</b> (<a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-deployment#btcpay-is-expecting-you-to-access-this-website-from" target="_blank">More information</a>)</span>
+                <span>BTCPay is expecting you to access this website from <b>@(env.ExpectedProtocol)://@(env.ExpectedHost)/</b>. If you use a reverse proxy, please set the <b>X-Forwarded-Proto</b> header to <b id="browserScheme">@(env.ExpectedProtocol)</b> (<a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-deployment#btcpay-is-expecting-you-to-access-this-website-from" target="_blank" class="alert-link">More information</a>)</span>
             </div>
             @if (!env.IsSecure)
             {
diff --git a/BTCPayServer/Views/Stores/ListTokens.cshtml b/BTCPayServer/Views/Stores/ListTokens.cshtml
index c580c17f0..e849e4ae9 100644
--- a/BTCPayServer/Views/Stores/ListTokens.cshtml
+++ b/BTCPayServer/Views/Stores/ListTokens.cshtml
@@ -9,7 +9,7 @@
 {
     <div class="alert alert-warning alert-dismissible" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <span>Warning: No wallet has been linked to your BTCPay Store. See <a href="https://docs.btcpayserver.org/getting-started/connectwallet" target="_blank">this link</a> for more information on how to connect your store and wallet.</span>
+        <span>Warning: No wallet has been linked to your BTCPay Store. See <a href="https://docs.btcpayserver.org/getting-started/connectwallet" target="_blank" class="alert-link">this link</a> for more information on how to connect your store and wallet.</span>
     </div>
 }
 <h4>Access token</h4>

From cb849ab23e0cf42930a40a69229896bfc8377a7a Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 13:05:00 +0100
Subject: [PATCH 06/10] Light/dark color fixes

fix
---
 .../wwwroot/main/bootstrap/bootstrap.css      | 56 ++++++++-----------
 BTCPayServer/wwwroot/main/themes/casa.css     | 12 ++--
 BTCPayServer/wwwroot/main/themes/classic.css  | 12 ++--
 3 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
index 930ce1a0a..b540aa0b1 100644
--- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
+++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
@@ -1122,27 +1122,15 @@ pre {
 .table-light,
 .table-light > th,
 .table-light > td {
-  color: var(--btcpay-color-light);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
 
-.table-light th,
-.table-light td,
-.table-light thead th,
-.table-light tbody + tbody {
-  border-color: var(--btcpay-color-light); }
-
 .table-dark,
 .table-dark > th,
 .table-dark > td {
-  color: var(--btcpay-color-dark);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
 
-.table-dark th,
-.table-dark td,
-.table-dark thead th,
-.table-dark tbody + tbody {
-  border-color: var(--btcpay-color-dark); }
-
 @media (max-width: 575.98px) {
   .table-responsive-sm {
     display: block;
@@ -1734,11 +1722,11 @@ fieldset:disabled a.btn {
       box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); }
 
 .btn-light {
-  color: var(--btcpay-color-light);
-  background-color: var(--btcpay-color-light-backdrop);
-  border-color: var(--btcpay-color-light-backdrop); }
+  color: var(--btcpay-color-dark);
+  background-color: var(--btcpay-color-light);
+  border-color: var(--btcpay-color-light); }
   .btn-light:hover {
-    color: var(--btcpay-color-neutral-900);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
   .btn-light:focus, .btn-light.focus {
@@ -1749,7 +1737,7 @@ fieldset:disabled a.btn {
     border-color: var(--btcpay-color-light-backdrop); }
   .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
   .show > .btn-light.dropdown-toggle {
-    color: var(--btcpay-color-neutral-900);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
     .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
@@ -1757,11 +1745,11 @@ fieldset:disabled a.btn {
       box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
 
 .btn-dark {
-  color: var(--btcpay-color-dark);
-  background-color: var(--btcpay-color-dark-backdrop);
-  border-color: var(--btcpay-color-dark-backdrop); }
+  color: var(--btcpay-color-light);
+  background-color: var(--btcpay-color-dark);
+  border-color: var(--btcpay-color-dark); }
   .btn-dark:hover {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
   .btn-dark:focus, .btn-dark.focus {
@@ -1772,7 +1760,7 @@ fieldset:disabled a.btn {
     border-color: var(--btcpay-color-dark-backdrop); }
   .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
   .show > .btn-dark.dropdown-toggle {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
     .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
@@ -3441,7 +3429,7 @@ input[type="button"].btn-block {
     box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); }
 
 .badge-light {
-  color: var(--btcpay-color-light);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
   a.badge-light:hover, a.badge-light:focus {
     color: var(--btcpay-color-light-accent); }
@@ -3450,7 +3438,7 @@ input[type="button"].btn-block {
     box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
 
 .badge-dark {
-  color: var(--btcpay-color-dark);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
   a.badge-dark:hover, a.badge-dark:focus {
     color: var(--btcpay-color-dark-accent); }
@@ -3812,24 +3800,24 @@ input[type="button"].btn-block {
     border-color: var(--btcpay-color-danger-accent); }
 
 .list-group-item-light {
-  color: var(--btcpay-color-light-accent);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
   .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
-    color: var(--btcpay-color-light-accent);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-backdrop); }
   .list-group-item-light.list-group-item-action.active {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
 
 .list-group-item-dark {
-  color: var(--btcpay-color-dark-accent);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
   .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
-    color: var(--btcpay-color-dark-accent);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-backdrop); }
   .list-group-item-dark.list-group-item-action.active {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
 
@@ -4500,7 +4488,7 @@ button.bg-danger:focus {
   background-color: var(--btcpay-color-danger-accent) !important; }
 
 .bg-light {
-  background-color: var(--btcpay-color-light) !important; }
+  background-color: var(--btcpay-color-light-backdrop) !important; }
 
 a.bg-light:hover, a.bg-light:focus,
 button.bg-light:hover,
@@ -4508,7 +4496,7 @@ button.bg-light:focus {
   background-color: var(--btcpay-color-light-accent) !important; }
 
 .bg-dark {
-  background-color: var(--btcpay-color-dark) !important; }
+  background-color: var(--btcpay-color-dark-backdrop) !important; }
 
 a.bg-dark:hover, a.bg-dark:focus,
 button.bg-dark:hover,
diff --git a/BTCPayServer/wwwroot/main/themes/casa.css b/BTCPayServer/wwwroot/main/themes/casa.css
index 07b7d604c..7d08d43d5 100644
--- a/BTCPayServer/wwwroot/main/themes/casa.css
+++ b/BTCPayServer/wwwroot/main/themes/casa.css
@@ -38,12 +38,12 @@
   --btcpay-color-danger:             #bd2130;
   --btcpay-color-danger-backdrop:    #EDA1B0;
   --btcpay-color-danger-accent:      #bd2130;
-  --btcpay-color-light:              var(--btcpay-color-neutral-600);
-  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-100);
-  --btcpay-color-light-accent:       var(--btcpay-color-neutral-500);
-  --btcpay-color-dark:               var(--btcpay-color-neutral-400);
-  --btcpay-color-dark-backdrop:      var(--btcpay-brand-darker);
-  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-400);
+  --btcpay-color-light:              var(--btcpay-color-neutral-200);
+  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-200);
+  --btcpay-color-light-accent:       var(--btcpay-color-neutral-100);
+  --btcpay-color-dark:               var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-900);
 
   /* Color definitions for specific sections - try to reuse colors defined above */
   --btcpay-bg-body: var(--btcpay-brand-darkest);
diff --git a/BTCPayServer/wwwroot/main/themes/classic.css b/BTCPayServer/wwwroot/main/themes/classic.css
index 342ede1d8..182dcc297 100644
--- a/BTCPayServer/wwwroot/main/themes/classic.css
+++ b/BTCPayServer/wwwroot/main/themes/classic.css
@@ -38,12 +38,12 @@
   --btcpay-color-danger:             #dc3545;
   --btcpay-color-danger-backdrop:    rgba(225, 83, 97, 0.25);
   --btcpay-color-danger-accent:      #bd2130;
-  --btcpay-color-light:              var(--btcpay-color-neutral-600);
-  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-100);
-  --btcpay-color-light-accent:       var(--btcpay-color-neutral-500);
-  --btcpay-color-dark:               var(--btcpay-color-neutral-400);
-  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-700);
-  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-400);
+  --btcpay-color-light:              var(--btcpay-color-neutral-200);
+  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-200);
+  --btcpay-color-light-accent:       var(--btcpay-color-neutral-100);
+  --btcpay-color-dark:               var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-900);
 
   /* Color definitions for specific sections - try to reuse colors defined above */
   --btcpay-bg-body: var(--btcpay-color-neutral-100);

From c8937f6d46a3b47eb43932fe0a5ed427ff254453 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 13:05:30 +0100
Subject: [PATCH 07/10] POS app theme fixes

---
 .../Views/AppsPublic/ViewPointOfSale.cshtml   | 87 +++++++++++--------
 BTCPayServer/wwwroot/cart/css/style.css       | 11 ++-
 2 files changed, 59 insertions(+), 39 deletions(-)

diff --git a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
index 490c35f53..c4ceb99b0 100644
--- a/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
+++ b/BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml
@@ -44,23 +44,34 @@
             grid-gap: .5rem;
         }
 
-            .card-deck .card:only-of-type {
-                max-width: 320px;
-                margin: auto;
-            }
+        .card-deck .card:only-of-type {
+            max-width: 320px;
+            margin: auto;
+        }
 
-            .js-cart-item-count {
-                -moz-appearance:textfield;
-                margin: 0;
-                text-align: right;
-            }
+        .js-cart-item-minus .fa,
+        .js-cart-item-plus .fa {
+            background: #fff;
+            border-radius: 50%;
+            width: 17px;
+            height: 17px;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+        }
 
-            .js-cart-item-count::-webkit-inner-spin-button,
-            .js-cart-item-count::-webkit-outer-spin-button {
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                appearance: none;
-            }
+        .js-cart-item-count {
+            -moz-appearance:textfield;
+            margin: 0;
+            text-align: right;
+        }
+
+        .js-cart-item-count::-webkit-inner-spin-button,
+        .js-cart-item-count::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+        }
     </style>
     @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
     {
@@ -151,8 +162,8 @@
     <script id="template-cart-tip" type="text/template">
         @if (Model.EnableTips)
         {
-            <tr class="h5">
-                <th colspan="5" class="border-top-0 pt-4">@Model.CustomTipText</th>
+            <tr>
+                <th colspan="5" class="border-top-0 pt-4 h5">@Model.CustomTipText</th>
             </tr>
             <tr>
                 <th colspan="5" class="border-0">
@@ -183,9 +194,9 @@
     </script>
 
     <script id="template-cart-total" type="text/template">
-        <tr class="h4">
-            <th colspan="1" class="pb-4">Total</th>
-            <th colspan="4" class="pb-4 text-right">
+        <tr>
+            <th colspan="1" class="pb-4 h4">Total</th>
+            <th colspan="4" class="pb-4 h4 text-right">
                 <span class="js-cart-total">{total}</span>
             </th>
         </tr>
@@ -211,36 +222,36 @@
                     <div class="modal-body p-0">
                         <table id="js-cart-summary" class="table m-0">
                             <tbody class="my-3">
-                                <tr class="h5">
-                                    <td colspan="2" class="border-top-0">Summary</td>
+                                <tr>
+                                    <td colspan="2" class="border-top-0 h5">Summary</td>
                                 </tr>
-                                <tr class="h6">
-                                    <td class="border-0 pb-0">Total products</td>
-                                    <td align="right" class="border-0 pb-0">
+                                <tr>
+                                    <td class="border-0 pb-0 h6">Total products</td>
+                                    <td align="right" class="border-0 pb-0 h6">
                                         <span class="js-cart-summary-products text-nowrap"></span>
                                     </td>
                                 </tr>
                                 @if (Model.ShowDiscount)
                                 {
-                                    <tr class="h6">
-                                        <td class="border-0 pb-y">Discount</td>
-                                        <td align="right" class="border-0 pb-y">
+                                    <tr>
+                                        <td class="border-0 pb-y h6">Discount</td>
+                                        <td align="right" class="border-0 pb-y h6">
                                             <span class="js-cart-summary-discount text-nowrap"></span>
                                         </td>
                                     </tr>
                                 }
                                 @if (Model.EnableTips)
                                 {
-                                    <tr class="h6">
-                                        <td class="border-top-0 pt-0">Tip</td>
-                                        <td align="right" class="border-top-0 pt-0">
+                                    <tr>
+                                        <td class="border-top-0 pt-0 h6">Tip</td>
+                                        <td align="right" class="border-top-0 pt-0 h6">
                                             <span class="js-cart-summary-tip text-nowrap"></span>
                                         </td>
                                     </tr>
                                 }
-                                <tr class="h3 table-light">
-                                    <td>Total</td>
-                                    <td align="right">
+                                <tr>
+                                    <td class="h3 table-light">Total</td>
+                                    <td class="h3 table-light text-right">
                                         <span class="js-cart-summary-total text-nowrap"></span>
                                     </td>
                                 </tr>
@@ -355,8 +366,8 @@
                     <a class="js-cart-destroy btn btn-danger pull-right" href="#" style="display: none;">Empty cart <i class="fa fa-trash fa-fw fa-lg"></i></a>
                 </div>
 
-                <table id="js-cart-list" class="table table-responsive bg-light text-secondary mt-0 mb-0">
-                    <thead class="thead-light">
+                <table id="js-cart-list" class="table table-responsive table-light mt-0 mb-0">
+                    <thead>
                         <tr>
                             <th colspan="3" width="55%">Product</th>
                             <th class="text-center" width="20%">
@@ -370,8 +381,8 @@
                     <tbody></tbody>
                 </table>
 
-                <table id="js-cart-extra" class="table bg-light mt-0 mb-0">
-                    <thead class="thead-light"></thead>
+                <table id="js-cart-extra" class="table table-light mt-0 mb-0">
+                    <thead></thead>
                 </table>
 
                 <button id="js-cart-confirm" data-toggle="modal" data-target="#cartModal" class="btn btn-primary btn-lg btn-block mb-3 p-3" disabled="disabled" type="submit">
diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index fc291f45f..591334bf9 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -72,10 +72,19 @@
     transition: all 0.3s;
     -webkit-overflow-scrolling: touch;
 }
+
 #sidebar .js-cart {
     display: none;
 }
 
+#sidebar #js-cart-list,
+#sidebar #js-cart-extra {
+    border-radius: 0;
+}
+
+#sidebar #js-cart-extra .h4 {
+    font-size: 1.5rem;
+}
 
 #sidebar.active {
     margin-right: -400px;
@@ -138,4 +147,4 @@
     #content.active {
         width: 100%;
     }
-}
\ No newline at end of file
+}

From 984aa2912a94455f99074e040e7dcdd9769afa3e Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 13:56:03 +0100
Subject: [PATCH 08/10] Fix script order in main bundle

creative.js relies on ScrollReveal being present on initialization, so it has to be included after scrollreveal.min.js
---
 BTCPayServer/bundleconfig.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/BTCPayServer/bundleconfig.json b/BTCPayServer/bundleconfig.json
index 0f1ea05ae..9da088d34 100644
--- a/BTCPayServer/bundleconfig.json
+++ b/BTCPayServer/bundleconfig.json
@@ -15,13 +15,13 @@
         "inputFiles": [
             "wwwroot/vendor/jquery/jquery.js",
             "wwwroot/vendor/popper/popper.js",
-            "wwwroot/main/bootstrap/bootstrap.js",
-            "wwwroot/main/bootstrap4-creativestart/creative.js",
             "wwwroot/vendor/jquery-easing/jquery.easing.js",
             "wwwroot/vendor/scrollreveal/scrollreveal.min.js",
             "wwwroot/vendor/magnific-popup/jquery.magnific-popup.js",
             "wwwroot/vendor/moment/moment.min.js",
             "wwwroot/vendor/flatpickr/flatpickr.js",
+            "wwwroot/main/bootstrap/bootstrap.js",
+            "wwwroot/main/bootstrap4-creativestart/creative.js",
             "wwwroot/main/site.js"
         ]
     },

From f0a9d209a5a74ac2096632182fb27816d42a9706 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 14:01:18 +0100
Subject: [PATCH 09/10] Fix bootstrap reference in cart bundle

---
 BTCPayServer/bundleconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BTCPayServer/bundleconfig.json b/BTCPayServer/bundleconfig.json
index 9da088d34..e71cd9c6f 100644
--- a/BTCPayServer/bundleconfig.json
+++ b/BTCPayServer/bundleconfig.json
@@ -70,7 +70,7 @@
         "outputFileName": "wwwroot/bundles/cart-bundle.min.js",
         "inputFiles": [
             "wwwroot/vendor/jquery/jquery.js",
-            "wwwroot/vendor/bootstrap/bootstrap.js",
+            "wwwroot/main/bootstrap/bootstrap.js",
             "wwwroot/cart/js/cart.js",
             "wwwroot/cart/js/cart.jquery.js"
         ]

From b452f1d125f82c2806ec02356af6baf7ee9ed00e Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Fri, 15 Nov 2019 15:14:43 +0100
Subject: [PATCH 10/10] Limit custom table styles to small tables

Otherwise it overrides to many styles so that i.e. font-sizes with th .h*-classes do not work anymore.
---
 BTCPayServer/wwwroot/cart/css/style.css      |  4 ----
 BTCPayServer/wwwroot/main/themes/classic.css | 13 ++++++-------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/BTCPayServer/wwwroot/cart/css/style.css b/BTCPayServer/wwwroot/cart/css/style.css
index 591334bf9..daf8c085e 100644
--- a/BTCPayServer/wwwroot/cart/css/style.css
+++ b/BTCPayServer/wwwroot/cart/css/style.css
@@ -82,10 +82,6 @@
     border-radius: 0;
 }
 
-#sidebar #js-cart-extra .h4 {
-    font-size: 1.5rem;
-}
-
 #sidebar.active {
     margin-right: -400px;
 }
diff --git a/BTCPayServer/wwwroot/main/themes/classic.css b/BTCPayServer/wwwroot/main/themes/classic.css
index 182dcc297..471c7a57b 100644
--- a/BTCPayServer/wwwroot/main/themes/classic.css
+++ b/BTCPayServer/wwwroot/main/themes/classic.css
@@ -72,7 +72,7 @@ html {
   background-color: var(--btcpay-bg-dark) !important;
 }
 
-.table {
+.table-sm {
   margin: 1.5rem 0;
   background: var(--btcpay-color-white);
   border: 1px solid var(--btcpay-color-neutral-300);
@@ -81,25 +81,24 @@ html {
   border-spacing: 0px !important;
 }
 
-.table thead > tr {
+.table-sm thead > tr {
   height: 40px;
 }
 
-.table thead th {
+.table-sm thead th {
   border-bottom: none;
   border-top: none;
   font-size: 1.0rem;
 }
 
-.table th,
-.table td {
-  display: table-cell;
+.table-sm th,
+.table-sm td {
   padding: 8px 12px;
   vertical-align: middle;
   font-size: 0.92rem;
 }
 
-.table tbody tr:hover {
+.table-sm tbody tr:hover {
     background-color: var(--btcpay-color-neutral-100);
 }