feature/IO-3291-Tasks-Notifications: Checkpoint

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

@@ -18,7 +18,7 @@
   }
 
   .task-header {
-    padding: 8px 16px;
+    padding: 4px 10px;
     border-bottom: 1px solid #f0f0f0;
     display: flex;
     justify-content: space-between;
@@ -27,20 +27,20 @@
 
     h3 {
       margin: 0;
-      font-size: 14px;
+      font-size: 13px;
       color: rgba(0, 0, 0, 0.85);
     }
   }
 
   .task-section {
-    margin-bottom: 8px;
+    margin-bottom: 2px;
   }
 
   .section-title {
-    padding: 8px 16px;
+    padding: 3px 10px;
     background: #f5f5f5;
     margin: 0;
-    font-size: 14px;
+    font-size: 12px;
     color: rgba(0, 0, 0, 0.85);
     font-weight: 500;
     border-bottom: 1px solid #e8e8e8;
@@ -49,84 +49,75 @@
     z-index: 1;
   }
 
-  .task-meta {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 4px;
-    font-size: 12px;
-    color: rgba(0, 0, 0, 0.45);
-
-    .ro-number {
-      white-space: nowrap;
-    }
-
-    .relative-time {
-      white-space: nowrap;
-    }
-  }
-
   .task-item {
-    padding: 12px 16px;
+    padding: 6px 10px;
     border-bottom: 1px solid #f0f0f0;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    cursor: pointer;
     background: #fff;
+    cursor: pointer;
 
     &:hover {
-      background: #fafafa;
+      background: #f5f5f5;
     }
 
     .task-content {
-      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
     }
 
-    .task-title {
-      margin: 0;
+    .task-header-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 100%;
 
-      .ro-number {
-        margin: 0;
-        color: #1677ff;
-        font-weight: 500;
-        flex-shrink: 0;
+      .task-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.9);
+        margin-right: 6px;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
       }
 
-      .relative-time {
-        font-size: 12px;
+      .task-due-date {
+        font-size: 11px;
         color: rgba(0, 0, 0, 0.45);
         white-space: nowrap;
-        flex-shrink: 0;
-        margin-left: auto;
       }
     }
 
-    .task-body {
-      margin-top: 4px;
-      color: rgba(0, 0, 0, 0.85);
-      font-weight: 500;
-      font-size: 14px;
+    .task-description {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .task-ro-number {
+      font-size: 11px;
+      color: rgba(0, 0, 0, 0.45);
     }
   }
 
   .ant-badge {
     width: 100%;
+
+    .ant-badge-dot {
+      width: 6px;
+      height: 6px;
+      top: 2px;
+      right: 2px;
+    }
   }
 
   button {
-    margin: 16px auto;
-    display: block;
-    padding: 8px 16px;
+    margin: 8px auto;
+    padding: 4px 10px;
     background-color: #1677ff;
     color: white;
     border: none;
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 12px;
     cursor: pointer;
 
     &:hover {