From d189deefb49ee7362fe9e709e9d89310e88b831e Mon Sep 17 00:00:00 2001
From: dstrukt <gfxdsign@gmail.com>
Date: Sun, 9 Jan 2022 03:04:32 -0800
Subject: [PATCH 1/2] adds secondary button look to rounded tab nav

---
 BTCPayServer/Views/Stores/SetupLightningNode.cshtml | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
index 0f5e5980b..4470f7677 100644
--- a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
+++ b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
@@ -35,9 +35,14 @@
             display: inline-block;
             padding: .75rem 2rem;
             color: var(--btcpay-primary);
-            font-weight:  var(--btcpay-font-weight-semibold);
+            font-weight: var(--btcpay-font-weight-semibold);
             border-radius: 1.5rem;
+            border: 1px solid var(--btcpay-secondary-border);
             cursor: pointer;
+            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+        }
+        #LightningNodeTypeTablist label:hover {
+            border-color: var(--btcpay-secondary-border-hover);
         }
         #LightningNodeTypeTablist input[disabled]:checked + label {
             background: var(--btcpay-secondary);
@@ -70,7 +75,7 @@
         <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" data-bs-toggle="pill" data-bs-target="#CustomSetup" role="tab" aria-controls="CustomSetup" aria-selected="@(Model.LightningNodeType == LightningNodeType.Custom ? "true" : "false")">
-        <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
+        <label class="ms-3" asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
 
         <vc:ui-extension-point location="ln-payment-method-setup-tabhead" model="@Model"/>
     </div>

From 383765f5fe7dbab7cfab7dd675182e4e5ad03620 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 10 Jan 2022 12:22:12 +0100
Subject: [PATCH 2/2] Solve spacing via CSS

---
 BTCPayServer/Views/Stores/SetupLightningNode.cshtml | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
index 4470f7677..18c2df024 100644
--- a/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
+++ b/BTCPayServer/Views/Stores/SetupLightningNode.cshtml
@@ -53,6 +53,11 @@
             color: var(--btcpay-secondary);
             opacity: .5;
         }
+        
+        #LightningNodeTypeTablist label + input + label {
+            margin-left: var(--btcpay-space-m);
+        }
+        
         #LightningNodeTypeTabs ul {
             list-style: none;
             padding-left: 0;
@@ -75,7 +80,7 @@
         <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" data-bs-toggle="pill" data-bs-target="#CustomSetup" role="tab" aria-controls="CustomSetup" aria-selected="@(Model.LightningNodeType == LightningNodeType.Custom ? "true" : "false")">
-        <label class="ms-3" asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
+        <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
 
         <vc:ui-extension-point location="ln-payment-method-setup-tabhead" model="@Model"/>
     </div>