From 203494e8095a2b390c8e04a1c69a7819d2d232bf Mon Sep 17 00:00:00 2001
From: rockstardev <rockstardev@users.noreply.github.com>
Date: Tue, 17 Jul 2018 00:14:56 -0500
Subject: [PATCH] Tweaking CSS styles and display of payment method selection

---
 .../Controllers/InvoiceController.UI.cs         |  2 +-
 BTCPayServer/Views/Invoice/Checkout-Body.cshtml | 13 ++++++++-----
 .../wwwroot/checkout/css/vex-extrastyles.css    | 17 +++++++++++++++++
 BTCPayServer/wwwroot/checkout/js/vexdialog.js   |  4 ++--
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/Controllers/InvoiceController.UI.cs b/BTCPayServer/Controllers/InvoiceController.UI.cs
index 2d462bba2..65083fe5f 100644
--- a/BTCPayServer/Controllers/InvoiceController.UI.cs
+++ b/BTCPayServer/Controllers/InvoiceController.UI.cs
@@ -307,7 +307,7 @@ namespace BTCPayServer.Controllers
         private string GetDisplayName(PaymentMethodId paymentMethodId, BTCPayNetwork network)
         {
             return paymentMethodId.PaymentType == PaymentTypes.BTCLike ?
-                network.DisplayName : network.DisplayName + " - Lightning Network";
+                network.DisplayName : network.DisplayName + " - Lightning";
         }
 
         private string GetImage(PaymentMethodId paymentMethodId, BTCPayNetwork network)
diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
index e6356bfea..143f3db48 100644
--- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
+++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml
@@ -42,17 +42,20 @@
                 </div>
             </div>
             <div class="single-item-order__right">
-                <div class="payment__currencies" style="font-size: 14px; cursor:pointer;" onclick="bringupDialog()">
-                    <img style='height:32px;' v-bind:src="srvModel.cryptoImage" />
-                    <span style="color: #000000; border-bottom: 1px dotted gray;">{{srvModel.paymentMethodName}}</span>
+                <div class="payment__currencies" onclick="openPaymentMethodDialog()">
+                    <img v-bind:src="srvModel.cryptoImage" />
+                    <span>
+                        {{srvModel.paymentMethodName}}
+                        ({{srvModel.cryptoCode}})
+                    </span>
                 </div>
                 <div id="vexPopupDialog">
                     <ul class="vexmenu">
                     @foreach (var crypto in Model.AvailableCryptos)
                     {
                         <li class="vexmenuitem">
-                            <a href="@crypto.Link" onclick="return closeVexChangeCurrency('@crypto.PaymentMethodId');">
-                                <img style="height:24px;" alt="@crypto.PaymentMethodId" src="@crypto.CryptoImage" />
+                            <a href="@crypto.Link" onclick="return closePaymentMethodDialog('@crypto.PaymentMethodId');">
+                                <img alt="@crypto.PaymentMethodName" src="@crypto.CryptoImage" />
                                 @crypto.PaymentMethodName
                                 <span>@crypto.CryptoCode</span>
                             </a>
diff --git a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
index d7cc5dd80..fa6cf2446 100644
--- a/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
+++ b/BTCPayServer/wwwroot/checkout/css/vex-extrastyles.css
@@ -24,6 +24,10 @@
             color: gray;
         }
 
+        .vexmenuitem a img {
+            height: 24px;
+        }
+
 .vexmenuitem:hover {
     background-color: #eee;
 }
@@ -35,3 +39,16 @@
 #vexPopupDialog {
     display: none;
 }
+
+.payment__currencies {
+    font-size: 14px;
+    cursor: pointer;
+}
+
+    .payment__currencies img {
+        height: 32px;
+    }
+
+    .payment__currencies span {
+        border-bottom: 1px dotted gray;
+    }
diff --git a/BTCPayServer/wwwroot/checkout/js/vexdialog.js b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
index ef4c98b10..f54ff04d8 100644
--- a/BTCPayServer/wwwroot/checkout/js/vexdialog.js
+++ b/BTCPayServer/wwwroot/checkout/js/vexdialog.js
@@ -1,11 +1,11 @@
-function bringupDialog() {
+function openPaymentMethodDialog() {
     var content = $("#vexPopupDialog").html();
     vex.open({
         unsafeContent: content
     });
 }
 
-function closeVexChangeCurrency(currencyId) {
+function closePaymentMethodDialog(currencyId) {
     vex.closeAll();
     return changeCurrency(currencyId);
 }