From b9af805ac1a432b54f302d772ea92584fb431369 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 26 Oct 2020 10:34:43 +0100
Subject: [PATCH] Store UI: Improve wallet status display

---
 BTCPayServer/Views/Stores/UpdateStore.cshtml | 16 +++++-----
 BTCPayServer/wwwroot/main/site.css           | 31 ++++++++++++++++++++
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/Views/Stores/UpdateStore.cshtml b/BTCPayServer/Views/Stores/UpdateStore.cshtml
index 89c7cc404..81ae5993c 100644
--- a/BTCPayServer/Views/Stores/UpdateStore.cshtml
+++ b/BTCPayServer/Views/Stores/UpdateStore.cshtml
@@ -68,20 +68,20 @@
                             <span class="d-flex align-items-center">
                                 @if (scheme.Enabled)
                                 {
-                                    <strong class="d-flex align-items-center text-success">
-                                        <span class="fa fa-check-circle mr-2"></span>
+                                    <stron class="d-flex align-items-center text-primary">
+                                        <span class="mr-2 btcpay-status btcpay-status--enabled"></span>
                                         Enabled
-                                    </strong>
+                                    </stron>
                                 }
                                 else
                                 {
                                     <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
                                     </strong>
                                 }
                                 <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")
                                 </a>
                             </span>
@@ -137,19 +137,19 @@
                                 @if (scheme.Enabled)
                                 {
                                     <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
                                     </strong>
                                 }
                                 else
                                 {
                                     <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
                                     </strong>
                                 }
                                 <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")
                                 </a>
                             </span>
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index 91e0d36ac..0852982f9 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -3,6 +3,8 @@ html {
     position: relative;
     min-height: 100%;
     font-size: var(--btcpay-font-size-base);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .logo {
@@ -318,3 +320,32 @@ html[data-devenv]:before {
 .note-editor .table.table-sm td {
     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;
+}