From 70883c08699b8d33476e05292709e205be3dffa9 Mon Sep 17 00:00:00 2001
From: Nicolas Dorier <nicolas.dorier@gmail.com>
Date: Wed, 26 Jan 2022 14:54:29 +0900
Subject: [PATCH] Simple Wallet View Inconsistencies (#3355)

---
 BTCPayServer/Views/Shared/ShowQR.cshtml       |  6 ++---
 .../ShowLightningNodeInfo.cshtml              | 23 ++++++++-----------
 .../Views/UIStores/WalletSettings.cshtml      | 17 +++++++-------
 .../Views/UIWallets/WalletPSBT.cshtml         |  6 ++---
 .../Views/UIWallets/WalletRescan.cshtml       |  6 ++---
 .../Views/UIWallets/WalletSend.cshtml         | 10 ++++----
 .../Views/UIWallets/WalletTransactions.cshtml |  4 ++--
 7 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/BTCPayServer/Views/Shared/ShowQR.cshtml b/BTCPayServer/Views/Shared/ShowQR.cshtml
index 6040e058b..41a554985 100644
--- a/BTCPayServer/Views/Shared/ShowQR.cshtml
+++ b/BTCPayServer/Views/Shared/ShowQR.cshtml
@@ -9,13 +9,13 @@
                     </button>
                 </div>
                 <div class="modal-body ">
-                    <div class="qr-container text-center" style="min-height: 256px;">
+                    <div class="qr-container text-center mt-3" style="min-height: 256px;">
                         <qrcode v-bind:value="currentFragment" :options="{ width: 256,height:256, margin: 1, color: {dark:'#000', light:'#f5f5f7'} }">
                         </qrcode>
                     </div>
-                    <ul class="nav justify-content-center bg-light text-dark mt-2" v-if="allowedModes.length > 1">
+                    <ul class="nav justify-content-center mt-4 mb-3" v-if="allowedModes.length > 1">
                         <li class="nav-item" v-for="allowedMode in allowedModes">
-                            <a class="nav-link"
+                            <a class="btcpay-pill"
                                v-bind:class="{ 'active': allowedMode == currentMode}" href="#" v-on:click="currentMode = allowedMode">
                                 {{allowedMode}}
                             </a>
diff --git a/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml b/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml
index 244d000f9..b7c64c54e 100644
--- a/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml
+++ b/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml
@@ -28,32 +28,27 @@
             <div class="col-md-8 col-sm-12 col-lg-6 mx-auto my-auto">
                 <div class="card border-0">
                     <div class="card-body p-4">
-                        <h1 class="card-title text-center">@Model.StoreName</h1>
-                        <h2 class="card-subtitle text-center text-secondary my-3">
+                        <h1 class="card-title text-center mt-3">@Model.StoreName</h1>
+                        <h2 class="h3 card-subtitle text-center text-secondary my-3">
                             <span>@Model.CryptoCode</span>
                             Lightning Node
                         </h2>
-                        <h3 class="card-title text-center">
+                        <h4 class="text-center">
+                            <span class="me-1 btcpay-status btcpay-status--@(Model.Available ? "enabled" : "disabled")"></span>
                             <span>
                                 @(Model.Available ? "Online" : "Unavailable")
                             </span>
-                            <small class="text-@(Model.Available ? "success" : "danger")" >
-                                <span class="fa fa-circle"></span>
-                            </small>
-                        </h3>
+                        </h4>
                         @if (Model.Available)
                         {
-                            @if (Model.NodeInfo.Length > 0)
+                            @if (Model.NodeInfo.Length > 1)
                             {
-                                <ul class="nav justify-content-center mt-4" id="nodeInfo-tab" role="tablist">
+                                <ul class="nav nav-pills justify-content-center mt-4" id="nodeInfo-tab" role="tablist">
                                     @for (int i = 0; i < Model.NodeInfo.Length; i++)
                                     {
                                         var nodeInfo = Model.NodeInfo[i];
                                         <li class="nav-item" role="presentation">
-                                            <button class="btcpay-pill @(i == 0 ? "active" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
-                                        </li>
-                                        <li class="nav-item" role="presentation">
-                                            <button class="btcpay-pill @(i == 0 ? "" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
+                                            <button class="nav-link w-100px @(i == 0 ? "active" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
                                         </li>
                                     }
                                 </ul>
@@ -63,7 +58,7 @@
                                 {
                                     var nodeInfo = Model.NodeInfo[i];
                                     <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="nodeInfo-@nodeInfo.Id" role="tabpanel" aria-labelledby="nodeInfo-tab-@nodeInfo.Id">
-                                        <div class="qr-container my-3">
+                                        <div class="qr-container my-4">
                                             <img alt="@Model.CryptoCode" class="qr-icon" src="@Model.CryptoImage"/>
                                             <vc:qr-code data="@nodeInfo.ToString()"/>
                                         </div>
diff --git a/BTCPayServer/Views/UIStores/WalletSettings.cshtml b/BTCPayServer/Views/UIStores/WalletSettings.cshtml
index d9b74ae0c..fc69fc188 100644
--- a/BTCPayServer/Views/UIStores/WalletSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/WalletSettings.cshtml
@@ -16,14 +16,13 @@
 <div class="row">
     <div class="col-lg-10 col-xl-9">
         <div class="mb-5">
-            <h4 class="mb-3">@ViewData["Title"]</h4>
+            <h3 class="mb-3">@ViewData["Title"]</h3>
             <div class="mb-3 d-flex align-items-center">
-                <span class="me-2">Type:</span>
                 <span title="@Model.Source" data-bs-toggle="tooltip" class="me-3">@(Model.IsHotWallet ? "Hot wallet" : "Watch-only wallet")</span>
                 
                 <form method="get" asp-action="DeleteWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" class="d-inline">
                     <div class="dropdown">
-                        <button type="button" class="btn btn-outline-secondary dropdown-toggle py-1 px-3" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <button class="btn btn-secondary dropdown-toggle mb-1" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Actions
                         </button>
                         <div class="dropdown-menu" aria-labelledby="ActionsDropdownToggle">
@@ -92,11 +91,11 @@
                 }
                 @for (var i = 0; i < Model.AccountKeys.Count; i++)
                 {
-                    <h5 class="mt-5">Account key @i</h5>
+                    <h4 class="mt-5 mb-3">Account Key @i</h4>
                     <div class="form-group">
                         <div class="d-flex align-items-center justify-content-between">
                             <label asp-for="@Model.AccountKeys[i].AccountKey" class="form-label"></label>
-                            <button type="button" class="d-inline-block ms-2 btn text-secondary btn-link p-0 mb-2" data-account-key="@i" title="">
+                            <button type="button" class="d-inline-block ms-2 btn text-primary btn-link p-0 mb-2" data-account-key="@i" title="">
                                 <span class="fa fa-qrcode"></span> Show export QR
                             </button>
                         </div>
@@ -123,10 +122,10 @@
                         </div>
                     }
                 }
-                <button type="submit" class="btn btn-primary" id="SaveWalletSettings">Save Wallet Settings</button>
+                <button type="submit" class="btn btn-primary mt-2" id="SaveWalletSettings">Save Wallet Settings</button>
             </form>
             
-            <h4 class="mt-5 mb-3">Payment</h4>
+            <h3 class="mt-5 mb-4">Payment</h3>
             <form method="post" asp-action="UpdatePaymentSettings" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode">
                 @if (Model.CanUsePayJoin)
                 {
@@ -173,12 +172,12 @@
                     <label asp-for="ShowRecommendedFee" class="form-check-label"></label>
                     <p class="form-text text-muted mb-0">Fee will be shown for BTC and LTC onchain payments only.</p>
                 </div>
-                <div class="form-group mt-2 mb-4">
+                <div class="form-group mt-2">
                     <label asp-for="RecommendedFeeBlockTarget" class="form-label"></label>
                     <input asp-for="RecommendedFeeBlockTarget" class="form-control" min="1" style="width:8ch" />
                     <span asp-validation-for="RecommendedFeeBlockTarget" class="text-danger"></span>
                 </div>
-                <button type="submit" class="btn btn-primary" id="SavePaymentSettings">Save Payment Settings</button>
+                <button type="submit" class="btn btn-primary mt-2" id="SavePaymentSettings">Save Payment Settings</button>
             </form>
         </div>
     </div>
diff --git a/BTCPayServer/Views/UIWallets/WalletPSBT.cshtml b/BTCPayServer/Views/UIWallets/WalletPSBT.cshtml
index b9ea09898..90f46d2d9 100644
--- a/BTCPayServer/Views/UIWallets/WalletPSBT.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletPSBT.cshtml
@@ -23,7 +23,7 @@
     </script>
 }
 
-<h4 class="mb-3">@ViewData["Title"]</h4>
+<h3 class="mb-3">@ViewData["Title"]</h3>
 
 <div class="row">
     <div class="col-lg-10">
@@ -53,8 +53,8 @@
                 <input asp-for="UploadedPSBTFile" type="file" class="form-control">
             </div>
             <div class="d-flex">
-                <button type="submit" name="command" value="decode" class="btn btn-primary" id="Decode">Decode PSBT</button>
-                <button type="button" id="scanqrcode" class="btn btn-secondary only-for-js ms-2" data-bs-toggle="modal" data-bs-target="#scanModal">Scan wallet QR with camera</button>
+                <button type="submit" name="command" value="decode" class="btn btn-primary mt-2" id="Decode">Decode PSBT</button>
+                <button type="button" id="scanqrcode" class="btn btn-secondary only-for-js ms-3 mt-2" data-bs-toggle="modal" data-bs-target="#scanModal">Scan wallet QR with camera</button>
             </div>
         </form>
 
diff --git a/BTCPayServer/Views/UIWallets/WalletRescan.cshtml b/BTCPayServer/Views/UIWallets/WalletRescan.cshtml
index 69508e560..19ae38cf9 100644
--- a/BTCPayServer/Views/UIWallets/WalletRescan.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletRescan.cshtml
@@ -2,10 +2,10 @@
 @{
     var walletId = Context.GetRouteValue("walletId").ToString();
     Layout = "../Shared/_NavLayout.cshtml";
-    ViewData.SetActivePage(WalletsNavPages.Rescan, "Rescan wallet", walletId);
+    ViewData.SetActivePage(WalletsNavPages.Rescan, "Rescan Wallet", walletId);
 }
 
-<h4 class="mb-3">@ViewData["Title"]</h4>
+<h3 class="mb-3">@ViewData["Title"]</h3>
 
 @if (!Model.Ok)
 {
@@ -85,7 +85,7 @@ else if (!Model.Progress.HasValue)
                     <label asp-for="BatchSize" class="form-label"></label>
                     <input asp-for="BatchSize" class="form-control" type="number" step="1000" style="max-width:14ch;" />
                 </div>
-                <button type="submit" class="btn btn-primary">Start scan</button>
+                <button type="submit" class="btn btn-primary mt-2">Start scan</button>
             </form>
         </div>
     </div>
diff --git a/BTCPayServer/Views/UIWallets/WalletSend.cshtml b/BTCPayServer/Views/UIWallets/WalletSend.cshtml
index ec1910d9f..24c97f5dc 100644
--- a/BTCPayServer/Views/UIWallets/WalletSend.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletSend.cshtml
@@ -30,7 +30,7 @@
 
 <div class="row">
     <div class="col-lg-8 col-xl-7 @(!Model.InputSelection && Model.Outputs.Count == 1 ? "transaction-output-form" : "")">
-        <h4 class="mb-3">@ViewData["Title"]</h4>
+        <h3 class="mb-3">@ViewData["Title"]</h3>
         <form method="post" asp-action="WalletSend" asp-route-walletId="@walletId">
             <input type="hidden" asp-for="InputSelection" />
             <input type="hidden" asp-for="FiatDivisibility" />
@@ -151,7 +151,7 @@
                 <span id="FeeRate-Error" class="text-danger"></span>
                 @if (Model.RecommendedSatoshiPerByte.Any())
                 {
-                    <div class="text-start mt-2 d-flex align-items-sm-center flex-column flex-sm-row">
+                    <div class="text-start mt-4 d-flex align-items-sm-center flex-column flex-sm-row">
                         <span class="text-secondary me-3">
                             Confirm in the next
                         </span>
@@ -181,7 +181,7 @@
             }
 
             <div class="my-4">
-                <button class="btn btn-link text-secondary p-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
+                <button class="btn btn-link text-primary p-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
                     Advanced settings
                 </button>
                 <div id="AdvancedSettings" class="collapse">
@@ -231,8 +231,8 @@
             </div>
             <div class="form-group d-flex mt-2">
                 <button type="submit" id="SignTransaction" name="command" value="@(Model.NBXSeedAvailable ? "nbx-seed" : "sign")" class="btn btn-primary">Sign transaction</button>
-                <button type="button" id="bip21parse" class="ms-2 btn btn-secondary" title="Paste BIP21/Address"><i class="fa fa-paste"></i></button>
-                <button type="button" id="scanqrcode" class="ms-2 btn btn-secondary only-for-js" data-bs-toggle="modal" data-bs-target="#scanModal" title="Scan BIP21/Address with camera"><i class="fa fa-camera"></i></button>
+                <button type="button" id="bip21parse" class="ms-3 btn btn-secondary" title="Paste BIP21/Address"><i class="fa fa-paste"></i></button>
+                <button type="button" id="scanqrcode" class="ms-3 btn btn-secondary only-for-js" data-bs-toggle="modal" data-bs-target="#scanModal" title="Scan BIP21/Address with camera"><i class="fa fa-camera"></i></button>
             </div>
         </form>
     </div>
diff --git a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
index 0b134529f..bafdf3de5 100644
--- a/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletTransactions.cshtml
@@ -72,10 +72,10 @@
 }
 
 <div class="d-flex align-items-center justify-content-between mb-3">
-    <h4 class="mb-0">@ViewData["Title"]</h4>
+    <h3 class="mb-0">@ViewData["Title"]</h3>
     <form method="post" asp-action="WalletActions" asp-route-walletId="@Context.GetRouteValue("walletId")">
         <div class="dropdown">
-            <button class="btn btn-outline-secondary dropdown-toggle py-1 px-3" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <button class="btn btn-secondary dropdown-toggle mb-1" type="button" id="ActionsDropdownToggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 Actions
             </button>
             <div class="dropdown-menu" aria-labelledby="ActionsDropdownToggle">