feature/IO-3096-GlobalNotifications - styling checkpoint

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

@@ -1,5 +1,6 @@
 import { Virtuoso } from "react-virtuoso";
-import { Alert, Badge, Button, Checkbox, List, Typography } from "antd";
+import { Alert, Badge, Button, Tooltip, Typography } from "antd";
+import { EyeFilled, EyeOutlined, CheckCircleFilled, CheckCircleOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import "./notification-center.styles.scss";
@@ -23,22 +24,14 @@ const NotificationCenterComponent = ({
 
   const renderNotification = (index, notification) => {
     return (
-      <List.Item
+      <div
         key={`${notification.id}-${index}`}
-        className={notification.read ? "notification-read" : "notification-unread"}
+        className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
         onClick={() => !notification.read && onNotificationClick(notification.id)}
       >
         <Badge dot={!notification.read}>
-          <div>
-            <Title
-              level={5}
-              style={{
-                margin: "0 0 8px 0",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center"
-              }}
-            >
+          <div className="notification-content">
+            <Title level={5} className="notification-title">
               <Link
                 to={`/manage/jobs/${notification.jobid}`}
                 onClick={(e) => {
@@ -47,12 +40,15 @@ const NotificationCenterComponent = ({
                     onNotificationClick(notification.id);
                   }
                 }}
+                className="ro-number"
               >
                 RO #{notification.roNumber}
               </Link>
-              <Text type="secondary">{day(notification.created_at).fromNow()}</Text>
+              <Text type="secondary" className="relative-time">
+                {day(notification.created_at).fromNow()}
+              </Text>
             </Title>
-            <Text strong={!notification.read}>
+            <Text strong={!notification.read} className="notification-body">
               <ul>
                 {notification.scenarioText.map((text, idx) => (
                   <li key={`${notification.id}-${idx}`}>{text}</li>
@@ -61,24 +57,36 @@ const NotificationCenterComponent = ({
             </Text>
           </div>
         </Badge>
-      </List.Item>
+      </div>
     );
   };
 
+  const hasUnread = notifications.some((n) => !n.read);
+
   return (
     <div className={`notification-center ${visible ? "visible" : ""}`}>
       <div className="notification-header">
         <h3>{t("notifications.labels.notification-center")}</h3>
         <div className="notification-controls">
-          <Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
-            {t("notifications.labels.show-unread-only")}
-          </Checkbox>
-          <Button type="link" onClick={markAllRead} disabled={!notifications.some((n) => !n.read)}>
-            {t("notifications.labels.mark-all-read")}
-          </Button>
+          <Tooltip title={t("notifications.labels.show-unread-only")}>
+            <Button
+              type="link"
+              icon={showUnreadOnly ? <EyeFilled /> : <EyeOutlined />}
+              onClick={() => toggleUnreadOnly(!showUnreadOnly)}
+              className={showUnreadOnly ? "active" : ""}
+            />
+          </Tooltip>
+          <Tooltip title={t("notifications.labels.mark-all-read")}>
+            <Button
+              type="link"
+              icon={hasUnread ? <CheckCircleFilled /> : <CheckCircleOutlined />}
+              onClick={markAllRead}
+              disabled={!hasUnread}
+            />
+          </Tooltip>
         </div>
       </div>
-      {error && <Alert message="Error" description={error} type="error" closable onClose={() => onClose()} />}
+      {error && <Alert message={error} type="error" closable onClose={() => onClose()} />}
       <Virtuoso
         style={{ height: "400px", width: "100%" }}
         data={notifications}