From 2c367d7eeb4d01f295752a6e1fc14a2e5e2aede3 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Mon, 8 Dec 2025 17:19:41 +0200
Subject: [PATCH] fix: Convert timeline header styles to CSS classes

Moved inline styles for timeline headers in chapters and video editors to dedicated CSS classes for better maintainability and consistency.
---
 frontend-tools/chapters-editor/client/src/App.tsx    |  6 ++----
 .../client/src/styles/TimelineControls.css           | 12 ++++++++++++
 frontend-tools/video-editor/client/src/App.tsx       | 10 ++++------
 .../client/src/styles/TimelineControls.css           | 12 ++++++++++++
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/frontend-tools/chapters-editor/client/src/App.tsx b/frontend-tools/chapters-editor/client/src/App.tsx
index 0e2fcf23..5e825b4a 100644
--- a/frontend-tools/chapters-editor/client/src/App.tsx
+++ b/frontend-tools/chapters-editor/client/src/App.tsx
@@ -151,10 +151,8 @@ const App = () => {
                 />
 
                 {/* Timeline Header */}
-                <div style={{ marginLeft: '1rem', marginTop: '-0.5rem' }}>
-                    <h2 style={{ fontSize: '1.125rem', fontWeight: 600, color: '#059669', margin: 0 }}>
-                        Add Chapters
-                    </h2>
+                <div className="timeline-header-container">
+                    <h2 className="timeline-header-title">Add Chapters</h2>
                 </div>
 
                 {/* Timeline Controls */}
diff --git a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
index 969e32e3..9ac10982 100644
--- a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
@@ -1,4 +1,16 @@
 #chapters-editor-root {
+    .timeline-header-container {
+        margin-left: 1rem;
+        margin-top: -0.5rem;
+    }
+
+    .timeline-header-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #059669;
+        margin: 0;
+    }
+
     .timeline-container-card {
         background-color: white;
         border-radius: 0.5rem;
diff --git a/frontend-tools/video-editor/client/src/App.tsx b/frontend-tools/video-editor/client/src/App.tsx
index 8dafda61..ab70e670 100644
--- a/frontend-tools/video-editor/client/src/App.tsx
+++ b/frontend-tools/video-editor/client/src/App.tsx
@@ -309,12 +309,10 @@ 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 Header */}
+                 <div className="timeline-header-container">
+                     <h2 className="timeline-header-title">Trim or Split</h2>
+                 </div>
 
         {/* Timeline Controls */}
         <TimelineControls
diff --git a/frontend-tools/video-editor/client/src/styles/TimelineControls.css b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
index e10ab782..674e3baa 100644
--- a/frontend-tools/video-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
@@ -1,4 +1,16 @@
 #video-editor-trim-root {
+    .timeline-header-container {
+        margin-left: 1rem;
+        margin-top: -0.5rem;
+    }
+
+    .timeline-header-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: #2563eb;
+        margin: 0;
+    }
+
     .timeline-container-card {
         background-color: white;
         border-radius: 0.5rem;