From 391d7b01d1dfbfa463809e4bd2be53bba2cebc6d Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Tue, 14 Jul 2020 13:29:26 +0200
Subject: [PATCH] UI: Minor enhancements to 2FA view

Improve hover highlight for light and dark theme. APply a bit more spacing to the 2FA link cells.

Also fixes table row highlight in light theme.
---
 .../Manage/TwoFactorAuthentication.cshtml     | 87 +++++++++----------
 .../wwwroot/main/themes/default-dark.css      |  9 +-
 BTCPayServer/wwwroot/main/themes/default.css  |  3 +-
 3 files changed, 50 insertions(+), 49 deletions(-)

diff --git a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml b/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
index bb4baf202..eb2728da8 100644
--- a/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
+++ b/BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml
@@ -37,52 +37,49 @@
     }
 }
 
-<div class="row">
-    <div class="list-group">
+<div class="list-group">
+    @if (Model.Is2faEnabled)
+    {
+        <a asp-action="Disable2faWarning" class="list-group-item d-flex justify-content-between align-items-center list-group-item-action py-3">
+            <div>
+                <h5 >Disable 2FA</h5>
+                <p class="mb-0 mr-3">Disable two-factor authentication. Re-enabling will not require you to reconfigure your Authenticator app. </p>
+            </div>
+            <i class="fa fa-chevron-right"></i>
+        </a>
+        <a asp-action="GenerateRecoveryCodes" class="list-group-item d-flex justify-content-between align-items-center list-group-item-action py-3">
+            <div>
+                <h5 >Reset recovery codes</h5>
+                <p class="mb-0 mr-3">Regenerate your two-factor recovery codes.</p>
+            </div>
+            <i class="fa fa-chevron-right"></i>
+        </a>
 
-        @if (Model.Is2faEnabled)
-        {
-            <a asp-action="Disable2faWarning" class="list-group-item  d-flex justify-content-between align-items-center list-group-item-action">
-                <div>
-                    <h5 >Disable 2FA</h5>
-                    <p class="mb-1">Disable two-factor authentication. Re-enabling will not require you to reconfigure your Authenticator app. </p>
-                </div>
-                <i class="fa fa-chevron-right"></i>
-            </a>
-            <a asp-action="GenerateRecoveryCodes" class="list-group-item  d-flex justify-content-between align-items-center list-group-item-action">
-                <div>
-                    <h5 >Reset recovery codes</h5>
-                    <p class="mb-1">Regenerate your two-factor recovery codes.</p>
-                </div>
-                <i class="fa fa-chevron-right"></i>
-            </a>
-
-            <a asp-action="EnableAuthenticator" class="list-group-item  d-flex justify-content-between align-items-center list-group-item-action">
-                <div>
-                    <h5 >Configure Authenticator app</h5>
-                    <p class="mb-1">Display the key or QR code to configure an authenticator app with your current setup.</p>
-                </div>
-                <i class="fa fa-chevron-right"></i>
-            </a>
-            <a asp-action="ResetAuthenticatorWarning" class="list-group-item  d-flex justify-content-between align-items-center list-group-item-action">
-                <div>
-                    <h5 >Reset Authenticator app</h5>
-                    <p class="mb-1">Invalidates the current authenticator configuration. Useful if you believe your authenticator settings were compromised.</p>
-                </div>
-                <i class="fa fa-chevron-right"></i>
-            </a>
-        }
-        else
-        {
-            <a asp-action="EnableAuthenticator" class="list-group-item  d-flex justify-content-between align-items-center list-group-item-action">
-                <div>
-                    <h5 >Enable 2FA</h5>
-                    <p class="mb-1">Enable two-factor authentication using TOTP with apps such as Google Authenticator.</p>
-                </div>
-                <i class="fa fa-chevron-right"></i>
-            </a>
-        }
-    </div>
+        <a asp-action="EnableAuthenticator" class="list-group-item d-flex justify-content-between align-items-center list-group-item-action py-3">
+            <div>
+                <h5 >Configure Authenticator app</h5>
+                <p class="mb-0 mr-3">Display the key or QR code to configure an authenticator app with your current setup.</p>
+            </div>
+            <i class="fa fa-chevron-right"></i>
+        </a>
+        <a asp-action="ResetAuthenticatorWarning" class="list-group-item d-flex justify-content-between align-items-center list-group-item-action py-3">
+            <div>
+                <h5 >Reset Authenticator app</h5>
+                <p class="mb-0 mr-3">Invalidates the current authenticator configuration. Useful if you believe your authenticator settings were compromised.</p>
+            </div>
+            <i class="fa fa-chevron-right"></i>
+        </a>
+    }
+    else
+    {
+        <a asp-action="EnableAuthenticator" class="list-group-item d-flex justify-content-between align-items-center list-group-item-action py-3">
+            <div>
+                <h5 >Enable 2FA</h5>
+                <p class="mb-0 mr-3">Enable two-factor authentication using TOTP with apps such as Google Authenticator.</p>
+            </div>
+            <i class="fa fa-chevron-right"></i>
+        </a>
+    }
 </div>
 
 @section Scripts {
diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css
index 226d05478..d6bf6fb11 100644
--- a/BTCPayServer/wwwroot/main/themes/default-dark.css
+++ b/BTCPayServer/wwwroot/main/themes/default-dark.css
@@ -39,9 +39,12 @@
   filter: none;
 }
 
+.list-group-item-action,
+.list-group-item-action:hover {
+  color: var(--btcpay-body-color);
+}
+
+.list-group-item-action:hover,
 .table-sm tbody tr:hover {
   background-color: var(--btcpay-color-neutral-950);
 }
-.list-group-item-action {
-    color: var(--btcpay-body-color);
-}
diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css
index e0170b7cd..9e5c06de7 100644
--- a/BTCPayServer/wwwroot/main/themes/default.css
+++ b/BTCPayServer/wwwroot/main/themes/default.css
@@ -124,8 +124,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   border-top: none;
 }
 
+.list-group-item-action:hover,
 .table-sm tbody tr:hover {
-  background-color: var(--btcpay-color-neutral-100);
+  background-color: var(--btcpay-color-white);
 }
 
 .removetopborder tr:first-child th,