Store UI: Improve wallet status display

This commit is contained in:
Dennis Reimann 2020-10-26 10:34:43 +01:00
parent 378d2bc8ba
commit b9af805ac1
No known key found for this signature in database
GPG key ID: 5009E1797F03F8D0
2 changed files with 39 additions and 8 deletions

View file

@ -68,20 +68,20 @@
<span class="d-flex align-items-center"> <span class="d-flex align-items-center">
@if (scheme.Enabled) @if (scheme.Enabled)
{ {
<strong class="d-flex align-items-center text-success"> <stron class="d-flex align-items-center text-primary">
<span class="fa fa-check-circle mr-2"></span> <span class="mr-2 btcpay-status btcpay-status--enabled"></span>
Enabled Enabled
</strong> </stron>
} }
else else
{ {
<strong class="d-flex align-items-center text-danger"> <strong class="d-flex align-items-center text-danger">
<span class="fa fa-times-circle mr-2"></span> <span class="mr-2 btcpay-status btcpay-status--disabled"></span>
Disabled Disabled
</strong> </strong>
} }
<span class="text-light mx-2">|</span> <span class="text-light mx-2">|</span>
<a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")" class="@(scheme.Enabled ? "text-secondary" : "text-primary")"> <a asp-action="AddDerivationScheme" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify{scheme.Crypto}")" class="text-dark">
@(scheme.Enabled ? "Modify" : "Setup") @(scheme.Enabled ? "Modify" : "Setup")
</a> </a>
</span> </span>
@ -137,19 +137,19 @@
@if (scheme.Enabled) @if (scheme.Enabled)
{ {
<strong class="d-flex align-items-center text-success"> <strong class="d-flex align-items-center text-success">
<span class="fa fa-check-circle mr-2"></span> <span class="mr-2 btcpay-status btcpay-status--enabled"></span>
Enabled Enabled
</strong> </strong>
} }
else else
{ {
<strong class="d-flex align-items-center text-danger"> <strong class="d-flex align-items-center text-danger">
<span class="fa fa-times-circle mr-2"></span> <span class="mr-2 btcpay-status btcpay-status--disabled"></span>
Disabled Disabled
</strong> </strong>
} }
<span class="text-light mx-2">|</span> <span class="text-light mx-2">|</span>
<a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="@(scheme.Enabled ? "text-secondary" : "text-primary")"> <a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Context.GetRouteValue("storeId")" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="text-dark">
@(scheme.Enabled ? "Modify" : "Setup") @(scheme.Enabled ? "Modify" : "Setup")
</a> </a>
</span> </span>

View file

@ -3,6 +3,8 @@ html {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
font-size: var(--btcpay-font-size-base); font-size: var(--btcpay-font-size-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.logo { .logo {
@ -318,3 +320,32 @@ html[data-devenv]:before {
.note-editor .table.table-sm td { .note-editor .table.table-sm td {
border: 1px dotted var(--btcpay-color-neutral-400); border: 1px dotted var(--btcpay-color-neutral-400);
} }
/* Custom */
.btcpay-status {
display: inline-flex;
align-items: center;
justify-content: center;
border: .25em solid transparent;
border-radius: 50%;
width: 19px;
height: 19px;
}
.btcpay-status:before {
content: '';
border-radius: 50%;
width: 9px;
height: 9px;
}
.btcpay-status--enabled {
background-color: rgba(0, 182, 52, .3);
}
.btcpay-status--enabled:before {
background-color: #00B634;
}
.btcpay-status--disabled {
background-color: rgba(251, 56, 61, .3);
}
.btcpay-status--disabled:before {
background-color: #FB383D;
}