feature/IO-3291-Tasks-Notifications: Checkpoint

client/src/components/header/header.component.jsx

@@ -169,6 +169,7 @@ function Header(props) {
         setTaskCenterVisible(false); // Close task center
         return;
       }
+
       if (isTaskCenterClick) {
         setNotificationVisible(scenarioNotificationsOn ? false : notificationVisible); // Close notification center if enabled
         return;
@@ -177,6 +178,7 @@ function Header(props) {
       if (taskCenterVisible && taskCenterRef.current && !taskCenterRef.current.contains(event.target)) {
         setTaskCenterVisible(false);
       }
+
       if (
         scenarioNotificationsOn &&
         notificationVisible &&
@@ -213,9 +215,10 @@ function Header(props) {
     },
     [handleMenuClick]
   );
+
   // --- Menu Items ---
 
-  // built externally to keep the component clean
+  // built externally to keep the component clean, but on this level to prevent unnecessary re-renders
   const accountingChildren = useMemo(
     () =>
       buildAccountingChildren({

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

@@ -2,65 +2,146 @@
   position: absolute;
   top: 64px;
   right: 0;
-  z-index: 1000;
   width: 400px;
-  max-height: 500px;
+  max-width: 400px;
   background: #fff;
-  border-left: 1px solid #ccc;
-  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
+  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;
 
   &.visible {
     display: block;
   }
 
   .task-header {
+    padding: 4px 16px;
+    border-bottom: 1px solid #f0f0f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 12px;
-    background-color: #f5f5f5;
-    border-bottom: 1px solid #ddd;
-  }
+    background: #fafafa;
 
-  .task-toggle {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .anticon {
+    h3 {
+      margin: 0;
       font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .task-controls {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .task-toggle {
+        align-items: center;
+
+        .anticon {
+          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);
+            }
+          }
+        }
+      }
+
+      .ant-btn-link {
+        padding: 0;
+        color: #1677ff;
+
+        &:hover {
+          color: #69b1ff;
+        }
+
+        &:disabled {
+          color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
+      }
     }
   }
 
   .task-item {
-    padding: 12px;
+    padding: 12px 16px;
     border-bottom: 1px solid #f0f0f0;
+    display: block;
+    overflow: visible;
+    width: 100%;
+    box-sizing: border-box;
     cursor: pointer;
-    transition: background-color 0.2s;
 
     &:hover {
-      background-color: #fafafa;
+      background: #fafafa;
     }
 
     &.task-completed {
-      opacity: 0.6;
+      background: #fff;
+      color: rgba(0, 0, 0, 0.65);
     }
 
-    .ro-number {
-      font-weight: bold;
-      margin-right: 8px;
+    &.task-incomplete {
+      background: #f5f5f5;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .task-content {
+      width: 100%;
+    }
+
+    .task-title {
+      margin: 0;
+      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;
+      }
     }
 
     .task-body {
-      display: block;
       margin-top: 4px;
-    }
-
-    .relative-time {
-      float: right;
-      font-size: 0.8em;
+      color: inherit;
     }
   }
+
+  .ant-badge {
+    width: 100%;
+  }
 }