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

@@ -0,0 +1,5 @@
+@model BTCPayServer.Components.Icon.IconViewModel
+
+<svg role="img" class="icon icon-@Model.Symbol">
+    <use href="/img/icon-sprite.svg#@Model.Symbol"></use>
+</svg>

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

BTCPayServer/Components/Icon/IconViewModel.cs

@@ -0,0 +1,7 @@
+namespace BTCPayServer.Components.Icon
+{
+    public class IconViewModel
+    {
+        public string Symbol { get; set; }
+    }
+}

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)
 {
     <li class="nav-item dropdown" id="notifications-nav-item">
-        <a class="nav-link js-scroll-trigger" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
+        <a class="nav-link js-scroll-trigger border-bottom-0" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" id="Notifications">
             <i class="fa fa-bell"></i>
         </a>
         <span class="alerts-badge badge badge-pill badge-danger">@Model.UnseenCount</span>
-        <div class="dropdown-menu dropdown-menu-right text-center notification-items" aria-labelledby="navbarDropdown">
+        <div class="dropdown-menu dropdown-menu-right text-center notification-dropdown" aria-labelledby="navbarDropdown">
+            <div class="d-flex align-items-center justify-content-between py-3 px-4 border-bottom border-light"> 
+                <h5 class="m-0">Notifications</h5>
+                <form asp-controller="Notifications" asp-action="MarkAllAsSeen" asp-route-returnUrl="@Context.Request.GetCurrentPathWithQueryString()" method="post">
+                    <button class="btn btn-link p-0 font-weight-semibold" type="submit">Mark all as seen</button>
+                </form>
+            </div>
             @foreach (var notif in Model.Last5)
             {
-                <a asp-action="NotificationPassThrough" asp-controller="Notifications" asp-route-id="@notif.Id" class="dropdown-item border-bottom py-2 px-3">
-                    <div class="text-left" style="width: 200px; white-space:normal;">
-                        @notif.Body
+                <a asp-action="NotificationPassThrough" asp-controller="Notifications" asp-route-id="@notif.Id" class="notification d-flex align-items-center dropdown-item border-bottom border-light py-3 px-4">
+                    <div class="mr-3">
+                        <vc:icon symbol="note" />
                     </div>
-                    <div class="text-left">
-                        <small class="text-muted" data-timeago-unixms="@notif.Created.ToUnixTimeMilliseconds()">@notif.Created.ToTimeAgo()</small>
+
+                    <div class="notification-item__content">
+                        <div class="text-left font-weight-semibold">
+                            @notif.Body
+                        </div>
+                        <div class="text-left d-flex">
+                            <small class="text-muted" data-timeago-unixms="@notif.Created.ToUnixTimeMilliseconds()">@notif.Created.ToTimeAgo()</small>
+                        </div>
                     </div>
                 </a>
             }
-            <a class="dropdown-item text-secondary" asp-controller="Notifications" asp-action="Index">See All</a>
-            <form asp-controller="Notifications" asp-action="MarkAllAsSeen" asp-route-returnUrl="@Context.Request.GetCurrentPathWithQueryString()" method="post">
-                <button class="dropdown-item text-secondary" type="submit"><i class="fa fa-eye"></i> Mark all as seen</button>
-            </form>
+            <div class="p-3"> 
+                <a class="font-weight-semibold" asp-controller="Notifications" asp-action="Index">View all</a>
+            </div>
         </div>
     </li>
 }

BTCPayServer/Services/Notifications/Blobs/InvoiceEventNotification.cs

@@ -36,12 +36,12 @@ namespace BTCPayServer.Services.Notifications.Blobs
 
             internal static Dictionary<string, string> TextMapping = new Dictionary<string, string>()
             {
-                // {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,

BTCPayServer/wwwroot/img/icon-sprite.svg

@@ -0,0 +1,3 @@
+<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<symbol id="note" viewBox="0 0 16 16"><path d="M14.2 16H1.8C.808 16 0 15.192 0 14.2V1.8C0 .808.808 0 1.8 0h12.4c.992 0 1.8.808 1.8 1.8v12.4c0 .992-.808 1.8-1.8 1.8zM1.8 1.2a.6.6 0 00-.6.6v12.4c0 .33.269.6.6.6h12.4a.6.6 0 00.6-.6V1.8a.6.6 0 00-.6-.6H1.8z" fill="currentColor"/><path d="M12 5.312H4a.6.6 0 010-1.2h8a.6.6 0 110 1.2zM12 8.6H4a.6.6 0 010-1.2h8a.6.6 0 010 1.2zm-4 3.288H4a.6.6 0 110-1.2h4a.6.6 0 010 1.2z" fill="currentColor"/></symbol>
+</svg>

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

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