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.
This commit is contained in:
Yiannis Christodoulou
2025-12-08 17:19:41 +02:00
parent 6eae3310ad
commit 2c367d7eeb
4 changed files with 30 additions and 10 deletions

View File

@@ -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 */}

View File

@@ -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;

View File

@@ -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

View File

@@ -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;