center Notification component and adjust responsiveness

atlp-rwanda · Oct 19, 2024 · 7ef3d3a · 7ef3d3a
1 parent 8312ae7
commit 7ef3d3a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/src/pages/AdminNotification/AdminNotification.tsx b/src/pages/AdminNotification/AdminNotification.tsx
@@ -194,7 +194,7 @@ const NotificationFilter: React.FC<{
         value={orderBy}
         onChange={onOrderChange}
         options={[
-          { value: OrderOptions.Recent, label: "Most Recent" },
+          { value: OrderOptions.Recent, label: "Newest" },
           { value: OrderOptions.Oldest, label: "Oldest" },
         ]}
         className="rounded py-2 px-4 bg-primary dark:bg-[#56C870] text-white focus:outline-none cursor-pointer"

diff --git a/src/pages/AdminNotification/Notification.tsx b/src/pages/AdminNotification/Notification.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { FaArchive, FaTrash } from "react-icons/fa"; // Icons for read and delete
+import { FaTrash } from "react-icons/fa";
 import { formatDistanceToNow } from "date-fns";
+import { MdMarkChatRead } from "react-icons/md";
 
 type NotificationProps = {
   notification: {
@@ -13,53 +14,58 @@ type NotificationProps = {
   onMarkAsRead: (id: string) => void;
   onDelete: (id: string) => void;
 };
+
 const DEFAULT_AVATAR_URL =
   "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_kSSoomJ9hiFXmiF2RdZlwx72Y23XsT6iwQ&s";
+
 const Notification: React.FC<NotificationProps> = ({
   notification,
   onMarkAsRead,
   onDelete,
 }) => {
   const notificationDate = new Date(Number(notification.createdAt));
-
   const isDateValid = !isNaN(notificationDate.getTime());
 
   return (
     <div
-      className={`flex flex-row gap-4 justify-between items-center border rounded-lg p-4 
-    ${
-      notification.read ? "bg-gray-300 ext-gray-500" : "bg-gray-500 text-white"
-    } 
-    dark:${
-      notification.read ? "bg-gray-700 text-gray-400" : "bg-dark-bg text-white"
-    }
-  `}
+      className={`flex flex-row gap-4 justify-between items-center border rounded-lg p-4 max-w-full 
+      ${
+        notification.read
+          ? "bg-gray-300 text-gray-500"
+          : "bg-gray-500 text-white"
+      } 
+      dark:${
+        notification.read
+          ? "bg-gray-700 text-gray-400"
+          : "bg-dark-bg text-white"
+      }`}
     >
-      <div className="flex flex-row gap-4 items-center">
+      <div className="flex-shrink-0">
         <img
           src={DEFAULT_AVATAR_URL}
           alt="Notification"
-          className="w-12 h-12 rounded-full border-green"
+          className="w-12 h-12 rounded-full"
         />
+      </div>
 
-        <div className="flex flex-col">
-          <h1 className="text-lg font-bold ">{notification.message}</h1>
-          <span className="text-sm text-gray-400">
-            {isDateValid
-              ? formatDistanceToNow(notificationDate, {
-                  addSuffix: true,
-                })
-              : "Invalid date"}{" "}
-          </span>
-        </div>
+      <div className="flex-1 min-w-0">
+        <h2 className="text-lg font-bold truncate">{notification.message}</h2>
+        <span className="text-sm text-gray-400">
+          {isDateValid
+            ? formatDistanceToNow(notificationDate, {
+                addSuffix: true,
+              })
+            : "Invalid date"}
+        </span>
       </div>
+
       <div className="flex flex-row gap-4 items-center">
         {!notification.read && (
           <button
             className="text-green-500 hover:text-green-300"
             onClick={() => onMarkAsRead(notification._id)}
           >
-            <FaArchive size={16} />
+            <MdMarkChatRead size={16} />
           </button>
         )}
         <button