From ce3bf91b293617caadb0e9c62b8c92e636e0ebbb Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 15 Nov 2021 15:33:45 +0100
Subject: [PATCH] Move custom CSS into additional options

---
 .../PaymentRequest/EditPaymentRequest.cshtml  | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml b/BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml
index 0589a308a..2c2309777 100644
--- a/BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml
+++ b/BTCPayServer/Views/PaymentRequest/EditPaymentRequest.cshtml
@@ -87,20 +87,38 @@
                         <textarea asp-for="Description" class="form-control richtext"></textarea>
                         <span asp-validation-for="Description" class="text-danger"></span>
                     </div>
-                    <h4 class="mt-5 mb-4">Custom Appearance</h4>
+                    
+                    <h4 class="mt-5 mb-2">Additional Options</h4>
                     <div class="form-group">
-                        <label asp-for="CustomCSSLink" class="form-label"></label>
-                        <a href="https://docs.btcpayserver.org/Development/Theme/#2-bootstrap-themes" target="_blank" rel="noreferrer noopener">
-                            <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
-                        </a>
-                        <input asp-for="CustomCSSLink" class="form-control" />
-                        <span asp-validation-for="CustomCSSLink" class="text-danger"></span>
-                    </div>
-                    <div class="form-group">
-                        <label asp-for="EmbeddedCSS" class="form-label"></label>
-                        <textarea asp-for="EmbeddedCSS" rows="10" cols="40" class="form-control"></textarea>
-                        <span asp-validation-for="EmbeddedCSS" class="text-danger"></span>
+                        <div class="accordion" id="additional">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="additional-custom-css-header">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#additional-custom-css" aria-expanded="false" aria-controls="additional-custom-css">
+                                        Custom CSS
+                                        <vc:icon symbol="caret-down" />
+                                    </button>
+                                </h2>
+                                <div id="additional-custom-css" class="accordion-collapse collapse" aria-labelledby="additional-custom-css-header">
+                                    <div class="accordion-body">
+                                        <div class="form-group">
+                                            <label asp-for="CustomCSSLink" class="form-label"></label>
+                                            <a href="https://docs.btcpayserver.org/Development/Theme/#2-bootstrap-themes" target="_blank" rel="noreferrer noopener">
+                                                <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
+                                            </a>
+                                            <input asp-for="CustomCSSLink" class="form-control" />
+                                            <span asp-validation-for="CustomCSSLink" class="text-danger"></span>
+                                        </div>
+                                        <div class="form-group">
+                                            <label asp-for="EmbeddedCSS" class="form-label"></label>
+                                            <textarea asp-for="EmbeddedCSS" rows="10" cols="40" class="form-control"></textarea>
+                                            <span asp-validation-for="EmbeddedCSS" class="text-danger"></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+                    
                     <div class="form-group mt-4">
                         <button type="submit" class="btn btn-primary" id="SaveButton">Save</button>
                         @if (!string.IsNullOrEmpty(Model.Id))