feature/IO-3096-GlobalNotifications - styling checkpoint

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

@@ -2,112 +2,137 @@
   position: absolute;
   top: 64px;
   right: 0;
-  //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 */
+  width: 400px;
+  max-width: 400px;
+  background: #fff;
+  color: rgba(0, 0, 0, 0.85);
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
   z-index: 1000;
   display: none;
+  overflow-x: hidden; /* Prevent horizontal overflow */
 
   &.visible {
     display: block;
   }
 
   .notification-header {
-    padding: 16px;
-    border-bottom: 1px solid #f0f0f0; /* Light gray border from Ant 5 */
+    padding: 4px 16px;
+    border-bottom: 1px solid #f0f0f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #fafafa; /* Light gray background for header */
+    background: #fafafa;
 
     h3 {
       margin: 0;
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.85); /* Primary text color */
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
     }
 
     .notification-controls {
       display: flex;
       align-items: center;
-      gap: 16px;
-
-      .ant-checkbox-wrapper {
-        color: rgba(0, 0, 0, 0.85); /* Match Ant’s text color */
-      }
+      gap: 8px;
 
       .ant-btn-link {
-        color: #1677ff; /* Ant 5 primary blue */
+        padding: 0;
+        color: #1677ff;
+
         &:hover {
-          color: #69b1ff; /* Lighter blue on hover */
+          color: #69b1ff;
         }
+
         &:disabled {
-          color: rgba(0, 0, 0, 0.25); /* Disabled text color from Ant 5 */
+          color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
+
+        &.active {
+          color: #0958d9;
         }
       }
     }
   }
 
   .notification-read {
-    background: #fff; /* White background for read items */
-    color: rgba(0, 0, 0, 0.65); /* Secondary text color */
+    background: #fff;
+    color: rgba(0, 0, 0, 0.65);
   }
 
   .notification-unread {
-    background: #f5f5f5; /* Very light gray for unread items */
-    color: rgba(0, 0, 0, 0.85); /* Primary text color */
+    background: #f5f5f5;
+    color: rgba(0, 0, 0, 0.85);
   }
 
-  .ant-list {
-    overflow: auto; /* Match Virtuoso’s default scrolling behavior */
-    max-height: 100%; /* Allow full height, let Virtuoso handle virtualization */
-  }
+  .notification-item {
+    padding: 8px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    display: block;
+    overflow: visible;
+    width: 100%;
+    box-sizing: border-box;
 
-  .ant-list-item {
-    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; /* Inherit from parent (read/unread) */
+    .notification-content {
+      width: 100%;
     }
 
-    .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 {
+    .notification-title {
       margin: 0;
-      padding-left: 20px; /* Standard list padding */
-      list-style-type: disc; /* Ensure bullet points */
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+
+      .ro-number {
+        margin: 0;
+        color: #1677ff;
+        flex-shrink: 0;
+        white-space: nowrap;
+      }
+
+      .relative-time {
+        margin: 0;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+        white-space: nowrap;
+        flex-shrink: 0;
+        margin-left: auto;
+      }
     }
 
-    li {
-      margin-bottom: 4px; /* Space between list items */
+    .notification-body {
+      margin-top: 4px;
+
+      .ant-typography {
+        color: inherit;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        margin-bottom: 2px;
+      }
     }
   }
 
+  .ant-badge {
+    width: 100%; /* Ensure Badge takes full width to allow .notification-title to stretch properly */
+  }
+
   .ant-alert {
     margin: 8px;
-    background: #fff1f0; /* Light red background for error per Ant 5 */
+    background: #fff1f0;
     color: rgba(0, 0, 0, 0.85);
-    border: 1px solid #ffa39e; /* Light red border */
+    border: 1px solid #ffa39e;
 
     .ant-alert-message {
-      color: #ff4d4f; /* Red text for message */
-    }
-
-    .ant-alert-description {
-      color: rgba(0, 0, 0, 0.65); /* Slightly muted description */
+      color: #ff4d4f;
     }
   }
 }