IO-3166-Global-Notifications-Part-2 - Checkpoint

client/src/components/notification-center/notification-center.component.jsx

@@ -1,11 +1,12 @@
 import { Virtuoso } from "react-virtuoso";
-import { Alert, Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
 import { forwardRef } from "react";
+import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 
 const { Text, Title } = Typography;
 
@@ -52,11 +53,7 @@ const NotificationCenterComponent = forwardRef(
                 <span className="ro-number">
                   {t("notifications.labels.ro-number", { ro_number: notification.roNumber })}
                 </span>
-                <Text
-                  type="secondary"
-                  className="relative-time"
-                  title={day(notification.created_at).format("YYYY-MM-DD hh:mm A")}
-                >
+                <Text type="secondary" className="relative-time" title={DateTimeFormat(notification.created_at)}>
                   {day(notification.created_at).fromNow()}
                 </Text>
               </Title>
@@ -83,7 +80,6 @@ const NotificationCenterComponent = forwardRef(
           <div className="notification-controls">
             <Tooltip title={t("notifications.labels.show-unread-only")}>
               <Space size={4} align="center" className="notification-toggle">
-                {" "}
                 {showUnreadOnly ? (
                   <EyeFilled className="notification-toggle-icon" />
                 ) : (
@@ -94,7 +90,7 @@ const NotificationCenterComponent = forwardRef(
             </Tooltip>
             <Tooltip title={t("notifications.labels.mark-all-read")}>
               <Button
-                type={!unreadCount ? "default" : "primary"}
+                type="link"
                 icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
                 onClick={markAllRead}
                 disabled={!unreadCount}