From e584004b23e784452401d62710abc7d0d05a790d Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Sun, 13 Oct 2019 20:07:41 -0700
Subject: [PATCH] Make UI checkboxes inline with their labels

address #1089
---
 .../Views/Apps/UpdateCrowdfund.cshtml         | 74 ++++++++++---------
 .../Views/Apps/UpdatePointOfSale.cshtml       | 38 +++++-----
 BTCPayServer/Views/Server/Policies.cshtml     | 38 +++++-----
 BTCPayServer/Views/Server/User.cshtml         |  6 +-
 BTCPayServer/Views/Shared/EmailsBody.cshtml   |  6 +-
 .../Views/Stores/AddDerivationScheme.cshtml   |  6 +-
 .../Views/Stores/CheckoutExperience.cshtml    | 25 ++++---
 BTCPayServer/Views/Stores/UpdateStore.cshtml  |  8 +-
 BTCPayServer/Views/Wallets/WalletSend.cshtml  | 28 ++++---
 9 files changed, 127 insertions(+), 102 deletions(-)

diff --git a/BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml b/BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml
index 31b9efc11..21d1f12aa 100644
--- a/BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml
+++ b/BTCPayServer/Views/Apps/UpdateCrowdfund.cshtml
@@ -153,34 +153,36 @@
                         <span asp-validation-for="NotificationEmail" class="text-danger"></span>
                     </div>
                     <div class="form-group">
-                        <label asp-for="Enabled"></label>
-                        <input asp-for="Enabled" type="checkbox" class="form-check" />
-                        <span asp-validation-for="Enabled" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="SortPerksByPopularity"></label>
-                        <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check" />
-                        <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="DisplayPerksRanking"></label>
-                        <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check" />
-                        <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="EnforceTargetAmount"></label>
-                        <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check" />
-                        <span asp-validation-for="EnforceTargetAmount" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="UseAllStoreInvoices"></label>
-                        <input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check" />
-                        <span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="SoundsEnabled"></label>
-                        <input asp-for="SoundsEnabled" type="checkbox" class="form-check" />
-                        <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
+                        <div class="form-check">
+                            <input asp-for="Enabled" type="checkbox" class="form-check-input" />
+                            <label asp-for="Enabled" class="form-check-label"></label>
+                            <span asp-validation-for="Enabled" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check-input" />
+                            <label asp-for="SortPerksByPopularity" class="form-check-label"></label>
+                            <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check-input" />
+                            <label asp-for="DisplayPerksRanking" class="form-check-label"></label>
+                            <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check-input" />
+                            <label asp-for="EnforceTargetAmount" class="form-check-label"></label>
+                            <span asp-validation-for="EnforceTargetAmount" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check-input" />
+                            <label asp-for="UseAllStoreInvoices" class="form-check-label"></label>
+                            <span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="SoundsEnabled" type="checkbox" class="form-check-input" />
+                            <label asp-for="SoundsEnabled" class="form-check-label"></label>
+                            <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
+                        </div>
                     </div>
                     <div class="form-group">
                         <label asp-for="Sounds"></label>
@@ -188,9 +190,11 @@
                         <span asp-validation-for="Sounds" class="text-danger"></span>
                     </div>
                     <div class="form-group">
-                        <label asp-for="AnimationsEnabled"></label>
-                        <input asp-for="AnimationsEnabled" type="checkbox" class="form-check" />
-                        <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
+                        <div class="form-check">
+                            <input asp-for="AnimationsEnabled" type="checkbox" class="form-check-input" />
+                            <label asp-for="AnimationsEnabled" class="form-check-label"></label>
+                            <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
+                        </div>
                     </div>
                     <div class="form-group">
                         <label asp-for="AnimationColors"></label>
@@ -198,9 +202,11 @@
                         <span asp-validation-for="AnimationColors" class="text-danger"></span>
                     </div>
                     <div class="form-group">
-                        <label asp-for="DisqusEnabled"></label>
-                        <input asp-for="DisqusEnabled" type="checkbox" class="form-check" />
-                        <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
+                        <div class="form-check">
+                            <input asp-for="DisqusEnabled" type="checkbox" class="form-check-input" />
+                            <label asp-for="DisqusEnabled" class="form-check-label"></label>
+                            <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
+                        </div>
                     </div>
                     <div class="form-group">
                         <label asp-for="DisqusShortname" class="control-label"></label>
diff --git a/BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml b/BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml
index 615feec5e..03d92ecab 100644
--- a/BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml
+++ b/BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml
@@ -54,24 +54,26 @@
                         <span asp-validation-for="Currency" class="text-danger"></span>
                     </div>
                     <div class="form-group">
-                        <label asp-for="EnableShoppingCart"></label>
-                        <input asp-for="EnableShoppingCart" type="checkbox" class="form-check" />
-                        <span asp-validation-for="EnableShoppingCart" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="ShowCustomAmount"></label>
-                        <input asp-for="ShowCustomAmount" type="checkbox" class="form-check" />
-                        <span asp-validation-for="ShowCustomAmount" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="ShowDiscount"></label>
-                        <input asp-for="ShowDiscount" type="checkbox" class="form-check" />
-                        <span asp-validation-for="ShowDiscount" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="EnableTips"></label>
-                        <input asp-for="EnableTips" type="checkbox" class="form-check" />
-                        <span asp-validation-for="EnableTips" class="text-danger"></span>
+                        <div class="form-check">
+                            <input asp-for="EnableShoppingCart" type="checkbox" class="form-check-input" />
+                            <label asp-for="EnableShoppingCart" class="form-check-label"></label>
+                            <span asp-validation-for="EnableShoppingCart" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="ShowCustomAmount" type="checkbox" class="form-check-input" />
+                            <label asp-for="ShowCustomAmount" class="form-check-label"></label>
+                            <span asp-validation-for="ShowCustomAmount" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="ShowDiscount" type="checkbox" class="form-check-input" />
+                            <label asp-for="ShowDiscount" class="form-check-label"></label>
+                            <span asp-validation-for="ShowDiscount" class="text-danger"></span>
+                        </div>
+                        <div class="form-check">
+                            <input asp-for="EnableTips" type="checkbox" class="form-check-input" />
+                            <label asp-for="EnableTips" class="form-check-label"></label>
+                            <span asp-validation-for="EnableTips" class="text-danger"></span>
+                        </div>
                     </div>
                     <div class="form-group">
                         <label asp-for="ButtonText" class="control-label"></label>*
diff --git a/BTCPayServer/Views/Server/Policies.cshtml b/BTCPayServer/Views/Server/Policies.cshtml
index bcbf55add..2750d4975 100644
--- a/BTCPayServer/Views/Server/Policies.cshtml
+++ b/BTCPayServer/Views/Server/Policies.cshtml
@@ -12,24 +12,26 @@
 
 <form method="post">
     <div class="form-group">
-        <label asp-for="RequiresConfirmedEmail"></label>
-        <input asp-for="RequiresConfirmedEmail" type="checkbox" class="form-check-inline"/>
-        <span asp-validation-for="RequiresConfirmedEmail" class="text-danger"></span>
-    </div>
-    <div class="form-group">
-        <label asp-for="LockSubscription"></label>
-        <input asp-for="LockSubscription" type="checkbox" class="form-check-inline"/>
-        <span asp-validation-for="LockSubscription" class="text-danger"></span>
-    </div>
-    <div class="form-group">
-        <label asp-for="DiscourageSearchEngines"></label>
-        <input asp-for="DiscourageSearchEngines" type="checkbox" class="form-check-inline"/>
-        <span asp-validation-for="DiscourageSearchEngines" class="text-danger"></span>
-    </div>
-    <div class="form-group">
-        <label asp-for="AllowLightningInternalNodeForAll"></label>
-        <input asp-for="AllowLightningInternalNodeForAll" type="checkbox" class="form-check-inline"/>
-        <span asp-validation-for="AllowLightningInternalNodeForAll" class="text-danger"></span>
+        <div class="form-check">
+            <input asp-for="RequiresConfirmedEmail" type="checkbox" class="form-check-input"/>
+            <label asp-for="RequiresConfirmedEmail" class="form-check-label"></label>
+            <span asp-validation-for="RequiresConfirmedEmail" class="text-danger"></span>
+        </div>
+        <div class="form-check">
+            <input asp-for="LockSubscription" type="checkbox" class="form-check-input"/>
+            <label asp-for="LockSubscription" class="form-check-label"></label>
+            <span asp-validation-for="LockSubscription" class="text-danger"></span>
+        </div>
+        <div class="form-check">
+            <input asp-for="DiscourageSearchEngines" type="checkbox" class="form-check-input"/>
+            <label asp-for="DiscourageSearchEngines" class="form-check-label"></label>
+            <span asp-validation-for="DiscourageSearchEngines" class="text-danger"></span>
+        </div>
+        <div class="form-check">
+            <input asp-for="AllowLightningInternalNodeForAll" type="checkbox" class="form-check-input"/>
+            <label asp-for="AllowLightningInternalNodeForAll" class="form-check-label"></label>
+            <span asp-validation-for="AllowLightningInternalNodeForAll" class="text-danger"></span>
+        </div>
     </div>
     <div class="form-group">
         <label asp-for="RootAppId"></label>
diff --git a/BTCPayServer/Views/Server/User.cshtml b/BTCPayServer/Views/Server/User.cshtml
index 93039fe77..341d93170 100644
--- a/BTCPayServer/Views/Server/User.cshtml
+++ b/BTCPayServer/Views/Server/User.cshtml
@@ -12,8 +12,10 @@
     <div class="col-md-8">
         <form method="post">
             <div class="form-group">
-                <label asp-for="IsAdmin"></label>
-                <input asp-for="IsAdmin" type="checkbox" class="form-check" />
+                <div class="form-check">
+                    <input asp-for="IsAdmin" type="checkbox" class="form-check-input" />
+                    <label asp-for="IsAdmin" class="form-check-label"></label>
+                </div>
             </div>
             <button name="command" type="submit" class="btn btn-primary" value="Save">Save</button>
         </form>
diff --git a/BTCPayServer/Views/Shared/EmailsBody.cshtml b/BTCPayServer/Views/Shared/EmailsBody.cshtml
index 27bff08ef..25d538474 100644
--- a/BTCPayServer/Views/Shared/EmailsBody.cshtml
+++ b/BTCPayServer/Views/Shared/EmailsBody.cshtml
@@ -96,8 +96,10 @@ $(document).ready(function(){
                 <span asp-validation-for="Settings.Password" class="text-danger"></span>
             </div>
             <div class="form-group">
-                <label asp-for="Settings.EnableSSL"></label>
-                <input asp-for="Settings.EnableSSL" type="checkbox" class="form-check-inline"/>
+                <div class="form-check">
+                    <input asp-for="Settings.EnableSSL" type="checkbox" class="form-check-input"/>
+                    <label asp-for="Settings.EnableSSL" class="form-check-label"></label>
+                </div>
             </div>
             <div class="form-group">
                 <label asp-for="TestEmail"></label>
diff --git a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
index eb60c9129..75a6698a4 100644
--- a/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
+++ b/BTCPayServer/Views/Stores/AddDerivationScheme.cshtml
@@ -109,8 +109,10 @@
                     <input asp-for="KeyPath" class="form-control" readonly />
                 </div>
                 <div class="form-group">
-                    <label asp-for="Enabled"></label>
-                    <input asp-for="Enabled" type="checkbox" class="form-check" />
+                    <div class="form-check">
+                        <input asp-for="Enabled" type="checkbox" class="form-check-input" />
+                        <label asp-for="Enabled" class="form-check-label"></label>
+                    </div>
                 </div>
                 <button name="command" type="submit" class="btn btn-primary" value="save" id="Continue">Continue</button>
             }
diff --git a/BTCPayServer/Views/Stores/CheckoutExperience.cshtml b/BTCPayServer/Views/Stores/CheckoutExperience.cshtml
index dabba8df8..1710cc172 100644
--- a/BTCPayServer/Views/Stores/CheckoutExperience.cshtml
+++ b/BTCPayServer/Views/Stores/CheckoutExperience.cshtml
@@ -40,8 +40,10 @@
                 <select asp-for="DefaultLang" asp-items="Model.Languages" class="form-control"></select>
             </div>
             <div class="form-group">
-                <label asp-for="RequiresRefundEmail"></label>
-                <input asp-for="RequiresRefundEmail" type="checkbox" class="form-check" />
+                <div class="form-check">
+                    <input asp-for="RequiresRefundEmail" type="checkbox" class="form-check-input" />
+                    <label asp-for="RequiresRefundEmail" class="form-check-label"></label>
+                </div>
             </div>
             <div class="form-group">
                 <label asp-for="OnChainMinValue"></label>
@@ -56,16 +58,17 @@
                 <p class="form-text text-muted">Example: 5.50 USD</p>
             </div>
             <div class="form-group">
-                <label asp-for="LightningAmountInSatoshi"></label>
-                <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check" />
-                <span asp-validation-for="LightningAmountInSatoshi" class="text-danger"></span>
+                <div class="form-check">
+                    <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input" />
+                    <label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
+                    <span asp-validation-for="LightningAmountInSatoshi" class="text-danger"></span>
+                </div>
+                <div class="form-check">
+                    <input asp-for="RedirectAutomatically" type="checkbox" class="form-check-input" />
+                    <label asp-for="RedirectAutomatically" class="form-check-label" ></label>
+                    <span asp-validation-for="RedirectAutomatically" class="text-danger"></span>
+                </div>
             </div>
-            <div class="form-group">
-                <label asp-for="RedirectAutomatically"></label>
-                <input asp-for="RedirectAutomatically" type="checkbox" class="form-check" />
-                <span asp-validation-for="RedirectAutomatically" class="text-danger"></span>
-            </div>
-            <br />
             <button name="command" type="submit" class="btn btn-primary" value="Save">Save</button>
         </form>
     </div>
diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml
index a3a31343c..8080e4b5f 100644
--- a/BTCPayServer/Views/Stores/UpdateStore.cshtml
+++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml
@@ -38,9 +38,11 @@
                 </select>
             </div>
             <div class="form-group">
-                <label asp-for="AnyoneCanCreateInvoice"></label>
-                <a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-stores#allow-anyone-to-create-invoice" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
-                <input asp-for="AnyoneCanCreateInvoice" type="checkbox" class="form-check" />
+                <div class="form-check">
+                    <input asp-for="AnyoneCanCreateInvoice" type="checkbox" class="form-check-input" />
+                    <label asp-for="AnyoneCanCreateInvoice" class="form-check-label"></label>
+                    <a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-stores#allow-anyone-to-create-invoice" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>
+                </div>
             </div>
             <div class="form-group">
                 <label asp-for="InvoiceExpiration"></label>
diff --git a/BTCPayServer/Views/Wallets/WalletSend.cshtml b/BTCPayServer/Views/Wallets/WalletSend.cshtml
index 7472cb15e..71172d4be 100644
--- a/BTCPayServer/Views/Wallets/WalletSend.cshtml
+++ b/BTCPayServer/Views/Wallets/WalletSend.cshtml
@@ -78,9 +78,11 @@
                                         <span asp-validation-for="Outputs[index].Amount" class="text-danger"></span>
                                     </div>
                                     <div class="form-group">
-                                        <label asp-for="Outputs[index].SubtractFeesFromOutput" class="control-label"></label>
-                                        <input type="checkbox" asp-for="Outputs[index].SubtractFeesFromOutput" class="form-check subtract-fees" />
-                                        <span asp-validation-for="Outputs[index].SubtractFeesFromOutput" class="text-danger"></span>
+                                        <div class="form-check">
+                                            <input type="checkbox" asp-for="Outputs[index].SubtractFeesFromOutput" class="form-check-input subtract-fees" />
+                                            <label asp-for="Outputs[index].SubtractFeesFromOutput" class="form-check-label"></label>
+                                            <span asp-validation-for="Outputs[index].SubtractFeesFromOutput" class="text-danger"></span>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="col-sm-12 col-md-12 col-lg-2 pull-right">
@@ -108,9 +110,11 @@
             @if (Model.Outputs.Count == 1)
             {
                 <div class="form-group">
-                    <label asp-for="Outputs[0].SubtractFeesFromOutput" class="control-label"></label>
-                    <input type="checkbox" asp-for="Outputs[0].SubtractFeesFromOutput" class="form-check subtract-fees" />
-                    <span asp-validation-for="Outputs[0].SubtractFeesFromOutput" class="text-danger"></span>
+                    <div class="form-check">
+                        <input type="checkbox" asp-for="Outputs[0].SubtractFeesFromOutput" class="form-check-input subtract-fees" />
+                        <label asp-for="Outputs[0].SubtractFeesFromOutput" class="form-check-label"></label>
+                        <span asp-validation-for="Outputs[0].SubtractFeesFromOutput" class="text-danger"></span>
+                    </div>
                 </div>
             }
             <div class="card">
@@ -123,21 +127,21 @@
                 </div>
                 <div id="accordian-advanced" class="collapse" aria-labelledby="accordian-advanced-header" data-parent="#accordian-advanced">
                     <div class="card-body">
-                        <div class="form-group">
-                            <label asp-for="NoChange"></label>
+                        <div class="form-check">
+                            <input asp-for="NoChange" class="form-check-input" />
+                            <label asp-for="NoChange" class="form-check-label"></label>
                             <a href="https://docs.btcpayserver.org/features/wallet#make-sure-no-change-utxo-is-created-expert-mode" target="_blank">
                                 <span class="fa fa-question-circle-o" title="More information..."></span>
                             </a>
-                            <input asp-for="NoChange" class="form-check" />
                         </div>
                         @if (Model.SupportRBF)
                         {
-                            <div class="form-group">
-                                <label asp-for="DisableRBF"></label>
+                            <div class="form-check">
+                                <input asp-for="DisableRBF" class="form-check-input" />
+                                <label asp-for="DisableRBF" class="form-check-label"></label>
                                 <a href="https://bitcoin.org/en/glossary/rbf" target="_blank">
                                     <span class="fa fa-question-circle-o" title="More information..."></span>
                                 </a>
-                                <input asp-for="DisableRBF" class="form-check" />
                             </div>
                         }
                     </div>