From 63165b2b2c6f9c64481ff91da3cd43eefbaed9ff Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 11 Jul 2025 12:32:19 +0200
Subject: [PATCH] feat: improve styling for work-view sections

---
 .../tasks/task-list/task-list.component.scss  |  4 ++--
 .../work-view/work-view.component.html        |  9 +++++---
 .../work-view/work-view.component.scss        | 22 +++++++++++++------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/features/tasks/task-list/task-list.component.scss b/src/app/features/tasks/task-list/task-list.component.scss
index be3ead44e7..ef3f717a10 100644
--- a/src/app/features/tasks/task-list/task-list.component.scss
+++ b/src/app/features/tasks/task-list/task-list.component.scss
@@ -35,9 +35,9 @@
 .no-tasks {
   position: absolute;
   text-align: center;
-  top: 0;
+  top: 50%;
   left: 50%;
-  transform: translate(-50%, 0);
+  transform: translate(-50%, -50%);
   width: 90%;
 
   color: var(--text-color-muted);
diff --git a/src/app/features/work-view/work-view.component.html b/src/app/features/work-view/work-view.component.html
index a53e9d65ba..a0bac1b31e 100644
--- a/src/app/features/work-view/work-view.component.html
+++ b/src/app/features/work-view/work-view.component.html
@@ -196,7 +196,7 @@
           @if (laterTodayTasks().length > 0 && isOnTodayList()) {
             <div
               @expand
-              style="margin-top: 16px"
+              class="collapsible-section"
             >
               <collapsible
                 [title]="
@@ -267,9 +267,11 @@
               doneTasks()?.length === 0
                 ? (workContextService.doneTodayArchived$ | async)
                 : 0;
-            <div @expand>
+            <div
+              @expand
+              class="collapsible-section"
+            >
               <collapsible
-                style="margin-top: 16px"
                 [title]="
                   (T.WW.DONE_TASKS | translate) +
                   ' (' +
@@ -312,6 +314,7 @@
           }
         </div>
       </div>
+
       @if (isShowBacklog()) {
         <div
           #splitBottomEl
diff --git a/src/app/features/work-view/work-view.component.scss b/src/app/features/work-view/work-view.component.scss
index 77091d41e5..86c5ac84d8 100644
--- a/src/app/features/work-view/work-view.component.scss
+++ b/src/app/features/work-view/work-view.component.scss
@@ -304,28 +304,35 @@ finish-day-btn,
   }
 }
 
+// Unified collapsible section styles
+.collapsible-section {
+  margin-top: 16px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
 :host ::ng-deep .collapsible-header {
   font-size: 16px;
   margin-top: 0;
-  padding: 8px;
-  padding-bottom: 4px;
-  justify-content: flex-start;
+  padding: 12px 8px;
   justify-content: center;
-  //margin-bottom: 10px;
-  border-bottom: 1px solid transparent;
-  border-bottom: 2px solid var(--extra-border-color);
+  border-bottom: 2px solid transparent;
 
   .collapsible-title {
     flex-grow: 0;
     margin-left: -10px;
+    opacity: 0.8;
   }
 }
 
 :host collapsible.isExpanded ::ng-deep .collapsible-header {
-  border-bottom: 1px solid var(--extra-border-color);
+  border-bottom: 2px solid var(--extra-border-color);
 }
 
 .overdue-tasks {
+  margin-top: 16px;
 }
 
 .overdue-btn-wrapper {
@@ -334,4 +341,5 @@ finish-day-btn,
   justify-content: center;
   align-items: center;
   padding-bottom: 8px;
+  padding-top: 8px;
 }