From 8a9bea46039a6458da23fc290e3066b90870bdc6 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Tue, 20 Apr 2021 14:52:00 +0200
Subject: [PATCH] Wording and display improvements

---
 .../Views/Stores/SetupLightningNode.cshtml    | 108 ++++++++++--------
 1 file changed, 59 insertions(+), 49 deletions(-)

diff --git a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
index 3f81d78b6..b70bbd90b 100644
--- a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
+++ b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
@@ -1,7 +1,7 @@
 @model LightningNodeViewModel
 @{
     Layout = "_LayoutWalletSetup.cshtml";
-    ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Configure your Lightning node", Context.GetStoreData().StoreName);
+    ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Connect to a Lightning node", Context.GetStoreData().StoreName);
 }
 
 @section Navbar {
@@ -59,14 +59,14 @@
         list-style: none;
         padding-left: 0;
     }
-    #CustomSetup ul li  code {
+    #CustomSetup ul li code, #CustomSetup ul li pre {
         color: var(--btcpay-code-color);
     }
-    #CustomSetup ul li > code {
+    #CustomSetup ul li > code, #CustomSetup ul pre {
         display: block;
         color: var(--btcpay-code-color);
         background: var(--btcpay-code-bg);
-        margin: .5rem 0;
+        margin: .25rem 0;
         padding: .75rem 1rem;
         border-radius: .25rem;
     }
@@ -74,9 +74,9 @@
 
 <form method="post" class="mt-n2 text-center">
     <input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" disabled="@(!Model.CanUseInternalNode)">
-    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Internal node</label>
+    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Use internal node</label>
     <input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom">
-    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Custom node</label>
+    <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
     <div id="InternalSetup" class="text-left">
         @if (Model.CanUseInternalNode)
         {
@@ -84,60 +84,70 @@
         }
         else
         {
-            <p class="my-4">Only administrators can use the internal Lightning node.</p>
+            <p class="my-4">Your instance administrator has disabled the use of the Internal node for non-admin users.</p>
         }
     </div>
     <div id="CustomSetup" class="text-left">
-        <label asp-for="ConnectionString" class="mt-4">The connection string configuration for your custom Lightning node:</label>
+        <label asp-for="ConnectionString" class="mt-4">Connection configuration for your custom Lightning node:</label>
         <div class="d-sm-flex">
             <input asp-for="ConnectionString" class="form-control mb-2 mr-2" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)"/>
             <button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button>
         </div>
         <span asp-validation-for="ConnectionString" class="text-danger"></span>
-        <p class="mt-4 mb-2">BTCPay Server currently supports:</p>
+        <p class="mt-4 mb-2">
+            BTCPay Server currently supports:
+            <span class="text-secondary">(click to show examples)</span>
+        </p>
         <ul>
-            <li class="mb-3">
-                <strong>c-lightning</strong> via TCP or unix domain socket connection:
-                <ul>
-                    <li>
-                        <code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
-                    </li>
-                    <li>
-                        <code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
-                    </li>
-                </ul>
+            <li>
+                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#c-lightning-notes" role="button" aria-expanded="false" aria-controls="c-lightning-notes">c-lightning</a>
+                via TCP or unix domain socket connection
+                <div id="c-lightning-notes" class="collapse">
+                    <ul class="py-2">
+                        <li>
+                            <code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
+                        </li>
+                        <li>
+                            <code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
+                        </li>
+                    </ul>
+                </div>
             </li>
-            <li class="mb-3">
-                <strong>Lightning Charge</strong> via HTTPS:
-                <ul>
-                    <li>
-                        <code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
-                    </li>
-                </ul>
+            <li>
+                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#charge-notes" role="button" aria-expanded="false" aria-controls="charge-notes">Lightning Charge</a>
+                via HTTPS
+                <div id="charge-notes" class="collapse">
+                    <ul class="py-2">
+                        <li>
+                            <code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
+                        </li>
+                    </ul>
+                </div>
             </li>
-            <li class="mb-3">
-                <strong>Eclair</strong> via HTTPS:
-                <ul>
-                    <li>
-                        <code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
-                    </li>
-                </ul>
+            <li>
+                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#eclair-notes" role="button" aria-expanded="false" aria-controls="eclair-notes">Eclair</a>
+                via HTTPS
+                <div id="eclair-notes" class="collapse">
+                    <ul class="py-2">
+                        <li>
+                            <code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
+                        </li>
+                    </ul>
+                </div>
             </li>
-            <li class="mb-3">
-                <strong>LND</strong> via the REST proxy:
-                <ul>
-                    <li>
-                        <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
-                    </li>
-                    <li>
-                        <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
-                    </li>
-                </ul>
-                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
-                    More information on the LND settings
-                </a>
-                <div id="lnd-notes" class="collapse pt-2">
-                    <p>
+            <li>
+                <a class="d-inline-block text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">LND</a>
+                via the REST proxy
+                <div id="lnd-notes" class="collapse">
+                    <ul class="py-2">
+                        <li>
+                            <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
+                        </li>
+                        <li>
+                            <code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
+                        </li>
+                    </ul>
+                    <p class="mt-2">
                         For the macaroon options you need to provide the <code>admin.macaroon</code>.<br/>
                         The path to the LND data directory may vary, the following examples assume <code>/root/.lnd</code>.
                     </p>
@@ -153,7 +163,7 @@
             </li>
         </ul>
     </div>
-    <div class="text-left">
+    <div class="text-left mt-4">
         <button id="save" name="command" type="submit" value="save" class="btn btn-primary mr-2">Save</button>
     </div>
 </form>