From 6eae3310ad974fc6c1e81710bd420a61d6b45b7e Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Mon, 8 Dec 2025 17:05:23 +0200
Subject: [PATCH] feat: Improve Visual Distinction Between Trim and Chapters
 Editors

---
 frontend-tools/chapters-editor/client/src/App.tsx |  7 +++++++
 .../client/src/styles/TimelineControls.css        | 15 ++++++++++-----
 frontend-tools/video-editor/client/src/App.tsx    |  7 +++++++
 .../client/src/styles/TimelineControls.css        | 15 ++++++++++-----
 4 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx
index 4e0b8f1c..0e2fcf23 100644
--- a/frontend-tools/chapters-editor/client/src/App.tsx
+++ b/frontend-tools/chapters-editor/client/src/App.tsx
@@ -150,6 +150,13 @@ const App = () => {
                     canRedo={historyPosition < history.length - 1}
                 />
 
+                {/* Timeline Header */}
+                <div style={{ marginLeft: '1rem', marginTop: '-0.5rem' }}>
+                    <h2 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#059669', margin: 0 }}>
+                        Add Chapters
+                    </h2>
+                </div>
+
                 {/* Timeline Controls */}
                 <TimelineControls
                     currentTime={currentTime}
diff --git a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
index 9514fe2a..969e32e3 100644
--- a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
@@ -11,6 +11,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid rgba(16, 185, 129, 0.2);
     }
 
     .timeline-title {
@@ -21,6 +23,8 @@
 
     .timeline-title-text {
         font-weight: 700;
+        color: #059669;
+        font-size: 0.875rem;
     }
 
     .current-time {
@@ -48,10 +52,11 @@
     .timeline-container {
         position: relative;
         min-width: 100%;
-        background-color: #fafbfc;
+        background-color: #E2EDE4;
         height: 70px;
         border-radius: 0.25rem;
         overflow: visible !important;
+        border: 1px solid rgba(16, 185, 129, 0.2);
     }
 
     .timeline-marker {
@@ -194,7 +199,7 @@
         left: 0;
         right: 0;
         padding: 0.4rem;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgba(16, 185, 129, 0.6);
         color: white;
         opacity: 1;
         transition: background-color 0.2s;
@@ -202,15 +207,15 @@
     }
 
     .clip-segment:hover .clip-segment-info {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(16, 185, 129, 0.7);
     }
 
     .clip-segment.selected .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.5);
+        background-color: rgba(5, 150, 105, 0.8);
     }
 
     .clip-segment.selected:hover .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.4);
+        background-color: rgba(5, 150, 105, 0.75);
     }
 
     .clip-segment-name {
diff --git a/frontend-tools/video-editor/client/src/App.tsx b/frontend-tools/video-editor/client/src/App.tsx
index 5428a068..8dafda61 100644
--- a/frontend-tools/video-editor/client/src/App.tsx
+++ b/frontend-tools/video-editor/client/src/App.tsx
@@ -309,6 +309,13 @@ const App = () => {
           canRedo={historyPosition < history.length - 1}
         />
 
+        {/* Timeline Header */}
+        <div style={{ marginLeft: '1rem', marginTop: '-0.5rem' }}>
+          <h2 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#2563eb', margin: 0 }}>
+            Trim or Split
+          </h2>
+        </div>
+
         {/* Timeline Controls */}
         <TimelineControls
           currentTime={currentTime}
diff --git a/frontend-tools/video-editor/client/src/styles/TimelineControls.css b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
index 807c27a9..e10ab782 100644
--- a/frontend-tools/video-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
@@ -11,6 +11,8 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid rgba(59, 130, 246, 0.2);
     }
 
     .timeline-title {
@@ -21,6 +23,8 @@
 
     .timeline-title-text {
         font-weight: 700;
+        color: #2563eb;
+        font-size: 0.875rem;
     }
 
     .current-time {
@@ -48,10 +52,11 @@
     .timeline-container {
         position: relative;
         min-width: 100%;
-        background-color: #fafbfc;
+        background-color: #eff6ff;
         height: 70px;
         border-radius: 0.25rem;
         overflow: visible !important;
+        border: 1px solid rgba(59, 130, 246, 0.2);
     }
 
     .timeline-marker {
@@ -194,7 +199,7 @@
         left: 0;
         right: 0;
         padding: 0.4rem;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgba(59, 130, 246, 0.6);
         color: white;
         opacity: 1;
         transition: background-color 0.2s;
@@ -202,15 +207,15 @@
     }
 
     .clip-segment:hover .clip-segment-info {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: rgba(59, 130, 246, 0.7);
     }
 
     .clip-segment.selected .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.5);
+        background-color: rgba(37, 99, 235, 0.8);
     }
 
     .clip-segment.selected:hover .clip-segment-info {
-        background-color: rgba(59, 130, 246, 0.4);
+        background-color: rgba(37, 99, 235, 0.75);
     }
 
     .clip-segment-name {