Improve "Advanced Settings" button (#4140)

* Improve "Advanced Settings" button

Closes #4132.

* Use collapse toggle for multi-sig examples

BTCPayServer/Views/Shared/EmailsBody.cshtml

@@ -71,8 +71,9 @@
             </div>
             <input asp-for="PasswordSet" type="hidden"/>
 			<div class="my-4">
-                <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 class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
+                    <vc:icon symbol="caret-down"/>
+                    <span class="ms-1">Advanced settings</span>
                 </button>
                 <div id="AdvancedSettings" class="collapse">
                     <div class="pt-3 pb-1">

BTCPayServer/Views/UILNURL/EditLightningAddress.cshtml

@@ -60,7 +60,10 @@
             </div>
             <span asp-validation-for="Add.Username" class="text-danger"></span>
         </div>
-        <a class="d-inline-block mb-3" role="button" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings">Advanced settings</a>
+        <button class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0 mb-3" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
+            <vc:icon symbol="caret-down"/>
+            <span class="ms-1">Advanced settings</span>
+        </button>
         <div id="AdvancedSettings" class="collapse @(showAdvancedOptions ? "show" : "")">
             <div class="row">
                 <div class="col-12 col-sm-auto">

BTCPayServer/Views/UIStores/ImportWallet/Xpub.cshtml

@@ -92,39 +92,33 @@
             <td class="font-monospace">xpub…-[taproot]</td>
         </tr>
     }
-    <tr class="additional">
+    </tbody>
+    <tbody id="MultiSigExamples" class="collapse">
+    <tr>
         <td class="text-nowrap" rowspan="2">Multi-sig P2WSH</td>
         <td class="font-monospace">2-of-xpub1…-xpub2…</td>
     </tr>
-    <tr class="additional">
+    <tr>
         <td class="font-monospace">wsh(multi(2,<br>[…/48'/0'/0'/2']xpub…/0/*,<br>[…/48'/0'/0'/2']xpub…/0/*))</td>
     </tr>
-    <tr class="additional">
+    <tr>
         <td class="text-nowrap" rowspan="2">Multi-sig P2SH-P2WSH</td>
         <td class="font-monospace">2-of-xpub1…-xpub2…-[p2sh]</td>
     </tr>
-    <tr class="additional">
+    <tr>
         <td class="font-monospace">sh(wsh(multi(2,<br>[…/48'/0'/0'/1']xpub…/0/*,<br>[…/48'/0'/0'/1']xpub…/0/*)))</td>
     </tr>
-    <tr class="additional">
+    <tr>
         <td class="text-nowrap" rowspan="2">Multi-sig P2SH</td>
         <td class="font-monospace">2-of-xpub1…-xpub2…-[legacy]</td>
     </tr>
-    <tr class="additional">
+    <tr>
         <td class="font-monospace">sh(multi(2,<br>[…/45'/0]xpub…/0/*,<br>[…/45'/0]xpub…/0/*))</td>
     </tr>
     </tbody>
 </table>
 
-<a id="ToggleAdditional" href="#additional">Show multi-sig examples</a>
-
-@section PageFootContent {
-    <partial name="_ValidationScriptsPartial" />
-
-    <script>
-        document.getElementById('ToggleAdditional').addEventListener("click", function(e) {
-          e.preventDefault();
-          document.getElementById('AddressTypes').classList.toggle('expanded');
-        });
-    </script>
-}
+<button class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0" type="button" id="ToggleAdditional" data-bs-toggle="collapse" data-bs-target="#MultiSigExamples" aria-expanded="false" aria-controls="MultiSigExamples">
+    <vc:icon symbol="caret-down"/>
+    <span class="ms-1">Show multi-sig examples</span>
+</button>

BTCPayServer/Views/UIStores/_GenerateWalletForm.cshtml

@@ -94,8 +94,9 @@
     }
     
     <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 class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
+            <vc:icon symbol="caret-down"/>
+            <span class="ms-1">Advanced settings</span>
         </button>
         <div id="AdvancedSettings" class="collapse @(string.IsNullOrEmpty(Model.Passphrase) && !Model.ImportKeysToRPC ? "" : "show")">
             <div class="pt-3">
@@ -109,12 +110,12 @@
                 }
                 <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>
 
@@ -122,7 +123,7 @@
                 {
                     <div class="form-group mt-4">
                         <label class="d-flex align-items-center">
-                            <input type="checkbox" asp-for="ImportKeysToRPC" class="btcpay-toggle me-3" />
+                            <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>

BTCPayServer/Views/UIWallets/WalletSend.cshtml

@@ -203,8 +203,9 @@
     }
 
     <div class="my-4">
-        <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 class="d-inline-flex align-items-center btn btn-link text-primary fw-semibold p-0" type="button" id="AdvancedSettingsButton" data-bs-toggle="collapse" data-bs-target="#AdvancedSettings" aria-expanded="false" aria-controls="AdvancedSettings">
+            <vc:icon symbol="caret-down"/>
+            <span class="ms-1">Advanced settings</span>
         </button>
         <div id="AdvancedSettings" class="collapse">
             <div class="pt-3 pb-1">

BTCPayServer/wwwroot/main/site.css

@@ -80,6 +80,22 @@ a.unobtrusive-link {
     text-decoration: inherit;
 }
 
+.btn.btn-link:focus {
+    box-shadow: none;
+}
+
+[data-bs-toggle="collapse"] svg.icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+    transition: transform 0.2s ease-in-out;
+}
+
+[data-bs-toggle="collapse"][aria-expanded="true"] svg.icon {
+    transform: rotate(-180deg);
+}
+
 /* Badges */
 .badge-new {
     background: #d4edda;