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

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

@@ -1,5 +1,5 @@
 import { Virtuoso } from "react-virtuoso";
-import { Alert, Badge, Button, Space, Spin, Tooltip, Typography } from "antd";
+import { Alert, 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";
@@ -83,16 +83,19 @@ const NotificationCenterComponent = forwardRef(
           </Space>
           <div className="notification-controls">
             <Tooltip title={t("notifications.labels.show-unread-only")}>
-              <Button
-                type="link"
-                icon={showUnreadOnly ? <EyeFilled /> : <EyeOutlined />}
-                onClick={() => toggleUnreadOnly(!showUnreadOnly)}
-                className={showUnreadOnly ? "active" : ""}
-              />
+              <Space size={4} align="center" className="notification-toggle">
+                {" "}
+                {showUnreadOnly ? (
+                  <EyeFilled className="notification-toggle-icon" />
+                ) : (
+                  <EyeOutlined className="notification-toggle-icon" />
+                )}
+                <Switch checked={showUnreadOnly} onChange={(checked) => toggleUnreadOnly(checked)} size="small" />
+              </Space>
             </Tooltip>
             <Tooltip title={t("notifications.labels.mark-all-read")}>
               <Button
-                type="link"
+                type={!unreadCount ? "default" : "primary"}
                 icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
                 onClick={markAllRead}
                 disabled={!unreadCount}

client/src/components/notification-center/notification-center.styles.scss

@@ -36,6 +36,38 @@
       align-items: center;
       gap: 8px;
 
+      // Styles for the eye icon and switch (custom classes)
+      .notification-toggle {
+        align-items: center; // Ensure vertical alignment
+      }
+
+      .notification-toggle-icon {
+        font-size: 14px;
+        color: #1677ff;
+        vertical-align: middle;
+      }
+
+      .ant-switch {
+        &.ant-switch-small {
+          min-width: 28px;
+          height: 16px;
+          line-height: 16px;
+
+          .ant-switch-handle {
+            width: 12px;
+            height: 12px;
+          }
+
+          &.ant-switch-checked {
+            background-color: #1677ff;
+            .ant-switch-handle {
+              left: calc(100% - 14px);
+            }
+          }
+        }
+      }
+
+      // Styles for the "Mark All Read" button (restore original link button style)
       .ant-btn-link {
         padding: 0;
         color: #1677ff;
@@ -67,16 +99,16 @@
   }
 
   .notification-item {
-    padding: 12px 16px; // Increased padding from 8px to 12px for more space
+    padding: 12px 16px;
     border-bottom: 1px solid #f0f0f0;
     display: block;
     overflow: visible;
     width: 100%;
     box-sizing: border-box;
-    cursor: pointer; // Add pointer cursor to indicate clickability
+    cursor: pointer;
 
     &:hover {
-      background: #fafafa; // Optional: Add hover effect for better UX
+      background: #fafafa;
     }
 
     .notification-content {

client/src/translations/en_us/common.json

@@ -3779,8 +3779,8 @@
         "teams-search": "Search for a Team",
         "add-watchers-team": "Add Team Members",
         "new-notification-title": "New Notification:",
-        "show-unread-only": "Show Unread",
-        "mark-all-read": "Mark Read",
+        "show-unread-only": "Show Unread Only",
+        "mark-all-read": "Mark All Read",
         "notification-popup-title": "Changes for Job #{{ro_number}}",
         "ro-number": "RO #{{ro_number}}",
         "no-watchers": "No Watchers",