From d4d219861d0dff53f5d308f1f91761786054bbcb Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Tue, 16 Dec 2025 09:28:29 +0200
Subject: [PATCH] Update segment color schemes in video and chapters editor.

---
 .../client/src/components/ClipSegments.tsx    | 10 +--
 .../src/components/TimelineControls.tsx       |  4 +-
 .../client/src/styles/ClipSegments.css        | 88 +++++++++++++------
 .../client/src/styles/IOSNotification.css     |  4 +-
 .../client/src/styles/Modal.css               | 14 +--
 .../client/src/styles/TimelineControls.css    | 13 ++-
 .../client/src/components/ClipSegments.tsx    |  6 +-
 .../client/src/styles/ClipSegments.css        | 58 ++++++++++--
 .../client/src/styles/TimelineControls.css    |  2 -
 9 files changed, 134 insertions(+), 65 deletions(-)

diff --git a/frontend-tools/chapters-editor/client/src/components/ClipSegments.tsx b/frontend-tools/chapters-editor/client/src/components/ClipSegments.tsx
index 4c560642..53a461b1 100644
--- a/frontend-tools/chapters-editor/client/src/components/ClipSegments.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/ClipSegments.tsx
@@ -28,9 +28,9 @@ const ClipSegments = ({ segments, selectedSegmentId }: ClipSegmentsProps) => {
 
     // Generate the same color background for a segment as shown in the timeline
     const getSegmentColorClass = (index: number) => {
-        // Return CSS class based on index modulo 8
-        // This matches the CSS nth-child selectors in the timeline
-        return `segment-default-color segment-color-${(index % 8) + 1}`;
+        // Return CSS class based on index modulo 20
+        // This matches the CSS classes for up to 20 segments
+        return `segment-default-color segment-color-${(index % 20) + 1}`;
     };
 
     // Get selected segment
@@ -65,8 +65,8 @@ const ClipSegments = ({ segments, selectedSegmentId }: ClipSegmentsProps) => {
                     <div className="segment-actions">
                         <button
                             className="delete-button"
-                            aria-label="Delete Segment"
-                            data-tooltip="Delete this segment"
+                            aria-label="Delete Chapter"
+                            data-tooltip="Delete this chapter"
                             onClick={() => handleDeleteSegment(segment.id)}
                         >
                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
diff --git a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
index 9b89822a..dd776c63 100644
--- a/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
+++ b/frontend-tools/chapters-editor/client/src/components/TimelineControls.tsx
@@ -3943,9 +3943,7 @@ const TimelineControls = ({
                         <button
                             onClick={() => setShowSaveChaptersModal(true)}
                             className="save-chapters-button"
-                            data-tooltip={clipSegments.length === 0 
-                                ? "Clear all chapters" 
-                                : "Save chapters"}
+                            {...(clipSegments.length === 0 && { 'data-tooltip': 'Clear all chapters' })}
                         >
                             {clipSegments.length === 0 
                                 ? 'Clear Chapters' 
diff --git a/frontend-tools/chapters-editor/client/src/styles/ClipSegments.css b/frontend-tools/chapters-editor/client/src/styles/ClipSegments.css
index b9356045..8db34d0f 100644
--- a/frontend-tools/chapters-editor/client/src/styles/ClipSegments.css
+++ b/frontend-tools/chapters-editor/client/src/styles/ClipSegments.css
@@ -82,27 +82,24 @@
         font-size: 0.875rem;
         font-weight: 500;
         color: var(--foreground, #333);
-        margin: 0;
+        margin-bottom: 0.75rem;
     }
 
     .save-chapters-button {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-        background-color: #3b82f6;
-        color: white;
-        border: none;
-        border-radius: 0.375rem;
-        font-size: 0.875rem;
-        font-weight: 500;
+        color: #ffffff;
+        background: #059669;
+        border-radius: 0.25rem;
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
         cursor: pointer;
-        transition: all 0.2s ease;
+        border: none;
+        white-space: nowrap;
+        transition: background-color 0.2s;
+        min-width: fit-content;
 
         &:hover {
-            background-color: #2563eb;
-            transform: translateY(-1px);
-            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
+            background-color: #059669;
+            box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.3);
         }
 
         &.has-changes {
@@ -205,9 +202,9 @@
         }
 
         &.selected {
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-            background-color: rgba(59, 130, 246, 0.05);
+            border-color: #059669;
+            box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+            background-color: rgba(5, 150, 105, 0.05);
         }
     }
 
@@ -287,29 +284,68 @@
         color: rgba(51, 51, 51, 0.7);
     }
 
+    /* Generate 20 shades of #059669 (rgb(5, 150, 105)) */
+    /* Base color: #059669 = rgb(5, 150, 105) */
+    /* Creating variations from lighter to darker */
     .segment-color-1 {
-        background-color: rgba(59, 130, 246, 0.15);
+        background-color: rgba(167, 243, 208, 0.2);
     }
     .segment-color-2 {
-        background-color: rgba(16, 185, 129, 0.15);
+        background-color: rgba(134, 239, 172, 0.2);
     }
     .segment-color-3 {
-        background-color: rgba(245, 158, 11, 0.15);
+        background-color: rgba(101, 235, 136, 0.2);
     }
     .segment-color-4 {
-        background-color: rgba(239, 68, 68, 0.15);
+        background-color: rgba(68, 231, 100, 0.2);
     }
     .segment-color-5 {
-        background-color: rgba(139, 92, 246, 0.15);
+        background-color: rgba(35, 227, 64, 0.2);
     }
     .segment-color-6 {
-        background-color: rgba(236, 72, 153, 0.15);
+        background-color: rgba(20, 207, 54, 0.2);
     }
     .segment-color-7 {
-        background-color: rgba(6, 182, 212, 0.15);
+        background-color: rgba(15, 187, 48, 0.2);
     }
     .segment-color-8 {
-        background-color: rgba(250, 204, 21, 0.15);
+        background-color: rgba(10, 167, 42, 0.2);
+    }
+    .segment-color-9 {
+        background-color: rgba(5, 150, 105, 0.2);
+    }
+    .segment-color-10 {
+        background-color: rgba(4, 135, 95, 0.2);
+    }
+    .segment-color-11 {
+        background-color: rgba(3, 120, 85, 0.2);
+    }
+    .segment-color-12 {
+        background-color: rgba(2, 105, 75, 0.2);
+    }
+    .segment-color-13 {
+        background-color: rgba(2, 90, 65, 0.2);
+    }
+    .segment-color-14 {
+        background-color: rgba(1, 75, 55, 0.2);
+    }
+    .segment-color-15 {
+        background-color: rgba(1, 66, 48, 0.2);
+    }
+    .segment-color-16 {
+        background-color: rgba(1, 57, 41, 0.2);
+    }
+    .segment-color-17 {
+        background-color: rgba(1, 48, 34, 0.2);
+    }
+    .segment-color-18 {
+        background-color: rgba(0, 39, 27, 0.2);
+    }
+    .segment-color-19 {
+        background-color: rgba(0, 30, 20, 0.2);
+    }
+    .segment-color-20 {
+        background-color: rgba(0, 21, 13, 0.2);
     }
 
     /* Responsive styles */
diff --git a/frontend-tools/chapters-editor/client/src/styles/IOSNotification.css b/frontend-tools/chapters-editor/client/src/styles/IOSNotification.css
index bc9cbe39..5e20d8d6 100644
--- a/frontend-tools/chapters-editor/client/src/styles/IOSNotification.css
+++ b/frontend-tools/chapters-editor/client/src/styles/IOSNotification.css
@@ -31,7 +31,7 @@
 
 .ios-notification-icon {
     flex-shrink: 0;
-    color: #0066cc;
+    color: #059669;
     margin-right: 15px;
     margin-top: 3px;
 }
@@ -96,7 +96,7 @@
 }
 
 .ios-desktop-mode-btn {
-    background-color: #0066cc;
+    background-color: #059669;
     color: white;
     border: none;
     border-radius: 8px;
diff --git a/frontend-tools/chapters-editor/client/src/styles/Modal.css b/frontend-tools/chapters-editor/client/src/styles/Modal.css
index c1aacce7..afcf39b5 100644
--- a/frontend-tools/chapters-editor/client/src/styles/Modal.css
+++ b/frontend-tools/chapters-editor/client/src/styles/Modal.css
@@ -92,12 +92,12 @@
     }
 
     .modal-button-primary {
-        background-color: #0066cc;
+        background-color: #059669;
         color: white;
     }
 
     .modal-button-primary:hover {
-        background-color: #0055aa;
+        background-color: #059669;
     }
 
     .modal-button-secondary {
@@ -138,7 +138,7 @@
     .spinner {
         border: 4px solid rgba(0, 0, 0, 0.1);
         border-radius: 50%;
-        border-top: 4px solid #0066cc;
+        border-top: 4px solid #059669;
         width: 30px;
         height: 30px;
         animation: spin 1s linear infinite;
@@ -224,7 +224,7 @@
         padding: 12px 16px;
         border: none;
         border-radius: 4px;
-        background-color: #0066cc;
+        background-color: #059669;
         text-align: center;
         cursor: pointer;
         transition: all 0.2s;
@@ -258,12 +258,12 @@
         margin: 0 auto;
         width: auto;
         min-width: 220px;
-        background-color: #0066cc;
+        background-color: #059669;
         color: white;
     }
 
     .centered-choice:hover {
-        background-color: #0055aa;
+        background-color: #059669;
     }
 
     @media (max-width: 480px) {
@@ -300,7 +300,7 @@
 
     .countdown {
         font-weight: bold;
-        color: #0066cc;
+        color: #059669;
         font-size: 1.1rem;
     }
 }
diff --git a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
index 9ac10982..e30d5441 100644
--- a/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/chapters-editor/client/src/styles/TimelineControls.css
@@ -34,8 +34,6 @@
     }
 
     .timeline-title-text {
-        font-weight: 700;
-        color: #059669;
         font-size: 0.875rem;
     }
 
@@ -64,7 +62,7 @@
     .timeline-container {
         position: relative;
         min-width: 100%;
-        background-color: #E2EDE4;
+        background-color: #e2ede4;
         height: 70px;
         border-radius: 0.25rem;
         overflow: visible !important;
@@ -557,7 +555,7 @@
     .save-copy-button,
     .save-segments-button {
         color: #ffffff;
-        background: #0066cc;
+        background: #059669;
         border-radius: 0.25rem;
         font-size: 0.75rem;
         padding: 0.25rem 0.5rem;
@@ -730,7 +728,7 @@
         height: 50px;
         border: 5px solid rgba(0, 0, 0, 0.1);
         border-radius: 50%;
-        border-top-color: #0066cc;
+        border-top-color: #059669;
         animation: spin 1s ease-in-out infinite;
     }
 
@@ -770,7 +768,7 @@
         align-items: center;
         justify-content: center;
         padding: 0.75rem 1.25rem;
-        background-color: #0066cc;
+        background-color: #059669;
         color: white;
         border-radius: 4px;
         text-decoration: none;
@@ -783,7 +781,7 @@
     }
 
     .modal-choice-button:hover {
-        background-color: #0056b3;
+        background-color:rgb(7, 119, 84);
     }
 
     .modal-choice-button svg {
@@ -958,7 +956,6 @@
 
 .save-chapters-button:hover {
     background-color: #2563eb;
-    transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
 }
 
diff --git a/frontend-tools/video-editor/client/src/components/ClipSegments.tsx b/frontend-tools/video-editor/client/src/components/ClipSegments.tsx
index 02bb8c23..7a9da6b8 100644
--- a/frontend-tools/video-editor/client/src/components/ClipSegments.tsx
+++ b/frontend-tools/video-editor/client/src/components/ClipSegments.tsx
@@ -28,9 +28,9 @@ const ClipSegments = ({ segments }: ClipSegmentsProps) => {
 
     // Generate the same color background for a segment as shown in the timeline
     const getSegmentColorClass = (index: number) => {
-        // Return CSS class based on index modulo 8
-        // This matches the CSS nth-child selectors in the timeline
-        return `segment-default-color segment-color-${(index % 8) + 1}`;
+        // Return CSS class based on index modulo 20
+        // This matches the CSS classes for up to 20 segments
+        return `segment-default-color segment-color-${(index % 20) + 1}`;
     };
 
     return (
diff --git a/frontend-tools/video-editor/client/src/styles/ClipSegments.css b/frontend-tools/video-editor/client/src/styles/ClipSegments.css
index 9eefcb09..b7e190f3 100644
--- a/frontend-tools/video-editor/client/src/styles/ClipSegments.css
+++ b/frontend-tools/video-editor/client/src/styles/ClipSegments.css
@@ -99,6 +99,7 @@
     }
 
     .segment-thumbnail {
+        display: none;
         width: 4rem;
         height: 2.25rem;
         background-size: cover;
@@ -129,7 +130,7 @@
         margin-top: 0.25rem;
         display: inline-block;
         background-color: #f3f4f6;
-        padding: 0 0.5rem;
+        padding: 0;
         border-radius: 0.25rem;
         color: black;
     }
@@ -169,28 +170,67 @@
         color: rgba(51, 51, 51, 0.7);
     }
 
+    /* Generate 20 shades of #2563eb (rgb(37, 99, 235)) */
+    /* Base color: #2563eb = rgb(37, 99, 235) */
+    /* Creating variations from lighter to darker */
     .segment-color-1 {
-        background-color: rgba(59, 130, 246, 0.15);
+        background-color: rgba(147, 179, 247, 0.2);
     }
     .segment-color-2 {
-        background-color: rgba(16, 185, 129, 0.15);
+        background-color: rgba(129, 161, 243, 0.2);
     }
     .segment-color-3 {
-        background-color: rgba(245, 158, 11, 0.15);
+        background-color: rgba(111, 143, 239, 0.2);
     }
     .segment-color-4 {
-        background-color: rgba(239, 68, 68, 0.15);
+        background-color: rgba(93, 125, 237, 0.2);
     }
     .segment-color-5 {
-        background-color: rgba(139, 92, 246, 0.15);
+        background-color: rgba(75, 107, 235, 0.2);
     }
     .segment-color-6 {
-        background-color: rgba(236, 72, 153, 0.15);
+        background-color: rgba(65, 99, 235, 0.2);
     }
     .segment-color-7 {
-        background-color: rgba(6, 182, 212, 0.15);
+        background-color: rgba(55, 91, 235, 0.2);
     }
     .segment-color-8 {
-        background-color: rgba(250, 204, 21, 0.15);
+        background-color: rgba(45, 83, 235, 0.2);
+    }
+    .segment-color-9 {
+        background-color: rgba(37, 99, 235, 0.2);
+    }
+    .segment-color-10 {
+        background-color: rgba(33, 89, 215, 0.2);
+    }
+    .segment-color-11 {
+        background-color: rgba(29, 79, 195, 0.2);
+    }
+    .segment-color-12 {
+        background-color: rgba(25, 69, 175, 0.2);
+    }
+    .segment-color-13 {
+        background-color: rgba(21, 59, 155, 0.2);
+    }
+    .segment-color-14 {
+        background-color: rgba(17, 49, 135, 0.2);
+    }
+    .segment-color-15 {
+        background-color: rgba(15, 43, 119, 0.2);
+    }
+    .segment-color-16 {
+        background-color: rgba(13, 37, 103, 0.2);
+    }
+    .segment-color-17 {
+        background-color: rgba(11, 31, 87, 0.2);
+    }
+    .segment-color-18 {
+        background-color: rgba(9, 25, 71, 0.2);
+    }
+    .segment-color-19 {
+        background-color: rgba(7, 19, 55, 0.2);
+    }
+    .segment-color-20 {
+        background-color: rgba(5, 13, 39, 0.2);
     }
 }
diff --git a/frontend-tools/video-editor/client/src/styles/TimelineControls.css b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
index 674e3baa..3239dd1f 100644
--- a/frontend-tools/video-editor/client/src/styles/TimelineControls.css
+++ b/frontend-tools/video-editor/client/src/styles/TimelineControls.css
@@ -34,8 +34,6 @@
     }
 
     .timeline-title-text {
-        font-weight: 700;
-        color: #2563eb;
         font-size: 0.875rem;
     }