feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

2025-02-24 16:02:55 -05:00
parent 0f067fc503
commit b395839b37
9 changed files with 476 additions and 24 deletions
--- a/client/src/components/notification-center/notification-center.styles.scss
+++ b/client/src/components/notification-center/notification-center.styles.scss
@@ -0,0 +1,94 @@
+.notification-center {
+  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);
+  z-index: 1000;
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+
+  .notification-header {
+    padding: 16px;
+    border-bottom: 1px solid #434343;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #1f2229;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #ffffff;
+    }
+
+    .notification-controls {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .ant-checkbox-wrapper {
+        color: #d9d9d9;
+      }
+
+      .ant-btn-link {
+        color: #40c4ff;
+        &:hover { color: #80deea; }
+        &:disabled { color: #616161; }
+      }
+    }
+  }
+
+  .notification-read {
+    background: #2a2d34;
+    color: #b0b0b0;
+  }
+  .notification-unread {
+    background: #353942;
+    color: #ffffff;
+  }
+
+  .ant-list {
+    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
+
+    .ant-typography { color: inherit; }
+    .ant-typography-secondary { font-size: 12px; color: #b0b0b0; }
+    .ant-badge-dot { background: #ff4d4f; }
+
+    ul {
+      margin: 0;
+      padding-left: 20px; // Standard list padding
+      list-style-type: disc; // Ensure bullet points
+    }
+
+    li {
+      margin-bottom: 4px; // Space between list items
+    }
+  }
+
+  .ant-alert {
+    margin: 8px;
+    background: #ff4d4f;
+    color: #fff;
+    border: none;
+
+    .ant-alert-message { color: #fff; }
+    .ant-alert-description { color: #ffebee; }
+  }
+}