feature/IO-3096-GlobalNotifications - Checkpoint

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

@@ -2,12 +2,12 @@
   position: absolute;
   top: 64px;
   right: 0;
-  width: 400px;
-  background: #2a2d34;
-  color: #d9d9d9;
-  border: 1px solid #434343;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  width: 600px;
+  background: #fff; /* White background, Ant’s default */
+  color: rgba(0, 0, 0, 0.85); /* Primary text color in Ant 5 */
+  border: 1px solid #d9d9d9; /* Neutral gray border */
+  border-radius: 6px; /* Slightly larger radius per Ant 5 */
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06); /* Subtle Ant 5 shadow */
   z-index: 1000;
   display: none;
 
@@ -17,16 +17,16 @@
 
   .notification-header {
     padding: 16px;
-    border-bottom: 1px solid #434343;
+    border-bottom: 1px solid #f0f0f0; /* Light gray border from Ant 5 */
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #1f2229;
+    background: #fafafa; /* Light gray background for header */
 
     h3 {
       margin: 0;
       font-size: 16px;
-      color: #ffffff;
+      color: rgba(0, 0, 0, 0.85); /* Primary text color */
     }
 
     .notification-controls {
@@ -35,60 +35,79 @@
       gap: 16px;
 
       .ant-checkbox-wrapper {
-        color: #d9d9d9;
+        color: rgba(0, 0, 0, 0.85); /* Match Ant’s text color */
       }
 
       .ant-btn-link {
-        color: #40c4ff;
-        &:hover { color: #80deea; }
-        &:disabled { color: #616161; }
+        color: #1677ff; /* Ant 5 primary blue */
+        &:hover {
+          color: #69b1ff; /* Lighter blue on hover */
+        }
+        &:disabled {
+          color: rgba(0, 0, 0, 0.25); /* Disabled text color from Ant 5 */
+        }
       }
     }
   }
 
   .notification-read {
-    background: #2a2d34;
-    color: #b0b0b0;
+    background: #fff; /* White background for read items */
+    color: rgba(0, 0, 0, 0.65); /* Secondary text color */
   }
+
   .notification-unread {
-    background: #353942;
-    color: #ffffff;
+    background: #f5f5f5; /* Very light gray for unread items */
+    color: rgba(0, 0, 0, 0.85); /* Primary text color */
   }
 
   .ant-list {
-    overflow: auto; // Match Virtuoso’s default scrolling behavior
-    max-height: 100%; // Allow full height, let Virtuoso handle virtualization
+    overflow: auto; /* Match Virtuoso’s default scrolling behavior */
+    max-height: 100%; /* Allow full height, let Virtuoso handle virtualization */
   }
 
   .ant-list-item {
-    padding: 12px 16px;
-    border-bottom: 1px solid #434343;
-    display: block; // Ensure visibility
-    overflow: visible; // Prevent clipping within items
-    min-height: 80px; // Minimum height to ensure visibility of multi-line content
+    padding: 2px 16px;
+    border-bottom: 1px solid #f0f0f0; /* Light gray border */
+    display: block; /* Ensure visibility */
+    overflow: visible; /* Prevent clipping within items */
+    min-height: 80px; /* Minimum height for multi-line content */
 
-    .ant-typography { color: inherit; }
-    .ant-typography-secondary { font-size: 12px; color: #b0b0b0; }
-    .ant-badge-dot { background: #ff4d4f; }
+    .ant-typography {
+      color: inherit; /* Inherit from parent (read/unread) */
+    }
+
+    .ant-typography-secondary {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45); /* Ant 5 secondary text color */
+    }
+
+    .ant-badge-dot {
+      background: #ff4d4f; /* Keep red dot for unread, consistent with Ant */
+    }
 
     ul {
       margin: 0;
-      padding-left: 20px; // Standard list padding
-      list-style-type: disc; // Ensure bullet points
+      padding-left: 20px; /* Standard list padding */
+      list-style-type: disc; /* Ensure bullet points */
     }
 
     li {
-      margin-bottom: 4px; // Space between list items
+      margin-bottom: 4px; /* Space between list items */
     }
   }
 
   .ant-alert {
     margin: 8px;
-    background: #ff4d4f;
-    color: #fff;
-    border: none;
+    background: #fff1f0; /* Light red background for error per Ant 5 */
+    color: rgba(0, 0, 0, 0.85);
+    border: 1px solid #ffa39e; /* Light red border */
 
-    .ant-alert-message { color: #fff; }
-    .ant-alert-description { color: #ffebee; }
+    .ant-alert-message {
+      color: #ff4d4f; /* Red text for message */
+    }
+
+    .ant-alert-description {
+      color: rgba(0, 0, 0, 0.65); /* Slightly muted description */
+    }
   }
 }