From 26d5cc7ef3f3cb27e7c26435cfba4e294c692a48 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 27 Mar 2024 10:17:58 +0700
Subject: [PATCH] track gap fix and mute button icon size change

---
 app/pages/PageEnigma/comps/Timeline/Audio.tsx     | 2 +-
 app/pages/PageEnigma/comps/Timeline/Camera.tsx    | 2 +-
 app/pages/PageEnigma/comps/Timeline/Character.tsx | 2 +-
 app/pages/PageEnigma/comps/Timeline/Objects.tsx   | 2 +-
 app/pages/PageEnigma/comps/Timeline/Track.tsx     | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/pages/PageEnigma/comps/Timeline/Audio.tsx b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
index 2b7550edd6..140cd051de 100644
--- a/app/pages/PageEnigma/comps/Timeline/Audio.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Audio.tsx
@@ -15,7 +15,7 @@ export const Audio = () => {
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
         Global Audio
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={clips}
           title="Global Audio Track"
diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
index 65f7fc59f9..164097b445 100644
--- a/app/pages/PageEnigma/comps/Timeline/Camera.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx
@@ -12,7 +12,7 @@ export const Camera = () => {
       style={{ width: fullWidth + 90 }}
     >
       <div className="mb-5 pt-2 text-xs font-medium text-white">Camera</div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={clips}
           title="Camera Position/Rotation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
index 9956e22b25..2de436eb3d 100644
--- a/app/pages/PageEnigma/comps/Timeline/Character.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -61,7 +61,7 @@ export const Character = ({ characterId }: Props) => {
       <div className="prevent-select mb-5 pt-2 text-xs font-medium text-white">
         Character
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
         <Track
           clips={animationClips}
           title="Animation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Objects.tsx b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
index 39304866ce..ff3bbcf835 100644
--- a/app/pages/PageEnigma/comps/Timeline/Objects.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Objects.tsx
@@ -14,7 +14,7 @@ export const Objects = () => {
         Objects
       </div>
       {objects.objects.map((object) => (
-        <div key={object.id} className="flex flex-col gap-2">
+        <div key={object.id} className="flex flex-col gap-4">
           <Track
             clips={object.clips}
             title="Mask Position/Rotation"
diff --git a/app/pages/PageEnigma/comps/Timeline/Track.tsx b/app/pages/PageEnigma/comps/Timeline/Track.tsx
index 00f117d1a8..22070fd1d4 100644
--- a/app/pages/PageEnigma/comps/Timeline/Track.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Track.tsx
@@ -43,7 +43,7 @@ export const Track = ({
   return (
     <div className="pl-16">
       <div
-        className={`rounded=lg relative mt-4 block h-9 w-full bg-${style}-unselected`}
+        className={`relative mt-4 block h-9 w-full rounded-lg bg-${style}-unselected`}
         onPointerOver={onPointerOver}
         onPointerLeave={onPointerLeave}
       >
@@ -66,14 +66,14 @@ export const Track = ({
         </div>
         {!!toggleMute && (
           <button
-            className="absolute text-xs text-white"
-            style={{ top: 6, left: -20 }}
+            className="text-md absolute text-white transition-colors duration-100 hover:text-white/80"
+            style={{ top: 6, left: -28 }}
             onClick={toggleMute}
           >
             {muted ? (
               <FontAwesomeIcon
                 icon={faVolumeSlash}
-                className="text-brand-primary"
+                className="text-brand-primary transition-colors duration-100 hover:text-brand-primary/80"
               />
             ) : (
               <FontAwesomeIcon icon={faVolume} />