From 3b0dc67680b5561758b62ee2470d359040143ba7 Mon Sep 17 00:00:00 2001
From: ShamaKamina <u18073655@tuks.co.za>
Date: Fri, 27 Sep 2024 19:27:01 +0200
Subject: [PATCH] Made the notifications adhere to dark mode

---
 frontend/components/Notifications/NotificationsList.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Notifications/NotificationsList.tsx b/frontend/components/Notifications/NotificationsList.tsx
index a829d3f4..a0a1a254 100644
--- a/frontend/components/Notifications/NotificationsList.tsx
+++ b/frontend/components/Notifications/NotificationsList.tsx
@@ -10,6 +10,7 @@ import { subscribe } from "@/lib/api/subscription";
 import { useQuery } from "@tanstack/react-query";
 import { useUser } from "@/lib/contexts/UserContext";
 import ErrorDisplay from '@/components/ui/error_display';
+import { useTheme } from "next-themes";
 
 import type { NotificationType } from "@/lib/types";
 import { formatLongDate } from "@/lib/utils";
@@ -77,6 +78,8 @@ const NotificationsList: React.FC = () => {
     );
   }
 
+  const { theme } = useTheme();
+
   const addSuspendMessage = (notif: NotificationType) => 
     notif.content.includes("external resolution rejected")
       ? notif.content + " You will be suspended from resolving until " + formatLongDate(
@@ -92,7 +95,11 @@ const NotificationsList: React.FC = () => {
 
             <li
               key={index}
-              className="flex items-start space-x-3 p-4 hover:bg-gray-50"
+              className={`flex items-start space-x-3 p-4 transition duration-200 
+                ${theme === "dark" 
+                  ? "hover:bg-[#262626] hover:text-white" 
+                  : "hover:bg-gray-300 hover:text-black"}
+              `}
             >
               <Link
                 href={getNotificationLink(notification.type, (notification.type != "points") ? notification.issue_id : "none")}