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.
This commit is contained in:
Dennis Reimann
2020-07-14 13:29:26 +02:00
parent 9d1cd085ea
commit 391d7b01d1
3 changed files with 50 additions and 49 deletions

View File

@@ -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 {

View File

@@ -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);
}

View File

@@ -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,