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

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 {