From c28b7802da0b4a6094ab1a4d90f3ec0774598f09 Mon Sep 17 00:00:00 2001
From: Matt Roberts <roberts.mattroberts@gmail.com>
Date: Tue, 8 Oct 2024 08:58:03 +0100
Subject: [PATCH] More styling, plus "mark all as read"

---
 public/components/NotificationIndicator.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/components/NotificationIndicator.tsx b/public/components/NotificationIndicator.tsx
index af4574637..92a6638c6 100644
--- a/public/components/NotificationIndicator.tsx
+++ b/public/components/NotificationIndicator.tsx
@@ -77,6 +77,14 @@ export const NotificationIndicator = () => {
     }
   }, [showingNotifications])
 
+  const markAllAsRead = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    const response = await actions.markAllAsRead()
+    if (response.ok) {
+      location.reload()
+    }
+  }
+
   return (
     <Dropdown
       wide={true}
@@ -90,10 +98,15 @@ export const NotificationIndicator = () => {
           <>
             {unread !== undefined && unread?.length > 0 ? (
               <>
-                <p className="text-subtitle px-4 mt-2 mb-0">
+                <p className="text-subtitle px-4 mt-4 mb-0">
                   <Trans id="modal.notifications.unread">Unread notifications</Trans>
+                  {unread.length > 1 && (
+                    <a href="#" className="text-link text-xs pl-6" onClick={markAllAsRead}>
+                      <Trans id="action.markallasread">Mark All as Read</Trans>
+                    </a>
+                  )}
                 </p>
-                <VStack spacing={0} className="my-2" divide={false}>
+                <VStack spacing={0} className="py-2" divide={false}>
                   {unread.map((n) => (
                     <NotificationItem key={n.id} notification={n} />
                   ))}
@@ -109,10 +122,10 @@ export const NotificationIndicator = () => {
             )}
             {recent !== undefined && recent?.length > 0 && (
               <>
-                <p className="text-subtitle px-4 mb-0">
+                <p className="text-subtitle px-4 mb-0 pt-4 bg-gray-50">
                   <Trans id="modal.notifications.previous">Previous notifications</Trans>
                 </p>
-                <VStack spacing={0} className="my-2" divide={false}>
+                <VStack spacing={0} className="py-2 bg-gray-50" divide={false}>
                   {recent.map((n) => (
                     <NotificationItem key={n.id} notification={n} />
                   ))}