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}