From fe4ffcfc62f4df8efd7975cce14b0e71c5e8b2f6 Mon Sep 17 00:00:00 2001 From: Umar Bolatov Date: Thu, 7 Jan 2021 01:07:42 -0800 Subject: [PATCH] Update notification dropdown styling (#2167) * Update notification dropdown strings * Update notification dropdown styling address #2131 * Update border color * Update notification hover color * Revert "was confirmed paid" to "has been paid" change * Move styles to site.css * Update style="border-bottom: 0;" to border-bottom-0 * Update heading * Add icon sprite * Add default icon styles * Use "currentColor" instead of specific color for icon * Update icon color definition * Adjust dropdown position * Update h4 to h5 --- BTCPayServer/Components/Icon/Default.cshtml | 5 +++ BTCPayServer/Components/Icon/Icon.cs | 16 +++++++++ BTCPayServer/Components/Icon/IconViewModel.cs | 7 ++++ .../NotificationsDropdown/Default.cshtml | 34 +++++++++++++------ .../Blobs/InvoiceEventNotification.cs | 12 +++---- BTCPayServer/wwwroot/img/icon-sprite.svg | 3 ++ .../wwwroot/main/bootstrap/bootstrap.css | 3 ++ BTCPayServer/wwwroot/main/site.css | 30 ++++++++++++++++ 8 files changed, 93 insertions(+), 17 deletions(-) create mode 100644 BTCPayServer/Components/Icon/Default.cshtml create mode 100644 BTCPayServer/Components/Icon/Icon.cs create mode 100644 BTCPayServer/Components/Icon/IconViewModel.cs create mode 100644 BTCPayServer/wwwroot/img/icon-sprite.svg diff --git a/BTCPayServer/Components/Icon/Default.cshtml b/BTCPayServer/Components/Icon/Default.cshtml new file mode 100644 index 000000000..8576c0b5f --- /dev/null +++ b/BTCPayServer/Components/Icon/Default.cshtml @@ -0,0 +1,5 @@ +@model BTCPayServer.Components.Icon.IconViewModel + + + + diff --git a/BTCPayServer/Components/Icon/Icon.cs b/BTCPayServer/Components/Icon/Icon.cs new file mode 100644 index 000000000..ece7789a4 --- /dev/null +++ b/BTCPayServer/Components/Icon/Icon.cs @@ -0,0 +1,16 @@ +using Microsoft.AspNetCore.Mvc; + +namespace BTCPayServer.Components.Icon +{ + public class Icon : ViewComponent + { + public IViewComponentResult Invoke(string symbol) + { + var vm = new IconViewModel + { + Symbol = symbol + }; + return View(vm); + } + } +} diff --git a/BTCPayServer/Components/Icon/IconViewModel.cs b/BTCPayServer/Components/Icon/IconViewModel.cs new file mode 100644 index 000000000..c67192fd0 --- /dev/null +++ b/BTCPayServer/Components/Icon/IconViewModel.cs @@ -0,0 +1,7 @@ +namespace BTCPayServer.Components.Icon +{ + public class IconViewModel + { + public string Symbol { get; set; } + } +} diff --git a/BTCPayServer/Components/NotificationsDropdown/Default.cshtml b/BTCPayServer/Components/NotificationsDropdown/Default.cshtml index a5bfd357c..c29e48393 100644 --- a/BTCPayServer/Components/NotificationsDropdown/Default.cshtml +++ b/BTCPayServer/Components/NotificationsDropdown/Default.cshtml @@ -4,30 +4,42 @@ @using BTCPayServer.HostedServices @using Microsoft.AspNetCore.Http.Extensions @model BTCPayServer.Components.NotificationsDropdown.NotificationSummaryViewModel +@addTagHelper *, BundlerMinifier.TagHelpers @if (Model.UnseenCount > 0) { } diff --git a/BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs b/BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs index a4bc08e73..d1aea73c2 100644 --- a/BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs +++ b/BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs @@ -36,12 +36,12 @@ namespace BTCPayServer.Services.Notifications.Blobs internal static Dictionary TextMapping = new Dictionary() { - // {InvoiceEvent.PaidInFull, "was fully paid."}, - {InvoiceEvent.PaidAfterExpiration, "was paid after expiration."}, - {InvoiceEvent.ExpiredPaidPartial, "expired with partial payments."}, - {InvoiceEvent.FailedToConfirm, "has payments that failed to confirm on time."}, - // {InvoiceEvent.ReceivedPayment, "received a payment."}, - {InvoiceEvent.Confirmed, "was confirmed paid."} + // {InvoiceEvent.PaidInFull, "was fully paid"}, + {InvoiceEvent.PaidAfterExpiration, "was paid after expiration"}, + {InvoiceEvent.ExpiredPaidPartial, "expired with partial payments"}, + {InvoiceEvent.FailedToConfirm, "has payments that failed to confirm on time"}, + // {InvoiceEvent.ReceivedPayment, "received a payment"}, + {InvoiceEvent.Confirmed, "was confirmed paid"} }; protected override void FillViewModel(InvoiceEventNotification notification, diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg new file mode 100644 index 000000000..ff4c31aa3 --- /dev/null +++ b/BTCPayServer/wwwroot/img/icon-sprite.svg @@ -0,0 +1,3 @@ + + + diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index adeb6a4ae..9ef9eaa65 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -6685,6 +6685,9 @@ button.bg-dark:focus { .font-weight-normal { font-weight: 400 !important; } +.font-weight-semibold { + font-weight: 600 !important; } + .font-weight-bold { font-weight: 700 !important; } diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css index c68354096..10db21f5c 100644 --- a/BTCPayServer/wwwroot/main/site.css +++ b/BTCPayServer/wwwroot/main/site.css @@ -357,3 +357,33 @@ html[data-devenv]:before { .btcpay-status--disabled:before { background-color: #FB383D; } + +svg.icon { + display: inline-block; + width: 16px; + height: 16px; +} + +svg.icon-note { + color: var(--btcpay-color-neutral-500); +} + +/* Custom notification dropdown styling */ +.notification-dropdown { + border: 0; + border-radius: 4px; + box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08); + padding: 0; +} + +@media (min-width: 992px) { + .notification-dropdown { + width: 420px; + top: 64px; + right: -32px; + } +} + +.notification:hover { + background-color: var(--btcpay-body-bg); +}