From d0e11f1ec429a8d948a98b763ddb16d7eb840c46 Mon Sep 17 00:00:00 2001
From: Chukwuleta Tobechi <47084273+TChukwuleta@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:16:48 +0100
Subject: [PATCH] changing check box to toggle in various setting views (#5769)

* Resolves: check box to toggle in various setting views

* resolve conflicts

* Notification logic reversal

* remove transform property in the toggle

* Handle email tls certificate check

* Unifications and fixes

---------

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
---
 .../Models/EmailSettingsData.cs               |  9 +++
 .../UIManageController.Notifications.cs       |  4 +-
 .../Shared/Crowdfund/UpdateCrowdfund.cshtml   | 30 ++++----
 BTCPayServer/Views/Shared/EmailsBody.cshtml   |  9 ++-
 .../PointOfSale/UpdatePointOfSale.cshtml      | 10 +--
 .../Views/Shared/TemplateEditor.cshtml        |  4 +-
 .../Configure.cshtml                          |  4 +-
 .../UIManage/NotificationSettings.cshtml      | 53 ++++++++-------
 .../Configure.cshtml                          |  4 +-
 .../EditPaymentRequest.cshtml                 |  4 +-
 BTCPayServer/Views/UIServer/Branding.cshtml   |  2 +-
 BTCPayServer/Views/UIServer/Emails.cshtml     |  2 +-
 BTCPayServer/Views/UIServer/Policies.cshtml   | 20 +++---
 .../Views/UIStores/CheckoutAppearance.cshtml  | 68 ++++++++++---------
 .../Views/UIStores/GeneralSettings.cshtml     |  2 +-
 .../Views/UIStores/LightningSettings.cshtml   |  8 +--
 BTCPayServer/Views/UIStores/Rates.cshtml      |  2 +-
 .../Views/UIStores/WalletSettings.cshtml      | 20 +++---
 .../Views/UIStores/_GenerateWalletForm.cshtml |  4 +-
 19 files changed, 140 insertions(+), 119 deletions(-)

diff --git a/BTCPayServer.Client/Models/EmailSettingsData.cs b/BTCPayServer.Client/Models/EmailSettingsData.cs
index 482800c66..b5a89bf95 100644
--- a/BTCPayServer.Client/Models/EmailSettingsData.cs
+++ b/BTCPayServer.Client/Models/EmailSettingsData.cs
@@ -1,3 +1,5 @@
+using Newtonsoft.Json;
+
 namespace BTCPayServer.Client.Models;
 
 public class EmailSettingsData
@@ -26,4 +28,11 @@ public class EmailSettingsData
         get; set;
     }
     public bool DisableCertificateCheck { get; set; }
+
+    [JsonIgnore]
+    public bool EnabledCertificateCheck
+    {
+        get => !DisableCertificateCheck;
+        set { DisableCertificateCheck = !value; }
+    }
 }
diff --git a/BTCPayServer/Controllers/UIManageController.Notifications.cs b/BTCPayServer/Controllers/UIManageController.Notifications.cs
index da39c3d52..15c436df9 100644
--- a/BTCPayServer/Controllers/UIManageController.Notifications.cs
+++ b/BTCPayServer/Controllers/UIManageController.Notifications.cs
@@ -26,7 +26,7 @@ namespace BTCPayServer.Controllers
                 new List<string>();
             var notifications = notificationHandlers.SelectMany(handler => handler.Meta.Select(tuple =>
                     new SelectListItem(tuple.name, tuple.identifier,
-                        disabledNotifications.Contains(tuple.identifier, StringComparer.InvariantCultureIgnoreCase))))
+                        !disabledNotifications.Contains(tuple.identifier, StringComparer.InvariantCultureIgnoreCase))))
                 .ToList();
 
             return View(new NotificationSettingsViewModel { DisabledNotifications = notifications });
@@ -46,7 +46,7 @@ namespace BTCPayServer.Controllers
             }
             else if (command == "update")
             {
-                var disabled = vm.DisabledNotifications.Where(item => item.Selected).Select(item => item.Value)
+                var disabled = vm.DisabledNotifications.Where(item => !item.Selected).Select(item => item.Value)
                     .ToArray();
                 user.DisabledNotifications = disabled.Any()
                     ? string.Join(';', disabled) + ";"
diff --git a/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml b/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml
index 300bd0b45..55863aa83 100644
--- a/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml
+++ b/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml
@@ -80,7 +80,7 @@
                 <div class="d-flex align-items-center">
                     <input asp-for="Enabled" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="Enabled" class="form-label mb-0"></label>
+                        <label asp-for="Enabled" class="form-check-label"></label>
                         <span asp-validation-for="Enabled" class="text-danger"></span>
                         <div class="text-muted">The crowdfund will be visible to anyone.</div>
                     </div>
@@ -146,7 +146,7 @@
                 <div class="d-flex align-items-center mb-3">
                     <input asp-for="IsRecurring" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#ResetEverySettings" aria-expanded="@(Model.IsRecurring)" aria-controls="ResetEverySettings" />
                     <div>
-                        <label asp-for="IsRecurring" class="form-label mb-0">Recurring Goal</label>
+                        <label asp-for="IsRecurring" class="form-check-label">Recurring Goal</label>
                         <span asp-validation-for="IsRecurring" class="text-danger"></span>
                         <div class="text-muted">Reset goal after a specific period of time, based on your crowdfund's start date.</div>
                     </div>
@@ -178,30 +178,30 @@
     <div class="row">
         <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-4">Contributions</h3>
-            <div class="form-check mb-3">
-                <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="SortPerksByPopularity" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="SortPerksByPopularity" class="form-check-label"></label>
                 <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="DisplayPerksRanking" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="DisplayPerksRanking" class="form-check-label"></label>
                 <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="DisplayPerksValue" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="DisplayPerksValue" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="DisplayPerksValue" class="form-check-label"></label>
                 <span asp-validation-for="DisplayPerksValue" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="EnforceTargetAmount" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="EnforceTargetAmount" class="form-check-label"></label>
                 <span asp-validation-for="EnforceTargetAmount" class="text-danger"></span>
             </div>
             
             <h3 class="mt-5 mb-4">Crowdfund Behavior</h3>
-            <div class="form-check">
-                <input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check-input" />
+            <div class="d-flex">
+                <input asp-for="UseAllStoreInvoices" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="UseAllStoreInvoices" class="form-check-label"></label>
                 <span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span>
             </div>
@@ -228,7 +228,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="SoundsEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#SoundsEnabledSettings" aria-expanded="@Model.SoundsEnabled" aria-controls="SoundsEnabledSettings"/>
-                                        <label asp-for="SoundsEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="SoundsEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
                                     </div>
                                 </div>
@@ -254,7 +254,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="AnimationsEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#AnimationsEnabledSettings" aria-expanded="@Model.AnimationsEnabled" aria-controls="AnimationsEnabledSettings"/>
-                                        <label asp-for="AnimationsEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="AnimationsEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
                                     </div>
                                 </div>
@@ -280,7 +280,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="DisqusEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#DisqusEnabledSettings" aria-expanded="@Model.DisqusEnabled" aria-controls="DisqusEnabledSettings"/>
-                                        <label asp-for="DisqusEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="DisqusEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
                                     </div>
                                 </div>
diff --git a/BTCPayServer/Views/Shared/EmailsBody.cshtml b/BTCPayServer/Views/Shared/EmailsBody.cshtml
index 87c5454a5..2e1816f86 100644
--- a/BTCPayServer/Views/Shared/EmailsBody.cshtml
+++ b/BTCPayServer/Views/Shared/EmailsBody.cshtml
@@ -68,11 +68,9 @@
             </button>
             <div id="AdvancedSettings" class="collapse">
                 <div class="pt-3 pb-1">
-                    <div class="form-group">
-                        <div class="form-check">
-                            <input asp-for="Settings.DisableCertificateCheck" class="form-check-input" />
-                            <label asp-for="Settings.DisableCertificateCheck" class="form-check-label">Disable TLS certificate security checks</label>
-                        </div>
+                    <div class="d-flex">
+                        <input asp-for="Settings.EnabledCertificateCheck" type="checkbox" class="btcpay-toggle me-3" />
+                        <label asp-for="Settings.EnabledCertificateCheck" class="form-check-label">TLS certificate security checks</label>
                     </div>
                 </div>
             </div>
@@ -83,6 +81,7 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
+
         delegate('click', '#quick-fill .dropdown-menu a', function (e) {
             e.preventDefault();
             
diff --git a/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml b/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
index 4ab6bcf63..e0c0225cd 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
@@ -140,12 +140,12 @@
                 <legend class="h5 mb-3 fw-semibold">Cart</legend>
                 <div class="form-group d-flex align-items-center pt-2">
                     <input asp-for="ShowSearch" type="checkbox" class="btcpay-toggle me-3" />
-                    <label asp-for="ShowSearch" class="form-label mb-0"></label>
+                    <label asp-for="ShowSearch" class="form-check-label"></label>
                     <span asp-validation-for="ShowSearch" class="text-danger"></span>
                 </div>
                 <div class="form-group d-flex align-items-center">
                     <input asp-for="ShowCategories" type="checkbox" class="btcpay-toggle me-3" />
-                    <label asp-for="ShowCategories" class="form-label mb-0"></label>
+                    <label asp-for="ShowCategories" class="form-check-label"></label>
                     <span asp-validation-for="ShowCategories" class="text-danger"></span>
                 </div>
             </fieldset>
@@ -153,7 +153,7 @@
                 <legend class="h5 mb-3 fw-semibold">Tips</legend>
                 <div class="form-group d-flex align-items-center pt-2">
                     <input asp-for="EnableTips" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomTipsSettings" aria-expanded="@Model.EnableTips" aria-controls="CustomTipsSettings" />
-                    <label asp-for="EnableTips" class="form-label mb-0"></label>
+                    <label asp-for="EnableTips" class="form-check-label"></label>
                     <span asp-validation-for="EnableTips" class="text-danger"></span>
                 </div>
                 <div class="collapse @(Model.EnableTips ? "show" : "")" id="CustomTipsSettings">
@@ -174,7 +174,7 @@
                 <div class="form-group d-flex align-items-center">
                     <input asp-for="ShowDiscount" type="checkbox" class="btcpay-toggle me-3" />
                     <div>
-                        <label asp-for="ShowDiscount" class="form-label mb-0"></label>
+                        <label asp-for="ShowDiscount" class="form-check-label"></label>
                         <div class="text-muted">Not recommended for customer self-checkout.</div>
                     </div>
                     <span asp-validation-for="ShowDiscount" class="text-danger"></span>
@@ -184,7 +184,7 @@
                 <legend class="h5 mb-3 fw-semibold">Custom Payments</legend>
                 <div class="form-group mb-4 d-flex align-items-center">
                     <input asp-for="ShowCustomAmount" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomAmountSettings" aria-expanded="@Model.ShowCustomAmount" aria-controls="CustomAmountSettings"/>
-                    <label asp-for="ShowCustomAmount" class="form-label mb-0"></label>
+                    <label asp-for="ShowCustomAmount" class="form-check-label"></label>
                     <span asp-validation-for="ShowCustomAmount" class="text-danger"></span>
                 </div>
                 <div class="collapse @(Model.ShowCustomAmount ? "show" : "")" id="CustomAmountSettings">
diff --git a/BTCPayServer/Views/Shared/TemplateEditor.cshtml b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
index 8aef28bfc..c79ed670f 100644
--- a/BTCPayServer/Views/Shared/TemplateEditor.cshtml
+++ b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
@@ -71,8 +71,8 @@
                 <input id="BuyButtonText" type="text" class="form-control mb-2" v-model="editingItem && editingItem.buyButtonText" />
             </div>
             <div class="form-group d-flex align-items-center">
-                <input type="checkbox" id="Disabled" class="btcpay-toggle me-3" v-model="editingItem && editingItem.disabled" />
-                <label for="Disabled" class="form-label mb-0">Disabled</label>
+                <input type="checkbox" id="Disabled" class="btcpay-toggle me-3" :checked="editingItem && !editingItem.disabled" v-on:change="$event => editingItem.disabled = !$event.target.checked" />
+                <label for="Disabled" class="form-check-label">Enable</label>
             </div>
             <vc:ui-extension-point location="app-template-editor-item-detail" model="Model"></vc:ui-extension-point>
             <div class="text-danger mb-3" v-for="error of errors">{{error}}</div>
diff --git a/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml b/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml
index a8748a5f2..30005a197 100644
--- a/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml
+++ b/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml
@@ -18,8 +18,8 @@
             <div asp-validation-summary="All"></div>
         }
         <form method="post">
-            <div class="form-check">
-                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ProcessNewPayoutsInstantly" class="form-check-label">Process approved payouts instantly</label>
                 <span asp-validation-for="ProcessNewPayoutsInstantly" class="text-danger"></span>
             </div>
diff --git a/BTCPayServer/Views/UIManage/NotificationSettings.cshtml b/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
index 3f643573b..9f2c5c9c9 100644
--- a/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
+++ b/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
@@ -9,36 +9,43 @@
         <form method="post" asp-action="NotificationSettings">
             @if (Model.All)
             {
-                <div>
-                    All notifications are disabled.
-                    <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable</button>
-                </div>
+                <p>All notifications are disabled.</p>
+                <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable notifications</button>
             }
             else
             {
-                <div class="form-group">
-                    <p>Do not receive notifications for</p>
-                    <div class="card">
-                        <ul class="list-group list-group-flush">
-                            @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
-                            {
-                                var item = Model.DisabledNotifications[index];
-                                <li class="list-group-item">
-                                    <input type="hidden"  asp-for="DisabledNotifications[index].Value"/> 
-                                    <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="form-check-input form-check-inline"/>
-                                    <label class="mb-0 cursor-pointer" asp-for="DisabledNotifications[index].Selected">
-                                        @item.Text
-                                    </label>
-                                </li>
-                            }
-                        </ul>
+                <p>To disable notification for a feature, kindly toggle off the specified feature.</p>
+                @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
+                {
+                    var item = Model.DisabledNotifications[index];
+                    <div class="d-flex align-items-center my-3">
+                        <input type="hidden" asp-for="DisabledNotifications[index].Value" />
+                        <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="btcpay-toggle me-3" />
+                        <label class="form-check-label cursor-pointer" asp-for="DisabledNotifications[index].Selected">
+                            @item.Text
+                        </label>
                     </div>
-                </div>
-                <div class="form-group mt-4">
+                }
+                <div class="mt-4">
                     <button type="submit" class="btn btn-primary" name="command" value="update">Save</button>
-                    <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all</button>
+                    <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all notifications</button>
                 </div>
             }
         </form>
     </div>
 </div>
+
+<script>
+    function toggleAllCheckboxes(checkbox) {
+        var checkboxes = document.querySelectorAll('.btcpay-toggle');
+        var label = document.getElementById('toggleAllLabel');
+        var isChecked = checkbox.checked;
+
+        checkboxes.forEach(function (item) {
+            item.checked = isChecked;
+        });
+
+        label.textContent = isChecked ? 'Disable All' : 'Enable All';
+    }
+</script>
+
diff --git a/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml b/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml
index 4d12ce2ec..e2da9c569 100644
--- a/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml
+++ b/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml
@@ -19,8 +19,8 @@
             <div asp-validation-summary="All"></div>
         }
         <form method="post">
-            <div class="form-check">
-                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ProcessNewPayoutsInstantly" class="form-check-label">Process approved payouts instantly</label>
                 <span asp-validation-for="ProcessNewPayoutsInstantly" class="text-danger"></span>
             </div>
diff --git a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
index 4df02098a..8f668ef41 100644
--- a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
+++ b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
@@ -66,8 +66,8 @@
                     <span asp-validation-for="Currency" class="text-danger"></span>
                 </div>
             </div>
-            <div class="form-group form-check">
-                <input asp-for="AllowCustomPaymentAmounts" type="checkbox" class="form-check-input" />
+            <div class="form-group d-flex">
+                <input asp-for="AllowCustomPaymentAmounts" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="AllowCustomPaymentAmounts" class="form-check-label"></label>
                 <span asp-validation-for="AllowCustomPaymentAmounts" class="text-danger"></span>
             </div>
diff --git a/BTCPayServer/Views/UIServer/Branding.cshtml b/BTCPayServer/Views/UIServer/Branding.cshtml
index de9ca0e68..78d63f7e1 100644
--- a/BTCPayServer/Views/UIServer/Branding.cshtml
+++ b/BTCPayServer/Views/UIServer/Branding.cshtml
@@ -68,7 +68,7 @@
             <div class="d-flex align-items-center mb-3">
                 <input asp-for="CustomTheme" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomThemeSettings" aria-expanded="@(Model.CustomTheme)" aria-controls="CustomThemeSettings" />
                 <div>
-                    <label asp-for="CustomTheme" class="form-label"></label>
+                    <label asp-for="CustomTheme" class="form-check-label"></label>
                     <div class="text-muted">
                         <a href="https://docs.btcpayserver.org/Development/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">Adjust the design</a>
                         of your BTCPay Server instance to your needs.
diff --git a/BTCPayServer/Views/UIServer/Emails.cshtml b/BTCPayServer/Views/UIServer/Emails.cshtml
index 6d39a9ba5..c2664761f 100644
--- a/BTCPayServer/Views/UIServer/Emails.cshtml
+++ b/BTCPayServer/Views/UIServer/Emails.cshtml
@@ -9,7 +9,7 @@
         <div class="d-flex align-items-center">
             <input asp-for="EnableStoresToUseServerEmailSettings" type="checkbox" class="btcpay-toggle me-3"/>
             <div>
-                <label asp-for="EnableStoresToUseServerEmailSettings" class="form-label mb-0"></label>
+                <label asp-for="EnableStoresToUseServerEmailSettings" class="form-check-label"></label>
                 <div class="text-muted">
                     This can be overridden at the Store level.
                     <a href="https://docs.btcpayserver.org/Notifications/#server-emails" target="_blank" rel="noreferrer noopener">
diff --git a/BTCPayServer/Views/UIServer/Policies.cshtml b/BTCPayServer/Views/UIServer/Policies.cshtml
index 60bda2199..acc4be42e 100644
--- a/BTCPayServer/Views/UIServer/Policies.cshtml
+++ b/BTCPayServer/Views/UIServer/Policies.cshtml
@@ -50,7 +50,7 @@
                                 }
                                 <input asp-for="RequiresConfirmedEmail" type="checkbox" class="btcpay-toggle me-3" disabled="@(isEmailConfigured ? null : "disabled")" />
                                 <div>
-                                    <label asp-for="RequiresConfirmedEmail" class="form-label mb-0"></label>
+                                    <label asp-for="RequiresConfirmedEmail" class="form-check-label"></label>
                                     <a href="https://docs.btcpayserver.org/FAQ/ServerSettings/#how-to-allow-registration-on-my-btcpay-server" target="_blank" rel="noreferrer noopener">
                                         <vc:icon symbol="info" />
                                     </a>
@@ -64,14 +64,14 @@
                             <div class="d-flex my-3">
                                 <input asp-for="RequiresUserApproval" type="checkbox" class="btcpay-toggle me-3"/>
                                 <div>
-                                    <label asp-for="RequiresUserApproval" class="form-label mb-0"></label>
+                                    <label asp-for="RequiresUserApproval" class="form-check-label"></label>
                                     <span asp-validation-for="RequiresUserApproval" class="text-danger"></span>
                                 </div>
                             </div>
                             <div class="d-flex my-3">
                                 <input asp-for="EnableNonAdminCreateUserApi" type="checkbox" class="btcpay-toggle me-3"/>
                                 <div>
-                                    <label asp-for="EnableNonAdminCreateUserApi" class="form-label mb-0"></label>
+                                    <label asp-for="EnableNonAdminCreateUserApi" class="form-check-label"></label>
                                     <span asp-validation-for="EnableNonAdminCreateUserApi" class="text-danger"></span>
                                     <div class="info-note mt-2 text-warning" role="alert">
                                         <vc:icon symbol="warning" />
@@ -89,7 +89,7 @@
                 <div class="d-flex my-3">
                     <input asp-for="AllowLightningInternalNodeForAll" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="AllowLightningInternalNodeForAll" class="form-label mb-0"></label>
+                        <label asp-for="AllowLightningInternalNodeForAll" class="form-check-label"></label>
                         <a href="https://docs.btcpayserver.org/FAQ/LightningNetwork/#how-many-users-can-use-lightning-network-in-btcpay" target="_blank" rel="noreferrer noopener">
                             <vc:icon symbol="info" />
                         </a>
@@ -103,7 +103,7 @@
                 <div class="d-flex my-3">
                     <input asp-for="AllowHotWalletForAll" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="AllowHotWalletForAll" class="form-label mb-0"></label>
+                        <label asp-for="AllowHotWalletForAll" class="form-check-label"></label>
                         <a href="https://docs.btcpayserver.org/CreateWallet/#requirements-to-create-wallets" target="_blank" rel="noreferrer noopener">
                             <vc:icon symbol="info" />
                         </a>
@@ -117,7 +117,7 @@
                 <div class="d-flex my-3">
                     <input asp-for="AllowHotWalletRPCImportForAll" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="AllowHotWalletRPCImportForAll" class="form-label mb-0"></label>
+                        <label asp-for="AllowHotWalletRPCImportForAll" class="form-check-label"></label>
                         <span asp-validation-for="AllowHotWalletRPCImportForAll" class="text-danger"></span>
                         <div class="info-note mt-2 text-warning" role="alert">
                             <vc:icon symbol="warning"/>
@@ -132,7 +132,7 @@
                 <div class="d-flex my-3">
                     <input asp-for="AllowSearchEngines" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="AllowSearchEngines" class="form-label mb-0"></label>
+                        <label asp-for="AllowSearchEngines" class="form-check-label"></label>
                         <a href="https://docs.btcpayserver.org/FAQ/ServerSettings/#how-to-hide-my-btcpay-server-from-search-engines" target="_blank" rel="noreferrer noopener">
                             <vc:icon symbol="info" />
                         </a>
@@ -144,7 +144,7 @@
                     <div class="d-flex my-3">
                         <input asp-for="CheckForNewVersions" type="checkbox" class="btcpay-toggle me-3"/>
                         <div>
-                            <label asp-for="CheckForNewVersions" class="form-label mb-0"></label>
+                            <label asp-for="CheckForNewVersions" class="form-check-label"></label>
                             <span asp-validation-for="CheckForNewVersions" class="text-danger"></span>
                         </div>
                     </div>
@@ -152,7 +152,7 @@
                 <div class="d-flex align-items-center my-3">
                     <input asp-for="Experimental" type="checkbox" class="btcpay-toggle me-3" />
                     <div>
-                        <label asp-for="Experimental" class="form-label mb-0"></label>
+                        <label asp-for="Experimental" class="form-check-label"></label>
                         <div class="text-muted">
                             Will allow you to use the custodian account feature.
                             <a href="https://blog.btcpayserver.org/btcpay-server-1-9-0/#-exchange-integration-via-plugins-" target="_blank" rel="noreferrer noopener">
@@ -171,7 +171,7 @@
             </div>
             <div class="d-flex mt-n2">
                 <input asp-for="PluginPreReleases" type="checkbox" class="btcpay-toggle me-3"/>
-                <label asp-for="PluginPreReleases" class="form-label mb-0"></label>
+                <label asp-for="PluginPreReleases" class="form-check-label"></label>
             </div>
 
             @* To handle the multiple submit buttons on this page: Give this button
diff --git a/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml b/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
index 10ff8ce30..1d6c278b3 100644
--- a/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
+++ b/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
@@ -118,9 +118,9 @@
 					</div>
 				</div>
 			</h3>
-            <div class="d-flex align-items-center mb-4">
+            <div class="d-flex align-items-center mb-3">
 				<input asp-for="UseClassicCheckout" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target=".checkout-settings" aria-expanded="@(Model.UseClassicCheckout)" aria-controls="CheckoutV2Settings" />
-				<label asp-for="UseClassicCheckout" class="form-label mb-0"></label>
+				<label asp-for="UseClassicCheckout" class="form-check-label"></label>
                 <span asp-validation-for="UseClassicCheckout" class="text-danger"></span>
             </div>
             <div id="CheckNFC" class="form-group d-none">
@@ -135,13 +135,17 @@
                     </div>
                     <span asp-validation-for="DisplayExpirationTimer" class="text-danger"></span>
                 </div>
-                <div class="form-check">
-                    <input asp-for="CelebratePayment" type="checkbox" class="form-check-input" />
-                    <label asp-for="CelebratePayment" class="form-check-label"></label>
+                <div class="my-3">
+                    <div class="d-flex">
+                        <input asp-for="CelebratePayment" type="checkbox" class="btcpay-toggle me-3" />
+                        <label asp-for="CelebratePayment" class="form-check-label"></label>
+                    </div>
                 </div>
-                <div class="form-check">
-                    <input asp-for="PlaySoundOnPayment" type="checkbox" class="form-check-input" data-bs-toggle="collapse" data-bs-target="#PlaySoundOnPaymentOptions" aria-expanded="@Model.PlaySoundOnPayment" aria-controls="PlaySoundOnPaymentOptions" />
-                    <label asp-for="PlaySoundOnPayment" class="form-check-label"></label>
+                <div class="my-3">
+                    <div class="d-flex">
+                        <input asp-for="PlaySoundOnPayment" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#PlaySoundOnPaymentOptions" aria-expanded="@Model.PlaySoundOnPayment" aria-controls="PlaySoundOnPaymentOptions" />
+                        <label asp-for="PlaySoundOnPayment" class="form-check-label"></label>
+                    </div>
                     <div class="collapse @(Model.PlaySoundOnPayment ? "show" : "")" id="PlaySoundOnPaymentOptions">
                         <div class="form-group mb-0 py-3">
                             <div class="d-flex align-items-center justify-content-between gap-2">
@@ -174,29 +178,29 @@
                         </div>
                     </div>
                 </div>
-				<div class="form-check">
-					<input asp-for="ShowStoreHeader" type="checkbox" class="form-check-input" />
+                <div class="d-flex">
+                    <input asp-for="ShowStoreHeader" type="checkbox" class="btcpay-toggle me-3" />
 					<label asp-for="ShowStoreHeader" class="form-check-label"></label>
 				</div>
             </div>
-			<div class="form-check">
-				<input asp-for="ShowPayInWalletButton" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ShowPayInWalletButton" type="checkbox" class="btcpay-toggle me-3" />
 				<label asp-for="ShowPayInWalletButton" class="form-check-label"></label>
 			</div>
-            <div class="form-check">
-                <input asp-for="OnChainWithLnInvoiceFallback" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="OnChainWithLnInvoiceFallback" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="OnChainWithLnInvoiceFallback" class="form-check-label"></label>
                 <a href="https://bitcoinqr.dev/" target="_blank" rel="noreferrer noopener">
                     <vc:icon symbol="info" />
                 </a>
             </div>
-            <div class="form-check">
-                <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="LightningAmountInSatoshi" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
             </div>
             <div class="checkout-settings collapse @(Model.UseClassicCheckout ? "show" : "")" id="ClassicCheckoutSettings">
-                <div class="form-check">
-                    <input asp-for="RequiresRefundEmail" type="checkbox" class="form-check-input" />
+                <div class="d-flex mb-3">
+                    <input asp-for="RequiresRefundEmail" type="checkbox" class="btcpay-toggle me-3" />
                     <label asp-for="RequiresRefundEmail" class="form-check-label"></label>
                 </div>
                 <div class="form-group">
@@ -207,7 +211,7 @@
                     <input asp-for="CustomLogo" class="form-control" />
                     <span asp-validation-for="CustomLogo" class="text-danger"></span>
                 </div>
-                <div class="form-group">
+                <div class="form-group mb-0">
                     <label asp-for="CustomCSS" class="form-label"></label>
                     <a href="https://docs.btcpayserver.org/Development/Theme/#checkout-page-themes" target="_blank" rel="noreferrer noopener">
                         <vc:icon symbol="info" />
@@ -223,9 +227,9 @@
                     @await Component.InvokeAsync("UiExtensionPoint", new {location = "invoice-checkout-theme-options", model = Model})
                 </div>
             </div>
-            <div class="form-group">
-                <div class="form-check">
-                    <input asp-for="AutoDetectLanguage" type="checkbox" class="form-check-input" />
+            <div class="form-group d-flex align-items-center">
+                <input asp-for="AutoDetectLanguage" type="checkbox" class="btcpay-toggle me-3" />
+                <div>
                     <label asp-for="AutoDetectLanguage" class="form-check-label"></label>
                     <div class="form-text">Detects the language of the customer's browser.</div>
                 </div>
@@ -250,25 +254,25 @@
                     Can be any valid URI, such as a website, email, and Nostr.
                 </div>
             </div>
-            <div class="form-check my-3">
-                <input asp-for="LazyPaymentMethods" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="LazyPaymentMethods" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="LazyPaymentMethods" class="form-check-label"></label>
             </div>
-            <div class="form-check my-3">
-                <input asp-for="RedirectAutomatically" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-2">
+                <input asp-for="RedirectAutomatically" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="RedirectAutomatically" class="form-check-label"></label>
             </div>
             <h3 class="mt-5 mb-3">Public receipt</h3>
-            <div class="form-check my-3">
-                <input asp-for="ReceiptOptions.Enabled" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ReceiptOptions.Enabled" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ReceiptOptions.Enabled" class="form-check-label"></label>
             </div>
-            <div class="form-check my-3">
-                <input asp-for="ReceiptOptions.ShowPayments" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ReceiptOptions.ShowPayments" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ReceiptOptions.ShowPayments" class="form-check-label"></label>
             </div>
-            <div class="form-check my-3">
-                <input asp-for="ReceiptOptions.ShowQR" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ReceiptOptions.ShowQR" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ReceiptOptions.ShowQR" class="form-check-label"></label>
             </div>
             <button type="submit" class="btn btn-primary mt-4" id="Save" permission="@Policies.CanModifyStoreSettings">Save</button>
diff --git a/BTCPayServer/Views/UIStores/GeneralSettings.cshtml b/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
index a3c155935..9ff5a6ce2 100644
--- a/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
@@ -109,7 +109,7 @@
             </div>
             <div class="form-group d-flex align-items-center">
                 <input asp-for="AnyoneCanCreateInvoice" type="checkbox" class="btcpay-toggle me-3"/>
-                <label asp-for="AnyoneCanCreateInvoice" class="form-label mb-0 me-1"></label>
+                <label asp-for="AnyoneCanCreateInvoice" class="form-check-label me-1"></label>
                 <a href="https://docs.btcpayserver.org/FAQ/Stores/#allow-anyone-to-create-invoice" target="_blank" rel="noreferrer noopener" title="More information...">
                     <vc:icon symbol="info"/>
                 </a>
diff --git a/BTCPayServer/Views/UIStores/LightningSettings.cshtml b/BTCPayServer/Views/UIStores/LightningSettings.cshtml
index 59908b6c3..61f3ec142 100644
--- a/BTCPayServer/Views/UIStores/LightningSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/LightningSettings.cshtml
@@ -91,15 +91,15 @@
                     <h3 class="mt-5 mb-3" id="ln-url">LNURL</h3>
                     <div class="form-group d-flex align-items-center">
                         <input asp-for="LNURLEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#LNURLSettings" aria-expanded="@Model.LNURLEnabled" aria-controls="LNURLSettings"/>
-                        <label asp-for="LNURLEnabled" class="form-label mb-0 me-1"></label>
+                        <label asp-for="LNURLEnabled" class="form-check-label"></label>
                     </div>
 
                     <div class="collapse @(Model.LNURLEnabled ? "show" : "")" id="LNURLSettings">
                         <div class="form-group">
                             <label class="form-group d-flex align-items-center">
                                 <input type="checkbox" asp-for="LNURLBech32Mode" class="btcpay-toggle me-3" />
-                                <div class="">
-                                    <label asp-for="LNURLBech32Mode" class="form-label mb-0 me-1"></label>
+                                <div>
+                                    <label asp-for="LNURLBech32Mode" class="form-check-label"></label>
                                     <span asp-validation-for="LNURLBech32Mode" class="text-danger"></span>
                                     <div class="form-text">For wallet compatibility: Bech32 encoded (classic) vs. cleartext URL (upcoming)</div>
                                 </div>
@@ -108,7 +108,7 @@
                         <div class="form-group mb-3">
                             <div class="d-flex align-items-center">
                                 <input type="checkbox" asp-for="LUD12Enabled" class="btcpay-toggle me-3" />
-                                <label asp-for="LUD12Enabled" class="form-label mb-0 me-1"></label>
+                                <label asp-for="LUD12Enabled" class="form-check-label"></label>
                             </div>
                         </div>
                     </div>
diff --git a/BTCPayServer/Views/UIStores/Rates.cshtml b/BTCPayServer/Views/UIStores/Rates.cshtml
index c550e399e..a0b9cd3b3 100644
--- a/BTCPayServer/Views/UIStores/Rates.cshtml
+++ b/BTCPayServer/Views/UIStores/Rates.cshtml
@@ -145,7 +145,7 @@ X_X = kraken(X_X);</code></pre>
             <div class="form-group">
                 <label class="d-flex align-items-center">
                     <button type="submit" id="ShowScripting" class="btcpay-toggle me-3 @if (Model.ShowScripting) { @("btcpay-toggle--active") }" value="scripting-@(Model.ShowScripting ? "off" : "on")" name="command" data-bs-toggle="modal" data-bs-target="#ConfirmModal" permission="@Policies.CanModifyStoreSettings">@(Model.ShowScripting ? "Disable" : "Enable") advanced rate rule scripting</button>
-                    <div class="">
+                    <div>
                         <span>Advanced rate rule scripting</span>
                         <div class="form-text">
                             @(Model.ShowScripting ? "Disabling will delete your rate script." : "Enabling will modify your current rate sources. This is a feature for advanced users.")
diff --git a/BTCPayServer/Views/UIStores/WalletSettings.cshtml b/BTCPayServer/Views/UIStores/WalletSettings.cshtml
index 2aa15586d..5a1fd957c 100644
--- a/BTCPayServer/Views/UIStores/WalletSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/WalletSettings.cshtml
@@ -76,8 +76,8 @@
             <form method="post" asp-action="UpdateWalletSettings" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode">
                 <div class="form-group my-4">
                     <div class="d-flex align-items-center">
-                        <input asp-for="Enabled" type="checkbox" class="btcpay-toggle me-2"/>
-                        <label asp-for="Enabled" class="form-label mb-0 me-1"></label>
+                        <input asp-for="Enabled" type="checkbox" class="btcpay-toggle me-3"/>
+                        <label asp-for="Enabled" class="form-check-label"></label>
                     </div>
                     <span asp-validation-for="PayJoinEnabled" class="text-danger"></span>
                 </div>
@@ -151,8 +151,8 @@
                 {
                     <div class="form-group">
                         <div class="d-flex align-items-center">
-                            <input asp-for="PayJoinEnabled" type="checkbox" class="btcpay-toggle me-2"/>
-                            <label asp-for="PayJoinEnabled" class="form-label mb-0 me-1"></label>
+                            <input asp-for="PayJoinEnabled" type="checkbox" class="btcpay-toggle me-3"/>
+                            <label asp-for="PayJoinEnabled" class="form-check-label me-1"></label>
                             <a href="https://docs.btcpayserver.org/Payjoin/" target="_blank" rel="noreferrer noopener" title="More information...">
                                 <vc:icon symbol="info"/>
                             </a>
@@ -188,12 +188,14 @@
                     </p>
                     <span asp-validation-for="SpeedPolicy" class="text-danger"></span>
                 </div>
-                <div class="form-check my-1">
-                    <input asp-for="ShowRecommendedFee" type="checkbox" class="form-check-input"/>
-                    <label asp-for="ShowRecommendedFee" class="form-check-label"></label>
-                    <div class="form-text">Fee will be shown for BTC and LTC onchain payments only.</div>
+                <div class="d-flex align-items-center my-3">
+                    <input asp-for="ShowRecommendedFee" type="checkbox" class="btcpay-toggle me-3" />
+                    <div>
+                        <label asp-for="ShowRecommendedFee" class="form-check-label"></label>
+                        <div class="form-text">Fee will be shown for BTC and LTC onchain payments only.</div>
+                    </div>
                 </div>
-                <div class="form-group mt-2">
+                <div class="form-group my-3">
                     <label asp-for="RecommendedFeeBlockTarget" class="form-label"></label>
                     <input inputmode="numeric" asp-for="RecommendedFeeBlockTarget" class="form-control" min="1" style="width:8ch" />
                     <span asp-validation-for="RecommendedFeeBlockTarget" class="text-danger"></span>
diff --git a/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml b/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
index 9a03af5ad..160318ad5 100644
--- a/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
+++ b/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
@@ -57,7 +57,7 @@
             <label class="d-flex align-items-center">
                 <input type="checkbox" asp-for="SavePrivateKeys" class="btcpay-toggle me-3" />
                 <div>
-                    <label asp-for="SavePrivateKeys">Is hot wallet</label>
+                    <label asp-for="SavePrivateKeys" class="form-check-label">Is hot wallet</label>
                     <span asp-validation-for="SavePrivateKeys" class="text-danger"></span>
                     <p class="text-muted pt-2 mb-0">
                         If checked, each private key associated with an address generated will be stored as metadata
@@ -124,7 +124,7 @@
                         <label class="d-flex align-items-center">
                             <input type="checkbox" asp-for="ImportKeysToRPC" class="btcpay-toggle me-3"/>
                             <div>
-                                <label asp-for="ImportKeysToRPC">Import keys to RPC</label>
+                                <label asp-for="ImportKeysToRPC" class="form-check-label">Import keys to RPC</label>
                                 <span asp-validation-for="ImportKeysToRPC" class="text-danger"></span>
                                 <p class="text-muted pt-2 mb-0">
                                     Each address generated will be imported into the node wallet and you can view your balance through the node.