From cae187b939c09388d4ba4ed0a7b87611bb17b778 Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Mon, 26 Jun 2023 10:29:06 +0200
Subject: [PATCH] improve bright mode coloring

---
 app/src/components/Timeline/Track.tsx | 6 +++---
 app/src/components/Timeline/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/Timeline/Track.tsx b/app/src/components/Timeline/Track.tsx
index 769f5dd..98c3292 100644
--- a/app/src/components/Timeline/Track.tsx
+++ b/app/src/components/Timeline/Track.tsx
@@ -68,7 +68,7 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
               <TriangleDownIcon
                 width="32px"
                 height="32px"
-                className="text-white"
+                className="text-main"
               />
             </motion.div>
             <h3
@@ -133,10 +133,10 @@ const Track: FC<TrackProps> = ({ animationData, index, name, entity }) => {
                 },
               });
             }}
-            className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-w-resize"
+            className="z-10 w-4 bg-primary/50 h-full top-0 absolute rounded-md select-none cursor-w-resize"
           />
           <motion.div
-            className="z-10 w-4 bg-primary/80 h-full top-0 absolute rounded-md select-none cursor-e-resize"
+            className="z-10 w-4 bg-primary/50 h-full top-0 absolute rounded-md select-none cursor-e-resize"
             onMouseDown={(e) => e.preventDefault()}
             drag="x"
             animate={{
diff --git a/app/src/components/Timeline/index.tsx b/app/src/components/Timeline/index.tsx
index 15def11..3030cad 100644
--- a/app/src/components/Timeline/index.tsx
+++ b/app/src/components/Timeline/index.tsx
@@ -31,10 +31,10 @@ const Timeline: FC<TimelineProps> = () => {
       <div className="flex flex-row">
         <div className="flex flex-row">
           <button onClick={() => setPlaying(true)} className="w-8 h-8">
-            <PlayIcon color="white" width="100%" height="100%" />
+            <PlayIcon className="text-main" width="100%" height="100%" />
           </button>
           <button onClick={() => setPlaying(false)} className="w-8 h-8">
-            <PauseIcon color="white" width="100%" height="100%" />
+            <PauseIcon className="text-main" width="100%" height="100%" />
           </button>
         </div>
         <Timestamp />