From d54d340bef22eaf3a7ff6807a99f850929e33822 Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Wed, 25 Mar 2020 01:10:24 -0500
Subject: [PATCH] Adjusting new color scheme on invoice

---
 .../Views/Invoice/Checkout-Body.cshtml        |  2 +-
 .../wwwroot/checkout/css/normalizer.css       | 87 +++++++++----------
 .../wwwroot/checkout/img/logo-top.svg         | 21 +++++
 3 files changed, 65 insertions(+), 45 deletions(-)
 create mode 100644 BTCPayServer/wwwroot/checkout/img/logo-top.svg

diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index 8832deab4..9dc246832 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -9,7 +9,7 @@
             }
             else
             {
-                <img class="header__icon__img" src="~/img/logo-white.png" height="40">
+                <img class="header__icon__img" src="~/checkout/img/logo-top.svg" height="40">
             }
         </div>
         <div class="close-icon close-action" v-on:click="close">
diff --git a/BTCPayServer/wwwroot/checkout/css/normalizer.css b/BTCPayServer/wwwroot/checkout/css/normalizer.css
index e267f5b1e..89f7b859c 100644
--- a/BTCPayServer/wwwroot/checkout/css/normalizer.css
+++ b/BTCPayServer/wwwroot/checkout/css/normalizer.css
@@ -331,7 +331,7 @@ body {
     line-height: 1.5;
     background-color: #fff;
     margin: 0;
-    background: #E4E4E4;
+    background: #f8f9fa;
 }
 
 [tabindex="-1"]:focus {
@@ -8154,11 +8154,11 @@ a:hover {
 
 .action-button {
     color: #fff;
-    background-color: #329F80;
-    border-color: #329F80;
-    padding: 15px;
+    background-color: #51b13e;
+    border-color: #51b13e;
+    padding: 12px;
     word-break: normal;
-    font-size: 13.5px;
+    font-size: 13px;
     min-width: 185px;
     font-weight: 300;
     letter-spacing: .7px;
@@ -8170,21 +8170,21 @@ a:hover {
 
     .action-button:hover {
         color: #fff;
-        background-color: #24725B;
-        border-color: #24725B;
+        background-color: #418e32;
+        border-color: #418e32;
     }
 
     .action-button:focus, .action-button.focus {
         color: #fff;
-        background-color: #24725B;
-        border-color: #24725B;
+        background-color: #418e32;
+        border-color: #418e32;
     }
 
     .action-button:active, .action-button.active,
     .open > .action-button.dropdown-toggle {
         color: #fff;
-        background-color: #24725B;
-        border-color: #24725B;
+        background-color: #418e32;
+        border-color: #418e32;
         background-image: none;
     }
 
@@ -8193,8 +8193,8 @@ a:hover {
         .open > .action-button.dropdown-toggle:focus,
         .open > .action-button.dropdown-toggle.focus {
             color: #fff;
-            background-color: #24725B;
-            border-color: #24725B;
+            background-color: #418e32;
+            border-color: #418e32;
         }
 
     .action-button.disabled:focus, .action-button.disabled.focus, .action-button:disabled:focus, .action-button:disabled.focus {
@@ -8208,7 +8208,7 @@ a:hover {
     }
 
     .action-button:hover {
-        background-color: #24725B;
+        background-color: #418e32;
         border-color: rgba(28, 100, 222, 0);
         opacity: .95;
     }
@@ -8250,7 +8250,7 @@ strong {
 }
 
 .modal-content {
-    box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.85);
+    box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.5);
     background: #F5F5F7;
     z-index: 999999;
     border-radius: 0;
@@ -8284,8 +8284,8 @@ strong {
 }
 
 .top-header {
-    color: #fff;
-    background-color: #329F80;
+    color: #000;
+    background-color: #fff;
     font-weight: 500;
     letter-spacing: .5px;
 }
@@ -8307,27 +8307,37 @@ strong {
     position: relative;
     width: 100px;
     height: 50px;
-    margin-left: 10px;
-    margin-top: 10px;
+    margin: 10px auto 0px;
 }
 
 .top-header .timer-row {
-    background: #CEDC21;
+    background: #51b13e;
+    color: #fff;
     display: flex;
     align-items: center;
-    padding: 3px 14px;
+    padding: 5px 14px 3px;
+    font-size: 13px;
     position: relative;
     transition: background 1s ease;
 }
 
     .top-header .timer-row.expiring-soon {
-        background: #D3051E;
+        background: #ed4f32;
     }
 
         .top-header .timer-row.expiring-soon .timer-row__message {
             opacity: 1;
         }
 
+.top-header .timer-row__progress-bar {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.2);
+}
+
 .top-header .timer-row__spinner {
     display: flex;
     margin-left: -5px;
@@ -8337,7 +8347,7 @@ strong {
     .top-header .timer-row__spinner svg {
         width: 17px;
         height: 17px;
-        fill: #4681e2;
+        fill: #fff;
         animation: spin 0.5s linear infinite;
         margin-top: -2px;
         transition: fill .5s ease;
@@ -8359,24 +8369,13 @@ strong {
 
 .top-header .timer-row__message {
     flex-grow: 1;
-    font-size: 13.5px;
     z-index: 1;
 }
 
 .top-header .timer-row__time-left {
-    font-size: 13.5px;
     z-index: 1;
 }
 
-.top-header .timer-row__progress-bar {
-    position: absolute;
-    height: 100%;
-    width: 0%;
-    top: 0;
-    left: 0;
-    background: rgba(0, 0, 0, 0.2);
-}
-
 .subheader {
     padding: 1rem !important;
     font-size: 13px;
@@ -8542,7 +8541,7 @@ strong {
     position: absolute;
     height: 5px;
     width: 50%;
-    background: #329F80;
+    background: #51b13e;
     top: 0;
     right: 50%;
     transition: all .2s ease;
@@ -8805,7 +8804,7 @@ strong {
     transform: rotateZ(45deg);
     margin-left: -5px;
     top: -5px;
-    background: #329F80;
+    background: #51b13e;
     transform-style: preserve-3d;
     backface-visibility: hidden;
 }
@@ -9410,7 +9409,7 @@ strong {
 
     .btnGroupLnd button {
         display: table-cell;
-        border: solid 1px #24725B;
+        border: solid 1px #418e32;
         padding: 6px 9px;
         margin: 0px;
         font-size: 12px;
@@ -9425,14 +9424,14 @@ strong {
         }
 
         .btnGroupLnd button.active {
-            background-color: #329F80;
-            border-color: #329F80;
+            background-color: #51b13e;
+            border-color: #51b13e;
             color: #fff;
         }
 
             .btnGroupLnd button.active:hover {
-                background-color: #24725B;
-                border-color: #24725B;
+                background-color: #418e32;
+                border-color: #418e32;
                 color: #fff;
             }
 
@@ -11396,7 +11395,7 @@ low-fee-timeline {
     transform: rotateZ(45deg);
     margin-left: -5px;
     top: -5px;
-    background: #329F80;
+    background: #51b13e;
     transform-style: preserve-3d;
     backface-visibility: hidden;
     margin-bottom: -10px;
@@ -11547,9 +11546,9 @@ low-fee-timeline {
 
 
 .btn-link {
-    color: #329F80;
+    color: #51b13e;
 }
 
     .btn-link:hover {
-        color: #24725B;
+        color: #418e32;
     }
diff --git a/BTCPayServer/wwwroot/checkout/img/logo-top.svg b/BTCPayServer/wwwroot/checkout/img/logo-top.svg
new file mode 100644
index 000000000..01e5a7fa1
--- /dev/null
+++ b/BTCPayServer/wwwroot/checkout/img/logo-top.svg
@@ -0,0 +1,21 @@
+<svg width="111" height="48" viewBox="0 0 111 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M2.81211 48.0007C2.06629 48.0007 1.35102 47.7041 0.823647 47.1761C0.296274 46.6481 0 45.9321 0 45.1854V2.82062C0 2.07397 0.296274 1.3579 0.823647 0.829936C1.35102 0.301975 2.06629 0.00537109 2.81211 0.00537109C3.55792 0.00537109 4.27319 0.301975 4.80057 0.829936C5.32794 1.3579 5.62421 2.07397 5.62421 2.82062V45.1854C5.62421 45.9321 5.32794 46.6481 4.80057 47.1761C4.27319 47.7041 3.55792 48.0007 2.81211 48.0007V48.0007Z" fill="#CEDC21"/>
+<path d="M2.81669 48.0001C2.17885 47.9987 1.56046 47.7802 1.063 47.3805C0.565543 46.9809 0.21858 46.4238 0.0790592 45.8007C-0.0604611 45.1776 0.0157515 44.5255 0.295186 43.9515C0.574621 43.3775 1.04068 42.9157 1.61686 42.6418L18.5739 34.5855L1.14817 21.7385C0.838355 21.5244 0.574632 21.2502 0.372641 20.9322C0.170651 20.6142 0.0345062 20.2587 -0.0277224 19.887C-0.089951 19.5153 -0.0769956 19.1349 0.0103757 18.7683C0.0977471 18.4017 0.257754 18.0564 0.480912 17.7529C0.704071 17.4494 0.985837 17.1938 1.3095 17.0013C1.63317 16.8088 1.99214 16.6833 2.36515 16.6323C2.73815 16.5813 3.11758 16.6058 3.48095 16.7044C3.84432 16.8029 4.18423 16.9735 4.48052 17.206L25.6838 32.8447C26.0749 33.134 26.3845 33.5198 26.5821 33.9646C26.7798 34.4094 26.8589 34.8979 26.8117 35.3824C26.7645 35.867 26.5926 36.331 26.3127 36.7291C26.0329 37.1273 25.6547 37.446 25.2151 37.6541L4.02121 47.728C3.64533 47.9084 3.23355 48.0015 2.81669 48.0001V48.0001Z" fill="#51B13E"/>
+<path d="M2.8174 31.3474C2.22516 31.3474 1.64803 31.1603 1.16829 30.8126C0.688553 30.4649 0.330701 29.9745 0.145758 29.4113C-0.0391852 28.848 -0.0417771 28.2407 0.13835 27.6759C0.318478 27.1111 0.672129 26.6176 1.14888 26.2659L18.5652 13.4049L1.61757 5.36263C1.28336 5.20458 0.983517 4.98218 0.735164 4.70812C0.486811 4.43406 0.294808 4.11372 0.170119 3.76538C0.0454307 3.41704 -0.00950367 3.04752 0.00845496 2.67792C0.0264136 2.30833 0.116912 1.94589 0.274784 1.61131C0.432656 1.27673 0.654811 0.97655 0.928562 0.727919C1.20231 0.479288 1.5223 0.287072 1.87025 0.162243C2.21821 0.0374154 2.58731 -0.0175804 2.95649 0.000398262C3.32568 0.018377 3.68771 0.108979 4.02192 0.267027L25.2252 10.3409C25.6648 10.5491 26.043 10.8678 26.3228 11.2659C26.6027 11.664 26.7746 12.128 26.8218 12.6126C26.869 13.0971 26.7899 13.5856 26.5922 14.0304C26.3945 14.4752 26.085 14.861 25.6939 15.1503L4.48123 30.7984C3.99915 31.1541 3.41625 31.3464 2.8174 31.3474Z" fill="#CEDC21"/>
+<path d="M5.62427 18.0459V29.9544L13.6903 24.0048L5.62427 18.0459Z" fill="#1E7A44"/>
+<path d="M5.62421 13.0532H0V26.7776H5.62421V13.0532Z" fill="white"/>
+<path d="M5.62421 2.82062C5.62421 2.07397 5.32794 1.3579 4.80057 0.829936C4.27319 0.301975 3.55792 0.00537109 2.81211 0.00537109C2.06629 0.00537109 1.35102 0.301975 0.823647 0.829936C0.296274 1.3579 0 2.07397 0 2.82062V38.274H5.62421V2.82062Z" fill="#CEDC21"/>
+<path d="M42.8238 23.6621C44.6235 24.1735 45.6359 25.8064 45.6359 27.8521C45.6359 31.0474 43.6908 32.5442 41.0334 32.5442H34.9592V15.4697H40.3163C42.9222 15.4697 44.9422 16.7131 44.9422 19.9554C44.9422 21.5882 44.2673 23.0991 42.8238 23.6621ZM40.3397 23.2445C42.2613 23.2445 43.8221 22.5642 43.8221 19.9319C43.8221 17.2996 42.2145 16.5677 40.2647 16.5677H36.1028V23.2586L40.3397 23.2445ZM40.949 31.4134C42.8941 31.4134 44.4548 30.3906 44.4548 27.8521C44.4548 25.1213 42.6785 24.2955 40.4616 24.2955H36.1028V31.4134H40.949Z" fill="black"/>
+<path d="M57.0202 15.4697V16.5161H52.3334V32.5348H51.1898V16.5161H46.5029V15.4697H57.0202Z" fill="black"/>
+<path d="M65.0299 15.2256C67.931 15.2256 70.5604 16.6895 71.3899 20.1757H70.2932C69.5152 17.3229 67.2233 16.2719 65.0065 16.2719C60.9898 16.2719 58.8714 19.5564 58.8714 23.9998C58.8714 28.6919 60.9898 31.6807 65.0299 31.6807C67.4202 31.6807 69.5621 30.6062 70.3916 27.4578H71.4837C71.2279 28.9736 70.4342 30.3459 69.2485 31.3226C68.0628 32.2993 66.5648 32.8147 65.0299 32.774C60.479 32.774 57.7512 29.4098 57.7512 23.9951C57.7512 18.8103 60.6243 15.2256 65.0299 15.2256Z" fill="black"/>
+<path d="M80.0561 15.4697C83.0041 15.4697 85.146 17.3935 85.146 21.1002C85.146 24.6099 83.0041 26.7307 80.0561 26.7307H75.5755V32.5114H74.4553V15.4697H80.0561ZM80.0561 25.6328C82.2261 25.6328 84.0024 24.2252 84.0024 21.1002C84.0024 17.9753 82.2964 16.5442 80.0561 16.5442H75.5755V25.6328H80.0561Z" fill="black"/>
+<path d="M85.3428 32.5349V32.3894L92.134 15.4229H92.6496L99.3705 32.3894V32.5349H98.166L96.2444 27.6082H88.483L86.5614 32.5349H85.3428ZM92.373 17.4451L88.872 26.5431H95.8601L92.373 17.4451Z" fill="black"/>
+<path d="M109.475 15.4697H110.694V15.6386L105.384 25.4404V32.5348H104.217V25.4404L98.8831 15.6152V15.4697H100.125L102.436 19.8099L104.779 24.319L107.123 19.8099L109.475 15.4697Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<path d="M0 0H110.694V48H0V0Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>