feature/IO-1113-Online-Dark-Mode - Initial Commit

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

@@ -4,9 +4,9 @@
   right: 0;
   width: 400px;
   max-width: 400px;
-  background: #fff;
-  color: rgba(0, 0, 0, 0.85);
-  border: 1px solid #d9d9d9;
+  background: var(--notification-bg);
+  color: var(--notification-text);
+  border: 1px solid var(--notification-border);
   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;
@@ -19,23 +19,22 @@
 
   .notification-header {
     padding: 4px 16px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--notification-header-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #fafafa;
+    background: var(--notification-header-bg);
 
     h3 {
       margin: 0;
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
+      color: var(--notification-header-text);
     }
 
     .notification-controls {
       display: flex;
       align-items: center;
       gap: 8px;
-
       // Styles for the eye icon and switch (custom classes)
       .notification-toggle {
         align-items: center; // Ensure vertical alignment
@@ -43,7 +42,7 @@
 
       .notification-toggle-icon {
         font-size: 14px;
-        color: #1677ff;
+        color: var(--notification-toggle-icon);
         vertical-align: middle;
       }
 
@@ -59,7 +58,8 @@
           }
 
           &.ant-switch-checked {
-            background-color: #1677ff;
+            background-color: var(--notification-switch-bg);
+
             .ant-switch-handle {
               left: calc(100% - 14px);
             }
@@ -70,37 +70,37 @@
       // Styles for the "Mark All Read" button (restore original link button style)
       .ant-btn-link {
         padding: 0;
-        color: #1677ff;
+        color: var(--notification-btn-link);
 
         &:hover {
-          color: #69b1ff;
+          color: var(--notification-btn-link-hover);
         }
 
         &:disabled {
-          color: rgba(0, 0, 0, 0.25);
+          color: var(--notification-btn-link-disabled);
           cursor: not-allowed;
         }
 
         &.active {
-          color: #0958d9;
+          color: var(--notification-btn-link-active);
         }
       }
     }
   }
 
   .notification-read {
-    background: #fff;
-    color: rgba(0, 0, 0, 0.65);
+    background: var(--notification-read-bg);
+    color: var(--notification-read-text);
   }
 
   .notification-unread {
-    background: #f5f5f5;
-    color: rgba(0, 0, 0, 0.85);
+    background: var(--notification-unread-bg);
+    color: var(--notification-unread-text);
   }
 
   .notification-item {
     padding: 12px 16px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--notification-header-border);
     display: block;
     overflow: visible;
     width: 100%;
@@ -108,7 +108,7 @@
     cursor: pointer;
 
     &:hover {
-      background: #fafafa;
+      background: var(--notification-item-hover-bg);
     }
 
     .notification-content {
@@ -125,7 +125,7 @@
 
       .ro-number {
         margin: 0;
-        color: #1677ff;
+        color: var(--notification-ro-number);
         flex-shrink: 0;
         white-space: nowrap;
       }
@@ -133,7 +133,7 @@
       .relative-time {
         margin: 0;
         font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
+        color: var(--notification-relative-time);
         white-space: nowrap;
         flex-shrink: 0;
         margin-left: auto;
@@ -164,12 +164,12 @@
 
   .ant-alert {
     margin: 8px;
-    background: #fff1f0;
-    color: rgba(0, 0, 0, 0.85);
-    border: 1px solid #ffa39e;
+    background: var(--alert-bg);
+    color: var(--alert-text);
+    border: 1px solid var(--alert-border);
 
     .ant-alert-message {
-      color: #ff4d4f;
+      color: var(--alert-message);
     }
   }
 }