From 5032bbafb1d958c4b21b3dda2f94e477fd2c6059 Mon Sep 17 00:00:00 2001
From: dstrukt <gfxdsign@gmail.com>
Date: Mon, 19 Sep 2022 12:56:16 -0700
Subject: [PATCH] Consistent switch UI on Create Wallet views (#4135)

* ui+wallet: consistent switch ui update

* Cleanups

* Improve CTA wording

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
---
 .../Views/UIStores/_GenerateWalletForm.cshtml | 84 +++++++++++--------
 1 file changed, 48 insertions(+), 36 deletions(-)

diff --git a/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml b/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
index 1205f34c3..fe1096784 100644
--- a/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
+++ b/BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml
@@ -54,14 +54,18 @@
 
     @if (isImport && canUseHotWallet)
     {
-        <div class="form-group mt-5">
-            <label asp-for="SavePrivateKeys">Is hot wallet</label>
-            <input type="checkbox" asp-for="SavePrivateKeys" class="btcpay-toggle ms-2" />
-            <span asp-validation-for="SavePrivateKeys" class="text-danger"></span>
-            <p class="text-muted pt-2">
-                If checked, each private key associated with an address generated will be stored as metadata
-                and would be accessible to anyone with admin access to your server. Enable at your own risk!
-            </p>
+        <div class="form-group mt-4">
+            <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>
+                    <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
+                        and would be accessible to anyone with admin access to your server. Enable at your own risk!
+                    </p>
+                </div>
+            </label>
         </div>
     }
     else
@@ -70,30 +74,34 @@
 
         @if (Model.CanUsePayJoin)
         {
-            <div class="form-group mt-4">
-                <label asp-for="PayJoinEnabled">Enable PayJoin</label>
-                <input type="checkbox" asp-for="PayJoinEnabled" class="btcpay-toggle ml-2" />
-                <span asp-validation-for="PayJoinEnabled" class="text-danger"></span>
-                <p class="text-muted pt-2">
-                    PayJoin enhances the privacy for you and your customers.
-                    Enabling it gives your customers the option to use PayJoin during checkout.
-                    <a href="https://docs.btcpayserver.org/Payjoin/" target="_blank" rel="noreferrer noopener">
-                        <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
-                    </a>
-                </p>
+            <div class="form-group mt-3">
+                <label class="d-flex align-items-center">
+                    <input type="checkbox" asp-for="PayJoinEnabled" class="btcpay-toggle me-3" />
+                    <div>
+                        <span>Enable PayJoin</span>
+                        <span asp-validation-for="PayJoinEnabled" class="text-danger"></span>
+                        <p class="text-muted pt-2 mb-0">
+                            PayJoin enhances the privacy for you and your customers.
+                            Enabling it gives your customers the option to use PayJoin during checkout.
+                            <a href="https://docs.btcpayserver.org/Payjoin/" target="_blank" rel="noreferrer noopener">
+                                <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                            </a>
+                        </p>
+                    </div>
+                </label>                 
             </div>
         }
     }
-
+    
     <div class="mb-4">
         <button class="btn btn-link px-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="advanced-settings">
             Advanced settings
         </button>
         <div id="AdvancedSettings" class="collapse @(string.IsNullOrEmpty(Model.Passphrase) && !Model.ImportKeysToRPC ? "" : "show")">
-            <div class="pt-3 pb-1">
+            <div class="pt-3">
                 @if (isImport) // hide account option when creating a wallet
                 {
-                    <div class="form-group mb-5">
+                    <div class="form-group">
                         <label asp-for="AccountNumber" class="form-label">Account</label>
                         <input asp-for="AccountNumber" class="form-control" style="max-width:10ch" min="0" step="1">
                         <span asp-validation-for="AccountNumber" class="text-danger"></span>
@@ -101,35 +109,39 @@
                 }
                 <div class="form-group">
                     <label asp-for="Passphrase" class="form-label">Optional passphrase (BIP39)</label>
-                    <input type="text" asp-for="Passphrase" class="form-control" autocomplete="off"/>
+                    <input type="text" asp-for="Passphrase" class="form-control" autocomplete="off" />
                     <span asp-validation-for="Passphrase" class="text-danger"></span>
                 </div>
                 <div class="form-group">
                     <label for="passphrase_conf" class="form-label">Confirm passphrase</label>
-                    <input type="text" name="passphrase_conf" id="passphrase_conf" class="form-control"/>
+                    <input type="text" name="passphrase_conf" id="passphrase_conf" class="form-control" />
                     <span class="text-danger field-validation-valid" id="passphrase_conf_validation"></span>
                 </div>
 
                 @if (canUseRpcImport)
                 {
-                    <div class="form-group mt-5">
-                        <label asp-for="ImportKeysToRPC">Import keys to RPC</label>
-                        <input type="checkbox" asp-for="ImportKeysToRPC" class="btcpay-toggle ms-2" />
-                        <span asp-validation-for="ImportKeysToRPC" class="text-danger"></span>
-                        <p class="text-muted pt-2">
-                            Each address generated will be imported into the node wallet and you can view your balance through the node.
-                            @if (isImport || isHotWallet)
-                            {
-                                <span>When this is enabled for a hot wallet, you are also able to use the node wallet to spend.</span>
-                            }
-                        </p>
+                    <div class="form-group mt-4">
+                        <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>
+                                <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.
+                                    @if (isImport || isHotWallet)
+                                    {
+                                        <span>When this is enabled for a hot wallet, you are also able to use the node wallet to spend.</span>
+                                    }
+                                </p>
+                            </div>
+                        </label>
                     </div>
                 }
             </div>
         </div>
     </div>
 
-    <button type="submit" class="btn btn-primary" id="Continue">Continue</button>
+    <button type="submit" class="btn btn-primary" id="Continue">@(isImport ? "Continue" : "Create")</button>
 </form>
 
 <script>